${createCalendarTopbarHTML({
titleId: 'pantry-cal-title',
prevId: 'pantry-cal-prev',
todayId: 'pantry-cal-today',
nextId: 'pantry-cal-next',
wrapperClass: 'pb-3 flex items-center gap-3',
titleClass: 'text-[13px] font-semibold text-[#ddd6ca] leading-none tracking-[-0.02em]',
})}
${createCalendarWeekdayHeaderHTML()}
${getIngredientCardHTML({
idBase: 'pv2-card',
overlayClass: 'absolute inset-0 z-[60] hidden opacity-0 transition-opacity duration-200 flex items-center justify-center p-5',
})}
`;
}
/* ══════════════════════ HORIZON SELECTOR ══════════════════════ */
function syncHorizonUI() {
ensureValidHorizonDate();
const compactControls = document.getElementById('pantry-compact-controls');
const searchShell = document.getElementById('pantry-search-shell');
const popover = document.getElementById('pantry-calendar-popover');
const horizonLabel = document.getElementById('pantry-horizon-label');
const chevron = document.getElementById('pantry-horizon-chevron');
const titleEl = document.getElementById('pantry-cal-title');
const selectionEl = document.getElementById('pantry-cal-selection');
const prevBtn = document.getElementById('pantry-cal-prev');
const todayBtn = document.getElementById('pantry-cal-today');
if (horizonLabel) horizonLabel.textContent = formatHorizonLabel(horizonEndDate);
if (titleEl) titleEl.textContent = formatCalendarMonthYear(calendarMonthAnchor);
if (selectionEl) selectionEl.textContent = formatRangeSummary(horizonEndDate);
const showCalendar = isCalendarOpen && !isSearchExpanded;
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 (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()));
if (compactControls) {
compactControls.style.opacity = isSearchExpanded ? '0' : '1';
compactControls.style.transform = isSearchExpanded ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
compactControls.style.pointerEvents = isSearchExpanded ? 'none' : 'auto';
}
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();
}
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,
});
}
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;
syncHorizonUI();
window.requestAnimationFrame(() => {
document.getElementById('pantry-search')?.focus();
});
}
function closeCalendar() {
if (!isCalendarOpen) return;
isCalendarOpen = false;
syncHorizonUI();
}
function openCalendar() {
ensureValidHorizonDate();
calendarMonthAnchor = startOfMonth(horizonEndDate);
isCalendarOpen = true;
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 neededIds = new Set();
const shortfalls = [];
const sufficient = [];
for (const need of needs) {
neededIds.add(need.ingredientId);
if (!matchesSearch(need.name, 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) {
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 {
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((id) => matchesSearch(INGREDIENTS[id].name, INGREDIENTS[id].category))
.map((id) => {
const def = INGREDIENTS[id];
return {
ingredientId: id,
name: def.name,
qty: getPantryTotal(id, pantry),
unit: def.pantryUnit,
};
})
.sort((a, b) => a.name.localeCompare(b.name, 'pl'));
return { shortfalls, sufficient, notPlanned };
}
/* ══════════════════════ TILE RENDERING ══════════════════════ */
function shortfallTileHtml(item) {
const dayCtx = formatDayContext(item.days);
return `
Brak wyników — zmień wyszukiwanie.
`;
return;
}
let html = '';
// Section 1: Potrzebne (shortfalls)
if (shortfalls.length > 0) {
html += `
Brak zaplanowanych posiłków
Zaplanuj posiłki, a spiżarnia pokaże czego potrzebujesz i co masz na stanie.
` + 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();
// 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());
// Horizon pill + calendar
document.getElementById('pantry-horizon-toggle')?.addEventListener('click', () => {
if (isCalendarOpen) {
closeCalendar();
return;
}
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')) {
closeCalendar();
}
});
}
window.refreshPantry = refreshPantry;
}