ulfrxdev
86d47f126d
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m13s
669 lines
32 KiB
JavaScript
669 lines
32 KiB
JavaScript
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, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
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),
|
|
};
|
|
}
|