804 lines
37 KiB
JavaScript
804 lines
37 KiB
JavaScript
import {
|
|
INGREDIENTS,
|
|
CATEGORY_LABELS,
|
|
} from '../data/catalog.js?v=9';
|
|
import { loadPantry, getPantryTotal } from '../services/pantryShopping.js?v=2';
|
|
import { loadPlans } from '../services/planStore.js?v=2';
|
|
import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth } from '../services/dateUtils.js';
|
|
import { aggregateRangeIngredientNeed, dayHasAnyMeal } from '../services/planIngredients.js?v=4';
|
|
import {
|
|
bindCalendarDayClicks,
|
|
createCalendarTopbarHTML,
|
|
createCalendarWeekdayHeaderHTML,
|
|
renderCalendarGrid,
|
|
syncCalendarTodayButton,
|
|
} from '../ui/mealCalendar.js?v=11';
|
|
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
|
|
|
|
/* ── helpers ── */
|
|
|
|
function esc(s) {
|
|
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
function unitLabel(u) {
|
|
return u === 'szt' ? 'szt.' : u;
|
|
}
|
|
|
|
function normalizeSearch(q) {
|
|
return String(q).trim().toLowerCase();
|
|
}
|
|
|
|
function formatQty(n) {
|
|
const rounded = Math.round((Number(n) || 0) * 10) / 10;
|
|
return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, '');
|
|
}
|
|
|
|
function toggleStringFilter(list, value) {
|
|
return list.includes(value)
|
|
? list.filter((item) => item !== value)
|
|
: [...list, value];
|
|
}
|
|
|
|
function hasActivePantryFilters() {
|
|
return pantryFilters.categories.length > 0 || pantryFilters.sections.length > 0;
|
|
}
|
|
|
|
function getActivePantryFilterCount() {
|
|
return pantryFilters.categories.length + pantryFilters.sections.length;
|
|
}
|
|
|
|
function filterChipStyle(active) {
|
|
const background = active ? 'rgb(var(--card-rgb))' : 'rgb(var(--app-bg-rgb))';
|
|
const color = active ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))';
|
|
const borderRule = active ? 'border:1px solid rgb(var(--border-input-rgb));' : 'border:none;';
|
|
const shadow = active
|
|
? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
|
|
: '';
|
|
return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
|
|
}
|
|
|
|
const CATEGORY_ICONS = {
|
|
pieczywo: 'fa-bread-slice',
|
|
nabial: 'fa-cheese',
|
|
mieso_ryby: 'fa-drumstick-bite',
|
|
warzywa: 'fa-carrot',
|
|
owoce: 'fa-apple-whole',
|
|
suche: 'fa-wheat-awn',
|
|
przyprawy: 'fa-leaf',
|
|
inne: 'fa-jar',
|
|
};
|
|
const CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
|
|
const PANTRY_SECTION_FILTERS = [
|
|
{ id: 'shortfalls', label: 'Potrzebne' },
|
|
{ id: 'sufficient', label: 'W spiżarni' },
|
|
{ id: 'notPlanned', label: 'Poza planem' },
|
|
];
|
|
|
|
const DAY_NAMES_SHORT = ['nd.', 'pon.', 'wt.', 'śr.', 'czw.', 'pt.', 'sob.'];
|
|
const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
|
|
|
|
const DEFAULT_HORIZON_DAYS = 7;
|
|
const PANTRY_CALENDAR_DAY_ATTR = 'data-pantry-calendar-day';
|
|
const SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))';
|
|
const PANTRY_CALENDAR_THEME = {
|
|
bg: 'rgb(var(--app-bg-rgb))',
|
|
border: 'rgb(var(--card-raised-rgb))',
|
|
text: 'rgb(var(--text-body-soft-rgb))',
|
|
dimText: 'rgb(var(--text-faint-rgb))',
|
|
dimOpacity: 0.58,
|
|
dimmedBg: 'transparent',
|
|
dimmedBorder: 'transparent',
|
|
dot: 'rgb(var(--text-faint-rgb))',
|
|
selectedBg: 'rgb(var(--card-rgb))',
|
|
selectedBorder: 'rgb(var(--border-input-rgb))',
|
|
selectedText: 'rgb(var(--text-emphasis-rgb))',
|
|
selectedDot: 'rgb(var(--text-emphasis-rgb))',
|
|
};
|
|
|
|
/* ── state ── */
|
|
|
|
let ingredientCard = null;
|
|
let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
|
|
let isSearchExpanded = false;
|
|
let isCalendarOpen = false;
|
|
let isFilterOpen = false;
|
|
let calendarMonthAnchor = startOfMonth(horizonEndDate);
|
|
let pantryGlobalListenersBound = false;
|
|
let pantryFilters = {
|
|
categories: [],
|
|
sections: [],
|
|
};
|
|
|
|
/* ── date formatting ── */
|
|
|
|
function getToday() {
|
|
return startOfDay(new Date());
|
|
}
|
|
|
|
function ensureValidHorizonDate() {
|
|
const today = getToday();
|
|
if (!(horizonEndDate instanceof Date) || Number.isNaN(horizonEndDate.getTime()) || horizonEndDate.getTime() < today.getTime()) {
|
|
horizonEndDate = today;
|
|
}
|
|
if (!(calendarMonthAnchor instanceof Date) || Number.isNaN(calendarMonthAnchor.getTime())) {
|
|
calendarMonthAnchor = startOfMonth(horizonEndDate);
|
|
}
|
|
}
|
|
|
|
function getHorizonDays() {
|
|
ensureValidHorizonDate();
|
|
const diffMs = startOfDay(horizonEndDate).getTime() - getToday().getTime();
|
|
return Math.max(1, Math.floor(diffMs / 86400000) + 1);
|
|
}
|
|
|
|
function formatEndDate(date) {
|
|
return `${DAY_NAMES_SHORT[date.getDay()]} ${date.getDate()} ${MONTHS_SHORT[date.getMonth()]}`;
|
|
}
|
|
|
|
function formatHorizonLabel(date) {
|
|
return sameDay(date, getToday()) ? 'Do dziś' : `Do ${formatEndDate(date)}`;
|
|
}
|
|
|
|
function formatRangeSummary(date) {
|
|
return sameDay(date, getToday()) ? 'Zakres: tylko dziś' : `Zakres: dziś - ${formatEndDate(date)}`;
|
|
}
|
|
|
|
function formatDayContext(dayStrings) {
|
|
const dayNames = dayStrings.map((ds) => {
|
|
const d = new Date(ds + 'T00:00:00');
|
|
return DAY_NAMES_SHORT[d.getDay()];
|
|
});
|
|
if (dayNames.length <= 3) return dayNames.join(', ');
|
|
return dayNames.slice(0, 3).join(', ') + ', \u2026';
|
|
}
|
|
|
|
/* ── media helpers ── */
|
|
|
|
function photoStripMedia(image, icon, accentBg) {
|
|
if (image) {
|
|
return `<div class="w-[4.5rem] shrink-0 relative self-stretch">
|
|
<img src="${esc(image)}" alt="" class="absolute inset-0 w-full h-full object-cover">
|
|
</div>`;
|
|
}
|
|
return `<div class="w-[4.5rem] shrink-0 flex items-center justify-center self-stretch" style="background:rgb(var(--card-soft-rgb));">
|
|
<i class="fas ${icon} text-[22px]" style="color:var(--icon-watermark);"></i>
|
|
</div>`;
|
|
}
|
|
|
|
/* ══════════════════════ HTML SHELL ══════════════════════ */
|
|
|
|
export function getPantryHTML() {
|
|
return `
|
|
<div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
|
|
|
|
<!-- ── floating top bar ── -->
|
|
<div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
|
|
<div class="pointer-events-auto relative z-[1] w-full">
|
|
<div id="pantry-topbar" class="relative min-h-12">
|
|
<div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
|
|
<h1 class="flex-1 min-w-0 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Zapasy</h1>
|
|
|
|
<div id="pantry-horizon-wrap" class="relative shrink">
|
|
<button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
|
|
<span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
|
|
<i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="pantry-filter-wrap" class="relative shrink-0">
|
|
<button type="button" id="pantry-filter-toggle" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));">
|
|
<i class="fas fa-sliders-h text-[12px]"></i>
|
|
<span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
|
|
</button>
|
|
|
|
<div id="pantry-filter-popover" class="absolute right-0 top-full mt-2 w-[19rem] max-w-[calc(100vw-2rem)] rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
|
|
<div class="flex items-center justify-between gap-3 px-0.5 pb-3">
|
|
<p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
|
|
<button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
|
|
Wyczyść
|
|
</button>
|
|
</div>
|
|
<div id="pantry-filter-panel-body" class="space-y-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="pantry-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));">
|
|
<i class="fas fa-search text-[13px]"></i>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div id="pantry-calendar-popover" class="absolute left-0 right-0 top-full mt-2 rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
|
|
${createCalendarTopbarHTML({
|
|
prevId: 'pantry-cal-prev',
|
|
todayId: 'pantry-cal-today',
|
|
nextId: 'pantry-cal-next',
|
|
wrapperClass: 'pb-3 flex items-center justify-end gap-3',
|
|
controlsStyle: `background:${PANTRY_CALENDAR_THEME.bg};border-color:${PANTRY_CALENDAR_THEME.border};`,
|
|
navButtonClass: 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[rgb(var(--text-body-soft-rgb))] transition-colors',
|
|
todayButtonActiveClass: 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
|
|
todayButtonDimClass: 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[rgb(var(--text-faint-rgb))] cursor-default',
|
|
})}
|
|
${createCalendarWeekdayHeaderHTML(undefined, {
|
|
wrapperClass: 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-[rgb(var(--text-dim-rgb))] uppercase tracking-wide mb-1 leading-none',
|
|
})}
|
|
<div id="pantry-calendar-grid" class="grid grid-cols-7 gap-1.5"></div>
|
|
|
|
<div class="mt-3 pt-3 border-t" style="border-color:rgb(var(--card-strong-rgb));">
|
|
<p id="pantry-cal-selection" class="min-w-0 text-[11px] leading-snug" style="color:rgb(var(--text-dim-rgb));"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
|
|
<i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
|
|
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
|
|
class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
|
|
<button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
|
|
<i class="fas fa-xmark text-[13px]"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── scrollable content ── -->
|
|
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
|
|
<div id="pantry-board"></div>
|
|
</div>
|
|
</div>
|
|
${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
|
|
}
|
|
|
|
/* ══════════════════════ HORIZON SELECTOR ══════════════════════ */
|
|
|
|
function syncHorizonUI() {
|
|
ensureValidHorizonDate();
|
|
|
|
const defaultRow = document.getElementById('pantry-default-row');
|
|
const searchShell = document.getElementById('pantry-search-shell');
|
|
const popover = document.getElementById('pantry-calendar-popover');
|
|
const filterPopover = document.getElementById('pantry-filter-popover');
|
|
const filterToggle = document.getElementById('pantry-filter-toggle');
|
|
const filterCount = document.getElementById('pantry-filter-count');
|
|
const compactLabel = document.getElementById('pantry-horizon-compact-label');
|
|
const compactPill = document.getElementById('pantry-horizon-compact');
|
|
const chevron = document.getElementById('pantry-horizon-chevron');
|
|
const selectionEl = document.getElementById('pantry-cal-selection');
|
|
const prevBtn = document.getElementById('pantry-cal-prev');
|
|
const todayBtn = document.getElementById('pantry-cal-today');
|
|
|
|
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
|
|
if (selectionEl) selectionEl.textContent = formatRangeSummary(horizonEndDate);
|
|
|
|
const showCalendar = isCalendarOpen && !isSearchExpanded;
|
|
const showDefault = !isSearchExpanded;
|
|
const showFilter = isFilterOpen && showDefault;
|
|
const activeFilterCount = getActivePantryFilterCount();
|
|
|
|
if (defaultRow) {
|
|
defaultRow.style.opacity = showDefault ? '1' : '0';
|
|
defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
|
|
defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
|
|
}
|
|
|
|
if (compactPill) {
|
|
compactPill.style.setProperty('background', showCalendar ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
|
|
compactPill.style.setProperty('border-color', showCalendar ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
|
|
}
|
|
|
|
if (popover) {
|
|
popover.style.opacity = showCalendar ? '1' : '0';
|
|
popover.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
|
|
popover.style.pointerEvents = showCalendar ? 'auto' : 'none';
|
|
}
|
|
if (chevron) {
|
|
chevron.style.transform = showCalendar ? 'rotate(180deg)' : 'rotate(0deg)';
|
|
}
|
|
|
|
if (filterPopover) {
|
|
filterPopover.style.opacity = showFilter ? '1' : '0';
|
|
filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
|
|
filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
|
|
}
|
|
if (filterToggle) {
|
|
const isActive = showFilter || hasActivePantryFilters();
|
|
filterToggle.style.setProperty('background', isActive ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
|
|
filterToggle.style.setProperty('border-color', isActive ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
|
|
filterToggle.style.setProperty('color', isActive ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
|
|
}
|
|
if (filterCount) {
|
|
filterCount.textContent = String(activeFilterCount);
|
|
filterCount.classList.toggle('hidden', activeFilterCount === 0);
|
|
filterCount.classList.toggle('flex', activeFilterCount > 0);
|
|
}
|
|
|
|
if (prevBtn) {
|
|
const isCurrentMonth = sameMonth(calendarMonthAnchor, getToday());
|
|
prevBtn.disabled = isCurrentMonth;
|
|
prevBtn.style.opacity = isCurrentMonth ? '0.45' : '1';
|
|
prevBtn.style.cursor = isCurrentMonth ? 'default' : 'pointer';
|
|
}
|
|
syncCalendarTodayButton(
|
|
todayBtn,
|
|
sameMonth(calendarMonthAnchor, getToday()),
|
|
horizonEndDate,
|
|
{
|
|
ariaLabelGo: 'Pokaż bieżący miesiąc w kalendarzu',
|
|
ariaLabelCurrent: 'Wyświetlany jest bieżący miesiąc',
|
|
},
|
|
);
|
|
|
|
if (searchShell) {
|
|
searchShell.style.opacity = isSearchExpanded ? '1' : '0';
|
|
searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
|
|
searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
|
|
}
|
|
|
|
renderCalendarPopover();
|
|
renderFilterPopover();
|
|
}
|
|
|
|
function renderCalendarPopover() {
|
|
const gridEl = document.getElementById('pantry-calendar-grid');
|
|
if (!gridEl) return;
|
|
|
|
ensureValidHorizonDate();
|
|
const today = getToday();
|
|
const plans = loadPlans();
|
|
|
|
renderCalendarGrid({
|
|
gridEl,
|
|
mode: 'month',
|
|
anchorDate: calendarMonthAnchor,
|
|
selectedDate: horizonEndDate,
|
|
resolveDayState: (day, meta) => {
|
|
const isPast = day.getTime() < today.getTime();
|
|
return {
|
|
disabled: isPast,
|
|
dimmed: isPast || !meta.inCurrentMonth,
|
|
showIndicator: dayHasAnyMeal(plans, day),
|
|
};
|
|
},
|
|
dayAttr: PANTRY_CALENDAR_DAY_ATTR,
|
|
theme: PANTRY_CALENDAR_THEME,
|
|
});
|
|
}
|
|
|
|
function filterChipHtml(kind, value, label, active) {
|
|
return `<button
|
|
type="button"
|
|
class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors"
|
|
style="${filterChipStyle(active)}"
|
|
data-pantry-filter-kind="${esc(kind)}"
|
|
data-pantry-filter-value="${esc(value)}"
|
|
>${esc(label)}</button>`;
|
|
}
|
|
|
|
function renderFilterPopover() {
|
|
const body = document.getElementById('pantry-filter-panel-body');
|
|
if (!body) return;
|
|
|
|
const categoryChips = CATEGORY_ORDER
|
|
.map((category) => filterChipHtml(
|
|
'category',
|
|
category,
|
|
CATEGORY_LABELS[category] || category,
|
|
pantryFilters.categories.includes(category),
|
|
))
|
|
.join('');
|
|
|
|
const sectionChips = PANTRY_SECTION_FILTERS
|
|
.map((item) => filterChipHtml(
|
|
'section',
|
|
item.id,
|
|
item.label,
|
|
pantryFilters.sections.includes(item.id),
|
|
))
|
|
.join('');
|
|
|
|
body.innerHTML = `
|
|
<section>
|
|
<p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:rgb(var(--text-muted-rgb));">Kategorie</p>
|
|
<div class="flex flex-wrap gap-2">${categoryChips}</div>
|
|
</section>
|
|
<section>
|
|
<p class="text-[10px] font-bold uppercase tracking-wider mb-3 px-0.5" style="color:rgb(var(--text-muted-rgb));">Sekcje</p>
|
|
<div class="flex flex-wrap gap-2">${sectionChips}</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
function closeSearch() {
|
|
const input = document.getElementById('pantry-search');
|
|
const hadQuery = Boolean(input?.value);
|
|
if (input) {
|
|
input.value = '';
|
|
input.blur();
|
|
}
|
|
isSearchExpanded = false;
|
|
syncHorizonUI();
|
|
if (hadQuery) renderBoard();
|
|
}
|
|
|
|
function openSearch() {
|
|
isSearchExpanded = true;
|
|
isCalendarOpen = false;
|
|
isFilterOpen = false;
|
|
syncHorizonUI();
|
|
window.requestAnimationFrame(() => {
|
|
document.getElementById('pantry-search')?.focus();
|
|
});
|
|
}
|
|
|
|
function closeCalendar() {
|
|
if (!isCalendarOpen) return;
|
|
isCalendarOpen = false;
|
|
syncHorizonUI();
|
|
}
|
|
|
|
function openCalendar() {
|
|
ensureValidHorizonDate();
|
|
calendarMonthAnchor = startOfMonth(horizonEndDate);
|
|
isSearchExpanded = false;
|
|
isFilterOpen = false;
|
|
isCalendarOpen = true;
|
|
syncHorizonUI();
|
|
}
|
|
|
|
function closeFilter() {
|
|
if (!isFilterOpen) return;
|
|
isFilterOpen = false;
|
|
syncHorizonUI();
|
|
}
|
|
|
|
function toggleFilterPanel() {
|
|
isCalendarOpen = false;
|
|
isSearchExpanded = false;
|
|
isFilterOpen = !isFilterOpen;
|
|
syncHorizonUI();
|
|
}
|
|
|
|
function selectHorizonDate(date) {
|
|
const next = startOfDay(date);
|
|
if (next.getTime() < getToday().getTime()) return;
|
|
horizonEndDate = next;
|
|
calendarMonthAnchor = startOfMonth(next);
|
|
isCalendarOpen = false;
|
|
syncHorizonUI();
|
|
renderBoard();
|
|
}
|
|
|
|
/* ══════════════════════ DATA CLASSIFICATION ══════════════════════ */
|
|
|
|
/**
|
|
* Classify all ingredients into 3 groups based on plan needs and pantry stock.
|
|
*/
|
|
function classifyIngredients(searchQuery) {
|
|
const plans = loadPlans();
|
|
const pantry = loadPantry();
|
|
const today = getToday();
|
|
const needs = aggregateRangeIngredientNeed(plans, today, getHorizonDays());
|
|
|
|
const q = normalizeSearch(searchQuery);
|
|
const matchesSearch = (name, category) => {
|
|
if (!q) return true;
|
|
return name.toLowerCase().includes(q) || (CATEGORY_LABELS[category] || '').toLowerCase().includes(q);
|
|
};
|
|
const matchesCategory = (category) => pantryFilters.categories.length === 0 || pantryFilters.categories.includes(category);
|
|
const matchesSection = (section) => pantryFilters.sections.length === 0 || pantryFilters.sections.includes(section);
|
|
|
|
const neededIds = new Set();
|
|
const shortfalls = [];
|
|
const sufficient = [];
|
|
|
|
for (const need of needs) {
|
|
neededIds.add(need.ingredientId);
|
|
if (!matchesSearch(need.name, need.category) || !matchesCategory(need.category)) continue;
|
|
|
|
const have = getPantryTotal(need.ingredientId, pantry);
|
|
const def = INGREDIENTS[need.ingredientId];
|
|
const icon = CATEGORY_ICONS[def?.category] || 'fa-jar';
|
|
const item = {
|
|
ingredientId: need.ingredientId,
|
|
name: need.name,
|
|
category: need.category,
|
|
needed: need.amount,
|
|
unit: need.unit,
|
|
pantryQty: have,
|
|
days: need.days,
|
|
image: def?.image || null,
|
|
icon,
|
|
};
|
|
|
|
if (have < need.amount) {
|
|
if (!matchesSection('shortfalls')) continue;
|
|
shortfalls.push({
|
|
...item,
|
|
shortfall: Math.round((need.amount - have) * 10) / 10,
|
|
fillPct: need.amount > 0 ? Math.min(100, Math.round((have / need.amount) * 100)) : 0,
|
|
});
|
|
} else {
|
|
if (!matchesSection('sufficient')) continue;
|
|
sufficient.push({
|
|
...item,
|
|
fillPct: 100,
|
|
});
|
|
}
|
|
}
|
|
|
|
// "Poza planem": all ingredients NOT in any plan need
|
|
const notPlanned = Object.keys(INGREDIENTS)
|
|
.filter((id) => !neededIds.has(id))
|
|
.filter(() => matchesSection('notPlanned'))
|
|
.filter((id) => matchesSearch(INGREDIENTS[id].name, INGREDIENTS[id].category))
|
|
.filter((id) => matchesCategory(INGREDIENTS[id].category))
|
|
.map((id) => {
|
|
const def = INGREDIENTS[id];
|
|
return {
|
|
ingredientId: id,
|
|
name: def.name,
|
|
qty: getPantryTotal(id, pantry),
|
|
unit: def.pantryUnit,
|
|
image: def.image || null,
|
|
icon: CATEGORY_ICONS[def.category] || 'fa-jar',
|
|
};
|
|
})
|
|
.sort((a, b) => a.name.length - b.name.length);
|
|
|
|
return { shortfalls, sufficient, notPlanned };
|
|
}
|
|
|
|
/* ══════════════════════ TILE RENDERING ══════════════════════ */
|
|
|
|
function tileIconHtml(item, size = 'sm') {
|
|
const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6';
|
|
const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]';
|
|
if (item.image) {
|
|
return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
|
|
}
|
|
return `<div class="${wrap} flex items-center justify-center shrink-0"><i class="fas ${item.icon} ${iconSize}" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
|
|
}
|
|
|
|
function shortfallTileHtml(item) {
|
|
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
|
return `
|
|
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
|
|
${tileIconHtml(item, 'lg')}
|
|
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
|
<p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
|
|
<div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
|
|
</div>
|
|
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
|
|
</div>
|
|
</div>
|
|
</button>`;
|
|
}
|
|
|
|
function sufficientTileHtml(item) {
|
|
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
|
return `
|
|
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
|
|
${tileIconHtml(item, 'lg')}
|
|
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
|
<p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
|
|
<div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
|
|
</div>
|
|
<span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
|
|
</div>
|
|
</div>
|
|
</button>`;
|
|
}
|
|
|
|
function notPlannedChipHtml(item) {
|
|
const hasStock = item.qty > 0;
|
|
const clamp = item.name.length > 25 ? ' min-w-0' : '';
|
|
return `
|
|
<button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
|
|
${tileIconHtml(item)}
|
|
<p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? 'rgb(var(--text-muted-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(item.name)}</p>
|
|
<span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? 'rgb(var(--text-dim-rgb))' : 'rgb(var(--text-subdued-rgb))'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>
|
|
</button>`;
|
|
}
|
|
|
|
/* ══════════════════════ SECTION RENDERING ══════════════════════ */
|
|
|
|
function sectionHeaderHtml(icon, iconBg, iconColor, title, titleColor, count) {
|
|
return `
|
|
<div class="flex items-center gap-2 mb-2.5 px-0.5">
|
|
<span class="text-[10px] font-bold uppercase tracking-wider" style="color:${titleColor};">${esc(title)}</span>
|
|
<span class="text-[10px]" style="color:rgb(var(--text-subdued-rgb));">${count}</span>
|
|
</div>`;
|
|
}
|
|
|
|
function renderBoard() {
|
|
const root = document.getElementById('pantry-board');
|
|
if (!root) return;
|
|
|
|
const q = document.getElementById('pantry-search')?.value || '';
|
|
const hasFilters = hasActivePantryFilters();
|
|
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
|
|
|
|
const totalVisible = shortfalls.length + sufficient.length + notPlanned.length;
|
|
if (totalVisible === 0 && (q || hasFilters)) {
|
|
root.innerHTML = `<p class="text-sm text-center py-10" style="color:rgb(var(--text-dim-rgb));">Brak wyników — zmień filtry lub wyszukiwanie.</p>`;
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
// Section 1: Potrzebne (shortfalls)
|
|
if (shortfalls.length > 0) {
|
|
html += `<section class="mb-5">`;
|
|
html += sectionHeaderHtml('fa-exclamation', 'rgb(var(--card-soft-rgb))', SHORTFALL_ACCENT, 'Potrzebne', 'rgb(var(--text-faint-rgb))', shortfalls.length);
|
|
html += `<div class="flex flex-wrap gap-2">`;
|
|
html += shortfalls.sort((a, b) => a.name.length - b.name.length).map(shortfallTileHtml).join('');
|
|
html += `</div></section>`;
|
|
}
|
|
|
|
// Section 2: W spiżarni (sufficient)
|
|
if (sufficient.length > 0) {
|
|
html += `<section class="mb-5">`;
|
|
html += sectionHeaderHtml('fa-check', 'rgba(var(--success-rgb), 0.14)', 'rgb(var(--success-rgb))', 'W spiżarni', 'rgb(var(--text-faint-rgb))', sufficient.length);
|
|
html += `<div class="flex flex-wrap gap-2">`;
|
|
html += sufficient.sort((a, b) => a.name.length - b.name.length).map(sufficientTileHtml).join('');
|
|
html += `</div></section>`;
|
|
}
|
|
|
|
// Section 3: Poza planem
|
|
if (notPlanned.length > 0) {
|
|
html += `<section class="mb-5">`;
|
|
html += sectionHeaderHtml('fa-minus', 'rgb(var(--app-bg-rgb))', 'rgb(var(--text-subdued-rgb))', 'Poza planem', 'rgb(var(--text-faint-rgb))', notPlanned.length);
|
|
html += `<div class="flex flex-wrap gap-2">`;
|
|
html += notPlanned.map(notPlannedChipHtml).join('');
|
|
html += `</div></section>`;
|
|
}
|
|
|
|
// Empty state: no plans at all
|
|
if (shortfalls.length === 0 && sufficient.length === 0 && !q && !hasFilters) {
|
|
html = `
|
|
<div class="flex flex-col items-center justify-center py-10 text-center mb-6">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center mb-3" style="background:rgb(var(--card-rgb));">
|
|
<i class="fas fa-calendar-xmark text-lg" style="color:rgb(var(--text-subdued-rgb));"></i>
|
|
</div>
|
|
<p class="text-[13px] font-semibold mb-1" style="color:rgb(var(--text-body-rgb));">Brak zaplanowanych posiłków</p>
|
|
<p class="text-[11px] max-w-[16rem]" style="color:rgb(var(--text-dim-rgb));">Zaplanuj posiłki, a spiżarnia pokaże czego potrzebujesz i co masz na stanie.</p>
|
|
</div>` + html;
|
|
}
|
|
|
|
root.innerHTML = html;
|
|
|
|
// Bind tile clicks
|
|
root.querySelectorAll('.pv2-tile').forEach((btn) => {
|
|
btn.addEventListener('click', () => openIngredientCard(btn.dataset.id, null));
|
|
});
|
|
}
|
|
|
|
/* ══════════════════════ INGREDIENT SHEET ══════════════════════ */
|
|
|
|
function openIngredientCard(ingredientId, productId) {
|
|
ingredientCard?.open({
|
|
ingredientId,
|
|
productId,
|
|
sourceNote: 'Ze spiżarni',
|
|
onAfterChange: () => renderBoard(),
|
|
});
|
|
}
|
|
|
|
/* ══════════════════════ PUBLIC API ══════════════════════ */
|
|
|
|
export function refreshPantry() {
|
|
syncHorizonUI();
|
|
renderBoard();
|
|
ingredientCard?.refresh();
|
|
}
|
|
|
|
export function setupPantry() {
|
|
if (!ingredientCard) {
|
|
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
|
|
ingredientCard.bind();
|
|
}
|
|
|
|
syncHorizonUI();
|
|
renderBoard();
|
|
|
|
// Scroll shadow under top bar
|
|
const pantryScroll = document.getElementById('pantry-scroll');
|
|
const topbarOuter = document.getElementById('pantry-topbar-outer');
|
|
if (pantryScroll && topbarOuter) {
|
|
const shadow = document.createElement('div');
|
|
shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
|
|
topbarOuter.appendChild(shadow);
|
|
pantryScroll.addEventListener('scroll', () => {
|
|
shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
|
|
});
|
|
}
|
|
|
|
// Search
|
|
document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
|
|
document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') closeSearch();
|
|
});
|
|
document.getElementById('pantry-search-toggle')?.addEventListener('click', () => openSearch());
|
|
document.getElementById('pantry-search-close')?.addEventListener('click', () => closeSearch());
|
|
document.getElementById('pantry-filter-toggle')?.addEventListener('click', () => toggleFilterPanel());
|
|
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
|
|
event.stopPropagation();
|
|
pantryFilters = { categories: [], sections: [] };
|
|
syncHorizonUI();
|
|
renderBoard();
|
|
});
|
|
document.getElementById('pantry-filter-panel-body')?.addEventListener('click', (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof Element)) return;
|
|
|
|
const chip = target.closest('[data-pantry-filter-kind]');
|
|
if (!(chip instanceof Element)) return;
|
|
|
|
event.stopPropagation();
|
|
|
|
const kind = chip.getAttribute('data-pantry-filter-kind');
|
|
const value = chip.getAttribute('data-pantry-filter-value');
|
|
if (!kind || !value) return;
|
|
|
|
if (kind === 'category') {
|
|
pantryFilters = {
|
|
...pantryFilters,
|
|
categories: toggleStringFilter(pantryFilters.categories, value),
|
|
};
|
|
}
|
|
if (kind === 'section') {
|
|
pantryFilters = {
|
|
...pantryFilters,
|
|
sections: toggleStringFilter(pantryFilters.sections, value),
|
|
};
|
|
}
|
|
|
|
syncHorizonUI();
|
|
renderBoard();
|
|
});
|
|
|
|
// Horizon pill + calendar
|
|
document.getElementById('pantry-horizon-compact')?.addEventListener('click', (event) => {
|
|
event.stopPropagation();
|
|
isCalendarOpen ? closeCalendar() : openCalendar();
|
|
});
|
|
document.getElementById('pantry-cal-prev')?.addEventListener('click', () => {
|
|
const prevMonth = addMonths(calendarMonthAnchor, -1);
|
|
if (prevMonth.getTime() < startOfMonth(getToday()).getTime()) return;
|
|
calendarMonthAnchor = prevMonth;
|
|
syncHorizonUI();
|
|
});
|
|
document.getElementById('pantry-cal-next')?.addEventListener('click', () => {
|
|
calendarMonthAnchor = addMonths(calendarMonthAnchor, 1);
|
|
syncHorizonUI();
|
|
});
|
|
document.getElementById('pantry-cal-today')?.addEventListener('click', () => {
|
|
calendarMonthAnchor = startOfMonth(getToday());
|
|
syncHorizonUI();
|
|
});
|
|
bindCalendarDayClicks(document.getElementById('pantry-calendar-grid'), (date) => {
|
|
selectHorizonDate(date);
|
|
}, PANTRY_CALENDAR_DAY_ATTR);
|
|
|
|
if (!pantryGlobalListenersBound) {
|
|
pantryGlobalListenersBound = true;
|
|
document.addEventListener('click', (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof Element)) return;
|
|
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
|
|
closeCalendar();
|
|
}
|
|
if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
|
|
closeFilter();
|
|
}
|
|
});
|
|
}
|
|
|
|
window.refreshPantry = refreshPantry;
|
|
}
|