Added meal planner, pantry and shopping list
This commit is contained in:
464
js/views/Pantry.js
Normal file
464
js/views/Pantry.js
Normal file
@@ -0,0 +1,464 @@
|
||||
import {
|
||||
INGREDIENTS,
|
||||
CATEGORY_LABELS,
|
||||
pantryQtyStep,
|
||||
} from '../data/catalog.js';
|
||||
import { addIngredientToKitchenList, categoryLabel, loadPantry, setPantryQty } from '../services/pantryShopping.js';
|
||||
import { showAppToast } from '../ui/toast.js';
|
||||
|
||||
/* ── helpers ── */
|
||||
|
||||
function esc(s) {
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function unitLabel(u) {
|
||||
return u === 'szt' ? 'szt.' : u;
|
||||
}
|
||||
|
||||
function normalizeSearch(q) {
|
||||
return String(q).trim().toLowerCase();
|
||||
}
|
||||
|
||||
const CATEGORY_ICONS = {
|
||||
pieczywo: 'fa-bread-slice',
|
||||
nabial: 'fa-cheese',
|
||||
mieso_ryby: 'fa-drumstick-bite',
|
||||
warzywa: 'fa-carrot',
|
||||
owoce: 'fa-apple-whole',
|
||||
suche: 'fa-wheat-awn',
|
||||
przyprawy: 'fa-leaf',
|
||||
inne: 'fa-jar',
|
||||
};
|
||||
|
||||
/* ── state ── */
|
||||
|
||||
let showOnlyStock = false;
|
||||
let editingId = null;
|
||||
/** @type {Set<string>} */
|
||||
const selectedCategories = new Set();
|
||||
|
||||
let editShopStep = 1;
|
||||
let editShopUsesPacks = false;
|
||||
|
||||
const BOTTOM = '5.25rem';
|
||||
const HIDDEN_Y = `translateY(calc(100% + ${BOTTOM}))`;
|
||||
|
||||
/* ══════════════════════ HTML SHELL ══════════════════════ */
|
||||
|
||||
export function getPantryHTML() {
|
||||
return `
|
||||
<div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24">
|
||||
<div class="shrink-0 bg-white border-b border-gray-100 mt-3 px-4 pt-2 pb-2.5 space-y-2">
|
||||
<div class="flex items-center gap-2.5 bg-gray-100 rounded-2xl px-3.5 py-2.5 focus-within:ring-2 focus-within:ring-gray-900/10 transition-all">
|
||||
<i class="fas fa-search text-gray-400 text-xs"></i>
|
||||
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj produktu…"
|
||||
class="flex-1 bg-transparent outline-none text-sm text-gray-800 placeholder-gray-400" />
|
||||
</div>
|
||||
<div id="pantry-category-chips" class="flex gap-2 overflow-x-auto no-scrollbar -mx-1 px-1 pb-0.5"></div>
|
||||
<div class="flex items-center justify-end">
|
||||
<label class="flex items-center gap-2 cursor-pointer select-none">
|
||||
<span class="text-xs font-medium text-gray-500">Tylko na stanie</span>
|
||||
<button type="button" id="pantry-stock-toggle" role="switch" aria-checked="false"
|
||||
class="relative w-10 h-[22px] rounded-full bg-gray-200 transition-colors duration-200 shrink-0">
|
||||
<span class="absolute left-0.5 top-0.5 w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-transform duration-200"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar">
|
||||
<div id="pantry-board" class="px-4 pt-3 pb-4 space-y-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── product sheet ── -->
|
||||
<div id="pv2-edit-bg" class="absolute inset-0 z-[38] bg-black/40 hidden opacity-0 transition-opacity duration-200"></div>
|
||||
<div id="pv2-edit-sheet" class="absolute left-0 right-0 z-[40] bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] px-5 pt-2 pb-4 flex flex-col gap-2.5 max-h-[75%] min-h-0 overflow-y-auto no-scrollbar"
|
||||
style="bottom:${BOTTOM};transform:${HIDDEN_Y};transition:transform 300ms cubic-bezier(.32,.72,0,1)">
|
||||
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto shrink-0"></div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<h2 id="pv2-edit-name" class="text-[15px] font-bold text-gray-900 leading-snug"></h2>
|
||||
<p id="pv2-edit-meta" class="text-[11px] text-gray-500"></p>
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 flex items-center gap-2">
|
||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Zapas</span>
|
||||
<button type="button" id="pv2-edit-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
|
||||
<i class="fas fa-minus text-xs"></i>
|
||||
</button>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<input type="number" id="pv2-edit-qty" min="0" step="1" inputmode="decimal"
|
||||
class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="0" />
|
||||
<span id="pv2-edit-unit" class="text-xs text-gray-400 font-medium"></span>
|
||||
</div>
|
||||
<button type="button" id="pv2-edit-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
|
||||
<i class="fas fa-plus text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-100 shrink-0"></div>
|
||||
|
||||
<div class="shrink-0 space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Lista</span>
|
||||
<button type="button" id="pv2-shop-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
|
||||
<i class="fas fa-minus text-xs"></i>
|
||||
</button>
|
||||
<div class="flex items-baseline gap-0.5">
|
||||
<input type="number" id="pv2-shop-qty" min="1" step="1" inputmode="numeric"
|
||||
class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="1" />
|
||||
<span id="pv2-shop-unit" class="text-xs text-gray-400 font-medium"></span>
|
||||
</div>
|
||||
<button type="button" id="pv2-shop-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
|
||||
<i class="fas fa-plus text-xs"></i>
|
||||
</button>
|
||||
<button type="button" id="pv2-shop-add" class="ml-auto shrink-0 px-3.5 py-2 rounded-xl bg-gray-900 text-white text-[11px] font-semibold hover:bg-black transition-colors active:scale-95">
|
||||
<i class="fas fa-cart-plus text-[9px] mr-1"></i>Dodaj
|
||||
</button>
|
||||
</div>
|
||||
<p id="pv2-shop-hint" class="text-[10px] text-gray-400 pl-[3.5rem]"></p>
|
||||
</div>
|
||||
|
||||
<div id="pv2-edit-nutrition" class="shrink-0"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ══════════════════════ CATEGORY CHIPS (multi-select) ══════════════════════ */
|
||||
|
||||
function allCategoryKeys() {
|
||||
const s = new Set();
|
||||
Object.values(INGREDIENTS).forEach(d => s.add(d.category));
|
||||
return [...s].sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)));
|
||||
}
|
||||
|
||||
function renderCategoryChips() {
|
||||
const wrap = document.getElementById('pantry-category-chips');
|
||||
if (!wrap) return;
|
||||
|
||||
const keys = allCategoryKeys();
|
||||
wrap.innerHTML = keys.map(k => {
|
||||
const active = selectedCategories.has(k);
|
||||
const icon = CATEGORY_ICONS[k] || 'fa-jar';
|
||||
const cls = active
|
||||
? 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-900 text-white transition-colors'
|
||||
: 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors';
|
||||
return `<button type="button" data-cat="${esc(k)}" class="pv2-cat-chip ${cls}"><i class="fas ${icon} text-[10px]"></i>${esc(categoryLabel(k))}</button>`;
|
||||
}).join('');
|
||||
|
||||
wrap.querySelectorAll('.pv2-cat-chip').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const cat = btn.dataset.cat;
|
||||
if (selectedCategories.has(cat)) selectedCategories.delete(cat);
|
||||
else selectedCategories.add(cat);
|
||||
renderCategoryChips();
|
||||
renderBoard();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ══════════════════════ BOARD RENDERING ══════════════════════ */
|
||||
|
||||
function getFilteredIds(searchRaw) {
|
||||
const q = normalizeSearch(searchRaw);
|
||||
return Object.keys(INGREDIENTS).filter(id => {
|
||||
const d = INGREDIENTS[id];
|
||||
if (selectedCategories.size > 0 && !selectedCategories.has(d.category)) return false;
|
||||
if (!q) return true;
|
||||
return d.name.toLowerCase().includes(q) || (CATEGORY_LABELS[d.category] || '').toLowerCase().includes(q);
|
||||
}).sort((a, b) => INGREDIENTS[a].name.localeCompare(INGREDIENTS[b].name, 'pl'));
|
||||
}
|
||||
|
||||
function chipHtml(id, pantry) {
|
||||
const def = INGREDIENTS[id];
|
||||
const qty = Number(pantry[id]) || 0;
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
|
||||
if (qty > 0) {
|
||||
return `<button type="button" class="pv2-chip inline-flex flex-col items-start px-3.5 py-2.5 rounded-xl bg-emerald-50 border border-emerald-200/80 text-left hover:bg-emerald-100/80 transition-colors active:scale-[0.96]" data-id="${esc(id)}">
|
||||
<span class="text-[13px] font-semibold text-gray-900 leading-tight whitespace-nowrap">${esc(def.name)}</span>
|
||||
<span class="text-[11px] text-emerald-600 font-semibold tabular-nums leading-tight mt-0.5">${Math.round(qty)} ${esc(u)}</span>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
return `<button type="button" class="pv2-chip inline-flex items-center px-3.5 py-2.5 rounded-xl border border-dashed border-gray-200 text-left hover:border-gray-300 hover:bg-white transition-colors active:scale-[0.96] group" data-id="${esc(id)}">
|
||||
<span class="text-[13px] font-medium text-gray-400 group-hover:text-gray-600 whitespace-nowrap transition-colors">${esc(def.name)}</span>
|
||||
<i class="fas fa-plus text-[8px] text-gray-300 group-hover:text-gray-500 ml-1.5 transition-colors"></i>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
function groupByCategory(ids) {
|
||||
/** @type {Map<string, string[]>} */
|
||||
const groups = new Map();
|
||||
for (const id of ids) {
|
||||
const cat = INGREDIENTS[id].category;
|
||||
if (!groups.has(cat)) groups.set(cat, []);
|
||||
groups.get(cat).push(id);
|
||||
}
|
||||
return [...groups.keys()]
|
||||
.sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)))
|
||||
.map(cat => ({ cat, ids: groups.get(cat) }));
|
||||
}
|
||||
|
||||
function renderBoard() {
|
||||
const root = document.getElementById('pantry-board');
|
||||
if (!root) return;
|
||||
|
||||
const q = document.getElementById('pantry-search')?.value || '';
|
||||
const pantry = loadPantry();
|
||||
const allFiltered = getFilteredIds(q);
|
||||
const visible = showOnlyStock
|
||||
? allFiltered.filter(id => (Number(pantry[id]) || 0) > 0)
|
||||
: allFiltered;
|
||||
|
||||
if (visible.length === 0) {
|
||||
root.innerHTML = showOnlyStock
|
||||
? `<div class="flex flex-col items-center justify-center py-16 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
|
||||
<i class="fas fa-box-open text-2xl text-gray-300"></i>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-700">Nic na stanie</p>
|
||||
<p class="text-xs text-gray-500 mt-1 max-w-[220px] leading-relaxed">Wyłącz filtr, aby zobaczyć cały katalog produktów</p>
|
||||
</div>`
|
||||
: `<p class="text-sm text-gray-500 text-center py-10">Brak wyników — zmień wyszukiwanie lub filtry.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const groups = groupByCategory(visible);
|
||||
let html = '';
|
||||
for (const { cat, ids } of groups) {
|
||||
const icon = CATEGORY_ICONS[cat] || 'fa-jar';
|
||||
html += `
|
||||
<div class="mb-4 last:mb-0">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-0.5">
|
||||
<i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">${ids.map(id => chipHtml(id, pantry)).join('')}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
root.innerHTML = html;
|
||||
|
||||
root.querySelectorAll('.pv2-chip').forEach(btn => {
|
||||
btn.addEventListener('click', () => openEditSheet(btn.dataset.id));
|
||||
});
|
||||
}
|
||||
|
||||
/* ══════════════════════ STOCK TOGGLE ══════════════════════ */
|
||||
|
||||
function updateToggleVisuals() {
|
||||
const btn = document.getElementById('pantry-stock-toggle');
|
||||
if (!btn) return;
|
||||
const thumb = btn.querySelector('span');
|
||||
btn.setAttribute('aria-checked', String(showOnlyStock));
|
||||
if (showOnlyStock) {
|
||||
btn.classList.remove('bg-gray-200');
|
||||
btn.classList.add('bg-emerald-500');
|
||||
thumb?.classList.add('translate-x-[18px]');
|
||||
} else {
|
||||
btn.classList.add('bg-gray-200');
|
||||
btn.classList.remove('bg-emerald-500');
|
||||
thumb?.classList.remove('translate-x-[18px]');
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════ EDIT BOTTOM SHEET ══════════════════════ */
|
||||
|
||||
function openEditSheet(ingredientId) {
|
||||
const def = INGREDIENTS[ingredientId];
|
||||
if (!def) return;
|
||||
editingId = ingredientId;
|
||||
|
||||
const pantry = loadPantry();
|
||||
const qty = Number(pantry[ingredientId]) || 0;
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
const step = pantryQtyStep(ingredientId);
|
||||
const pack = def.purchasePack;
|
||||
|
||||
const nameEl = document.getElementById('pv2-edit-name');
|
||||
if (nameEl) nameEl.textContent = def.name;
|
||||
|
||||
const metaEl = document.getElementById('pv2-edit-meta');
|
||||
if (metaEl) {
|
||||
let meta = categoryLabel(def.category);
|
||||
if (pack) meta += ` · ${pack.label || `${pack.amount} ${u}`}`;
|
||||
metaEl.textContent = meta;
|
||||
}
|
||||
|
||||
const qtyEl = document.getElementById('pv2-edit-qty');
|
||||
if (qtyEl) qtyEl.value = qty > 0 ? String(Math.round(qty)) : '0';
|
||||
|
||||
const unitEl = document.getElementById('pv2-edit-unit');
|
||||
if (unitEl) unitEl.textContent = u;
|
||||
|
||||
editShopUsesPacks = Boolean(pack && pack.amount > 0);
|
||||
editShopStep = editShopUsesPacks ? 1 : step;
|
||||
|
||||
const shopQtyEl = document.getElementById('pv2-shop-qty');
|
||||
if (shopQtyEl) shopQtyEl.value = String(editShopStep);
|
||||
|
||||
const shopUnitEl = document.getElementById('pv2-shop-unit');
|
||||
if (shopUnitEl) shopUnitEl.textContent = editShopUsesPacks ? 'opak.' : u;
|
||||
|
||||
const shopHintEl = document.getElementById('pv2-shop-hint');
|
||||
if (shopHintEl) {
|
||||
if (editShopUsesPacks) {
|
||||
const lab = pack.label || `${pack.amount} ${u}`;
|
||||
shopHintEl.textContent = `1 opak. = ${lab}`;
|
||||
} else {
|
||||
shopHintEl.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
renderNutritionInSheet(def);
|
||||
|
||||
const bg = document.getElementById('pv2-edit-bg');
|
||||
const sheet = document.getElementById('pv2-edit-sheet');
|
||||
if (!bg || !sheet) return;
|
||||
bg.classList.remove('hidden');
|
||||
sheet.classList.remove('hidden');
|
||||
requestAnimationFrame(() => {
|
||||
bg.classList.remove('opacity-0');
|
||||
sheet.style.transform = 'translateY(0)';
|
||||
});
|
||||
}
|
||||
|
||||
function nutritionListRow(label, valueHtml) {
|
||||
return `<li class="flex items-baseline justify-between gap-3 py-0.5 border-b border-gray-100/80 last:border-0">
|
||||
<span class="text-gray-500 shrink-0">${esc(label)}</span>
|
||||
<span class="text-right font-semibold tabular-nums text-gray-800">${valueHtml}</span>
|
||||
</li>`;
|
||||
}
|
||||
|
||||
function renderNutritionInSheet(def) {
|
||||
const wrap = document.getElementById('pv2-edit-nutrition');
|
||||
if (!wrap) return;
|
||||
const n = def.nutritionPer100g;
|
||||
if (!n) { wrap.innerHTML = ''; return; }
|
||||
|
||||
const refLabel = def.pantryUnit === 'ml' ? '100 ml produktu' : '100 g produktu';
|
||||
wrap.innerHTML = `
|
||||
<div class="text-[10px] leading-snug mt-0.5 pt-2 border-t border-gray-100 space-y-1">
|
||||
<p class="text-[9px] font-semibold uppercase tracking-wide text-gray-500 px-0.5">${esc(refLabel)}</p>
|
||||
<ul class="space-y-0 rounded-lg bg-white/70 px-2 py-1 ring-1 ring-gray-100/90">
|
||||
${nutritionListRow('Energia', `${n.kcal} kcal`)}
|
||||
${nutritionListRow('Białko', `${n.protein} g`)}
|
||||
${nutritionListRow('Tłuszcz', `${n.fat} g`)}
|
||||
${nutritionListRow('Węglowodany', `${n.carbs} g`)}
|
||||
</ul>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function closeEditSheet() {
|
||||
editingId = null;
|
||||
const bg = document.getElementById('pv2-edit-bg');
|
||||
const sheet = document.getElementById('pv2-edit-sheet');
|
||||
if (sheet) sheet.style.transform = HIDDEN_Y;
|
||||
if (bg) bg.classList.add('opacity-0');
|
||||
setTimeout(() => {
|
||||
bg?.classList.add('hidden');
|
||||
sheet?.classList.add('hidden');
|
||||
}, 300);
|
||||
renderBoard();
|
||||
}
|
||||
|
||||
function getEditQty() {
|
||||
const el = document.getElementById('pv2-edit-qty');
|
||||
return Math.max(0, parseFloat(String(el?.value).replace(',', '.')) || 0);
|
||||
}
|
||||
|
||||
function setEditQty(v) {
|
||||
const el = document.getElementById('pv2-edit-qty');
|
||||
if (el) el.value = String(Math.max(0, Math.round(v)));
|
||||
}
|
||||
|
||||
function applyEditQty(newQty) {
|
||||
if (!editingId) return;
|
||||
const v = Math.max(0, Math.round(Number(newQty) * 1000) / 1000 || 0);
|
||||
setPantryQty(editingId, v);
|
||||
setEditQty(v);
|
||||
}
|
||||
|
||||
function readShopQty() {
|
||||
const el = document.getElementById('pv2-shop-qty');
|
||||
return Math.max(1, Math.round(parseFloat(String(el?.value).replace(',', '.')) || 0));
|
||||
}
|
||||
|
||||
function setShopQty(v) {
|
||||
const el = document.getElementById('pv2-shop-qty');
|
||||
if (el) el.value = String(Math.max(1, Math.round(Number(v))));
|
||||
}
|
||||
|
||||
function bindEditSheet() {
|
||||
document.getElementById('pv2-edit-bg')?.addEventListener('click', closeEditSheet);
|
||||
|
||||
document.getElementById('pv2-edit-minus')?.addEventListener('click', () => {
|
||||
if (!editingId) return;
|
||||
applyEditQty(Math.max(0, getEditQty() - pantryQtyStep(editingId)));
|
||||
});
|
||||
|
||||
document.getElementById('pv2-edit-plus')?.addEventListener('click', () => {
|
||||
if (!editingId) return;
|
||||
applyEditQty(getEditQty() + pantryQtyStep(editingId));
|
||||
});
|
||||
|
||||
document.getElementById('pv2-edit-qty')?.addEventListener('change', () => {
|
||||
applyEditQty(getEditQty());
|
||||
});
|
||||
|
||||
document.getElementById('pv2-shop-minus')?.addEventListener('click', () => {
|
||||
setShopQty(Math.max(1, readShopQty() - editShopStep));
|
||||
});
|
||||
|
||||
document.getElementById('pv2-shop-plus')?.addEventListener('click', () => {
|
||||
setShopQty(readShopQty() + editShopStep);
|
||||
});
|
||||
|
||||
document.getElementById('pv2-shop-qty')?.addEventListener('change', () => {
|
||||
setShopQty(readShopQty());
|
||||
});
|
||||
|
||||
document.getElementById('pv2-shop-add')?.addEventListener('click', () => {
|
||||
if (!editingId) return;
|
||||
const def = INGREDIENTS[editingId];
|
||||
if (!def) return;
|
||||
const count = readShopQty();
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
|
||||
if (editShopUsesPacks && def.purchasePack) {
|
||||
const packAmt = def.purchasePack.amount;
|
||||
const total = count * packAmt;
|
||||
const note = `${count}× ${def.purchasePack.label || `${packAmt} ${u}`}`;
|
||||
addIngredientToKitchenList(editingId, total, note);
|
||||
showAppToast(`Dodano ${count} op. (${total} ${u}) na listę.`);
|
||||
} else {
|
||||
addIngredientToKitchenList(editingId, count);
|
||||
showAppToast(`Dodano ${count} ${u} na listę.`);
|
||||
}
|
||||
window.refreshShopping?.();
|
||||
});
|
||||
}
|
||||
|
||||
/* ══════════════════════ PUBLIC API ══════════════════════ */
|
||||
|
||||
export function refreshPantry() {
|
||||
renderCategoryChips();
|
||||
renderBoard();
|
||||
}
|
||||
|
||||
export function setupPantry() {
|
||||
renderCategoryChips();
|
||||
renderBoard();
|
||||
bindEditSheet();
|
||||
|
||||
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
|
||||
|
||||
document.getElementById('pantry-stock-toggle')?.addEventListener('click', () => {
|
||||
showOnlyStock = !showOnlyStock;
|
||||
updateToggleVisuals();
|
||||
renderBoard();
|
||||
});
|
||||
|
||||
window.refreshPantry = refreshPantry;
|
||||
}
|
||||
Reference in New Issue
Block a user