Add products
This commit is contained in:
@@ -5,7 +5,7 @@ import {
|
||||
pantryQtyStep,
|
||||
getProductsForIngredient,
|
||||
ingredientHasProducts,
|
||||
} from '../data/catalog.js?v=6';
|
||||
} from '../data/catalog.js?v=8';
|
||||
import { addIngredientToKitchenList, categoryLabel, loadPantry, setPantryQty, setPantryProductQty, getPantryTotal, getPantryProducts, getPantryGeneric } from '../services/pantryShopping.js?v=2';
|
||||
import { showAppToast } from '../ui/toast.js';
|
||||
|
||||
@@ -34,6 +34,8 @@ const CATEGORY_ICONS = {
|
||||
inne: 'fa-jar',
|
||||
};
|
||||
|
||||
const SEARCH_SHELL_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)';
|
||||
|
||||
/* ── state ── */
|
||||
|
||||
let showOnlyStock = false;
|
||||
@@ -51,86 +53,74 @@ const HIDDEN_Y = `translateY(calc(100% + ${BOTTOM}))`;
|
||||
|
||||
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-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:#2d2e2b !important;">
|
||||
|
||||
<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>
|
||||
<!-- ── floating search bar ── -->
|
||||
<div class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4" style="background:transparent !important; border:none !important;">
|
||||
<div id="pantry-search-shell" class="pointer-events-auto relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow:${SEARCH_SHELL_SHADOW} !important;">
|
||||
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
|
||||
class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; color:#ddd6ca;">
|
||||
<button id="pantry-filter-btn" type="button" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; color:#c9c3b8;" aria-label="Filtry">
|
||||
<i class="fas fa-sliders-h"></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>
|
||||
</div>
|
||||
|
||||
<!-- ── filter popup ── -->
|
||||
<div id="pantry-filter-overlay" class="absolute inset-0 z-[55] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:rgba(0,0,0,0.5) !important;">
|
||||
<div id="pantry-filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.5rem] border" style="background:#393937 !important; border-color:#444442 !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:opacity 180ms ease, transform 180ms ease; box-shadow:0 18px 40px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.18);">
|
||||
<div class="shrink-0 px-4 pt-3 pb-2 flex items-center justify-between" style="border-bottom:1px solid #444442;">
|
||||
<p class="text-[12px] font-bold uppercase tracking-wider" style="color:#9b978f;">Filtry</p>
|
||||
<button id="pantry-filter-clear" type="button" class="px-3 py-1 rounded-full border text-[11px] font-semibold transition-colors" style="background:#2f2f2d; border-color:#444442; color:#d7d2c8;">Wyczyść</button>
|
||||
</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 id="pv2-product-breakdown" class="shrink-0"></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 class="px-4 py-3 space-y-3 overflow-y-auto no-scrollbar" style="max-height:60vh;">
|
||||
<div>
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider mb-2" style="color:#9b978f;">Kategorie</p>
|
||||
<div id="pantry-filter-categories" class="flex flex-wrap gap-1.5"></div>
|
||||
</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
|
||||
<div style="border-top:1px solid #444442; padding-top:0.75rem;">
|
||||
<button type="button" id="pantry-filter-stock" class="w-full flex items-center justify-between px-3 py-2 rounded-xl transition-colors" style="background:#2f2f2d;">
|
||||
<span class="text-[12px] font-semibold" style="color:#d7d2c8;">Tylko na stanie</span>
|
||||
<span id="pantry-filter-stock-check" class="w-5 h-5 rounded-md flex items-center justify-center" style="border:1.5px solid #56534f;"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── scrollable content ── -->
|
||||
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[4.5rem] pb-24" style="background:#2d2e2b !important;">
|
||||
<div id="pantry-board" class="space-y-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── ingredient card popup ── -->
|
||||
<div id="pv2-card-overlay" class="absolute inset-0 z-[60] bg-black/50 hidden flex items-center justify-center p-5" style="pointer-events:none;">
|
||||
<div id="pv2-card" class="relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden" style="background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto;">
|
||||
<div id="pv2-card-hero" class="relative w-full h-[160px] overflow-hidden" style="background:#393937;">
|
||||
<img id="pv2-card-img" class="w-full h-full object-cover hidden" alt="" />
|
||||
<div id="pv2-card-fallback" class="w-full h-full flex items-center justify-center">
|
||||
<i id="pv2-card-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
|
||||
</div>
|
||||
<button type="button" id="pv2-card-close" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors">
|
||||
<i class="fas fa-times text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p id="pv2-shop-hint" class="text-[10px] text-gray-400 pl-[3.5rem]"></p>
|
||||
<div class="px-4 pt-3 pb-4 space-y-3">
|
||||
<div>
|
||||
<p id="pv2-card-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#9b978f;"></p>
|
||||
<h3 id="pv2-card-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
|
||||
<p id="pv2-card-pack" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
|
||||
</div>
|
||||
<div id="pv2-card-nutrition"></div>
|
||||
<div id="pv2-card-stock-section"></div>
|
||||
<div id="pv2-card-shop-section"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pv2-edit-nutrition" class="shrink-0"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ══════════════════════ CATEGORY CHIPS (multi-select) ══════════════════════ */
|
||||
/* ══════════════════════ FILTER POPUP ══════════════════════ */
|
||||
|
||||
function allCategoryKeys() {
|
||||
const s = new Set();
|
||||
@@ -138,31 +128,91 @@ function allCategoryKeys() {
|
||||
return [...s].sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)));
|
||||
}
|
||||
|
||||
function renderCategoryChips() {
|
||||
const wrap = document.getElementById('pantry-category-chips');
|
||||
if (!wrap) return;
|
||||
let filterCloseTimer = null;
|
||||
|
||||
function renderFilterCategories() {
|
||||
const wrap = document.getElementById('pantry-filter-categories');
|
||||
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>`;
|
||||
const bg = active ? '#23221e' : '#2f2f2d';
|
||||
const border = active ? '#787876' : '#444442';
|
||||
const text = active ? '#f2efe8' : '#d7d2c8';
|
||||
return `<button type="button" data-cat="${esc(k)}" class="pv2-filter-cat px-3 py-1.5 rounded-full border text-[12px] font-semibold transition-colors inline-flex items-center gap-1.5" style="background:${bg}; border-color:${border}; color:${text};"><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();
|
||||
});
|
||||
function renderFilterStockCheck() {
|
||||
const el = document.getElementById('pantry-filter-stock-check');
|
||||
if (!el) return;
|
||||
el.innerHTML = showOnlyStock ? '<i class="fas fa-check text-[10px]" style="color:#6ee7b7;"></i>' : '';
|
||||
el.style.background = showOnlyStock ? '#23221e' : 'transparent';
|
||||
el.style.borderColor = showOnlyStock ? '#787876' : '#56534f';
|
||||
}
|
||||
|
||||
function updateFilterBadge() {
|
||||
const btn = document.getElementById('pantry-filter-btn');
|
||||
if (!btn) return;
|
||||
const count = selectedCategories.size + (showOnlyStock ? 1 : 0);
|
||||
btn.style.color = count > 0 ? '#6ee7b7' : '#c9c3b8';
|
||||
}
|
||||
|
||||
function positionFilterPanel() {
|
||||
const panel = document.getElementById('pantry-filter-panel');
|
||||
const shell = document.getElementById('pantry-search-shell');
|
||||
const view = document.getElementById('pantry-view');
|
||||
if (!panel || !shell || !view) return;
|
||||
const viewRect = view.getBoundingClientRect();
|
||||
const shellRect = shell.getBoundingClientRect();
|
||||
const gap = 8;
|
||||
const margin = 12;
|
||||
const width = Math.min(shellRect.width, viewRect.width - margin * 2);
|
||||
const top = shellRect.bottom - viewRect.top + gap;
|
||||
const left = Math.max(margin, Math.min(shellRect.left - viewRect.left, viewRect.width - width - margin));
|
||||
panel.style.width = `${width}px`;
|
||||
panel.style.left = `${left}px`;
|
||||
panel.style.top = `${top}px`;
|
||||
}
|
||||
|
||||
function openFilterPopup() {
|
||||
const overlay = document.getElementById('pantry-filter-overlay');
|
||||
const panel = document.getElementById('pantry-filter-panel');
|
||||
if (!overlay || !panel) return;
|
||||
clearTimeout(filterCloseTimer);
|
||||
renderFilterCategories();
|
||||
renderFilterStockCheck();
|
||||
positionFilterPanel();
|
||||
overlay.classList.remove('hidden');
|
||||
overlay.style.pointerEvents = 'auto';
|
||||
requestAnimationFrame(() => {
|
||||
overlay.classList.add('opacity-100');
|
||||
panel.style.opacity = '1';
|
||||
panel.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
}
|
||||
|
||||
function closeFilterPopup() {
|
||||
const overlay = document.getElementById('pantry-filter-overlay');
|
||||
const panel = document.getElementById('pantry-filter-panel');
|
||||
if (!overlay || !panel) return;
|
||||
overlay.classList.remove('opacity-100');
|
||||
overlay.style.pointerEvents = 'none';
|
||||
panel.style.opacity = '0';
|
||||
panel.style.transform = 'translateY(-0.5rem) scale(0.98)';
|
||||
filterCloseTimer = setTimeout(() => overlay.classList.add('hidden'), 180);
|
||||
}
|
||||
|
||||
function isFilterOpen() {
|
||||
return !document.getElementById('pantry-filter-overlay')?.classList.contains('hidden');
|
||||
}
|
||||
|
||||
// Keep old name for refreshPantry compatibility
|
||||
function renderCategoryChips() {
|
||||
updateFilterBadge();
|
||||
}
|
||||
|
||||
/* ══════════════════════ BOARD RENDERING ══════════════════════ */
|
||||
|
||||
function getFilteredIds(searchRaw) {
|
||||
@@ -175,21 +225,34 @@ function getFilteredIds(searchRaw) {
|
||||
}).sort((a, b) => INGREDIENTS[a].name.localeCompare(INGREDIENTS[b].name, 'pl'));
|
||||
}
|
||||
|
||||
function chipHtml(id, pantry) {
|
||||
function rowHtml(id, pantry) {
|
||||
const def = INGREDIENTS[id];
|
||||
const qty = getPantryTotal(id, pantry);
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
const hasStock = qty > 0;
|
||||
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
|
||||
const products = getProductsForIngredient(id);
|
||||
const productCount = products.length;
|
||||
|
||||
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>`;
|
||||
}
|
||||
const avatar = def.image
|
||||
? `<img src="${esc(def.image)}" alt="" class="w-10 h-10 rounded-xl object-cover shrink-0">`
|
||||
: `<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#6d6c67;"></i></div>`;
|
||||
|
||||
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>
|
||||
const qtyColor = hasStock ? '#6ee7b7' : '#6d6c67';
|
||||
const qtyText = hasStock ? `${Math.round(qty)} ${esc(u)}` : `0 ${esc(u)}`;
|
||||
|
||||
let meta = esc(categoryLabel(def.category));
|
||||
if (productCount > 0) meta += ` · ${productCount} ${productCount === 1 ? 'produkt' : productCount < 5 ? 'produkty' : 'produktów'}`;
|
||||
|
||||
return `<button type="button" class="pv2-chip w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:#393937;" data-id="${esc(id)}">
|
||||
${avatar}
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-[13px] font-semibold truncate" style="color:#ddd6ca;">${esc(def.name)}</span>
|
||||
<span class="text-[13px] font-bold tabular-nums shrink-0" style="color:${qtyColor};">${qtyText}</span>
|
||||
</div>
|
||||
<span class="text-[11px] block mt-0.5" style="color:#9b978f;">${meta}</span>
|
||||
</div>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
@@ -220,13 +283,13 @@ function renderBoard() {
|
||||
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 class="w-16 h-16 rounded-full flex items-center justify-center mb-4" style="background:#393937;">
|
||||
<i class="fas fa-box-open text-2xl" style="color:#6d6c67;"></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>
|
||||
<p class="text-sm font-semibold" style="color:#ddd6ca;">Nic na stanie</p>
|
||||
<p class="text-xs mt-1 max-w-[220px] leading-relaxed" style="color:#9b978f;">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>`;
|
||||
: `<p class="text-sm text-center py-10" style="color:#9b978f;">Brak wyników — zmień wyszukiwanie lub filtry.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -236,41 +299,26 @@ function renderBoard() {
|
||||
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">
|
||||
<p class="text-[10px] font-bold uppercase tracking-wider mb-2 px-0.5" style="color:#9b978f;">
|
||||
<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 class="space-y-2">${ids.map(id => rowHtml(id, pantry)).join('')}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
root.innerHTML = html;
|
||||
|
||||
root.querySelectorAll('.pv2-chip').forEach(btn => {
|
||||
btn.addEventListener('click', () => openEditSheet(btn.dataset.id));
|
||||
btn.addEventListener('click', () => openIngredientCard(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 ══════════════════════ */
|
||||
/* ══════════════════════ INGREDIENT CARD ══════════════════════ */
|
||||
|
||||
function openEditSheet(ingredientId) {
|
||||
function openIngredientCard(ingredientId) {
|
||||
const def = INGREDIENTS[ingredientId];
|
||||
if (!def) return;
|
||||
editingId = ingredientId;
|
||||
@@ -278,257 +326,185 @@ function openEditSheet(ingredientId) {
|
||||
const pantry = loadPantry();
|
||||
const qty = getPantryTotal(ingredientId, pantry);
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
const step = pantryQtyStep(ingredientId);
|
||||
const pack = def.purchasePack;
|
||||
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
|
||||
|
||||
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;
|
||||
// Hero image
|
||||
const img = document.getElementById('pv2-card-img');
|
||||
const fallback = document.getElementById('pv2-card-fallback');
|
||||
const fallbackIcon = document.getElementById('pv2-card-fallback-icon');
|
||||
if (def.image) {
|
||||
img.src = def.image; img.alt = def.name; img.classList.remove('hidden'); fallback.classList.add('hidden');
|
||||
} else {
|
||||
img.classList.add('hidden'); fallback.classList.remove('hidden');
|
||||
if (fallbackIcon) fallbackIcon.className = `fas ${icon} text-3xl`;
|
||||
}
|
||||
|
||||
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 = '';
|
||||
}
|
||||
// Header
|
||||
document.getElementById('pv2-card-category').textContent = categoryLabel(def.category);
|
||||
document.getElementById('pv2-card-name').textContent = def.name;
|
||||
const packEl = document.getElementById('pv2-card-pack');
|
||||
if (def.purchasePack) {
|
||||
packEl.textContent = def.purchasePack.label || `${def.purchasePack.amount} ${u}`;
|
||||
packEl.classList.remove('hidden');
|
||||
} else {
|
||||
packEl.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Hide main +/- when products exist (total is sum of product rows)
|
||||
const hasProds = ingredientHasProducts(ingredientId);
|
||||
const mainMinus = document.getElementById('pv2-edit-minus');
|
||||
const mainPlus = document.getElementById('pv2-edit-plus');
|
||||
const mainQtyInput = document.getElementById('pv2-edit-qty');
|
||||
if (mainMinus) mainMinus.classList.toggle('hidden', hasProds);
|
||||
if (mainPlus) mainPlus.classList.toggle('hidden', hasProds);
|
||||
if (mainQtyInput) mainQtyInput.readOnly = hasProds;
|
||||
// Nutrition
|
||||
renderCardNutrition(def);
|
||||
|
||||
renderProductBreakdown(ingredientId, pantry);
|
||||
renderNutritionInSheet(def);
|
||||
// Stock
|
||||
renderCardStock(ingredientId, pantry);
|
||||
|
||||
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)';
|
||||
});
|
||||
// Shopping
|
||||
renderCardShop(ingredientId);
|
||||
|
||||
// Show
|
||||
const overlay = document.getElementById('pv2-card-overlay');
|
||||
if (overlay) { overlay.classList.remove('hidden'); overlay.style.pointerEvents = 'auto'; }
|
||||
}
|
||||
|
||||
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 closeIngredientCard() {
|
||||
const overlay = document.getElementById('pv2-card-overlay');
|
||||
if (overlay) { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }
|
||||
editingId = null;
|
||||
renderBoard();
|
||||
}
|
||||
|
||||
function renderProductBreakdown(ingredientId, pantry) {
|
||||
const wrap = document.getElementById('pv2-product-breakdown');
|
||||
function renderCardNutrition(def) {
|
||||
const wrap = document.getElementById('pv2-card-nutrition');
|
||||
if (!wrap) return;
|
||||
const products = getProductsForIngredient(ingredientId);
|
||||
if (products.length === 0) { wrap.innerHTML = ''; return; }
|
||||
|
||||
const def = INGREDIENTS[ingredientId];
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
const pantryProducts = getPantryProducts(ingredientId, pantry);
|
||||
const generic = getPantryGeneric(ingredientId, pantry);
|
||||
|
||||
const productQty = (pid) => {
|
||||
const item = pantryProducts.find(i => i.productId === pid);
|
||||
return item ? item.qty : 0;
|
||||
};
|
||||
|
||||
const rows = products.map(p => {
|
||||
const q = Math.round(productQty(p.id));
|
||||
return `<div class="flex items-center gap-1.5 py-1" data-product-row="${esc(p.id)}">
|
||||
<span class="flex-1 text-[12px] text-gray-700 truncate" title="${esc(p.name)}">${esc(p.name)}</span>
|
||||
<button type="button" class="pv2-prod-minus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="${esc(p.id)}" data-step="${p.packSize}">
|
||||
<i class="fas fa-minus text-[9px]"></i>
|
||||
</button>
|
||||
<span class="pv2-prod-qty w-12 text-center text-[13px] font-semibold tabular-nums text-gray-800">${q} ${esc(u)}</span>
|
||||
<button type="button" class="pv2-prod-plus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="${esc(p.id)}" data-step="${p.packSize}">
|
||||
<i class="fas fa-plus text-[9px]"></i>
|
||||
</button>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
const genericRow = `<div class="flex items-center gap-1.5 py-1" data-product-row="_generic">
|
||||
<span class="flex-1 text-[12px] text-gray-500 italic truncate">Nieokreślony</span>
|
||||
<button type="button" class="pv2-prod-minus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}">
|
||||
<i class="fas fa-minus text-[9px]"></i>
|
||||
</button>
|
||||
<span class="pv2-prod-qty w-12 text-center text-[13px] font-semibold tabular-nums text-gray-800">${Math.round(generic)} ${esc(u)}</span>
|
||||
<button type="button" class="pv2-prod-plus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}">
|
||||
<i class="fas fa-plus text-[9px]"></i>
|
||||
</button>
|
||||
</div>`;
|
||||
|
||||
const n = def.nutritionPer100g;
|
||||
if (!n) { wrap.innerHTML = ''; return; }
|
||||
const label = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
|
||||
wrap.innerHTML = `
|
||||
<div class="space-y-0.5 px-0.5">
|
||||
<p class="text-[9px] font-semibold uppercase tracking-wide text-gray-400 mb-1">Produkty</p>
|
||||
${rows}
|
||||
${genericRow}
|
||||
</div>`;
|
||||
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">${esc(label)}</p>
|
||||
<div class="grid grid-cols-4 gap-1.5">
|
||||
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
|
||||
<p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;">${n.kcal}</p>
|
||||
<p class="text-[9px] font-medium" style="color:#9b978f;">kcal</p>
|
||||
</div>
|
||||
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
|
||||
<p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${n.protein}g</p>
|
||||
<p class="text-[9px] font-medium" style="color:#9b978f;">białko</p>
|
||||
</div>
|
||||
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
|
||||
<p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${n.fat}g</p>
|
||||
<p class="text-[9px] font-medium" style="color:#9b978f;">tłuszcz</p>
|
||||
</div>
|
||||
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
|
||||
<p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${n.carbs}g</p>
|
||||
<p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Bind product +/- buttons
|
||||
wrap.querySelectorAll('.pv2-prod-plus, .pv2-prod-minus').forEach(btn => {
|
||||
function renderCardStock(ingredientId, pantry) {
|
||||
const wrap = document.getElementById('pv2-card-stock-section');
|
||||
if (!wrap) return;
|
||||
const def = INGREDIENTS[ingredientId];
|
||||
if (!def) return;
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
const qty = getPantryTotal(ingredientId, pantry);
|
||||
const products = getProductsForIngredient(ingredientId);
|
||||
const hasProds = products.length > 0;
|
||||
|
||||
let html = `<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>`;
|
||||
|
||||
if (hasProds) {
|
||||
const pantryProducts = getPantryProducts(ingredientId, pantry);
|
||||
const generic = getPantryGeneric(ingredientId, pantry);
|
||||
const productQty = (pid) => pantryProducts.find(i => i.productId === pid)?.qty || 0;
|
||||
|
||||
html += `<div class="rounded-xl px-3 py-2 space-y-1.5" style="background:#393937;">`;
|
||||
html += `<div class="flex items-center justify-between"><span class="text-[12px] font-semibold" style="color:#9b978f;">Łącznie</span><span class="text-[13px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span></div>`;
|
||||
html += `<div style="border-top:1px solid #444442; padding-top:0.375rem;" class="space-y-1">`;
|
||||
for (const p of products) {
|
||||
const q = Math.round(productQty(p.id));
|
||||
html += `<div class="flex items-center gap-1.5">
|
||||
<span class="flex-1 text-[12px] truncate" style="color:#d7d2c8;">${esc(p.name)}</span>
|
||||
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(p.id)}" data-step="${p.packSize}" data-dir="-1"><i class="fas fa-minus text-[9px]"></i></button>
|
||||
<span class="w-12 text-center text-[12px] font-semibold tabular-nums" style="color:#ddd6ca;">${q} ${esc(u)}</span>
|
||||
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="${esc(p.id)}" data-step="${p.packSize}" data-dir="1"><i class="fas fa-plus text-[9px]"></i></button>
|
||||
</div>`;
|
||||
}
|
||||
html += `<div class="flex items-center gap-1.5">
|
||||
<span class="flex-1 text-[12px] italic truncate" style="color:#9b978f;">Nieokreślony</span>
|
||||
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}" data-dir="-1"><i class="fas fa-minus text-[9px]"></i></button>
|
||||
<span class="w-12 text-center text-[12px] font-semibold tabular-nums" style="color:#ddd6ca;">${Math.round(generic)} ${esc(u)}</span>
|
||||
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${pantryQtyStep(ingredientId)}" data-dir="1"><i class="fas fa-plus text-[9px]"></i></button>
|
||||
</div>`;
|
||||
html += `</div></div>`;
|
||||
} else {
|
||||
const step = pantryQtyStep(ingredientId);
|
||||
html += `<div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
|
||||
<button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${step}" data-dir="-1"><i class="fas fa-minus text-xs"></i></button>
|
||||
<span class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${Math.round(qty)} ${esc(u)}</span>
|
||||
<button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
wrap.innerHTML = html;
|
||||
|
||||
// Bind stock buttons
|
||||
wrap.querySelectorAll('.pv2-stock-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (!editingId) return;
|
||||
const pid = btn.dataset.pid;
|
||||
const step = Number(btn.dataset.step) || 1;
|
||||
const isPlus = btn.classList.contains('pv2-prod-plus');
|
||||
const pantry = loadPantry();
|
||||
|
||||
const dir = Number(btn.dataset.dir);
|
||||
const p = loadPantry();
|
||||
if (pid === '_generic') {
|
||||
const cur = getPantryGeneric(editingId, pantry);
|
||||
const next = Math.max(0, cur + (isPlus ? step : -step));
|
||||
setPantryQty(editingId, next);
|
||||
const cur = getPantryGeneric(editingId, p);
|
||||
setPantryQty(editingId, Math.max(0, cur + step * dir));
|
||||
} else {
|
||||
const items = getPantryProducts(editingId, pantry);
|
||||
const items = getPantryProducts(editingId, p);
|
||||
const cur = items.find(i => i.productId === pid)?.qty || 0;
|
||||
const next = Math.max(0, cur + (isPlus ? step : -step));
|
||||
setPantryProductQty(editingId, pid, next);
|
||||
setPantryProductQty(editingId, pid, Math.max(0, cur + step * dir));
|
||||
}
|
||||
|
||||
// Re-render breakdown and total
|
||||
const freshPantry = loadPantry();
|
||||
renderProductBreakdown(editingId, freshPantry);
|
||||
const totalQty = getPantryTotal(editingId, freshPantry);
|
||||
setEditQty(totalQty);
|
||||
renderCardStock(editingId, loadPantry());
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderNutritionInSheet(def) {
|
||||
const wrap = document.getElementById('pv2-edit-nutrition');
|
||||
function renderCardShop(ingredientId) {
|
||||
const wrap = document.getElementById('pv2-card-shop-section');
|
||||
if (!wrap) return;
|
||||
const n = def.nutritionPer100g;
|
||||
if (!n) { wrap.innerHTML = ''; return; }
|
||||
const def = INGREDIENTS[ingredientId];
|
||||
if (!def) return;
|
||||
const u = unitLabel(def.pantryUnit);
|
||||
const pack = def.purchasePack;
|
||||
const usesPacks = Boolean(pack && pack.amount > 0);
|
||||
const hint = usesPacks ? `1 opak. = ${pack.label || `${pack.amount} ${u}`}` : '';
|
||||
|
||||
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>`;
|
||||
}
|
||||
<button type="button" id="pv2-card-add-list" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b;">
|
||||
<i class="fas fa-cart-plus text-[11px]"></i>Dodaj na listę${usesPacks ? ' (1 opak.)' : ''}
|
||||
</button>
|
||||
${hint ? `<p class="text-[10px] text-center mt-1" style="color:#9b978f;">${esc(hint)}</p>` : ''}`;
|
||||
|
||||
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))));
|
||||
document.getElementById('pv2-card-add-list')?.addEventListener('click', () => {
|
||||
if (!editingId) return;
|
||||
const d = INGREDIENTS[editingId];
|
||||
if (!d) return;
|
||||
const uLabel = unitLabel(d.pantryUnit);
|
||||
if (usesPacks && d.purchasePack) {
|
||||
const amt = d.purchasePack.amount;
|
||||
addIngredientToKitchenList(editingId, amt, d.purchasePack.label || `${amt} ${uLabel}`);
|
||||
showAppToast(`Dodano 1 opak. na listę.`);
|
||||
} else {
|
||||
const step = pantryQtyStep(editingId);
|
||||
addIngredientToKitchenList(editingId, step);
|
||||
showAppToast(`Dodano ${step} ${uLabel} na listę.`);
|
||||
}
|
||||
window.refreshShopping?.();
|
||||
});
|
||||
}
|
||||
|
||||
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?.();
|
||||
document.getElementById('pv2-card-close')?.addEventListener('click', closeIngredientCard);
|
||||
document.getElementById('pv2-card-overlay')?.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'pv2-card-overlay') closeIngredientCard();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -540,15 +516,45 @@ export function refreshPantry() {
|
||||
}
|
||||
|
||||
export function setupPantry() {
|
||||
renderCategoryChips();
|
||||
updateFilterBadge();
|
||||
renderBoard();
|
||||
bindEditSheet();
|
||||
|
||||
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
|
||||
|
||||
document.getElementById('pantry-stock-toggle')?.addEventListener('click', () => {
|
||||
// Filter popup
|
||||
document.getElementById('pantry-filter-btn')?.addEventListener('click', () => {
|
||||
if (isFilterOpen()) closeFilterPopup(); else openFilterPopup();
|
||||
});
|
||||
|
||||
document.getElementById('pantry-filter-overlay')?.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'pantry-filter-overlay') closeFilterPopup();
|
||||
});
|
||||
|
||||
document.getElementById('pantry-filter-clear')?.addEventListener('click', () => {
|
||||
selectedCategories.clear();
|
||||
showOnlyStock = false;
|
||||
renderFilterCategories();
|
||||
renderFilterStockCheck();
|
||||
updateFilterBadge();
|
||||
renderBoard();
|
||||
});
|
||||
|
||||
document.getElementById('pantry-filter-categories')?.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.pv2-filter-cat');
|
||||
if (!btn) return;
|
||||
const cat = btn.dataset.cat;
|
||||
if (selectedCategories.has(cat)) selectedCategories.delete(cat);
|
||||
else selectedCategories.add(cat);
|
||||
renderFilterCategories();
|
||||
updateFilterBadge();
|
||||
renderBoard();
|
||||
});
|
||||
|
||||
document.getElementById('pantry-filter-stock')?.addEventListener('click', () => {
|
||||
showOnlyStock = !showOnlyStock;
|
||||
updateToggleVisuals();
|
||||
renderFilterStockCheck();
|
||||
updateFilterBadge();
|
||||
renderBoard();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user