596 lines
29 KiB
JavaScript
596 lines
29 KiB
JavaScript
import {
|
|
INGREDIENTS,
|
|
CATEGORY_LABELS,
|
|
PRODUCTS,
|
|
pantryQtyStep,
|
|
getProductsForIngredient,
|
|
ingredientHasProducts,
|
|
} from '../data/catalog.js?v=8';
|
|
import { addIngredientToKitchenList, addOrMergeShoppingLines, categoryLabel, loadPantry, setPantryQty, setPantryProductQty, getPantryTotal, getPantryProducts } from '../services/pantryShopping.js?v=2';
|
|
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',
|
|
};
|
|
|
|
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;
|
|
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 z-10" style="background:#2d2e2b !important;">
|
|
|
|
<!-- ── 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>
|
|
</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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>`;
|
|
}
|
|
|
|
/* ══════════════════════ FILTER POPUP ══════════════════════ */
|
|
|
|
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)));
|
|
}
|
|
|
|
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 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('');
|
|
}
|
|
|
|
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) {
|
|
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 ingredientRowHtml(id, pantry) {
|
|
const def = INGREDIENTS[id];
|
|
const products = getProductsForIngredient(id);
|
|
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
|
|
const u = unitLabel(def.pantryUnit);
|
|
|
|
if (products.length === 0) {
|
|
// Simple row — no products
|
|
const qty = getPantryTotal(id, pantry);
|
|
const qtyColor = qty > 0 ? '#6ee7b7' : '#6d6c67';
|
|
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 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};">${qty > 0 ? Math.round(qty) : 0} ${esc(u)}</span>
|
|
</div>
|
|
<span class="text-[11px] block mt-0.5" style="color:#9b978f;">${esc(categoryLabel(def.category))}</span>
|
|
</div>
|
|
</button>`;
|
|
}
|
|
|
|
// Group — ingredient header + product rows
|
|
const totalQty = getPantryTotal(id, pantry);
|
|
const pantryItems = getPantryProducts(id, pantry);
|
|
const totalColor = totalQty > 0 ? '#6ee7b7' : '#6d6c67';
|
|
|
|
let html = `<div class="rounded-xl overflow-hidden" style="background:#393937;">`;
|
|
// Group header
|
|
html += `<div class="flex items-center gap-3 px-3 py-2">`;
|
|
const avatar = def.image
|
|
? `<img src="${esc(def.image)}" alt="" class="w-8 h-8 rounded-lg object-cover shrink-0">`
|
|
: `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-xs" style="color:#6d6c67;"></i></div>`;
|
|
html += avatar;
|
|
html += `<div class="flex-1 min-w-0">
|
|
<span class="text-[12px] font-semibold truncate block" style="color:#9b978f;">${esc(def.name)}</span>
|
|
</div>`;
|
|
html += `<span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${totalColor};">${totalQty > 0 ? Math.round(totalQty) : 0} ${esc(u)}</span>`;
|
|
html += `</div>`;
|
|
|
|
// Product rows
|
|
for (const p of products) {
|
|
const pQty = pantryItems.find(i => i.productId === p.id)?.qty || 0;
|
|
const pQtyColor = pQty > 0 ? '#ddd6ca' : '#6d6c67';
|
|
const pAvatar = p.image
|
|
? `<img src="${esc(p.image)}" alt="" class="w-8 h-8 rounded-lg object-cover shrink-0">`
|
|
: `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-xs" style="color:#6d6c67;"></i></div>`;
|
|
html += `<button type="button" class="pv2-product-row w-full flex items-center gap-3 px-3 py-2 text-left transition-colors active:scale-[0.99]" style="border-top:1px solid #444442;" data-id="${esc(id)}" data-product-id="${esc(p.id)}">
|
|
${pAvatar}
|
|
<div class="flex-1 min-w-0">
|
|
<span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(p.name)}</span>
|
|
<span class="text-[11px]" style="color:#9b978f;">${p.packLabel || ''}</span>
|
|
</div>
|
|
<span class="text-[13px] font-bold tabular-nums shrink-0" style="color:${pQtyColor};">${Math.round(pQty)} ${esc(u)}</span>
|
|
</button>`;
|
|
}
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
|
|
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 => getPantryTotal(id, pantry) > 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 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" 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-center py-10" style="color:#9b978f;">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-[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="space-y-2">${ids.map(id => ingredientRowHtml(id, pantry)).join('')}</div>
|
|
</div>`;
|
|
}
|
|
|
|
root.innerHTML = html;
|
|
|
|
root.querySelectorAll('.pv2-chip').forEach(btn => {
|
|
btn.addEventListener('click', () => openIngredientCard(btn.dataset.id, null));
|
|
});
|
|
root.querySelectorAll('.pv2-product-row').forEach(btn => {
|
|
btn.addEventListener('click', () => openIngredientCard(btn.dataset.id, btn.dataset.productId));
|
|
});
|
|
}
|
|
|
|
/* ══════════════════════ STOCK TOGGLE ══════════════════════ */
|
|
|
|
|
|
/* ══════════════════════ INGREDIENT CARD ══════════════════════ */
|
|
|
|
let editingProductId = null;
|
|
|
|
function openIngredientCard(ingredientId, productId) {
|
|
const def = INGREDIENTS[ingredientId];
|
|
if (!def) return;
|
|
editingId = ingredientId;
|
|
editingProductId = productId || null;
|
|
|
|
const product = editingProductId ? PRODUCTS[editingProductId] : null;
|
|
const pantry = loadPantry();
|
|
const u = unitLabel(def.pantryUnit);
|
|
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
|
|
|
|
// Hero image — product image > ingredient image > fallback
|
|
const image = product?.image || def.image;
|
|
const img = document.getElementById('pv2-card-img');
|
|
const fallback = document.getElementById('pv2-card-fallback');
|
|
const fallbackIcon = document.getElementById('pv2-card-fallback-icon');
|
|
if (image) {
|
|
img.src = image; img.alt = product?.name || 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`;
|
|
}
|
|
|
|
// Header — show product info or ingredient info
|
|
document.getElementById('pv2-card-category').textContent = product?.brand || categoryLabel(def.category);
|
|
document.getElementById('pv2-card-name').textContent = product?.name || def.name;
|
|
const packEl = document.getElementById('pv2-card-pack');
|
|
const packLabel = product?.packLabel || def.purchasePack?.label;
|
|
if (packLabel) {
|
|
packEl.textContent = packLabel;
|
|
packEl.classList.remove('hidden');
|
|
} else {
|
|
packEl.classList.add('hidden');
|
|
}
|
|
|
|
// Nutrition — use product values if available
|
|
renderCardNutrition(def, product);
|
|
|
|
// Stock
|
|
renderCardStock(ingredientId, editingProductId, pantry);
|
|
|
|
// Shopping
|
|
renderCardShop(ingredientId, editingProductId);
|
|
|
|
// Show
|
|
const overlay = document.getElementById('pv2-card-overlay');
|
|
if (overlay) { overlay.classList.remove('hidden'); overlay.style.pointerEvents = 'auto'; }
|
|
}
|
|
|
|
function closeIngredientCard() {
|
|
const overlay = document.getElementById('pv2-card-overlay');
|
|
if (overlay) { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }
|
|
editingId = null;
|
|
renderBoard();
|
|
}
|
|
|
|
function renderCardNutrition(def, product) {
|
|
const wrap = document.getElementById('pv2-card-nutrition');
|
|
if (!wrap) return;
|
|
const n = product?.nutritionPer100g || def.nutritionPer100g;
|
|
if (!n) { wrap.innerHTML = ''; return; }
|
|
const label = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
|
|
wrap.innerHTML = `
|
|
<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>`;
|
|
}
|
|
|
|
function renderCardStock(ingredientId, productId, pantry) {
|
|
const wrap = document.getElementById('pv2-card-stock-section');
|
|
if (!wrap) return;
|
|
const def = INGREDIENTS[ingredientId];
|
|
if (!def) return;
|
|
const u = unitLabel(def.pantryUnit);
|
|
|
|
let html = `<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>`;
|
|
|
|
if (productId) {
|
|
// Product card — show just this product's stock
|
|
const product = PRODUCTS[productId];
|
|
const pantryItems = getPantryProducts(ingredientId, pantry);
|
|
const qty = pantryItems.find(i => i.productId === productId)?.qty || 0;
|
|
const step = product?.packSize || 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="${esc(productId)}" 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="${esc(productId)}" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
|
|
</div>`;
|
|
} else {
|
|
// Generic ingredient — simple +/-
|
|
const qty = getPantryTotal(ingredientId, pantry);
|
|
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;
|
|
|
|
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 dir = Number(btn.dataset.dir);
|
|
const p = loadPantry();
|
|
if (pid === '_generic') {
|
|
const cur = getPantryTotal(editingId, p);
|
|
setPantryQty(editingId, Math.max(0, cur + step * dir));
|
|
} else {
|
|
const items = getPantryProducts(editingId, p);
|
|
const cur = items.find(i => i.productId === pid)?.qty || 0;
|
|
setPantryProductQty(editingId, pid, Math.max(0, cur + step * dir));
|
|
}
|
|
renderCardStock(editingId, editingProductId, loadPantry());
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderCardShop(ingredientId, productId) {
|
|
const wrap = document.getElementById('pv2-card-shop-section');
|
|
if (!wrap) return;
|
|
const def = INGREDIENTS[ingredientId];
|
|
if (!def) return;
|
|
const u = unitLabel(def.pantryUnit);
|
|
const product = productId ? PRODUCTS[productId] : null;
|
|
const packSize = product?.packSize || def.purchasePack?.amount;
|
|
const packLabel = product?.packLabel || def.purchasePack?.label;
|
|
const usesPacks = Boolean(packSize && packSize > 0);
|
|
const btnLabel = usesPacks ? `Dodaj na listę (${packLabel || `${packSize} ${u}`})` : 'Dodaj na listę';
|
|
|
|
wrap.innerHTML = `
|
|
<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>${esc(btnLabel)}
|
|
</button>`;
|
|
|
|
document.getElementById('pv2-card-add-list')?.addEventListener('click', () => {
|
|
if (!editingId) return;
|
|
const d = INGREDIENTS[editingId];
|
|
if (!d) return;
|
|
const uLabel = unitLabel(d.pantryUnit);
|
|
const amt = usesPacks ? packSize : pantryQtyStep(editingId);
|
|
const note = usesPacks ? (packLabel || `${packSize} ${uLabel}`) : undefined;
|
|
|
|
// Use addOrMergeShoppingLines to include productId
|
|
const line = {
|
|
ingredientId: editingId,
|
|
amount: amt,
|
|
unit: uLabel,
|
|
name: product?.name || d.name,
|
|
category: d.category,
|
|
sourceNote: note || 'Ze spiżarni',
|
|
};
|
|
if (productId) line.productId = productId;
|
|
addOrMergeShoppingLines([line]);
|
|
|
|
showAppToast(`Dodano ${product?.name || d.name} na listę.`);
|
|
window.refreshShopping?.();
|
|
});
|
|
}
|
|
|
|
function bindEditSheet() {
|
|
document.getElementById('pv2-card-close')?.addEventListener('click', closeIngredientCard);
|
|
document.getElementById('pv2-card-overlay')?.addEventListener('click', (e) => {
|
|
if (e.target.id === 'pv2-card-overlay') closeIngredientCard();
|
|
});
|
|
}
|
|
|
|
/* ══════════════════════ PUBLIC API ══════════════════════ */
|
|
|
|
export function refreshPantry() {
|
|
renderCategoryChips();
|
|
renderBoard();
|
|
}
|
|
|
|
export function setupPantry() {
|
|
updateFilterBadge();
|
|
renderBoard();
|
|
bindEditSheet();
|
|
|
|
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
|
|
|
|
// 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;
|
|
renderFilterStockCheck();
|
|
updateFilterBadge();
|
|
renderBoard();
|
|
});
|
|
|
|
window.refreshPantry = refreshPantry;
|
|
}
|