sozday-grafik-zakupa-produkt-2/script.js

97 lines
3.4 KiB
JavaScript

document.addEventListener('DOMContentLoaded', () => {
fetch('data.json')
.then(r => r.json())
.then(data => {
renderMenu(data.menu);
renderShopping(data.shopping);
})
.catch(err => console.error('Ошибка загрузки данных:', err));
});
// ---- Меню -------------------------------------------------
function renderMenu(menu) {
const tbody = document.querySelector('#menu-table tbody');
menu.forEach(item => {
const tr = document.createElement('tr');
const tdDay = document.createElement('td');
tdDay.textContent = item.day;
const tdBreak = document.createElement('td');
tdBreak.textContent = `${item.breakfast} (${item.breakfast_kcal} ккал)`;
const tdDinner = document.createElement('td');
tdDinner.textContent = `${item.dinner} (${item.dinner_kcal} ккал)`;
tr.append(tdDay, tdBreak, tdDinner);
tbody.appendChild(tr);
});
}
// ---- План покупок ------------------------------------------
function renderShopping(weeks) {
// сохраняем данные для экспорта
window._shoppingData = weeks;
const container = document.getElementById('weeks');
weeks.forEach(week => {
const weekDiv = document.createElement('div');
weekDiv.className = 'week';
const header = document.createElement('div');
header.className = 'week-header';
header.textContent = `Неделя ${week.week}`;
const itemsDiv = document.createElement('div');
itemsDiv.className = 'week-items';
itemsDiv.style.display = 'none';
header.addEventListener('click', () => {
itemsDiv.style.display = itemsDiv.style.display === 'none' ? 'block' : 'none';
});
// таблица категорий
const table = document.createElement('table');
const tbody = document.createElement('tbody');
week.items.forEach(cat => {
const trCat = document.createElement('tr');
const tdCat = document.createElement('td');
tdCat.colSpan = 2;
tdCat.style.fontWeight = 'bold';
tdCat.textContent = cat.category;
trCat.appendChild(tdCat);
tbody.appendChild(trCat);
cat.items.forEach(it => {
const tr = document.createElement('tr');
const tdName = document.createElement('td');
const tdQty = document.createElement('td');
tdName.textContent = it.name;
tdQty.textContent = it.qty;
tr.append(tdName, tdQty);
tbody.appendChild(tr);
});
});
table.appendChild(tbody);
itemsDiv.appendChild(table);
weekDiv.appendChild(header);
weekDiv.appendChild(itemsDiv);
container.appendChild(weekDiv);
});
}
// ---- Экспорт в CSV (Excel) --------------------------------
function exportToCsv() {
if (!window._shoppingData) return;
let csv = '\uFEFFWeek,Category,Item,Qty\n';
window._shoppingData.forEach(week => {
week.items.forEach(cat => {
cat.items.forEach(it => {
csv += `${week.week},${cat.category},${it.name},${it.qty}\n`;
});
});
});
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'shopping_plan.csv';
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
document.getElementById('exportBtn').addEventListener('click', exportToCsv);