diff --git a/js/views/ShoppingList.js b/js/views/ShoppingList.js index be97a1f..ab9e1f3 100644 --- a/js/views/ShoppingList.js +++ b/js/views/ShoppingList.js @@ -57,7 +57,7 @@ const CALENDAR_DIM_TEXT = 'rgb(var(--text-faint-rgb))'; const CALENDAR_DIM_OPACITY = '0.58'; /* ── module state ── */ -let boughtSectionOpen = false; +let boughtPopupOpen = false; let expandedIngredientId = null; let expandedAmount = 0; let calendarOpen = false; @@ -122,13 +122,17 @@ export function getShoppingListHTML() {
- -
+ +

Lista zakupów

+
@@ -151,18 +155,18 @@ export function getShoppingListHTML() {
-
- -
- Kupione -
-
-
+ +
+
+
+ Kupione (0) + +
+
-
@@ -170,15 +174,6 @@ export function getShoppingListHTML() {
- - -
`; } @@ -302,6 +297,7 @@ function updatePillLabel() { } function openCalendar() { + if (boughtPopupOpen) closeBoughtPopup(); calendarOpen = true; calendarMonth = startOfMonth(new Date()); const popup = document.getElementById('sl-calendar-popup'); @@ -341,6 +337,41 @@ function toggleCalendar() { calendarOpen ? closeCalendar() : openCalendar(); } +function openBoughtPopup() { + if (calendarOpen) closeCalendar(); + boughtPopupOpen = true; + const popup = document.getElementById('sl-bought-popup'); + const btn = document.getElementById('sl-bought-btn'); + if (popup) { + popup.style.pointerEvents = 'auto'; + popup.style.opacity = '1'; + popup.style.transform = 'translateY(0) scale(1)'; + } + if (btn) { + btn.style.background = 'rgb(var(--sunken-rgb))'; + btn.style.borderColor = 'rgb(var(--border-input-rgb))'; + } +} + +function closeBoughtPopup() { + boughtPopupOpen = false; + const popup = document.getElementById('sl-bought-popup'); + const btn = document.getElementById('sl-bought-btn'); + if (popup) { + popup.style.pointerEvents = 'none'; + popup.style.opacity = '0'; + popup.style.transform = 'translateY(-6px) scale(0.98)'; + } + if (btn) { + btn.style.background = 'rgb(var(--card-rgb))'; + btn.style.borderColor = 'rgb(var(--border-card-rgb))'; + } +} + +function toggleBoughtPopup() { + boughtPopupOpen ? closeBoughtPopup() : openBoughtPopup(); +} + /* ══════════════════════ ITEM ROWS ══════════════════════ */ function activeItemHtml(item) { @@ -397,23 +428,20 @@ function boughtItemHtml(entry) { const image = def?.image; const mediaFit = image?.endsWith('.svg') ? 'object-contain' : 'object-cover'; const mediaHtml = image - ? `` - : `
`; + ? `` + : `
`; return `
-
-
- -
+
${mediaHtml} -
- ${esc(entry.name)} +
+ ${esc(entry.name)}
- ${esc(formatQty(entry.addedAmount))} ${esc(unitLabel(entry.unit))} + ${esc(formatQty(entry.addedAmount))} ${esc(unitLabel(entry.unit))}
`; } @@ -516,14 +544,15 @@ function undoBoughtEntry(entryId) { /* ══════════════════════ RENDERING ══════════════════════ */ -function renderProgress(activeItems, sessionLog) { - const touchedIds = new Set(sessionLog.map((e) => e.ingredientId)); - const bought = touchedIds.size; - const untouched = activeItems.filter((i) => !touchedIds.has(i.ingredientId)).length; - const total = bought + untouched; - - const barEl = document.getElementById('sl-progress-bar'); - if (barEl) barEl.style.width = total > 0 ? `${Math.round((bought / total) * 100)}%` : '0%'; +function renderBoughtBadge(count) { + const badge = document.getElementById('sl-bought-badge'); + if (!badge) return; + if (count > 0) { + badge.textContent = String(count); + badge.style.display = 'flex'; + } else { + badge.style.display = 'none'; + } } function renderBoard() { @@ -576,22 +605,17 @@ function renderBoard() { function renderBought() { const sessionLog = getSessionLog(); - const section = document.getElementById('sl-bought-section'); - const countEl = document.getElementById('sl-bought-count'); + const countEl = document.getElementById('sl-bought-popup-count'); const list = document.getElementById('sl-bought-list'); - if (!section || !list || !countEl) return; + if (!list || !countEl) return; - if (sessionLog.length === 0) { section.classList.add('hidden'); return; } - - section.classList.remove('hidden'); countEl.textContent = String(sessionLog.length); - const chevron = document.getElementById('sl-bought-chevron'); - if (chevron) chevron.style.transform = boughtSectionOpen ? 'rotate(90deg)' : ''; + if (sessionLog.length === 0) { + list.innerHTML = `
Brak kupionych
`; + return; + } - 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; @@ -601,9 +625,8 @@ function renderBought() { } function renderAll() { - const activeItems = computeActiveItems(); const sessionLog = getSessionLog(); - renderProgress(activeItems, sessionLog); + renderBoughtBadge(sessionLog.length); renderBoard(); renderBought(); } @@ -663,12 +686,25 @@ export function setupShoppingList() { toggleCalendar(); }); + document.getElementById('sl-bought-btn')?.addEventListener('click', (e) => { + e.stopPropagation(); + toggleBoughtPopup(); + }); + 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(); + if (calendarOpen) { + 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(); + } + } + if (boughtPopupOpen) { + const popup = document.getElementById('sl-bought-popup'); + const btn = document.getElementById('sl-bought-btn'); + if (popup && !popup.contains(e.target) && btn && !btn.contains(e.target)) { + closeBoughtPopup(); + } } }); @@ -685,15 +721,11 @@ export function setupShoppingList() { }); - document.getElementById('sl-clear-session')?.addEventListener('click', () => { + document.getElementById('sl-clear-session')?.addEventListener('click', (e) => { + e.stopPropagation(); clearSessionLog(); renderAll(); }); - document.getElementById('sl-bought-toggle')?.addEventListener('click', () => { - boughtSectionOpen = !boughtSectionOpen; - renderBought(); - }); - window.refreshShoppingList = refreshShoppingList; }