706 lines
37 KiB
JavaScript
706 lines
37 KiB
JavaScript
import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
|
|
import { MEAL_SLOTS } from '../planner/mealSlots.js';
|
|
import {
|
|
addDays,
|
|
addMonths,
|
|
sameDay,
|
|
sameMonth,
|
|
startOfDay,
|
|
startOfWeekMonday,
|
|
} from '../services/dateUtils.js';
|
|
import {
|
|
dateKey,
|
|
loadPlans,
|
|
newPlanEntryId,
|
|
savePlans,
|
|
} from '../services/planStore.js';
|
|
import { dayHasAnyMeal } from '../services/planIngredients.js';
|
|
import { showAppToast } from './toast.js';
|
|
import {
|
|
bindCalendarDayClicks,
|
|
createCalendarTopbarHTML,
|
|
createCalendarWeekdayHeaderHTML,
|
|
formatCalendarMonthYear,
|
|
formatCalendarSelectedDate,
|
|
isCalendarOnToday,
|
|
renderCalendarGrid,
|
|
syncCalendarTodayButton,
|
|
} from './mealCalendar.js?v=1';
|
|
|
|
function esc(s) {
|
|
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
|
|
|
/* ── HTML template ──────────────────────────────────── */
|
|
|
|
export function getMealPlanEditorHTML() {
|
|
return `
|
|
<div id="mpe-overlay" class="absolute inset-0 z-[55] bg-black/45 hidden flex items-end" style="pointer-events:none">
|
|
<div id="mpe-sheet" class="w-full bg-[#2d2e2b] rounded-t-3xl shadow-lg flex flex-col overflow-hidden" style="pointer-events:auto; background:#2d2e2b !important; background-image:none !important; backdrop-filter:none !important; height:100dvh; max-height:100dvh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
|
|
<div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
|
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-3"></div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="min-w-0 flex-1">
|
|
<h2 id="mpe-title" class="text-[15px] font-bold text-gray-900 leading-tight"></h2>
|
|
<p id="mpe-subtitle" class="text-[11px] text-gray-500 mt-0.5 truncate"></p>
|
|
</div>
|
|
<button id="mpe-close-btn" type="button" class="shrink-0 w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-colors ml-3">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
|
<div id="mpe-cal-section" class="hidden">
|
|
${createCalendarTopbarHTML({
|
|
titleId: 'mpe-cal-title',
|
|
prevId: 'mpe-cal-prev',
|
|
todayId: 'mpe-cal-today',
|
|
nextId: 'mpe-cal-next',
|
|
wrapperClass: 'mb-2 flex items-center gap-3',
|
|
})}
|
|
${createCalendarWeekdayHeaderHTML()}
|
|
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
|
|
<button id="mpe-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors"><i id="mpe-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i></button>
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
|
|
<div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
|
|
</div>
|
|
</div>
|
|
<div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
|
<div class="flex items-stretch gap-3">
|
|
<div id="mpe-nutrition-section" class="flex-1 min-w-0"></div>
|
|
<div id="mpe-servings-row" class="shrink-0 w-[6.75rem]"></div>
|
|
</div>
|
|
<div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
|
|
</div>
|
|
<div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
|
|
<div id="mpe-ing-section" class="mb-4">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Składniki</p>
|
|
<div id="mpe-ing-list" class="space-y-1.5"></div>
|
|
<div id="mpe-add-area" class="mt-2"></div>
|
|
</div>
|
|
</div>
|
|
<div id="mpe-footer-wrap" class="relative z-[1] shrink-0 px-5 pt-2 pb-3 flex justify-center bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));">
|
|
<div id="mpe-footer-shadow" class="pointer-events-none absolute inset-x-0 -top-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
|
|
<button id="mpe-confirm-btn" type="button" class="border text-white px-4 py-3 rounded-xl font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important; border-color:#444442 !important;">
|
|
<i class="fas fa-check text-xs"></i> <span id="mpe-confirm-label">Dodaj do planu</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
/* ── Setup ──────────────────────────────────────────── */
|
|
|
|
export function setupMealPlanEditor() {
|
|
const overlay = document.getElementById('mpe-overlay');
|
|
const sheet = document.getElementById('mpe-sheet');
|
|
if (!overlay || !sheet) return;
|
|
|
|
const S = {
|
|
mode: null,
|
|
recipeId: null,
|
|
date: null,
|
|
slotId: null,
|
|
servings: 1,
|
|
subs: {},
|
|
excluded: new Set(),
|
|
overrides: {},
|
|
added: [],
|
|
entryId: null,
|
|
showCal: false,
|
|
calDate: null,
|
|
calExpanded: false,
|
|
altOpen: new Set(),
|
|
addOpen: false,
|
|
addQuery: '',
|
|
};
|
|
|
|
/* ── helpers ───────────────────────────────────── */
|
|
|
|
function nutFor(ingredientId, amount, unit) {
|
|
const def = INGREDIENTS[ingredientId];
|
|
if (!def?.nutritionPer100g) return null;
|
|
let g = amount;
|
|
if ((unit === 'szt.' || unit === 'szt') && def.weightPerPiece) g = amount * def.weightPerPiece;
|
|
const f = g / 100;
|
|
return {
|
|
kcal: Math.round(def.nutritionPer100g.kcal * f),
|
|
protein: Math.round(def.nutritionPer100g.protein * f * 10) / 10,
|
|
fat: Math.round(def.nutritionPer100g.fat * f * 10) / 10,
|
|
carbs: Math.round(def.nutritionPer100g.carbs * f * 10) / 10,
|
|
};
|
|
}
|
|
|
|
function totalNutrition() {
|
|
const r = RECIPES[S.recipeId];
|
|
if (!r) return { kcal: 0, protein: 0, fat: 0, carbs: 0 };
|
|
let kcal = 0, protein = 0, fat = 0, carbs = 0;
|
|
for (const ing of r.ingredients) {
|
|
if (S.excluded.has(ing.ingredientId)) continue;
|
|
const eid = S.subs[ing.ingredientId] || ing.ingredientId;
|
|
const base = S.overrides[ing.ingredientId] ?? ing.amount;
|
|
const n = nutFor(eid, base * S.servings, ing.unit);
|
|
if (n) { kcal += n.kcal; protein += n.protein; fat += n.fat; carbs += n.carbs; }
|
|
}
|
|
for (const a of S.added) {
|
|
const n = nutFor(a.ingredientId, a.amount * S.servings, a.unit);
|
|
if (n) { kcal += n.kcal; protein += n.protein; fat += n.fat; carbs += n.carbs; }
|
|
}
|
|
return { kcal: Math.round(kcal), protein: Math.round(protein * 10) / 10, fat: Math.round(fat * 10) / 10, carbs: Math.round(carbs * 10) / 10 };
|
|
}
|
|
|
|
function fmtAmt(n) { return Number.isInteger(n) ? String(n) : String(parseFloat(n.toFixed(1))); }
|
|
|
|
/* ── Calendar ──────────────────────────────────── */
|
|
|
|
function renderCal() {
|
|
const wrap = document.getElementById('mpe-cal-wrap');
|
|
const sec = document.getElementById('mpe-cal-section');
|
|
const summary = document.getElementById('mpe-summary-wrap');
|
|
if (!sec || !wrap) return;
|
|
if (summary) summary.style.paddingTop = S.showCal ? '0' : '0.75rem';
|
|
if (!S.showCal) {
|
|
wrap.classList.add('hidden');
|
|
sec.classList.add('hidden');
|
|
syncScrollShadows();
|
|
return;
|
|
}
|
|
wrap.classList.remove('hidden');
|
|
sec.classList.remove('hidden');
|
|
const grid = document.getElementById('mpe-cal-grid');
|
|
const title = document.getElementById('mpe-cal-title');
|
|
const todayBtn = document.getElementById('mpe-cal-today');
|
|
const icon = document.getElementById('mpe-cal-toggle-icon');
|
|
if (!grid || !title) return;
|
|
const today = startOfDay(new Date());
|
|
const plans = loadPlans();
|
|
const mode = S.calExpanded ? 'month' : 'week';
|
|
|
|
title.textContent = S.calExpanded ? formatCalendarMonthYear(S.calDate) : formatCalendarSelectedDate(S.date);
|
|
if (icon) {
|
|
icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
|
}
|
|
syncCalendarTodayButton(
|
|
todayBtn,
|
|
isCalendarOnToday(mode, startOfWeekMonday(S.calDate), S.calDate, S.date),
|
|
);
|
|
|
|
renderCalendarGrid({
|
|
gridEl: grid,
|
|
mode,
|
|
anchorDate: S.calDate,
|
|
selectedDate: S.date,
|
|
resolveDayState: (day, meta) => {
|
|
const isSelected = S.date && sameDay(day, S.date);
|
|
const isPast = day.getTime() < today.getTime();
|
|
return {
|
|
disabled: isPast && !isSelected,
|
|
dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
|
|
showIndicator: meta.mode === 'month'
|
|
? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
|
|
: dayHasAnyMeal(plans, day),
|
|
};
|
|
},
|
|
});
|
|
syncScrollShadows();
|
|
}
|
|
|
|
function renderSlots() {
|
|
const el = document.getElementById('mpe-slot-chips');
|
|
if (!el || !S.showCal) return;
|
|
const r = RECIPES[S.recipeId];
|
|
if (!r) return;
|
|
el.innerHTML = MEAL_SLOTS.filter((s) => r.allowedSlots.includes(s.id)).map((s) => {
|
|
const sel = s.id === S.slotId;
|
|
const bg = sel ? '#23221e' : '#2f2f2d';
|
|
const border = sel ? '#787876' : '#444442';
|
|
const text = sel ? '#f2efe8' : '#d7d2c8';
|
|
return `<button type="button" class="mpe-slot-btn px-3 py-1.5 rounded-full border text-[12px] font-semibold transition-colors" data-slot-id="${s.id}" style="background:${bg} !important; background-image:none !important; box-shadow:none !important; border-color:${border} !important; color:${text} !important;">${esc(s.label)}</button>`;
|
|
}).join('');
|
|
}
|
|
|
|
function syncScrollShadows() {
|
|
const body = document.getElementById('mpe-ing-scroll');
|
|
const topShadow = document.getElementById('mpe-top-shadow');
|
|
const bottomShadow = document.getElementById('mpe-footer-shadow');
|
|
if (!body) {
|
|
if (topShadow) topShadow.style.opacity = '0';
|
|
if (bottomShadow) bottomShadow.style.opacity = '0';
|
|
return;
|
|
}
|
|
if (topShadow) topShadow.style.opacity = body.scrollTop > 6 ? '1' : '0';
|
|
if (bottomShadow) {
|
|
const remaining = body.scrollHeight - body.clientHeight - body.scrollTop;
|
|
bottomShadow.style.opacity = remaining > 6 ? '1' : '0';
|
|
}
|
|
}
|
|
|
|
/* ── Servings ──────────────────────────────────── */
|
|
|
|
function renderServings() {
|
|
const el = document.getElementById('mpe-servings-row');
|
|
if (!el) return;
|
|
el.innerHTML = `
|
|
<div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
|
|
<div class="flex items-center pt-2">
|
|
<div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;">
|
|
<button type="button" id="mpe-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
|
|
<i class="fas fa-minus text-[10px]"></i>
|
|
</button>
|
|
<span id="mpe-serv-count" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${S.servings}</span>
|
|
<button type="button" id="mpe-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
|
|
<i class="fas fa-plus text-[10px]"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
/* ── Ingredients list ──────────────────────────── */
|
|
|
|
function renderIngList() {
|
|
const list = document.getElementById('mpe-ing-list');
|
|
if (!list) return;
|
|
const r = RECIPES[S.recipeId];
|
|
if (!r) return;
|
|
let html = '';
|
|
|
|
const removeBtn = (cls, attrs) =>
|
|
`<button type="button" class="${cls} shrink-0 w-6 h-6 rounded-full border border-gray-200 text-gray-300 hover:text-red-500 hover:border-red-200 hover:bg-red-50 flex items-center justify-center transition-colors" ${attrs}><i class="fas fa-minus text-[8px]"></i></button>`;
|
|
|
|
for (const ing of r.ingredients) {
|
|
const id = ing.ingredientId;
|
|
if (S.excluded.has(id)) continue;
|
|
|
|
const eid = S.subs[id] || id;
|
|
const eDef = INGREDIENTS[eid];
|
|
const eName = eDef?.name || eid;
|
|
const hasAlts = ing.alternatives?.length > 0;
|
|
const swapped = eid !== id;
|
|
const altOpen = S.altOpen.has(id);
|
|
const base = S.overrides[id] ?? ing.amount;
|
|
const disp = base * S.servings;
|
|
const modified = id in S.overrides;
|
|
|
|
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
|
|
|
|
const shuffleBtn = hasAlts
|
|
? `<button type="button" class="mpe-shuffle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-orig-id="${esc(id)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
|
|
: '';
|
|
const modDot = modified ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0"></span>' : '';
|
|
|
|
html += `<div class="mpe-ing-row rounded-xl p-2.5" style="${rowStyle}" data-orig-id="${esc(id)}" data-type="recipe">`;
|
|
html += `<div class="flex items-center gap-2">`;
|
|
html += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${esc(eName)}</span></div>`;
|
|
html += `<div class="shrink-0 flex items-center gap-2">`;
|
|
html += shuffleBtn;
|
|
html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-orig-id="${esc(id)}" data-type="recipe">`;
|
|
html += `${modDot}<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
|
|
html += `<span class="text-[11px] text-gray-500">${esc(ing.unit)}</span></button>`;
|
|
html += removeBtn('mpe-remove-ing', `data-orig-id="${esc(id)}" data-type="recipe"`);
|
|
html += `</div>`;
|
|
html += `</div>`;
|
|
|
|
if (hasAlts && altOpen) {
|
|
const opts = [id, ...ing.alternatives];
|
|
html += '<div class="mt-2 ml-1 space-y-1">';
|
|
for (const altId of opts) {
|
|
const def = INGREDIENTS[altId];
|
|
const name = def?.name || altId;
|
|
const isSel = eid === altId;
|
|
const checkbox = `
|
|
<span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
|
|
style="border:1.5px solid #56534f; background:transparent;">
|
|
${isSel ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
|
|
</span>`;
|
|
const n = nutFor(altId, disp, ing.unit);
|
|
const nLine = n ? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${n.kcal} kcal · ${n.protein}g B · ${n.fat}g T · ${n.carbs}g W</div>` : '';
|
|
html += `<button type="button" class="mpe-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-orig-id="${esc(id)}" data-alt-id="${esc(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${esc(name)}</div>${nLine}</div>${checkbox}</div></button>`;
|
|
}
|
|
html += '</div>';
|
|
}
|
|
|
|
html += '</div>';
|
|
}
|
|
|
|
for (const a of S.added) {
|
|
const def = INGREDIENTS[a.ingredientId];
|
|
const name = def?.name || a.ingredientId;
|
|
const disp = a.amount * S.servings;
|
|
html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
|
|
html += `<div class="flex items-center gap-2">`;
|
|
html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>`;
|
|
html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
|
|
html += `<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
|
|
html += `<span class="text-[11px] text-gray-500">${esc(a.unit)}</span></button>`;
|
|
html += removeBtn('mpe-remove-ing', `data-ing-id="${esc(a.ingredientId)}" data-type="added"`);
|
|
html += `</div></div>`;
|
|
}
|
|
|
|
if (S.excluded.size > 0) {
|
|
const cnt = S.excluded.size;
|
|
const label = cnt === 1 ? '1 składnik usunięty' : cnt < 5 ? `${cnt} składniki usunięte` : `${cnt} składników usuniętych`;
|
|
html += `<div class="flex items-center justify-between py-2 px-1">`;
|
|
html += `<span class="text-[11px] text-gray-400">${label}</span>`;
|
|
html += `<button type="button" id="mpe-restore-all" class="text-[11px] font-semibold text-gray-500 hover:text-gray-900 transition-colors">Przywróć</button>`;
|
|
html += `</div>`;
|
|
}
|
|
|
|
list.innerHTML = html;
|
|
}
|
|
|
|
function renderAddArea() {
|
|
const el = document.getElementById('mpe-add-area');
|
|
if (!el) return;
|
|
if (!S.addOpen) {
|
|
el.innerHTML = `<button type="button" id="mpe-add-btn" class="w-full py-2 rounded-xl border border-dashed text-[12px] font-semibold transition-colors" style="border-color:#444442; color:#9b978f; background:transparent !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent;"><i class="fas fa-plus text-[10px] mr-1.5 opacity-70"></i>Dodaj składnik</button>`;
|
|
return;
|
|
}
|
|
const recipe = RECIPES[S.recipeId];
|
|
const usedIds = new Set([
|
|
...(recipe?.ingredients.map((i) => i.ingredientId) || []),
|
|
...S.added.map((a) => a.ingredientId),
|
|
]);
|
|
const q = S.addQuery.toLowerCase().trim();
|
|
const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
|
|
el.innerHTML = `
|
|
<div class="rounded-xl p-3" style="background:#393937 !important; border:1px solid #444442;">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<input type="text" id="mpe-add-search" class="flex-1 rounded-lg px-3 py-1.5 text-[12px] outline-none placeholder:text-[#8f8b84]" style="background:#2f2f2d !important; border:1px solid #444442; color:#ddd6ca;" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
|
|
<button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold px-2 py-1 transition-colors" style="color:#9b978f;">Anuluj</button>
|
|
</div>
|
|
<div class="max-h-40 overflow-y-auto space-y-0.5 no-scrollbar" id="mpe-add-results">
|
|
${avail.length === 0
|
|
? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
|
|
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('')}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function updateAddResults() {
|
|
const results = document.getElementById('mpe-add-results');
|
|
if (!results) return;
|
|
const recipe = RECIPES[S.recipeId];
|
|
const usedIds = new Set([
|
|
...(recipe?.ingredients.map((i) => i.ingredientId) || []),
|
|
...S.added.map((a) => a.ingredientId),
|
|
]);
|
|
const q = S.addQuery.toLowerCase().trim();
|
|
const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
|
|
results.innerHTML = avail.length === 0
|
|
? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
|
|
: avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('');
|
|
}
|
|
|
|
function renderIngredients() {
|
|
renderIngList();
|
|
renderAddArea();
|
|
requestAnimationFrame(syncScrollShadows);
|
|
}
|
|
|
|
/* ── Nutrition summary ─────────────────────────── */
|
|
|
|
function renderNutrition() {
|
|
const el = document.getElementById('mpe-nutrition-section');
|
|
if (!el) return;
|
|
const n = totalNutrition();
|
|
el.innerHTML = `
|
|
<div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
|
|
<div class="flex-1 flex items-center">
|
|
<div class="rounded-xl border px-3 py-2" style="border-color:#444442 !important;">
|
|
<div class="grid grid-flow-col auto-cols-max gap-3 text-left">
|
|
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
|
|
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
|
|
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.carbs}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Węgle</span></div>
|
|
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.fat}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Tłuszcze</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
requestAnimationFrame(syncScrollShadows);
|
|
}
|
|
|
|
/* ── Render all ────────────────────────────────── */
|
|
|
|
function renderAll() { renderCal(); renderSlots(); renderServings(); renderIngredients(); renderNutrition(); }
|
|
|
|
/* ── Open / Close ─────────────────────────────── */
|
|
|
|
function openEditor(opts) {
|
|
const recipe = RECIPES[opts.recipeId];
|
|
if (!recipe) return;
|
|
|
|
S.mode = opts.mode || 'add';
|
|
S.recipeId = opts.recipeId;
|
|
S.servings = opts.servings || opts.entry?.servings || 1;
|
|
S.subs = { ...(opts.substitutions || opts.entry?.substitutions || {}) };
|
|
S.excluded = new Set(opts.entry?.excludedIngredients || []);
|
|
S.overrides = { ...(opts.entry?.amountOverrides || {}) };
|
|
S.added = (opts.entry?.addedIngredients || []).map((a) => ({ ...a }));
|
|
S.entryId = opts.entry?.id || null;
|
|
S.altOpen = new Set();
|
|
S.addOpen = false;
|
|
S.addQuery = '';
|
|
|
|
if (opts.date && opts.slotId) {
|
|
S.date = opts.date;
|
|
S.slotId = opts.slotId;
|
|
S.showCal = false;
|
|
} else {
|
|
const today = startOfDay(new Date());
|
|
S.date = today;
|
|
S.calDate = today;
|
|
S.calExpanded = false;
|
|
S.slotId = recipe.allowedSlots[0] || MEAL_SLOTS[0]?.id;
|
|
S.showCal = true;
|
|
}
|
|
|
|
document.getElementById('mpe-title').textContent = S.mode === 'edit' ? 'Edytuj posiłek' : 'Zaplanuj posiłek';
|
|
document.getElementById('mpe-subtitle').textContent = recipe.title;
|
|
document.getElementById('mpe-confirm-label').textContent = S.mode === 'edit' ? 'Zapisz zmiany' : 'Dodaj do planu';
|
|
|
|
renderAll();
|
|
const body = document.getElementById('mpe-ing-scroll');
|
|
if (body) body.scrollTop = 0;
|
|
syncScrollShadows();
|
|
|
|
overlay.classList.remove('hidden');
|
|
overlay.style.pointerEvents = 'auto';
|
|
requestAnimationFrame(() => { sheet.style.transform = 'translateY(0)'; });
|
|
}
|
|
|
|
function closeEditor() {
|
|
sheet.style.transform = 'translateY(100%)';
|
|
setTimeout(() => { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }, 300);
|
|
}
|
|
|
|
/* ── Save ──────────────────────────────────────── */
|
|
|
|
function buildEntry() {
|
|
const entry = { id: S.entryId || newPlanEntryId(), recipeId: S.recipeId, servings: S.servings };
|
|
if (Object.keys(S.subs).length > 0) entry.substitutions = { ...S.subs };
|
|
if (S.excluded.size > 0) entry.excludedIngredients = [...S.excluded];
|
|
const recipe = RECIPES[S.recipeId];
|
|
if (recipe) {
|
|
const ov = {};
|
|
for (const [k, v] of Object.entries(S.overrides)) {
|
|
const orig = recipe.ingredients.find((i) => i.ingredientId === k);
|
|
if (orig && Math.abs(v - orig.amount) > 0.01) ov[k] = v;
|
|
}
|
|
if (Object.keys(ov).length > 0) entry.amountOverrides = ov;
|
|
}
|
|
if (S.added.length > 0) entry.addedIngredients = S.added.map((a) => ({ ingredientId: a.ingredientId, amount: a.amount, unit: a.unit }));
|
|
return entry;
|
|
}
|
|
|
|
function handleConfirm() {
|
|
if (!S.recipeId || !S.date || !S.slotId) return;
|
|
const plans = loadPlans();
|
|
const key = dateKey(S.date);
|
|
|
|
if (S.mode === 'edit' && S.entryId) {
|
|
const arr = plans[key]?.[S.slotId];
|
|
if (Array.isArray(arr)) {
|
|
const idx = arr.findIndex((e) => e.id === S.entryId);
|
|
if (idx >= 0) arr[idx] = buildEntry();
|
|
}
|
|
} else {
|
|
if (!plans[key]) plans[key] = {};
|
|
if (!plans[key][S.slotId]) plans[key][S.slotId] = [];
|
|
plans[key][S.slotId].push(buildEntry());
|
|
}
|
|
|
|
savePlans(plans);
|
|
closeEditor();
|
|
showAppToast(S.mode === 'edit' ? 'Zapisano zmiany!' : 'Dodano do planera!');
|
|
window.refreshPlanner?.();
|
|
}
|
|
|
|
/* ── Event bindings ───────────────────────────── */
|
|
|
|
document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
|
|
overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
|
|
document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
|
|
bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
|
|
S.date = date;
|
|
S.calDate = new Date(date);
|
|
renderCal();
|
|
});
|
|
|
|
document.getElementById('mpe-cal-prev')?.addEventListener('click', () => {
|
|
if (!S.showCal) return;
|
|
S.calDate = S.calExpanded ? addMonths(S.calDate, -1) : addDays(S.calDate, -7);
|
|
renderCal();
|
|
});
|
|
document.getElementById('mpe-cal-next')?.addEventListener('click', () => {
|
|
if (!S.showCal) return;
|
|
S.calDate = S.calExpanded ? addMonths(S.calDate, 1) : addDays(S.calDate, 7);
|
|
renderCal();
|
|
});
|
|
document.getElementById('mpe-cal-today')?.addEventListener('click', () => {
|
|
const today = startOfDay(new Date());
|
|
S.date = today; S.calDate = today;
|
|
renderCal();
|
|
});
|
|
document.getElementById('mpe-cal-toggle')?.addEventListener('click', () => {
|
|
S.calExpanded = !S.calExpanded;
|
|
renderCal();
|
|
});
|
|
|
|
document.getElementById('mpe-slot-chips')?.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('.mpe-slot-btn');
|
|
if (!btn) return;
|
|
S.slotId = btn.dataset.slotId;
|
|
renderSlots();
|
|
});
|
|
|
|
document.getElementById('mpe-ing-scroll')?.addEventListener('scroll', syncScrollShadows);
|
|
|
|
document.getElementById('mpe-servings-row')?.addEventListener('click', (e) => {
|
|
if (e.target.closest('#mpe-serv-minus')) { if (S.servings <= 1) return; S.servings--; }
|
|
else if (e.target.closest('#mpe-serv-plus')) { if (S.servings >= 12) return; S.servings++; }
|
|
else return;
|
|
renderServings();
|
|
renderIngredients();
|
|
renderNutrition();
|
|
});
|
|
|
|
/* ── Ingredient section delegation ────────────── */
|
|
|
|
const ingSec = document.getElementById('mpe-ing-section');
|
|
|
|
ingSec?.addEventListener('click', (e) => {
|
|
const remove = e.target.closest('.mpe-remove-ing');
|
|
if (remove) {
|
|
if (remove.dataset.type === 'added') {
|
|
S.added = S.added.filter((a) => a.ingredientId !== remove.dataset.ingId);
|
|
} else {
|
|
S.excluded.add(remove.dataset.origId);
|
|
}
|
|
renderIngredients(); renderNutrition();
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest('#mpe-restore-all')) {
|
|
S.excluded.clear();
|
|
renderIngredients(); renderNutrition();
|
|
return;
|
|
}
|
|
|
|
const shuffle = e.target.closest('.mpe-shuffle');
|
|
if (shuffle) {
|
|
const id = shuffle.dataset.origId;
|
|
if (S.altOpen.has(id)) S.altOpen.delete(id); else S.altOpen.add(id);
|
|
renderIngList();
|
|
return;
|
|
}
|
|
|
|
const altPick = e.target.closest('.mpe-alt-pick');
|
|
if (altPick) {
|
|
const origId = altPick.dataset.origId;
|
|
const altId = altPick.dataset.altId;
|
|
if (altId === origId) delete S.subs[origId]; else S.subs[origId] = altId;
|
|
S.altOpen.delete(origId);
|
|
renderIngList(); renderNutrition();
|
|
return;
|
|
}
|
|
|
|
const editAmt = e.target.closest('.mpe-edit-amt');
|
|
if (editAmt && !editAmt.disabled) {
|
|
startAmountEdit(editAmt);
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest('#mpe-add-btn')) {
|
|
S.addOpen = true; S.addQuery = '';
|
|
renderAddArea();
|
|
document.getElementById('mpe-add-search')?.focus();
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest('#mpe-add-cancel')) {
|
|
S.addOpen = false;
|
|
renderAddArea();
|
|
return;
|
|
}
|
|
|
|
const addPick = e.target.closest('.mpe-add-pick');
|
|
if (addPick) {
|
|
const ingId = addPick.dataset.ingId;
|
|
const def = INGREDIENTS[ingId];
|
|
if (!def) return;
|
|
const unit = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
|
|
const amt = def.pantryUnit === 'szt' ? 1 : 100;
|
|
S.added.push({ ingredientId: ingId, amount: amt, unit });
|
|
S.addOpen = false;
|
|
renderIngredients(); renderNutrition();
|
|
}
|
|
});
|
|
|
|
ingSec?.addEventListener('input', (e) => {
|
|
if (e.target.id === 'mpe-add-search') {
|
|
S.addQuery = e.target.value;
|
|
updateAddResults();
|
|
}
|
|
});
|
|
|
|
/* ── Inline amount editing ────────────────────── */
|
|
|
|
function startAmountEdit(btn) {
|
|
const type = btn.dataset.type;
|
|
const id = btn.dataset.origId || btn.dataset.ingId;
|
|
const amtSpan = btn.querySelector('.tabular-nums');
|
|
if (!amtSpan) return;
|
|
|
|
const currentDisplay = parseFloat(amtSpan.textContent);
|
|
const spans = btn.querySelectorAll('span');
|
|
const unitText = spans.length > 0 ? spans[spans.length - 1].textContent.trim() : '';
|
|
const saved = btn.innerHTML;
|
|
|
|
btn.innerHTML = `<input type="number" class="mpe-amt-input w-16 text-right text-[12px] font-semibold text-gray-900 border border-gray-300 rounded-lg px-2 py-1 focus:border-gray-900 focus:ring-1 focus:ring-gray-900 outline-none tabular-nums" value="${currentDisplay}" min="0" step="any"><span class="text-[11px] text-gray-500 ml-1">${esc(unitText)}</span>`;
|
|
|
|
const input = btn.querySelector('.mpe-amt-input');
|
|
if (!input) { btn.innerHTML = saved; return; }
|
|
input.focus();
|
|
input.select();
|
|
|
|
let done = false;
|
|
const finish = (save) => {
|
|
if (done) return;
|
|
done = true;
|
|
if (save) {
|
|
const raw = Math.max(0, parseFloat(input.value) || 0);
|
|
const newBase = S.servings > 0 ? raw / S.servings : raw;
|
|
const rounded = Math.round(newBase * 100) / 100;
|
|
|
|
if (type === 'recipe') {
|
|
const recipe = RECIPES[S.recipeId];
|
|
const orig = recipe?.ingredients.find((i) => i.ingredientId === id);
|
|
if (orig && Math.abs(rounded - orig.amount) > 0.01) S.overrides[id] = rounded;
|
|
else delete S.overrides[id];
|
|
} else if (type === 'added') {
|
|
const a = S.added.find((x) => x.ingredientId === id);
|
|
if (a) a.amount = rounded;
|
|
}
|
|
}
|
|
renderIngList();
|
|
renderNutrition();
|
|
};
|
|
|
|
input.addEventListener('blur', () => finish(true));
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
|
|
if (e.key === 'Escape') { e.preventDefault(); finish(false); }
|
|
});
|
|
}
|
|
|
|
/* ── Expose globally ──────────────────────────── */
|
|
|
|
window.openMealPlanEditor = openEditor;
|
|
window.closeMealPlanEditor = closeEditor;
|
|
}
|