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

Extract ingredientCard

Browse Source
This commit is contained in:
Rafał
2026-04-10 14:01:54 +02:00
parent 12369465d7
commit 2883dc858e
4 changed files with 544 additions and 620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

420
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-99';
/* ── 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 ══════════════════════ */
@@ -129,34 +81,10 @@ export function getPantryHTML() {
<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>`;
}
@@ -261,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(),
});
}
@@ -593,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());