From 8e48ebdd95b7939f41ab4a1fb3885e5354fc7831 Mon Sep 17 00:00:00 2001 From: ulfrxdev Date: Fri, 17 Apr 2026 23:34:53 +0200 Subject: [PATCH] Redesign shopping list --- js/services/pantryShopping.js | 144 ++++++- js/services/planIngredients.js | 29 ++ js/storageKeys.js | 1 + js/ui/bottomNav.js | 1 - js/views/Pantry.js | 76 ++-- js/views/RecipeList.js | 2 +- js/views/ShoppingList.js | 766 +++++++++++++++++++++++++-------- 7 files changed, 793 insertions(+), 226 deletions(-) diff --git a/js/services/pantryShopping.js b/js/services/pantryShopping.js index 9ae5291..0466f4b 100644 --- a/js/services/pantryShopping.js +++ b/js/services/pantryShopping.js @@ -1,5 +1,5 @@ import { INGREDIENTS, CATEGORY_LABELS, PRODUCTS, ingredientHasProducts } from '../data/catalog.js?v=9'; -import { PANTRY_STORAGE_KEY, PANTRY_STORAGE_KEY_V2, SHOPPING_STORAGE_KEY } from '../storageKeys.js'; +import { PANTRY_STORAGE_KEY, PANTRY_STORAGE_KEY_V2, SHOPPING_STORAGE_KEY, SHOPPING_SESSION_KEY } from '../storageKeys.js'; export const KITCHEN_LIST_ID = 'kitchen'; export const MISC_LIST_ID = 'misc'; @@ -535,6 +535,148 @@ export function setPantryProductQty(ingredientId, productId, qty) { return pantry; } +/** + * Dodaj delta do spiżarni (używane przy zakupie ze listy). + * @param {string} ingredientId + * @param {string|undefined} productId + * @param {number} amount + */ +export function addAmountToPantry(ingredientId, productId, amount) { + const pantry = loadPantry(); + const rounded = Math.round(amount * 1000) / 1000; + if (productId && PRODUCTS[productId]) { + let val = pantry[ingredientId]; + if (!val || typeof val === 'number') { + val = { items: [], _total: 0 }; + pantry[ingredientId] = val; + } + const idx = val.items.findIndex((i) => i.productId === productId); + if (idx >= 0) val.items[idx].qty = Math.round((val.items[idx].qty + rounded) * 1000) / 1000; + else val.items.push({ productId, qty: rounded }); + recalcTotal(val); + } else { + const cur = typeof pantry[ingredientId] === 'number' ? pantry[ingredientId] : 0; + pantry[ingredientId] = Math.round((cur + rounded) * 1000) / 1000; + } + savePantry(pantry); + return pantry; +} + +/** + * Odejmij delta ze spiżarni (undo zakupu). + * @param {string} ingredientId + * @param {string|undefined} productId + * @param {number} amount + */ +export function subtractFromPantry(ingredientId, productId, amount) { + const pantry = loadPantry(); + if (productId && PRODUCTS[productId]) { + const val = pantry[ingredientId]; + if (!val || typeof val === 'number') return pantry; + const idx = val.items.findIndex((i) => i.productId === productId); + if (idx < 0) return pantry; + val.items[idx].qty = Math.max(0, Math.round((val.items[idx].qty - amount) * 1000) / 1000); + if (val.items[idx].qty <= 0) val.items.splice(idx, 1); + recalcTotal(val); + if (val._total <= 0) delete pantry[ingredientId]; + } else { + const cur = typeof pantry[ingredientId] === 'number' ? pantry[ingredientId] : 0; + const next = Math.max(0, Math.round((cur - amount) * 1000) / 1000); + if (next <= 0) delete pantry[ingredientId]; + else pantry[ingredientId] = next; + } + savePantry(pantry); + return pantry; +} + +/* ══════════════════════════════════════════════════════════════════════ + * Session zakupowy — selectedDays + log zakupów bieżącej sesji + * ══════════════════════════════════════════════════════════════════════ */ + +/** + * @typedef {{ id: string, ingredientId: string, productId?: string, name: string, addedAmount: number, unit: string, category: string, timestamp: number }} SessionLogEntry + * @typedef {{ selectedDays: string[], sessionLog: SessionLogEntry[] }} ShoppingSessionState + */ + +function defaultShoppingSession() { + return { selectedDays: [], sessionLog: [] }; +} + +function normalizeShoppingSession(raw) { + if (!raw || typeof raw !== 'object') return defaultShoppingSession(); + const selectedDays = Array.isArray(raw.selectedDays) + ? raw.selectedDays.filter((d) => typeof d === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(d)) + : []; + const sessionLog = Array.isArray(raw.sessionLog) + ? raw.sessionLog.filter((e) => e && typeof e.ingredientId === 'string' && Number.isFinite(e.addedAmount)) + : []; + return { selectedDays, sessionLog }; +} + +/** @returns {ShoppingSessionState} */ +export function loadShoppingSession() { + try { + const raw = localStorage.getItem(SHOPPING_SESSION_KEY); + if (!raw) return defaultShoppingSession(); + return normalizeShoppingSession(JSON.parse(raw)); + } catch { + return defaultShoppingSession(); + } +} + +/** @param {ShoppingSessionState} s */ +export function saveShoppingSession(s) { + try { + localStorage.setItem(SHOPPING_SESSION_KEY, JSON.stringify(s)); + } catch { /* ignore */ } +} + +/** @returns {string[]} */ +export function getSelectedDays() { + return loadShoppingSession().selectedDays; +} + +/** @param {string[]} days */ +export function setSelectedDays(days) { + const s = loadShoppingSession(); + s.selectedDays = days; + saveShoppingSession(s); +} + +/** + * @param {{ ingredientId: string, productId?: string, name: string, addedAmount: number, unit: string, category: string }} entry + * @returns {string} new entry id + */ +export function addSessionLogEntry(entry) { + const s = loadShoppingSession(); + const id = newId('sl'); + s.sessionLog.push({ + id, + ingredientId: entry.ingredientId, + productId: entry.productId || undefined, + name: entry.name, + addedAmount: Math.round(entry.addedAmount * 100) / 100, + unit: entry.unit, + category: entry.category, + timestamp: Date.now(), + }); + saveShoppingSession(s); + return id; +} + +/** @param {string} entryId */ +export function removeSessionLogEntry(entryId) { + const s = loadShoppingSession(); + s.sessionLog = s.sessionLog.filter((e) => e.id !== entryId); + saveShoppingSession(s); +} + +export function clearSessionLog() { + const s = loadShoppingSession(); + s.sessionLog = []; + saveShoppingSession(s); +} + /** Kupione ze listy kuchennej → spiżarnia (zawsze ta lista, niezależnie od aktywnej zakładki). */ export function applyCheckedKitchenListToPantry() { const s = loadShoppingState(); diff --git a/js/services/planIngredients.js b/js/services/planIngredients.js index a204d24..18e7ac5 100644 --- a/js/services/planIngredients.js +++ b/js/services/planIngredients.js @@ -218,6 +218,35 @@ export function aggregateRangeIngredientNeed(plans, startDate, numDays) { }); } +/** + * Zapotrzebowanie składników dla konkretnych dni (tablica dateKey-ów). + * @param {Record} plans + * @param {string[]} selectedDays — tablica dateKey-ów ('YYYY-MM-DD') + */ +export function aggregateSelectedDaysIngredientNeed(plans, selectedDays) { + if (!selectedDays || selectedDays.length === 0) return []; + const map = new Map(); + for (const dk of selectedDays) { + const [y, m, d] = dk.split('-').map(Number); + const day = new Date(y, m - 1, d); + const dayPlan = getDayPlan(plans, day); + const lines = flattenDayIngredientLines(dayPlan); + for (const line of lines) { + const key = `${line.ingredientId}\t${line.unit}`; + const cur = map.get(key); + if (!cur) { + map.set(key, { ...line }); + } else { + cur.amount = Math.round((cur.amount + line.amount) * 10) / 10; + } + } + } + return [...map.values()].sort((a, b) => { + const c = a.category.localeCompare(b.category); + return c !== 0 ? c : a.name.localeCompare(b.name, 'pl'); + }); +} + /** * Jedna grupa na porę dnia: nagłówek pory raz, potem bloki przepisów ze składnikami. */ diff --git a/js/storageKeys.js b/js/storageKeys.js index 509ca85..d905a18 100644 --- a/js/storageKeys.js +++ b/js/storageKeys.js @@ -2,3 +2,4 @@ export const PLANS_STORAGE_KEY = 'recipe-planner-plans-v1'; export const PANTRY_STORAGE_KEY = 'recipe-pantry-v1'; export const PANTRY_STORAGE_KEY_V2 = 'recipe-pantry-v2'; export const SHOPPING_STORAGE_KEY = 'recipe-shopping-v1'; +export const SHOPPING_SESSION_KEY = 'recipe-shopping-session-v1'; diff --git a/js/ui/bottomNav.js b/js/ui/bottomNav.js index 016dbea..b680d3e 100644 --- a/js/ui/bottomNav.js +++ b/js/ui/bottomNav.js @@ -46,7 +46,6 @@ export function getBottomNavHTML() { -
+
+ +
-
-
- -
- ${createCalendarTopbarHTML({ - prevId: 'pantry-cal-prev', - todayId: 'pantry-cal-today', - nextId: 'pantry-cal-next', - wrapperClass: 'pb-3 flex items-center justify-end gap-3', - controlsStyle: `background:${PANTRY_CALENDAR_THEME.bg};border-color:${PANTRY_CALENDAR_THEME.border};`, - navButtonClass: 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors', - todayButtonActiveClass: 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[#d7d2c8] active:bg-transparent whitespace-nowrap', - todayButtonDimClass: 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[#7d7a74] cursor-default', - })} - ${createCalendarWeekdayHeaderHTML(undefined, { - wrapperClass: 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-[#9b978f] uppercase tracking-wide mb-1 leading-none', - })} -
+
+ ${createCalendarTopbarHTML({ + prevId: 'pantry-cal-prev', + todayId: 'pantry-cal-today', + nextId: 'pantry-cal-next', + wrapperClass: 'pb-3 flex items-center justify-end gap-3', + controlsStyle: `background:${PANTRY_CALENDAR_THEME.bg};border-color:${PANTRY_CALENDAR_THEME.border};`, + navButtonClass: 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors', + todayButtonActiveClass: 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[#d7d2c8] active:bg-transparent whitespace-nowrap', + todayButtonDimClass: 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[#7d7a74] cursor-default', +})} + ${createCalendarWeekdayHeaderHTML(undefined, { + wrapperClass: 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-[#9b978f] uppercase tracking-wide mb-1 leading-none', +})} +
-
-

-
-
+
+

@@ -263,25 +257,23 @@ function syncHorizonUI() { ensureValidHorizonDate(); const defaultRow = document.getElementById('pantry-default-row'); - const horizonExpanded = document.getElementById('pantry-horizon-expanded'); const searchShell = document.getElementById('pantry-search-shell'); const popover = document.getElementById('pantry-calendar-popover'); const filterPopover = document.getElementById('pantry-filter-popover'); const filterToggle = document.getElementById('pantry-filter-toggle'); const filterCount = document.getElementById('pantry-filter-count'); const compactLabel = document.getElementById('pantry-horizon-compact-label'); - const horizonLabel = document.getElementById('pantry-horizon-label'); + const compactPill = document.getElementById('pantry-horizon-compact'); const chevron = document.getElementById('pantry-horizon-chevron'); const selectionEl = document.getElementById('pantry-cal-selection'); const prevBtn = document.getElementById('pantry-cal-prev'); const todayBtn = document.getElementById('pantry-cal-today'); if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate); - if (horizonLabel) horizonLabel.textContent = formatHorizonLabel(horizonEndDate); if (selectionEl) selectionEl.textContent = formatRangeSummary(horizonEndDate); const showCalendar = isCalendarOpen && !isSearchExpanded; - const showDefault = !isSearchExpanded && !isCalendarOpen; + const showDefault = !isSearchExpanded; const showFilter = isFilterOpen && showDefault; const activeFilterCount = getActivePantryFilterCount(); @@ -291,10 +283,9 @@ function syncHorizonUI() { defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none'; } - if (horizonExpanded) { - horizonExpanded.style.opacity = showCalendar ? '1' : '0'; - horizonExpanded.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)'; - horizonExpanded.style.pointerEvents = showCalendar ? 'auto' : 'none'; + if (compactPill) { + compactPill.style.setProperty('background', showCalendar ? '#23221e' : '#393937', 'important'); + compactPill.style.setProperty('border-color', showCalendar ? '#787876' : '#41423f', 'important'); } if (popover) { @@ -770,14 +761,7 @@ export function setupPantry() { // Horizon pill + calendar document.getElementById('pantry-horizon-compact')?.addEventListener('click', (event) => { event.stopPropagation(); - openCalendar(); - }); - document.getElementById('pantry-horizon-toggle')?.addEventListener('click', () => { - if (isCalendarOpen) { - closeCalendar(); - return; - } - openCalendar(); + isCalendarOpen ? closeCalendar() : openCalendar(); }); document.getElementById('pantry-cal-prev')?.addEventListener('click', () => { const prevMonth = addMonths(calendarMonthAnchor, -1); diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js index 4093e41..adf21d8 100644 --- a/js/views/RecipeList.js +++ b/js/views/RecipeList.js @@ -115,7 +115,7 @@ export function getRecipeListHTML() { return `
-
+
diff --git a/js/views/ShoppingList.js b/js/views/ShoppingList.js index 692a265..de4c8ac 100644 --- a/js/views/ShoppingList.js +++ b/js/views/ShoppingList.js @@ -1,19 +1,20 @@ -import { INGREDIENTS, CATEGORY_LABELS } from '../data/catalog.js?v=9'; +import { INGREDIENTS } from '../data/catalog.js?v=9'; import { - KITCHEN_LIST_ID, - loadShoppingState, - saveShoppingState, - addOrMergeShoppingLines, - removeItemFromList, - clearCheckedInList, loadPantry, - savePantry, computeShortfalls, categoryLabel, + addAmountToPantry, + subtractFromPantry, + getSelectedDays, + setSelectedDays, + addSessionLogEntry, + removeSessionLogEntry, + clearSessionLog, + loadShoppingSession, } from '../services/pantryShopping.js?v=2'; -import { aggregateWeekIngredientNeed } from '../services/planIngredients.js?v=2'; -import { loadPlans } from '../services/planStore.js?v=2'; -import { startOfWeekMonday } from '../services/dateUtils.js'; +import { aggregateSelectedDaysIngredientNeed } from '../services/planIngredients.js?v=2'; +import { loadPlans, dateKey } from '../services/planStore.js?v=2'; +import { addDays, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js'; import { showAppToast } from '../ui/toast.js'; /* ── helpers ── */ @@ -22,15 +23,21 @@ function esc(s) { return String(s).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } -function unitLabel(u) { - return u === 'szt' ? 'szt.' : u; -} - function formatQty(n) { const rounded = Math.round((Number(n) || 0) * 10) / 10; return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, ''); } +function unitLabel(u) { + return u === 'szt' ? 'szt.' : String(u); +} + +function stepForUnit(unit) { + return (unit === 'szt.' || unit === 'szt') ? 1 : 10; +} + +const SL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)'; + const CATEGORY_ICONS = { pieczywo: 'fa-bread-slice', nabial: 'fa-cheese', @@ -41,46 +48,55 @@ const CATEGORY_ICONS = { przyprawy: 'fa-leaf', inne: 'fa-jar', }; - const CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne']; +const DAY_ABBR = ['Nd', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb']; +const DAY_NAMES_SHORT = ['nd.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.']; +const WEEKDAY_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'sb', 'nd']; +const MONTHS_LONG = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień']; +const MONTHS_SHORT = ['sty','lut','mar','kwi','maj','cze','lip','sie','wrz','paź','lis','gru']; -/* ══════════════════════ HTML SHELL ══════════════════════ */ +/* ── module state ── */ +let boughtSectionOpen = false; +let expandedIngredientId = null; +let expandedAmount = 0; +let calendarOpen = false; +let calendarMonth = startOfMonth(new Date()); -export function getShoppingListHTML() { - return ` - `; +function getDefaultSelectedDays() { + const today = startOfDay(new Date()); + return Array.from({ length: 7 }, (_, i) => dateKey(addDays(today, i))); } -/* ══════════════════════ RENDERING ══════════════════════ */ - -function getKitchenItems() { - const state = loadShoppingState(); - const list = state.lists.find((l) => l.id === KITCHEN_LIST_ID && l.type === 'kitchen'); - return list ? /** @type {import('../services/pantryShopping.js').KitchenShoppingItem[]} */ (list.items) : []; +function formatRangePill(selectedDays) { + if (selectedDays.length === 0) return 'Wybierz dni'; + const sorted = [...selectedDays].sort(); + const fmt = (dk) => { + const d = new Date(dk + 'T00:00:00'); + return `${DAY_NAMES_SHORT[d.getDay()]} ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}`; + }; + if (sorted.length === 1) return fmt(sorted[0]); + return `${fmt(sorted[0])} – ${fmt(sorted[sorted.length - 1])}`; } -function groupItemsByCategory(items) { - /** @type {Map} */ +/* ── computed data ── */ + +function computeActiveItems() { + const selectedDays = getSelectedDays(); + if (selectedDays.length === 0) return []; + const plans = loadPlans(); + const needLines = aggregateSelectedDaysIngredientNeed(plans, selectedDays); + return computeShortfalls(needLines, loadPantry()); +} + +function getSessionLog() { + return loadShoppingSession().sessionLog; +} + +function groupByCategory(items) { const groups = new Map(); for (const item of items) { const cat = item.category || 'inne'; @@ -92,195 +108,591 @@ function groupItemsByCategory(items) { .map((cat) => ({ cat, items: groups.get(cat) })); } -function itemRowHtml(item) { - const def = INGREDIENTS[item.ingredientId]; - const icon = def ? (CATEGORY_ICONS[def.category] || 'fa-jar') : 'fa-jar'; - const image = def?.image; - const checked = item.checked; +/* ══════════════════════ HTML SHELL ══════════════════════ */ - const mediaFit = image && image.endsWith('.svg') ? 'object-contain' : 'object-cover'; +export function getShoppingListHTML() { + const weekdayHeader = WEEKDAY_SHORT + .map((d) => `
${d}
`) + .join(''); + + return ` + `; +} + +/* ══════════════════════ CALENDAR ══════════════════════ */ + +function getDayRange(startDk, endDk) { + const a = new Date(startDk + 'T00:00:00'); + const b = new Date(endDk + 'T00:00:00'); + const [from, to] = a <= b ? [a, b] : [b, a]; + const days = []; + for (let d = new Date(from); d <= to; d = addDays(d, 1)) days.push(dateKey(d)); + return days; +} + +function renderCalendarGrid(previewDays = null) { + const grid = document.getElementById('sl-cal-grid'); + const monthLabel = document.getElementById('sl-cal-month-label'); + if (!grid) return; + + if (monthLabel) { + monthLabel.textContent = `${MONTHS_LONG[calendarMonth.getMonth()]} ${calendarMonth.getFullYear()}`; + } + + const selected = previewDays ?? new Set(getSelectedDays()); + const today = todayKey(); + const first = startOfMonth(calendarMonth); + const gridStart = startOfWeekMonday(first); + + const cells = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i)); + while (cells.length > 35 && cells.slice(-7).every((d) => d.getMonth() !== first.getMonth())) { + cells.splice(-7); + } + + grid.innerHTML = cells.map((day) => { + const dk = dateKey(day); + const inMonth = day.getMonth() === first.getMonth(); + const isSel = selected.has(dk); + const isToday = dk === today; + + let bg, borderColor, color, opacity, borderClass; + if (isSel) { + bg = '#393937'; borderColor = '#787876'; color = '#f2efe8'; opacity = '1'; borderClass = 'border'; + } else if (!inMonth) { + bg = 'transparent'; borderColor = 'transparent'; color = '#5a5752'; opacity = '0.38'; borderClass = 'border-0'; + } else { + bg = '#272622'; borderColor = '#34312c'; color = '#d7d2c8'; opacity = '1'; borderClass = 'border'; + } + + const dot = isToday && !isSel + ? `` + : ''; + + return ``; + }).join(''); +} + +function bindCalendarEvents() { + const grid = document.getElementById('sl-cal-grid'); + if (!grid) return; + + let dragStartDk = null; + let dragCurrentDk = null; + let dragging = false; + + grid.addEventListener('pointerdown', (e) => { + e.stopPropagation(); + const btn = e.target.closest('.sl-cal-day'); + if (!btn) return; + dragStartDk = btn.dataset.dk; + dragCurrentDk = btn.dataset.dk; + dragging = true; + grid.setPointerCapture(e.pointerId); + renderCalendarGrid(new Set([dragStartDk])); + }); + + grid.addEventListener('pointermove', (e) => { + if (!dragging || !dragStartDk) return; + e.preventDefault(); + const el = document.elementFromPoint(e.clientX, e.clientY); + const btn = el?.closest('.sl-cal-day'); + if (!btn?.dataset.dk || btn.dataset.dk === dragCurrentDk) return; + dragCurrentDk = btn.dataset.dk; + renderCalendarGrid(new Set(getDayRange(dragStartDk, dragCurrentDk))); + }); + + grid.addEventListener('pointerup', (e) => { + if (!dragging) return; + dragging = false; + const range = getDayRange(dragStartDk, dragCurrentDk); + dragStartDk = null; + dragCurrentDk = null; + setSelectedDays(range); + expandedIngredientId = null; + updatePillLabel(); + renderCalendarGrid(); + renderAll(); + }); + + grid.addEventListener('pointercancel', () => { + dragging = false; + dragStartDk = null; + dragCurrentDk = null; + renderCalendarGrid(); + }); + + // Prevent bubbled click events (generated after pointerup) from closing the popup + grid.addEventListener('click', (e) => e.stopPropagation()); +} + +function updatePillLabel() { + const el = document.getElementById('sl-range-label'); + if (el) el.textContent = formatRangePill(getSelectedDays()); +} + +function openCalendar() { + calendarOpen = true; + calendarMonth = startOfMonth(new Date()); + const popup = document.getElementById('sl-calendar-popup'); + const chevron = document.getElementById('sl-range-chevron'); + const pill = document.getElementById('sl-range-pill'); + if (popup) { + popup.style.pointerEvents = 'auto'; + popup.style.opacity = '1'; + popup.style.transform = 'translateY(0) scale(1)'; + } + if (chevron) chevron.style.transform = 'rotate(180deg)'; + if (pill) { + pill.style.background = '#23221e'; + pill.style.borderColor = '#787876'; + } + renderCalendarGrid(); +} + +function closeCalendar() { + calendarOpen = false; + const popup = document.getElementById('sl-calendar-popup'); + const chevron = document.getElementById('sl-range-chevron'); + const pill = document.getElementById('sl-range-pill'); + if (popup) { + popup.style.pointerEvents = 'none'; + popup.style.opacity = '0'; + popup.style.transform = 'translateY(-6px) scale(0.98)'; + } + if (chevron) chevron.style.transform = ''; + if (pill) { + pill.style.background = '#393937'; + pill.style.borderColor = '#41423f'; + } +} + +function toggleCalendar() { + calendarOpen ? closeCalendar() : openCalendar(); +} + +/* ══════════════════════ ITEM ROWS ══════════════════════ */ + +function activeItemHtml(item, isPartial) { + const def = INGREDIENTS[item.ingredientId]; + const icon = CATEGORY_ICONS[def?.category] || 'fa-jar'; + const image = def?.image; + const mediaFit = image?.endsWith('.svg') ? 'object-contain' : 'object-cover'; const mediaHtml = image ? `` : `
`; + const isExpanded = expandedIngredientId === item.ingredientId; + const step = stepForUnit(item.unit); + const stepAmt = isExpanded ? expandedAmount : Math.max(step, Math.round(item.shortfall / step) * step); + return ` -
- - ${mediaHtml} -
- ${esc(item.name)} +
+
+ +
+
+
+ ${mediaHtml} +
+ ${esc(item.name)} + ${isPartial ? `część już w spiżarni` : ''} +
+ ${esc(formatQty(item.shortfall))} ${esc(unitLabel(item.unit))} + +
+
+
+ + ${esc(formatQty(stepAmt))} + ${esc(unitLabel(item.unit))} + +
+ +
+
- ${esc(formatQty(item.amount))} ${esc(unitLabel(item.unit))} -
`; } +function boughtItemHtml(entry) { + const def = INGREDIENTS[entry.ingredientId]; + const icon = CATEGORY_ICONS[def?.category] || 'fa-jar'; + const image = def?.image; + const mediaFit = image?.endsWith('.svg') ? 'object-contain' : 'object-cover'; + const mediaHtml = image + ? `` + : `
`; + + return ` +
+
+ +
+
+
+ +
+ ${mediaHtml} +
+ ${esc(entry.name)} +
+ ${esc(formatQty(entry.addedAmount))} ${esc(unitLabel(entry.unit))} +
+
`; +} + +/* ══════════════════════ SWIPE ══════════════════════ */ + +function attachSwipe(container, opts) { + const inner = container.querySelector('.sl-swipe-inner'); + if (!inner) return; + let startX = 0, startY = 0, dx = 0, tracking = false, decided = false, goingH = false; + + container.addEventListener('pointerdown', (e) => { + startX = e.clientX; startY = e.clientY; dx = 0; + tracking = true; decided = false; goingH = false; + inner.style.transition = 'none'; + container.setPointerCapture(e.pointerId); + }); + + container.addEventListener('pointermove', (e) => { + if (!tracking) return; + const ddx = e.clientX - startX; + const ddy = e.clientY - startY; + if (!decided) { + if (Math.abs(ddx) < 6 && Math.abs(ddy) < 6) return; + decided = true; + goingH = Math.abs(ddx) > Math.abs(ddy); + } + if (!goingH) { tracking = false; inner.style.transform = ''; return; } + dx = ddx; + if (dx > 0 && opts.onRight) inner.style.transform = `translateX(${Math.min(dx, 90)}px)`; + else if (dx < 0 && opts.onLeft) inner.style.transform = `translateX(${Math.max(dx, -90)}px)`; + }); + + const finish = () => { + if (!tracking) return; + tracking = false; + inner.style.transition = 'transform 0.2s ease'; + const thr = 65; + if (dx > thr && opts.onRight) { + inner.style.transform = 'translateX(120%)'; + setTimeout(opts.onRight, 180); + } else if (dx < -thr && opts.onLeft) { + inner.style.transform = 'translateX(-120%)'; + setTimeout(opts.onLeft, 180); + } else { + inner.style.transform = ''; + } + dx = 0; + }; + + container.addEventListener('pointerup', finish); + container.addEventListener('pointercancel', () => { + tracking = false; + inner.style.transition = 'transform 0.2s ease'; + inner.style.transform = ''; + dx = 0; + }); +} + +/* ══════════════════════ EXPAND / STEPPER ══════════════════════ */ + +function toggleExpand(ingredientId, unit, shortfall) { + if (expandedIngredientId === ingredientId) { + expandedIngredientId = null; + } else { + expandedIngredientId = ingredientId; + const step = stepForUnit(unit); + expandedAmount = Math.max(step, Math.round(shortfall / step) * step); + } + renderBoard(); +} + +function updateExpandedAmountDisplay() { + const el = document.querySelector(`[data-step-for="${expandedIngredientId}"] .sl-exp-amount`); + if (el) el.textContent = formatQty(expandedAmount); +} + +/* ══════════════════════ BUY / UNDO ══════════════════════ */ + +function buyItem(ingredientId, unit, amount) { + const def = INGREDIENTS[ingredientId]; + if (!def) return; + addAmountToPantry(ingredientId, undefined, amount); + addSessionLogEntry({ ingredientId, name: def.name, addedAmount: amount, unit, category: def.category || 'inne' }); + expandedIngredientId = null; + renderAll(); + if (typeof window.refreshPantry === 'function') window.refreshPantry(); +} + +function undoBoughtEntry(entryId) { + const log = getSessionLog(); + const entry = log.find((e) => e.id === entryId); + if (!entry) return; + subtractFromPantry(entry.ingredientId, entry.productId, entry.addedAmount); + removeSessionLogEntry(entryId); + renderAll(); + if (typeof window.refreshPantry === 'function') window.refreshPantry(); + showAppToast('Cofnięto zakup'); +} + +/* ══════════════════════ RENDERING ══════════════════════ */ + +function renderProgress(activeItems, sessionLog) { + const activeIds = new Set(activeItems.map((i) => i.ingredientId)); + const coveredIds = new Set(sessionLog.filter((e) => !activeIds.has(e.ingredientId)).map((e) => e.ingredientId)); + const bought = coveredIds.size; + const total = activeItems.length + bought; + + const textEl = document.getElementById('sl-progress-text'); + const barEl = document.getElementById('sl-progress-bar'); + if (textEl) textEl.textContent = `${bought}/${total}`; + if (barEl) barEl.style.width = total > 0 ? `${Math.round((bought / total) * 100)}%` : '0%'; +} + function renderBoard() { const root = document.getElementById('sl-board'); if (!root) return; - const items = getKitchenItems(); - - if (items.length === 0) { + const selectedDays = getSelectedDays(); + if (selectedDays.length === 0) { root.innerHTML = `
- +
-

Lista jest pusta

-

Kliknij „Generuj braki z planera" aby dodać składniki na bieżący tydzień.

+

Wybierz dni

+

Otwórz kalendarz i zaznacz dni, na które chcesz zrobić zakupy.

`; return; } - const groups = groupItemsByCategory(items); - const html = groups.map(({ cat, items: catItems }) => { + const activeItems = computeActiveItems(); + const sessionLog = getSessionLog(); + const sessionIds = new Set(sessionLog.map((e) => e.ingredientId)); + + if (activeItems.length === 0) { + root.innerHTML = ` +
+
+ +
+

Wszystko masz

+

Spiżarnia pokrywa zapotrzebowanie na wybrane dni.

+
`; + return; + } + + const groups = groupByCategory(activeItems); + root.innerHTML = groups.map(({ cat, items: catItems }) => { const icon = CATEGORY_ICONS[cat] || 'fa-jar'; - const uncheckedCount = catItems.filter((i) => !i.checked).length; return `

${esc(categoryLabel(cat))}

- ${uncheckedCount}/${catItems.length} + ${catItems.length}
- ${catItems.map((item) => itemRowHtml(item)).join('')} + ${catItems.map((item) => activeItemHtml(item, sessionIds.has(item.ingredientId))).join('')}
`; }).join(''); - root.innerHTML = html; - bindRowEvents(root); + bindActiveRowEvents(root, activeItems); } -/* ══════════════════════ EVENTS ══════════════════════ */ +function renderBought() { + const sessionLog = getSessionLog(); + const section = document.getElementById('sl-bought-section'); + const countEl = document.getElementById('sl-bought-count'); + const list = document.getElementById('sl-bought-list'); + if (!section || !list || !countEl) return; -function bindRowEvents(root) { - root.querySelectorAll('.sl-row').forEach((row) => { - const id = row.dataset.id; + if (sessionLog.length === 0) { section.classList.add('hidden'); return; } - row.querySelector('.sl-check')?.addEventListener('click', () => { - handleToggle(id); - }); + section.classList.remove('hidden'); + countEl.textContent = String(sessionLog.length); - row.querySelector('.sl-remove')?.addEventListener('click', () => { - removeItemFromList(KITCHEN_LIST_ID, id); - renderBoard(); - updateBadge(); - }); + const chevron = document.getElementById('sl-bought-chevron'); + if (chevron) chevron.style.transform = boughtSectionOpen ? 'rotate(90deg)' : ''; + + if (!boughtSectionOpen) { list.classList.add('hidden'); return; } + + list.classList.remove('hidden'); + list.innerHTML = [...sessionLog].reverse().map((e) => boughtItemHtml(e)).join(''); + list.querySelectorAll('.sl-swipe-wrap').forEach((wrap) => { + const entryId = wrap.querySelector('.sl-swipe-inner')?.dataset.entryId; + if (!entryId) return; + attachSwipe(wrap, { onLeft: () => undoBoughtEntry(entryId) }); }); } -function handleToggle(itemId) { - const state = loadShoppingState(); - const list = state.lists.find((l) => l.id === KITCHEN_LIST_ID); - if (!list) return; - const item = list.items.find((i) => i.id === itemId); - if (!item) return; - - const wasChecked = item.checked; - item.checked = !wasChecked; - saveShoppingState(state); - - if (!wasChecked) { - // Just checked → apply to pantry - applyItemToPantry(item); - } - +function renderAll() { + const activeItems = computeActiveItems(); + const sessionLog = getSessionLog(); + renderProgress(activeItems, sessionLog); renderBoard(); - updateBadge(); - - if (typeof window.refreshPantry === 'function') window.refreshPantry(); + renderBought(); } -function applyItemToPantry(item) { - const def = INGREDIENTS[item.ingredientId]; - if (!def) return; +/* ══════════════════════ ACTIVE ROW EVENTS ══════════════════════ */ - const pantry = loadPantry(); +function bindActiveRowEvents(root, activeItems) { + root.querySelectorAll('.sl-swipe-wrap').forEach((wrap) => { + const inner = wrap.querySelector('.sl-swipe-inner'); + const ingredientId = inner?.dataset.id; + const unit = inner?.dataset.unit; + const shortfall = parseFloat(inner?.dataset.shortfall || '0'); + if (!ingredientId) return; - if (item.productId) { - let val = pantry[item.ingredientId]; - if (!val || typeof val === 'number') { - val = { items: [], _total: 0 }; - pantry[item.ingredientId] = val; - } - const idx = val.items.findIndex((i) => i.productId === item.productId); - if (idx >= 0) val.items[idx].qty = Math.round((val.items[idx].qty + item.amount) * 1000) / 1000; - else val.items.push({ productId: item.productId, qty: Math.round(item.amount * 1000) / 1000 }); - val._total = Math.round(val.items.reduce((s, i) => s + i.qty, 0) * 1000) / 1000; - } else { - const cur = typeof pantry[item.ingredientId] === 'number' ? pantry[item.ingredientId] : 0; - pantry[item.ingredientId] = Math.round((cur + item.amount) * 1000) / 1000; - } + const item = activeItems.find((i) => i.ingredientId === ingredientId); + attachSwipe(wrap, { onRight: item ? () => buyItem(item.ingredientId, item.unit, item.shortfall) : undefined }); - savePantry(pantry); -} + inner.querySelector('.sl-item-main')?.addEventListener('click', () => toggleExpand(ingredientId, unit, shortfall)); -function handleGenerate() { - const plans = loadPlans(); - const weekStart = startOfWeekMonday(new Date()); - const needLines = aggregateWeekIngredientNeed(plans, weekStart); - const pantry = loadPantry(); - const shortfalls = computeShortfalls(needLines, pantry); + inner.querySelector('.sl-step-minus')?.addEventListener('click', (e) => { + e.stopPropagation(); + const step = stepForUnit(unit); + expandedAmount = Math.max(step, expandedAmount - step); + updateExpandedAmountDisplay(); + }); - if (shortfalls.length === 0) { - showAppToast('Wszystko masz w spiżarni!'); - return; - } + inner.querySelector('.sl-step-plus')?.addEventListener('click', (e) => { + e.stopPropagation(); + expandedAmount += stepForUnit(unit); + updateExpandedAmountDisplay(); + }); - const lines = shortfalls.map((s) => ({ - ingredientId: s.ingredientId, - amount: s.shortfall, - unit: s.unit, - name: s.name, - category: s.category, - sourceNote: 'Z planera', - })); - - addOrMergeShoppingLines(lines, KITCHEN_LIST_ID); - renderBoard(); - updateBadge(); - showAppToast(`Dodano ${shortfalls.length} pozycji z planera`); -} - -function handleClearChecked() { - clearCheckedInList(KITCHEN_LIST_ID); - renderBoard(); - updateBadge(); -} - -/* ══════════════════════ BADGE ══════════════════════ */ - -function updateBadge() { - const items = getKitchenItems(); - const uncheckedCount = items.filter((i) => !i.checked).length; - const badge = document.getElementById('nav-shopping-badge'); - if (!badge) return; - if (uncheckedCount > 0) { - badge.textContent = String(uncheckedCount > 99 ? '99+' : uncheckedCount); - badge.classList.remove('hidden'); - } else { - badge.classList.add('hidden'); - } + inner.querySelector('.sl-step-confirm')?.addEventListener('click', (e) => { + e.stopPropagation(); + if (expandedAmount > 0) buyItem(ingredientId, unit, expandedAmount); + }); + }); } /* ══════════════════════ PUBLIC API ══════════════════════ */ export function refreshShoppingList() { - renderBoard(); - updateBadge(); + updatePillLabel(); + renderAll(); } export function setupShoppingList() { - renderBoard(); - updateBadge(); + if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays()); - document.getElementById('sl-generate')?.addEventListener('click', handleGenerate); - document.getElementById('sl-clear-checked')?.addEventListener('click', handleClearChecked); + updatePillLabel(); + renderAll(); + + bindCalendarEvents(); + + document.getElementById('sl-range-pill')?.addEventListener('click', (e) => { + e.stopPropagation(); + toggleCalendar(); + }); + + document.addEventListener('click', (e) => { + if (!calendarOpen) return; + const popup = document.getElementById('sl-calendar-popup'); + const pill = document.getElementById('sl-range-pill'); + if (popup && !popup.contains(e.target) && pill && !pill.contains(e.target)) { + closeCalendar(); + } + }); + + document.getElementById('sl-cal-prev')?.addEventListener('click', (e) => { + e.stopPropagation(); + calendarMonth = startOfMonth(new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() - 1, 1)); + renderCalendarGrid(); + }); + + document.getElementById('sl-cal-next')?.addEventListener('click', (e) => { + e.stopPropagation(); + calendarMonth = startOfMonth(new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() + 1, 1)); + renderCalendarGrid(); + }); + + + document.getElementById('sl-clear-session')?.addEventListener('click', () => { + clearSessionLog(); + renderAll(); + }); + + document.getElementById('sl-bought-toggle')?.addEventListener('click', () => { + boughtSectionOpen = !boughtSectionOpen; + renderBought(); + }); window.refreshShoppingList = refreshShoppingList; }