ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ulfr:f785706578a7c0206d1bb09423bcbbcd2145c153
Branches Tags
ulfr:master
...
compare: ulfr:86d47f126d3b3b31136d0e87a71b21e431465020
Branches Tags
ulfr:master

3 Commits
f785706578 ... 86d47f126d

Author SHA1 Message Date
ulfrxdev
86d47f126d Redesign ingredient card
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m13s
Details
2026-04-10 15:04:36 +02:00
ulfrxdev
2883dc858e Extract ingredientCard 2026-04-10 14:01:54 +02:00
ulfrxdev
12369465d7 Reorganize pantry - in progress 2026-04-10 10:46:27 +02:00
4 changed files with 718 additions and 640 deletions
Expand all files Collapse all files

6
index.html
View File

@@ -11,7 +11,7 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Recipe App - Modular</title>
<link rel="manifest" href="./manifest.webmanifest?v=20260408-97">
<link rel="manifest" href="./manifest.webmanifest?v=20260410-106">
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -600,7 +600,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260408-97';
const APP_ASSET_VERSION = '20260410-106';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';
@@ -634,7 +634,7 @@
})();
</script>
<script type="module">
const appVersion = window.__APP_ASSET_VERSION__ || '20260408-97';
const appVersion = window.__APP_ASSET_VERSION__ || '20260410-106';
const recoveryKey = `recipe-app-recovery-${appVersion}`;
function renderBootstrapError(message) {

668
js/ui/ingredientCard.js Normal file
View File

@@ -0,0 +1,668 @@
import {
INGREDIENTS,
PRODUCTS,
CATEGORY_LABELS,
getProductsForIngredient,
ingredientHasProducts,
pantryQtyStep,
} from '../data/catalog.js?v=8';
import {
addOrMergeShoppingLines,
KITCHEN_LIST_ID,
loadPantry,
loadShoppingState,
removeItemFromList,
setPantryQty,
setPantryProductQty,
getPantryTotal,
getPantryProducts,
updateKitchenItemAmount,
} from '../services/pantryShopping.js?v=2';
import { showAppToast } from './toast.js';
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',
};
function esc(s) {
return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
function unitLabel(u) {
return u === 'szt' ? 'szt.' : u;
}
function formatQty(n) {
const rounded = Math.round((Number(n) || 0) * 10) / 10;
return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, '');
}
function formatQtyWithUnit(qty, unit) {
return `${formatQty(qty)} ${unitLabel(unit)}`;
}
function productCountLabel(count) {
if (count === 1) return '1 produkt';
const mod10 = count % 10;
const mod100 = count % 100;
if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return `${count} produkty`;
return `${count} produktów`;
}
function nutritionForQty(def, qty, nutrition = def?.nutritionPer100g) {
if (!def || !nutrition || !Number.isFinite(qty) || qty <= 0) return null;
let grams = qty;
if (def.pantryUnit === 'szt' && def.weightPerPiece) grams = qty * def.weightPerPiece;
const factor = grams / 100;
return {
kcal: Math.round(nutrition.kcal * factor),
protein: Math.round(nutrition.protein * factor * 10) / 10,
fat: Math.round(nutrition.fat * factor * 10) / 10,
carbs: Math.round(nutrition.carbs * factor * 10) / 10,
};
}
function macroLine(n) {
if (!n) return '';
return `${n.kcal} kcal · ${formatQty(n.protein)}g B · ${formatQty(n.fat)}g T · ${formatQty(n.carbs)}g W`;
}
function mediaHtml(image, icon, sizeClass = 'w-9 h-9', radiusClass = 'rounded-lg') {
if (image) {
return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} object-cover shrink-0">`;
}
return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></i></div>`;
}
function compactMetaText(text, tone = 'default') {
const color = tone === 'success' ? '#6ee7b7' : tone === 'muted' ? '#9b978f' : '#d7d2c8';
return `<span class="text-[10px] font-medium" style="color:${color};">${esc(text)}</span>`;
}
function sortProductsByStock(products, pantryItems) {
return [...products].sort((a, b) => {
const aq = pantryItems.find((i) => i.productId === a.id)?.qty || 0;
const bq = pantryItems.find((i) => i.productId === b.id)?.qty || 0;
if (bq !== aq) return bq - aq;
return a.name.localeCompare(b.name, 'pl');
});
}
function formatPackAwareAmount(amount, pantryUnit, packSize, packLabel) {
const qty = Number(amount) || 0;
const unit = unitLabel(pantryUnit);
if (packSize && packSize > 0) {
const packs = qty / packSize;
if (qty > 0 && Number.isFinite(packs) && Math.abs(packs - Math.round(packs)) < 0.001) {
return `${formatQty(Math.round(packs))} x ${packLabel || `${formatQty(packSize)} ${unit}`}`;
}
}
return `${formatQty(qty)} ${unit}`;
}
export function getIngredientCardHTML({
idBase,
overlayClass = 'fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
overlayStyle = 'pointer-events:none; background:rgba(0,0,0,0.5);',
cardClass = 'relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden',
cardStyle = 'background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;',
heroHeightClass = 'h-[180px]',
} = {}) {
if (!idBase) throw new Error('getIngredientCardHTML requires idBase');
return `
<div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
<div id="${idBase}" class="${cardClass}" style="${cardStyle}">
<div class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;">
<img id="${idBase}-img" class="w-full h-full object-cover hidden" alt="" />
<div id="${idBase}-fallback" class="w-full h-full flex items-center justify-center">
<i id="${idBase}-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
</div>
<button type="button" id="${idBase}-back" class="absolute top-3 left-3 w-8 h-8 rounded-full hidden flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Wróć do składnika">
<i class="fas fa-chevron-left text-sm"></i>
</button>
<button type="button" id="${idBase}-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Zamknij">
<i class="fas fa-times text-sm"></i>
</button>
</div>
<div class="px-4 pt-3 pb-4 space-y-3">
<div>
<p id="${idBase}-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#6ee7b7;"></p>
<h3 id="${idBase}-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
<p id="${idBase}-subtitle" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
</div>
<div id="${idBase}-nutrition"></div>
<div id="${idBase}-stock"></div>
<div id="${idBase}-products"></div>
<div id="${idBase}-shop"></div>
</div>
</div>
</div>`;
}
export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze spiżarni' } = {}) {
if (!idBase) throw new Error('createIngredientCardController requires idBase');
const state = {
ingredientId: null,
productId: null,
selectedProductId: null,
sourceNote: defaultSourceNote,
onProductChange: null,
onAfterChange: null,
stockEditorOpen: false,
stockDraftQty: null,
shopEditorOpen: false,
shopDraftQty: null,
closeTimer: null,
};
let bound = false;
const el = (suffix = '') => document.getElementById(suffix ? `${idBase}-${suffix}` : idBase);
function resetInlineEditors() {
state.stockEditorOpen = false;
state.stockDraftQty = null;
state.shopEditorOpen = false;
state.shopDraftQty = null;
}
function getCurrentShoppingItem(def) {
const shopping = loadShoppingState();
const kitchen = shopping.lists.find((list) => list.id === KITCHEN_LIST_ID && list.type === 'kitchen');
if (!kitchen || kitchen.type !== 'kitchen') return null;
const unit = unitLabel(def.pantryUnit);
return kitchen.items.find((item) => {
if (item.checked) return false;
return item.ingredientId === state.ingredientId
&& item.unit === unit
&& (item.productId || '') === (state.productId || '');
}) || null;
}
function renderHeader(def, product, pantry) {
const hasProducts = ingredientHasProducts(def.id);
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
const image = product?.image || def.image;
const img = el('img');
const fallback = el('fallback');
const fallbackIcon = el('fallback-icon');
if (img && fallback) {
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`;
}
}
const totalQty = getPantryTotal(def.id, pantry);
const categoryEl = el('category');
const nameEl = el('name');
const subtitleEl = el('subtitle');
const backBtn = el('back');
if (categoryEl) categoryEl.textContent = product?.brand || CATEGORY_LABELS[def.category] || def.category;
if (nameEl) nameEl.textContent = product?.name || def.name;
if (subtitleEl) {
let subtitle = '';
if (product) {
subtitle = [def.name, product.packLabel].filter(Boolean).join(' • ');
} else if (hasProducts) {
subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
} else if (def.purchasePack?.label) {
subtitle = def.purchasePack.label;
}
if (subtitle) {
subtitleEl.textContent = subtitle;
subtitleEl.classList.remove('hidden');
} else {
subtitleEl.classList.add('hidden');
}
}
if (backBtn) {
backBtn.classList.toggle('hidden', !(hasProducts && state.productId));
}
}
function renderNutrition(def, product) {
const wrap = el('nutrition');
if (!wrap) return;
const nutrition = product?.nutritionPer100g || def.nutritionPer100g;
if (!nutrition) {
wrap.innerHTML = '';
return;
}
const hasProducts = ingredientHasProducts(def.id);
const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
const hint = product
? 'dokładne dla produktu'
: hasProducts
? 'orientacyjnie dla składnika'
: '';
const nutritionMeta = hint ? `${unitScope} • ${hint}` : unitScope;
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Wartości odżywcze</p>
<p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(nutritionMeta)}</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;">${nutrition.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">${formatQty(nutrition.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">${formatQty(nutrition.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">${formatQty(nutrition.carbs)}g</p>
<p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
</div>
</div>`;
}
function renderStock() {
const wrap = el('stock');
if (!wrap || !state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId];
if (!def) return;
const pantry = loadPantry();
const hasProducts = ingredientHasProducts(state.ingredientId);
const product = state.productId ? PRODUCTS[state.productId] : null;
const totalQty = getPantryTotal(state.ingredientId, pantry);
const unit = unitLabel(def.pantryUnit);
if (hasProducts && !product) {
const stockedCount = getPantryProducts(state.ingredientId, pantry).filter((i) => i.qty > 0).length;
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
<div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<p class="text-[10px] font-semibold uppercase tracking-wide" style="color:#9b978f;">Stan łączny</p>
<p class="text-[16px] font-bold tabular-nums mt-1" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(unit)}</p>
<p class="text-[11px] mt-1 leading-snug" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(state.ingredientId).length} produktów ma zapas</p>
</div>
<span class="inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold shrink-0" style="background:#2f2f2d; color:#d7d2c8;">Wybierz produkt</span>
</div>
</div>`;
return;
}
const qty = product
? (getPantryProducts(state.ingredientId, pantry).find((i) => i.productId === state.productId)?.qty || 0)
: totalQty;
const step = product ? (product.packSize || pantryQtyStep(state.ingredientId)) : pantryQtyStep(state.ingredientId);
const packSize = product?.packSize || def.purchasePack?.amount || 0;
const packLabel = product?.packLabel || def.purchasePack?.label || '';
const draftQty = state.stockEditorOpen
? Math.max(0, Number(state.stockDraftQty ?? qty) || 0)
: qty;
const actionLabel = state.stockEditorOpen ? 'Anuluj' : 'Zmień';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
<div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<p class="text-[16px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatPackAwareAmount(qty, def.pantryUnit, packSize, packLabel))}</p>
</div>
<button type="button" class="ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.stockEditorOpen ? '#23221e' : '#2f2f2d'}; color:${state.stockEditorOpen ? '#f2efe8' : '#d7d2c8'};">
${esc(actionLabel)}
</button>
</div>
${state.stockEditorOpen ? `
<div class="mt-3 pt-3 border-t" style="border-color:#444442;">
<div class="flex items-center gap-2">
<button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-dir="-1" aria-label="Zmniejsz szkic zapasu">
<i class="fas fa-minus text-xs"></i>
</button>
<label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:#2f2f2d;">
<input type="number" min="0" step="${step}" value="${formatQty(draftQty)}" class="ingredient-card-stock-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:#ddd6ca; background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
<span class="text-[12px] font-medium shrink-0" style="color:#9b978f;">${esc(unit)}</span>
</label>
<button type="button" class="ingredient-card-stock-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-dir="1" aria-label="Zwiększ szkic zapasu">
<i class="fas fa-plus text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between gap-3 mt-3">
<button type="button" class="ingredient-card-stock-clear text-[11px] font-semibold" style="color:#9b978f;">Wyzeruj</button>
<button type="button" class="ingredient-card-stock-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:#ddd6ca; color:#2d2e2b;">Zapisz</button>
</div>
</div>` : ''}
</div>`;
wrap.querySelector('.ingredient-card-stock-toggle')?.addEventListener('click', () => {
if (state.stockEditorOpen) {
state.stockEditorOpen = false;
state.stockDraftQty = null;
} else {
state.stockEditorOpen = true;
state.shopEditorOpen = false;
state.stockDraftQty = qty;
}
render();
});
wrap.querySelectorAll('.ingredient-card-stock-step').forEach((btn) => {
btn.addEventListener('click', () => {
const dir = Number(btn.dataset.dir) || 1;
const next = Math.max(0, Math.round(((Number(state.stockDraftQty ?? qty) || 0) + step * dir) * 100) / 100);
state.stockDraftQty = next;
render();
});
});
wrap.querySelector('.ingredient-card-stock-input')?.addEventListener('input', (event) => {
state.stockDraftQty = Math.max(0, Number(event.target.value) || 0);
});
wrap.querySelector('.ingredient-card-stock-clear')?.addEventListener('click', () => {
state.stockDraftQty = 0;
render();
});
wrap.querySelector('.ingredient-card-stock-save')?.addEventListener('click', () => {
const input = wrap.querySelector('.ingredient-card-stock-input');
const nextQty = Math.max(0, Math.round((Number(input?.value ?? state.stockDraftQty ?? qty) || 0) * 100) / 100);
if (state.productId) {
setPantryProductQty(state.ingredientId, state.productId, nextQty);
} else {
setPantryQty(state.ingredientId, nextQty);
}
state.stockEditorOpen = false;
state.stockDraftQty = null;
render();
state.onAfterChange?.();
});
}
function productRowHtml(ingredientId, productId, pantry, selectedProductId) {
const def = INGREDIENTS[ingredientId];
const product = PRODUCTS[productId];
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
const isSelected = selectedProductId === productId;
return `<button type="button" class="ingredient-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
${mediaHtml(product.image || def.image, icon)}
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between gap-2">
<span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
<span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
</div>
<div class="flex items-center gap-2 mt-0.5">
${compactMetaText(product.packLabel || '', 'muted')}
${isSelected ? compactMetaText('wybrany', 'success') : ''}
</div>
</div>
<i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
</button>`;
}
function renderProducts() {
const wrap = el('products');
if (!wrap || !state.ingredientId) return;
if (!ingredientHasProducts(state.ingredientId)) {
wrap.innerHTML = '';
return;
}
const pantry = loadPantry();
const products = sortProductsByStock(getProductsForIngredient(state.ingredientId), getPantryProducts(state.ingredientId, pantry));
const selectedProductId = state.selectedProductId || state.productId;
const subtitle = state.productId
? 'Wróć lub wybierz inny wariant.'
: 'Wybierz wariant, aby zobaczyć szczegóły.';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Produkty</p>
<p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
<div class="space-y-1.5">
${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, selectedProductId)).join('')}
</div>`;
wrap.querySelectorAll('.ingredient-card-product-row').forEach((btn) => {
btn.addEventListener('click', () => {
const nextProductId = btn.dataset.productId || null;
state.productId = nextProductId;
state.selectedProductId = nextProductId;
resetInlineEditors();
if (nextProductId) state.onProductChange?.(nextProductId);
render();
state.onAfterChange?.();
});
});
}
function renderShop() {
const wrap = el('shop');
if (!wrap || !state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId];
if (!def) return;
const hasProducts = ingredientHasProducts(state.ingredientId);
const product = state.productId ? PRODUCTS[state.productId] : null;
const packSize = product?.packSize || def.purchasePack?.amount;
const packLabel = product?.packLabel || def.purchasePack?.label;
const usesPacks = Boolean(packSize && packSize > 0);
const defaultAmount = usesPacks ? packSize : pantryQtyStep(state.ingredientId);
const shoppingItem = getCurrentShoppingItem(def);
const hasShoppingItem = Boolean(shoppingItem);
const shoppingAmount = shoppingItem?.amount || 0;
const draftQty = state.shopEditorOpen
? Math.max(0, Number(state.shopDraftQty ?? (shoppingAmount || defaultAmount)) || 0)
: shoppingAmount;
const actionLabel = state.shopEditorOpen ? 'Anuluj' : 'Zmień';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
<div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<p class="text-[16px] font-bold tabular-nums" style="color:${hasShoppingItem ? '#ddd6ca' : '#9b978f'};">${esc(hasShoppingItem ? formatPackAwareAmount(shoppingAmount, def.pantryUnit, packSize, packLabel) : 'Brak na liscie')}</p>
</div>
<button type="button" class="ingredient-card-shop-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.shopEditorOpen ? '#23221e' : '#2f2f2d'}; color:${state.shopEditorOpen ? '#f2efe8' : '#d7d2c8'};">
${esc(actionLabel)}
</button>
</div>
${state.shopEditorOpen ? `
<div class="mt-3 pt-3 border-t" style="border-color:#444442;">
<div class="flex items-center gap-2">
<button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-dir="-1" aria-label="Zmniejsz ilość na liście">
<i class="fas fa-minus text-xs"></i>
</button>
<label class="flex-1 rounded-xl px-3 py-2 flex items-center justify-center gap-2" style="background:#2f2f2d;">
<input type="number" min="0" step="${defaultAmount}" value="${formatQty(draftQty)}" class="ingredient-card-shop-input w-20 bg-transparent text-center text-[14px] font-semibold tabular-nums outline-none appearance-none" style="color:#ddd6ca; background:transparent !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; -moz-appearance:textfield;">
<span class="text-[12px] font-medium shrink-0" style="color:#9b978f;">${esc(unitLabel(def.pantryUnit))}</span>
</label>
<button type="button" class="ingredient-card-shop-step w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-dir="1" aria-label="Zwiększ ilość na liście">
<i class="fas fa-plus text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between gap-3 mt-3">
${hasShoppingItem
? '<button type="button" class="ingredient-card-shop-remove text-[11px] font-semibold" style="color:#9b978f;">Usuń z listy</button>'
: '<span></span>'}
<button type="button" class="ingredient-card-shop-save inline-flex items-center rounded-full px-3 py-1.5 text-[11px] font-semibold" style="background:#ddd6ca; color:#2d2e2b;">Zapisz</button>
</div>
</div>` : ''}
</div>`;
wrap.querySelector('.ingredient-card-shop-toggle')?.addEventListener('click', () => {
if (state.shopEditorOpen) {
state.shopEditorOpen = false;
state.shopDraftQty = null;
} else {
state.shopEditorOpen = true;
state.stockEditorOpen = false;
state.shopDraftQty = shoppingAmount || defaultAmount;
}
render();
});
wrap.querySelectorAll('.ingredient-card-shop-step').forEach((btn) => {
btn.addEventListener('click', () => {
const dir = Number(btn.dataset.dir) || 1;
const next = Math.max(0, Math.round(((Number(state.shopDraftQty ?? (shoppingAmount || defaultAmount)) || 0) + defaultAmount * dir) * 100) / 100);
state.shopDraftQty = next;
render();
});
});
wrap.querySelector('.ingredient-card-shop-input')?.addEventListener('input', (event) => {
state.shopDraftQty = Math.max(0, Number(event.target.value) || 0);
});
wrap.querySelector('.ingredient-card-shop-remove')?.addEventListener('click', () => {
if (!shoppingItem) return;
removeItemFromList(KITCHEN_LIST_ID, shoppingItem.id);
state.shopEditorOpen = false;
state.shopDraftQty = null;
render();
state.onAfterChange?.();
window.refreshShopping?.();
showAppToast(`Usunieto ${product?.name || def.name} z listy.`);
});
wrap.querySelector('.ingredient-card-shop-save')?.addEventListener('click', () => {
const input = wrap.querySelector('.ingredient-card-shop-input');
const nextAmount = Math.max(0, Math.round((Number(input?.value ?? state.shopDraftQty ?? defaultAmount) || 0) * 100) / 100);
let toastText = null;
if (shoppingItem) {
updateKitchenItemAmount(KITCHEN_LIST_ID, shoppingItem.id, nextAmount);
toastText = nextAmount > 0
? `Zaktualizowano ${product?.name || def.name}.`
: `Usunieto ${product?.name || def.name} z listy.`;
} else if (nextAmount > 0) {
const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`) : undefined;
const line = {
ingredientId: state.ingredientId,
amount: nextAmount,
unit: unitLabel(def.pantryUnit),
name: product?.name || def.name,
category: def.category,
sourceNote: note || state.sourceNote || defaultSourceNote,
};
if (state.productId) line.productId = state.productId;
addOrMergeShoppingLines([line]);
toastText = `Dodano ${product?.name || def.name}.`;
}
state.shopEditorOpen = false;
state.shopDraftQty = null;
render();
state.onAfterChange?.();
window.refreshShopping?.();
if (toastText) showAppToast(toastText);
});
}
function render() {
if (!state.ingredientId) return;
const def = INGREDIENTS[state.ingredientId];
if (!def) return;
const product = state.productId ? PRODUCTS[state.productId] : null;
const pantry = loadPantry();
renderHeader(def, product, pantry);
renderNutrition(def, product);
renderStock();
renderProducts();
renderShop();
}
function open({
ingredientId,
productId = null,
selectedProductId = productId,
sourceNote = defaultSourceNote,
onProductChange = null,
onAfterChange = null,
} = {}) {
const def = ingredientId ? INGREDIENTS[ingredientId] : null;
const overlay = el('overlay');
const card = el();
if (!def || !overlay || !card) return;
state.ingredientId = ingredientId;
state.productId = productId && PRODUCTS[productId] ? productId : null;
state.selectedProductId = selectedProductId && PRODUCTS[selectedProductId] ? selectedProductId : state.productId;
state.sourceNote = sourceNote;
state.onProductChange = onProductChange;
state.onAfterChange = onAfterChange;
resetInlineEditors();
render();
clearTimeout(state.closeTimer);
overlay.classList.remove('hidden');
overlay.style.pointerEvents = 'auto';
requestAnimationFrame(() => {
overlay.classList.add('opacity-100');
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
});
}
function close() {
const overlay = el('overlay');
const card = el();
if (overlay && card) {
overlay.classList.remove('opacity-100');
overlay.style.pointerEvents = 'none';
card.style.opacity = '0';
card.style.transform = 'translateY(1.5rem)';
state.closeTimer = setTimeout(() => overlay.classList.add('hidden'), 220);
}
state.ingredientId = null;
state.productId = null;
state.selectedProductId = null;
state.onProductChange = null;
state.onAfterChange = null;
state.sourceNote = defaultSourceNote;
resetInlineEditors();
}
function bind() {
if (bound) return;
bound = true;
el('close')?.addEventListener('click', close);
el('back')?.addEventListener('click', () => {
state.productId = null;
resetInlineEditors();
render();
});
el('overlay')?.addEventListener('click', (event) => {
if (event.target.id === `${idBase}-overlay`) close();
});
}
function refresh() {
if (state.ingredientId) render();
}
return {
bind,
open,
close,
refresh,
isOpen: () => Boolean(state.ingredientId),
};
}

237
js/ui/mealPlanEditor.js
View File

@@ -1,4 +1,4 @@
import { INGREDIENTS, RECIPES, PRODUCTS, CATEGORY_LABELS, getProductsForIngredient } from '../data/catalog.js?v=8';
import { INGREDIENTS, RECIPES, PRODUCTS, getProductsForIngredient } from '../data/catalog.js?v=8';
import { MEAL_SLOTS } from '../planner/mealSlots.js';
import {
addDays,
@@ -15,8 +15,7 @@ import {
savePlans,
} from '../services/planStore.js?v=2';
import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../services/planIngredients.js?v=4';
import { loadPantry, getPantryTotal, getPantryProducts, setPantryQty, setPantryProductQty, addOrMergeShoppingLines } from '../services/pantryShopping.js?v=2';
import { showAppToast } from './toast.js';
import { loadPantry } from '../services/pantryShopping.js?v=2';
import {
bindCalendarDayClicks,
createCalendarTopbarHTML,
@@ -27,6 +26,7 @@ import {
renderCalendarGrid,
syncCalendarTodayButton,
} from './mealCalendar.js?v=1';
import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260410-106';
function esc(s) {
return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
@@ -34,207 +34,6 @@ function esc(s) {
const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
/* ── Product Card Popup ────────────────────────────── */
function getProductCardHTML() {
return `
<div id="mpe-product-card-overlay" class="fixed inset-0 z-[70] bg-black/50 hidden flex items-center justify-center p-6" style="pointer-events:none">
<div id="mpe-product-card" class="relative w-full max-w-xs bg-[#2d2e2b] rounded-2xl shadow-2xl overflow-hidden" style="pointer-events:auto; max-height:80vh; overflow-y:auto;">
<div id="mpe-pc-hero" class="relative w-full h-[180px] bg-gray-800 overflow-hidden">
<img id="mpe-pc-img" class="w-full h-full object-cover hidden" alt="" />
<div id="mpe-pc-fallback" class="w-full h-full flex items-center justify-center">
<i class="fas fa-box-open text-3xl text-gray-600"></i>
</div>
<button type="button" id="mpe-pc-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="mpe-pc-brand" class="text-[10px] font-semibold uppercase tracking-wider text-emerald-400"></p>
<h3 id="mpe-pc-name" class="text-[15px] font-bold text-gray-100 leading-snug mt-0.5"></h3>
<p id="mpe-pc-category" class="text-[11px] text-gray-500 mt-0.5"></p>
</div>
<div id="mpe-pc-pack" class="hidden">
<span class="text-[10px] font-semibold uppercase tracking-wider text-gray-500">Opakowanie</span>
<p id="mpe-pc-pack-val" class="text-[13px] font-semibold text-gray-300 mt-0.5"></p>
</div>
<div>
<span id="mpe-pc-nut-label" class="text-[10px] font-semibold uppercase tracking-wider text-gray-500">Wartości odżywcze na 100 g</span>
<div class="grid grid-cols-4 gap-2 mt-1.5">
<div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
<p id="mpe-pc-kcal" class="text-[15px] font-bold text-gray-100 tabular-nums"></p>
<p class="text-[9px] text-gray-500 font-medium mt-0.5">kcal</p>
</div>
<div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
<p id="mpe-pc-protein" class="text-[15px] font-bold text-blue-400 tabular-nums"></p>
<p class="text-[9px] text-gray-500 font-medium mt-0.5">białko</p>
</div>
<div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
<p id="mpe-pc-fat" class="text-[15px] font-bold text-amber-400 tabular-nums"></p>
<p class="text-[9px] text-gray-500 font-medium mt-0.5">tłuszcz</p>
</div>
<div class="bg-[#393937] rounded-xl px-2.5 py-2 text-center">
<p id="mpe-pc-carbs" class="text-[15px] font-bold text-orange-400 tabular-nums"></p>
<p class="text-[9px] text-gray-500 font-medium mt-0.5">węgl.</p>
</div>
</div>
</div>
<div id="mpe-pc-stock" class="space-y-1.5"></div>
<div id="mpe-pc-shop"></div>
</div>
</div>
</div>`;
}
function openProductCard(ingredientId, productId) {
const overlay = document.getElementById('mpe-product-card-overlay');
if (!overlay) return;
const def = INGREDIENTS[ingredientId];
const product = productId ? PRODUCTS[productId] : null;
const name = product?.name || def?.name || ingredientId;
const brand = product?.brand || '';
const category = CATEGORY_LABELS[def?.category] || '';
const nutrition = product?.nutritionPer100g || def?.nutritionPer100g;
const image = product?.image || def?.image;
const packLabel = product?.packLabel || def?.purchasePack?.label || '';
const nutUnit = def?.pantryUnit === 'ml' ? '100 ml' : '100 g';
document.getElementById('mpe-pc-name').textContent = name;
document.getElementById('mpe-pc-brand').textContent = brand;
document.getElementById('mpe-pc-category').textContent = category;
document.getElementById('mpe-pc-nut-label').textContent = `Wartości odżywcze na ${nutUnit}`;
const img = document.getElementById('mpe-pc-img');
const fallback = document.getElementById('mpe-pc-fallback');
if (image) {
img.src = image;
img.alt = name;
img.classList.remove('hidden');
fallback.classList.add('hidden');
} else {
img.classList.add('hidden');
fallback.classList.remove('hidden');
}
const packWrap = document.getElementById('mpe-pc-pack');
if (packLabel) {
packWrap.classList.remove('hidden');
document.getElementById('mpe-pc-pack-val').textContent = packLabel;
} else {
packWrap.classList.add('hidden');
}
if (nutrition) {
document.getElementById('mpe-pc-kcal').textContent = nutrition.kcal;
document.getElementById('mpe-pc-protein').textContent = nutrition.protein + 'g';
document.getElementById('mpe-pc-fat').textContent = nutrition.fat + 'g';
document.getElementById('mpe-pc-carbs').textContent = nutrition.carbs + 'g';
}
// Stock section
renderPlannerCardStock(ingredientId, productId);
// Shop section
renderPlannerCardShop(ingredientId, productId);
overlay.classList.remove('hidden');
overlay.style.pointerEvents = 'auto';
}
function renderPlannerCardStock(ingredientId, productId) {
const wrap = document.getElementById('mpe-pc-stock');
if (!wrap) return;
const def = INGREDIENTS[ingredientId];
if (!def) return;
const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
const pantry = loadPantry();
const product = productId ? PRODUCTS[productId] : null;
let qty, step, pid;
if (product) {
const items = getPantryProducts(ingredientId, pantry);
qty = items.find(i => i.productId === productId)?.qty || 0;
step = product.packSize || 1;
pid = productId;
} else {
qty = getPantryTotal(ingredientId, pantry);
step = def.purchasePack?.amount || (def.pantryUnit === 'szt' ? 1 : 10);
pid = '_generic';
}
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5 text-gray-500">Zapas</p>
<div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2 bg-[#393937]">
<button type="button" class="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" 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="mpe-pc-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95 bg-[#2f2f2d] text-[#d7d2c8]" data-pid="${esc(pid)}" data-step="${step}" data-dir="1"><i class="fas fa-plus text-xs"></i></button>
</div>`;
wrap.querySelectorAll('.mpe-pc-stock-btn').forEach(btn => {
btn.addEventListener('click', () => {
const bpid = btn.dataset.pid;
const bstep = Number(btn.dataset.step) || 1;
const dir = Number(btn.dataset.dir);
const p = loadPantry();
if (bpid === '_generic') {
const cur = getPantryTotal(ingredientId, p);
setPantryQty(ingredientId, Math.max(0, cur + bstep * dir));
} else {
const items = getPantryProducts(ingredientId, p);
const cur = items.find(i => i.productId === bpid)?.qty || 0;
setPantryProductQty(ingredientId, bpid, Math.max(0, cur + bstep * dir));
}
renderPlannerCardStock(ingredientId, productId);
});
});
}
function renderPlannerCardShop(ingredientId, productId) {
const wrap = document.getElementById('mpe-pc-shop');
if (!wrap) return;
const def = INGREDIENTS[ingredientId];
if (!def) return;
const u = def.pantryUnit === 'szt' ? 'szt.' : 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="mpe-pc-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('mpe-pc-add-list')?.addEventListener('click', () => {
const amt = usesPacks ? packSize : (def.pantryUnit === 'szt' ? 1 : 10);
const line = {
ingredientId,
amount: amt,
unit: u,
name: product?.name || def.name,
category: def.category,
sourceNote: packLabel || 'Z planera',
};
if (productId) line.productId = productId;
addOrMergeShoppingLines([line]);
// Quick visual feedback
const btn = document.getElementById('mpe-pc-add-list');
if (btn) { btn.textContent = '✓ Dodano'; setTimeout(() => { btn.innerHTML = `<i class="fas fa-cart-plus text-[11px]"></i>${esc(btnLabel)}`; }, 1200); }
window.refreshShopping?.();
});
}
function closeProductCard() {
const overlay = document.getElementById('mpe-product-card-overlay');
if (overlay) {
overlay.classList.add('hidden');
overlay.style.pointerEvents = 'none';
}
}
/* ── HTML template ──────────────────────────────────── */
export function getMealPlanEditorHTML() {
@@ -286,7 +85,7 @@ export function getMealPlanEditorHTML() {
</div>
</div>
</div>
${getProductCardHTML()}`;
${getIngredientCardHTML({ idBase: 'mpe-pc' })}`;
}
/* ── Setup ──────────────────────────────────────────── */
@@ -295,6 +94,8 @@ export function setupMealPlanEditor() {
const overlay = document.getElementById('mpe-overlay');
const sheet = document.getElementById('mpe-sheet');
if (!overlay || !sheet) return;
const ingredientCard = createIngredientCardController({ idBase: 'mpe-pc', defaultSourceNote: 'Z planera' });
ingredientCard.bind();
const S = {
mode: null,
@@ -715,6 +516,7 @@ export function setupMealPlanEditor() {
}
function closeEditor() {
ingredientCard.close();
sheet.style.transform = 'translateY(100%)';
setTimeout(() => { overlay.classList.add('hidden'); overlay.style.pointerEvents = 'none'; }, 300);
}
@@ -856,13 +658,6 @@ export function setupMealPlanEditor() {
renderNutrition();
});
/* ── Product card ────────────────────────────── */
document.getElementById('mpe-pc-close')?.addEventListener('click', closeProductCard);
document.getElementById('mpe-product-card-overlay')?.addEventListener('click', (e) => {
if (e.target.id === 'mpe-product-card-overlay') closeProductCard();
});
/* ── Ingredient section delegation ────────────── */
const ingSec = document.getElementById('mpe-ing-section');
@@ -873,7 +668,23 @@ export function setupMealPlanEditor() {
if (!changeProdEarly) {
const cardBtn = e.target.closest('.mpe-open-product-card');
if (cardBtn) {
openProductCard(cardBtn.dataset.eid, cardBtn.dataset.pid || null);
const eid = cardBtn.dataset.eid;
if (!eid) return;
ingredientCard.open({
ingredientId: eid,
productId: cardBtn.dataset.pid || null,
selectedProductId: cardBtn.dataset.pid || null,
sourceNote: 'Z planera',
onProductChange: (nextProductId) => {
if (!nextProductId) return;
S.productSelections[eid] = nextProductId;
saveLastProductSelection(eid, nextProductId);
},
onAfterChange: () => {
renderIngList();
renderNutrition();
},
});
return;
}
}

439
js/views/Pantry.js
View File

@@ -1,21 +1,15 @@
import {
INGREDIENTS,
CATEGORY_LABELS,
PRODUCTS,
pantryQtyStep,
getProductsForIngredient,
ingredientHasProducts,
} from '../data/catalog.js?v=8';
import {
addOrMergeShoppingLines,
categoryLabel,
loadPantry,
setPantryQty,
setPantryProductQty,
getPantryTotal,
getPantryProducts,
} from '../services/pantryShopping.js?v=2';
import { showAppToast } from '../ui/toast.js';
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260410-106';
/* ── helpers ── */
@@ -40,36 +34,10 @@ function formatQtyWithUnit(qty, unit) {
return `${formatQty(qty)} ${unitLabel(unit)}`;
}
function productCountLabel(count) {
if (count === 1) return '1 produkt';
const mod10 = count % 10;
const mod100 = count % 100;
if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) return `${count} produkty`;
return `${count} produktów`;
}
function productCountShortLabel(count) {
return `${count} prod.`;
}
function nutritionForQty(def, qty, nutrition = def?.nutritionPer100g) {
if (!def || !nutrition || !Number.isFinite(qty) || qty <= 0) return null;
let grams = qty;
if (def.pantryUnit === 'szt' && def.weightPerPiece) grams = qty * def.weightPerPiece;
const f = grams / 100;
return {
kcal: Math.round(nutrition.kcal * f),
protein: Math.round(nutrition.protein * f * 10) / 10,
fat: Math.round(nutrition.fat * f * 10) / 10,
carbs: Math.round(nutrition.carbs * f * 10) / 10,
};
}
function macroLine(n) {
if (!n) return '';
return `${n.kcal} kcal · ${formatQty(n.protein)}g B · ${formatQty(n.fat)}g T · ${formatQty(n.carbs)}g W`;
}
function mediaHtml(image, icon, sizeClass = 'w-11 h-11', radiusClass = 'rounded-2xl') {
if (image) {
return `<img src="${esc(image)}" alt="" class="${sizeClass} ${radiusClass} object-cover shrink-0">`;
@@ -77,20 +45,6 @@ function mediaHtml(image, icon, sizeClass = 'w-11 h-11', radiusClass = 'rounded-
return `<div class="${sizeClass} ${radiusClass} flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${icon} text-sm" style="color:#8f8b84;"></i></div>`;
}
function compactMetaText(text, tone = 'default') {
const color = tone === 'success' ? '#6ee7b7' : tone === 'muted' ? '#9b978f' : '#d7d2c8';
return `<span class="text-[10px] font-medium" style="color:${color};">${esc(text)}</span>`;
}
function sortProductsByStock(products, pantryItems) {
return [...products].sort((a, b) => {
const aq = pantryItems.find((i) => i.productId === a.id)?.qty || 0;
const bq = pantryItems.find((i) => i.productId === b.id)?.qty || 0;
if (bq !== aq) return bq - aq;
return a.name.localeCompare(b.name, 'pl');
});
}
const CATEGORY_ICONS = {
pieczywo: 'fa-bread-slice',
nabial: 'fa-cheese',
@@ -106,9 +60,7 @@ const SEARCH_SHELL_SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0
/* ── state ── */
let editingId = null;
let editingProductId = null;
let cardCloseTimer = null;
let ingredientCard = null;
/* ══════════════════════ HTML SHELL ══════════════════════ */
@@ -125,38 +77,14 @@ export function getPantryHTML() {
</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-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.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] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5" style="pointer-events:none; background:rgba(0,0,0,0.5);">
<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; transform:translateY(0.75rem); opacity:0; transition:transform 220ms ease, opacity 220ms ease;">
<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-back" class="absolute top-3 left-3 w-8 h-8 rounded-full hidden flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Wróć do składnika">
<i class="fas fa-chevron-left text-sm"></i>
</button>
<button type="button" id="pv2-card-close" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center" style="background:rgba(0,0,0,0.5); color:#fff;" aria-label="Zamknij">
<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-subtitle" 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-products-section"></div>
<div id="pv2-card-shop-section"></div>
</div>
</div>
</div>
${getIngredientCardHTML({
idBase: 'pv2-card',
overlayClass: 'absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
})}
</div>`;
}
@@ -185,17 +113,9 @@ function ingredientRowHtml(id, pantry) {
const qty = getPantryTotal(id, pantry);
const hasProducts = ingredientHasProducts(id);
const products = hasProducts ? getProductsForIngredient(id) : [];
const pantryItems = hasProducts ? getPantryProducts(id, pantry) : [];
const stockedCount = pantryItems.filter((i) => i.qty > 0).length;
const hasStock = qty > 0;
const accent = hasStock ? '#6ee7b7' : '#4b4a46';
const qtyColor = hasStock ? '#6ee7b7' : '#d7d2c8';
const subtitle = hasProducts
? `${stockedCount}/${products.length} produktów`
: categoryLabel(def.category);
const status = hasProducts
? (stockedCount === 0 ? 'wybierz produkt' : stockedCount === products.length ? 'wszystko na stanie' : 'częściowo na stanie')
: (hasStock ? 'na stanie' : 'brak');
const badgeText = hasProducts ? productCountShortLabel(products.length) : unitLabel(def.pantryUnit);
return `<button type="button" class="pv2-chip shrink-0 w-[9.5rem] rounded-2xl px-3 py-2.5 text-left transition-colors active:scale-[0.99]" style="background:#393937; border:1px solid #444442; box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);" data-id="${esc(id)}">
@@ -206,15 +126,13 @@ function ingredientRowHtml(id, pantry) {
<span class="block text-[12px] font-semibold leading-[1.2] overflow-hidden" style="color:#ddd6ca; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">
${esc(def.name)}
</span>
<span class="block text-[10px] mt-0.5 truncate" style="color:#9b978f;">${esc(subtitle)}</span>
</div>
</div>
<div class="mt-3">
<div class="mt-4">
<div class="flex items-end justify-between gap-2">
<span class="text-[14px] font-bold tabular-nums leading-none block" style="color:${qtyColor};">${esc(formatQtyWithUnit(qty, def.pantryUnit))}</span>
<span class="inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-semibold shrink-0" style="background:#2f2f2d; color:#9b978f;">${esc(badgeText)}</span>
</div>
<span class="text-[10px] block mt-1" style="color:#9b978f;">${esc(status)}</span>
</div>
</button>`;
}
@@ -250,15 +168,12 @@ function renderBoard() {
const icon = CATEGORY_ICONS[cat] || 'fa-jar';
return `
<section class="mb-4 last:mb-0">
<div class="flex items-center justify-between gap-3 mb-2 px-0.5">
<div class="min-w-0">
<div class="mb-2 px-0.5">
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">
<i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
</p>
<p class="text-[10px] mt-1" style="color:#6d6c67;">${ids.length} ${getCategoryItemLabel(ids.length)}</p>
</div>
<span class="text-[10px] shrink-0" style="color:#6d6c67;">przesuń w bok</span>
</div>
<div class="overflow-x-auto no-scrollbar -mx-4 px-4">
<div class="flex gap-2.5 pb-1">
${ids.map((rowId) => ingredientRowHtml(rowId, pantry)).join('')}
@@ -274,331 +189,12 @@ function renderBoard() {
/* ══════════════════════ INGREDIENT SHEET ══════════════════════ */
function renderCardHeader(def, product, pantry) {
const hasProducts = ingredientHasProducts(def.id);
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
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 (img && fallback) {
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`;
}
}
const totalQty = getPantryTotal(def.id, pantry);
const productQty = product
? (getPantryProducts(def.id, pantry).find((i) => i.productId === product.id)?.qty || 0)
: totalQty;
const stockNut = nutritionForQty(def, productQty, product?.nutritionPer100g || def.nutritionPer100g);
const categoryEl = document.getElementById('pv2-card-category');
const nameEl = document.getElementById('pv2-card-name');
const subtitleEl = document.getElementById('pv2-card-subtitle');
const backBtn = document.getElementById('pv2-card-back');
if (categoryEl) categoryEl.textContent = product?.brand || categoryLabel(def.category);
if (nameEl) nameEl.textContent = product?.name || def.name;
if (subtitleEl) {
let subtitle = '';
if (product) {
subtitle = [def.name, product.packLabel].filter(Boolean).join(' • ');
} else if (hasProducts) {
subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
} else if (def.purchasePack?.label) {
subtitle = def.purchasePack.label;
}
if (subtitle) {
subtitleEl.textContent = subtitle;
subtitleEl.classList.remove('hidden');
} else {
subtitleEl.classList.add('hidden');
}
}
if (backBtn) {
backBtn.classList.toggle('hidden', !(hasProducts && product));
}
}
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 hasProducts = ingredientHasProducts(def.id);
const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
const hint = product
? 'dokładne dla produktu'
: hasProducts
? 'orientacyjnie dla składnika'
: 'bazowe wartości';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Wartości odżywcze</p>
<p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(unitScope)} • ${esc(hint)}</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">${formatQty(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">${formatQty(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">${formatQty(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 hasProducts = ingredientHasProducts(ingredientId);
const product = productId ? PRODUCTS[productId] : null;
const totalQty = getPantryTotal(ingredientId, pantry);
const u = unitLabel(def.pantryUnit);
if (hasProducts && !product) {
const stockedCount = getPantryProducts(ingredientId, pantry).filter((i) => i.qty > 0).length;
const summaryNutrition = nutritionForQty(def, totalQty);
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
<div class="rounded-xl px-3 py-2.5" style="background:#393937;">
<div class="flex items-center justify-between gap-3">
<div>
<p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(u)}</p>
<p class="text-[11px] mt-0.5" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(ingredientId).length} produktów ma stan</p>
</div>
<span class="text-[10px] text-right max-w-[92px]" style="color:#9b978f;">Wybierz produkt niżej, aby zmienić stan</span>
</div>
${summaryNutrition ? `<p class="text-[10px] mt-2 tabular-nums" style="color:#9b978f;">${esc(macroLine(summaryNutrition))}</p>` : ''}
</div>`;
return;
}
const qty = product
? (getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0)
: totalQty;
const step = product ? (product.packSize || pantryQtyStep(ingredientId)) : pantryQtyStep(ingredientId);
const stockNut = nutritionForQty(def, qty, product?.nutritionPer100g || def.nutritionPer100g);
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
<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 || '_generic')}" data-step="${step}" data-dir="-1" aria-label="Zmniejsz stan">
<i class="fas fa-minus text-xs"></i>
</button>
<div class="flex-1 text-center">
<p class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(formatQty(qty))} ${esc(u)}</p>
<p class="text-[10px] mt-0.5" style="color:#9b978f;">Krok: ${esc(formatQty(step))} ${esc(u)}</p>
</div>
<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 || '_generic')}" data-step="${step}" data-dir="1" aria-label="Zwiększ stan">
<i class="fas fa-plus text-xs"></i>
</button>
</div>
${stockNut ? `<p class="text-[10px] mt-1.5 tabular-nums" style="color:#9b978f;">${esc(macroLine(stockNut))} na stanie</p>` : ''}`;
wrap.querySelectorAll('.pv2-stock-btn').forEach((btn) => {
btn.addEventListener('click', () => {
if (!editingId) return;
const pid = btn.dataset.pid;
const stepVal = Number(btn.dataset.step) || 1;
const dir = Number(btn.dataset.dir) || 1;
const currentPantry = loadPantry();
if (pid === '_generic') {
const cur = getPantryTotal(editingId, currentPantry);
setPantryQty(editingId, Math.max(0, cur + stepVal * dir));
} else {
const items = getPantryProducts(editingId, currentPantry);
const cur = items.find((i) => i.productId === pid)?.qty || 0;
setPantryProductQty(editingId, pid, Math.max(0, cur + stepVal * dir));
}
renderBoard();
renderIngredientCard();
});
});
}
function productSwitcherRowHtml(ingredientId, productId, pantry, selectedProductId) {
const def = INGREDIENTS[ingredientId];
const product = PRODUCTS[productId];
const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
const isSelected = selectedProductId === productId;
return `<button type="button" class="pv2-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
${mediaHtml(product.image || def.image, icon, 'w-9 h-9', 'rounded-lg')}
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between gap-2">
<span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
<span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
</div>
<div class="flex items-center gap-2 mt-0.5">
${compactMetaText(product.packLabel || '', 'muted')}
${isSelected ? compactMetaText('wybrany', 'success') : ''}
</div>
</div>
<i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
</button>`;
}
function renderCardProducts(ingredientId, productId, pantry) {
const wrap = document.getElementById('pv2-card-products-section');
if (!wrap) return;
if (!ingredientHasProducts(ingredientId)) {
wrap.innerHTML = '';
return;
}
const products = sortProductsByStock(getProductsForIngredient(ingredientId), getPantryProducts(ingredientId, pantry));
const title = 'Produkty';
const subtitle = productId
? 'Wróć lub wybierz inny wariant.'
: 'Wybierz wariant, aby zobaczyć szczegóły.';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">${esc(title)}</p>
<p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
<div class="space-y-1.5">
${products.map((p) => productSwitcherRowHtml(ingredientId, p.id, pantry, productId)).join('')}
</div>`;
wrap.querySelectorAll('.pv2-card-product-row').forEach((btn) => {
btn.addEventListener('click', () => {
editingProductId = btn.dataset.productId || null;
renderIngredientCard();
});
});
}
function renderCardShop(ingredientId, productId) {
const wrap = document.getElementById('pv2-card-shop-section');
if (!wrap) return;
const def = INGREDIENTS[ingredientId];
if (!def) return;
const hasProducts = ingredientHasProducts(ingredientId);
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 || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`})`
: 'Dodaj na listę';
const helperText = hasProducts && !product
? 'Doda składnik bez wskazanej marki. Jeśli chcesz konkretny produkt, wybierz go wyżej.'
: product
? 'Pozycja trafi na listę zakupów z dokładnym produktem.'
: 'Szybki skrót do listy zakupów ze spiżarni.';
wrap.innerHTML = `
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
<p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(helperText)}</p>
<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 || `${formatQty(packSize)} ${uLabel}`) : undefined;
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 renderIngredientCard() {
if (!editingId) return;
const def = INGREDIENTS[editingId];
if (!def) return;
const product = editingProductId ? PRODUCTS[editingProductId] : null;
const pantry = loadPantry();
renderCardHeader(def, product, pantry);
renderCardNutrition(def, product);
renderCardStock(editingId, editingProductId, pantry);
renderCardProducts(editingId, editingProductId, pantry);
renderCardShop(editingId, editingProductId);
}
function openIngredientCard(ingredientId, productId) {
const def = INGREDIENTS[ingredientId];
if (!def) return;
editingId = ingredientId;
editingProductId = productId && PRODUCTS[productId] ? productId : null;
renderIngredientCard();
const overlay = document.getElementById('pv2-card-overlay');
const card = document.getElementById('pv2-card');
if (!overlay || !card) return;
clearTimeout(cardCloseTimer);
overlay.classList.remove('hidden');
overlay.style.pointerEvents = 'auto';
requestAnimationFrame(() => {
overlay.classList.add('opacity-100');
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
});
}
function closeIngredientCard() {
const overlay = document.getElementById('pv2-card-overlay');
const card = document.getElementById('pv2-card');
if (overlay && card) {
overlay.classList.remove('opacity-100');
overlay.style.pointerEvents = 'none';
card.style.opacity = '0';
card.style.transform = 'translateY(1.5rem)';
cardCloseTimer = setTimeout(() => overlay.classList.add('hidden'), 220);
}
editingId = null;
editingProductId = null;
renderBoard();
}
function bindEditSheet() {
document.getElementById('pv2-card-close')?.addEventListener('click', closeIngredientCard);
document.getElementById('pv2-card-back')?.addEventListener('click', () => {
editingProductId = null;
renderIngredientCard();
});
document.getElementById('pv2-card-overlay')?.addEventListener('click', (e) => {
if (e.target.id === 'pv2-card-overlay') closeIngredientCard();
ingredientCard?.open({
ingredientId,
productId,
sourceNote: 'Ze spiżarni',
onAfterChange: () => renderBoard(),
});
}
@@ -606,12 +202,15 @@ function bindEditSheet() {
export function refreshPantry() {
renderBoard();
if (editingId) renderIngredientCard();
ingredientCard?.refresh();
}
export function setupPantry() {
if (!ingredientCard) {
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
ingredientCard.bind();
}
renderBoard();
bindEditSheet();
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());