Rework calendar
This commit is contained in:
241
js/ui/mealCalendar.js
Normal file
241
js/ui/mealCalendar.js
Normal file
@@ -0,0 +1,241 @@
|
||||
import {
|
||||
addDays,
|
||||
sameDay,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfWeekMonday,
|
||||
weekContains,
|
||||
} from '../services/dateUtils.js';
|
||||
|
||||
export const CALENDAR_MONTHS_LONG = [
|
||||
'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
|
||||
'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
|
||||
];
|
||||
|
||||
export const CALENDAR_MONTHS_SHORT = [
|
||||
'sty', 'lut', 'mar', 'kwi', 'maj', 'cze',
|
||||
'lip', 'sie', 'wrz', 'paź', 'lis', 'gru',
|
||||
];
|
||||
|
||||
export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd'];
|
||||
export const CALENDAR_DAY_ATTR = 'data-calendar-day';
|
||||
export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[#6d6c67]/75';
|
||||
|
||||
function getCalendarDayHTML(day, meta, dayState, dayAttr) {
|
||||
const { mode, selectedDate, inCurrentMonth } = meta;
|
||||
const isSelected = selectedDate && sameDay(day, selectedDate);
|
||||
const showIndicator = !!dayState.showIndicator;
|
||||
const isDisabled = !!dayState.disabled;
|
||||
const isDimmed = !!dayState.dimmed && !isSelected;
|
||||
const bg = isSelected ? '#23221e' : '#2f2f2d';
|
||||
const border = isSelected ? '#787876' : '#444442';
|
||||
const text = isSelected ? '#f2efe8' : (isDimmed ? '#7d7a74' : '#d7d2c8');
|
||||
const dot = isSelected ? '#f2efe8' : '#a59f92';
|
||||
const opacity = isDimmed ? '0.72' : '1';
|
||||
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.3rem] w-full min-w-0 max-w-full items-center justify-center rounded-full border text-xs font-medium transition-colors leading-tight overflow-hidden`;
|
||||
const innerClass = mode === 'month'
|
||||
? 'relative flex h-full w-full flex-col items-center justify-center'
|
||||
: 'relative flex h-full w-full items-center justify-center';
|
||||
const dotBottom = mode === 'month' ? '0.18rem' : '0.15rem';
|
||||
const tagName = isDisabled ? 'div' : 'button';
|
||||
const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${day.getTime()}"`;
|
||||
|
||||
return `
|
||||
<${tagName}${buttonAttrs}
|
||||
class="${outerClass}"
|
||||
style="background:${bg};border-color:${border};color:${text};opacity:${opacity};">
|
||||
<span class="${innerClass}">
|
||||
<span class="text-[13px] font-semibold leading-none ${showIndicator ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
|
||||
${showIndicator
|
||||
? `<span class="absolute left-1/2 w-1 h-1 -translate-x-1/2 rounded-full opacity-75" style="bottom:${dotBottom};background:${dot};" aria-hidden="true"></span>`
|
||||
: ''}
|
||||
</span>
|
||||
</${tagName}>
|
||||
`;
|
||||
}
|
||||
|
||||
function getMonthCells(monthAnchor) {
|
||||
const first = startOfMonth(monthAnchor);
|
||||
const startGrid = startOfWeekMonday(first);
|
||||
const cells = [];
|
||||
for (let i = 0; i < 42; i++) cells.push(addDays(startGrid, i));
|
||||
while (cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
|
||||
cells.splice(-7);
|
||||
}
|
||||
return { cells, month: first.getMonth() };
|
||||
}
|
||||
|
||||
function getDayState(day, meta, resolveDayState) {
|
||||
if (typeof resolveDayState !== 'function') {
|
||||
return {
|
||||
disabled: false,
|
||||
dimmed: meta.mode === 'month' && !meta.inCurrentMonth,
|
||||
showIndicator: false,
|
||||
};
|
||||
}
|
||||
|
||||
const resolved = resolveDayState(day, meta) || {};
|
||||
return {
|
||||
disabled: !!resolved.disabled,
|
||||
dimmed: !!resolved.dimmed,
|
||||
showIndicator: !!resolved.showIndicator,
|
||||
};
|
||||
}
|
||||
|
||||
export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT) {
|
||||
return `
|
||||
<div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-gray-400 uppercase tracking-wide mb-1 leading-none">
|
||||
${labels.map((label) => `<div>${label}</div>`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function createCalendarTopbarHTML({
|
||||
titleId,
|
||||
prevId,
|
||||
todayId,
|
||||
nextId,
|
||||
wrapperClass = 'px-4 pt-4 pb-3 flex items-center gap-3',
|
||||
titleClass = 'text-[18px] font-semibold text-gray-900 leading-none tracking-[-0.03em]',
|
||||
}) {
|
||||
return `
|
||||
<div class="${wrapperClass}">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p id="${titleId}" class="${titleClass}"></p>
|
||||
</div>
|
||||
<div class="shrink-0 flex h-[2.3rem] items-center gap-0.5 rounded-full border px-1" style="background:#2f2f2d;border-color:#444442;">
|
||||
<button type="button" id="${prevId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Poprzedni okres">
|
||||
<i class="fas fa-chevron-left text-[11px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" id="${todayId}" title="Dziś" aria-label="Przejdź do dzisiejszego dnia"
|
||||
class="h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none text-[#d7d2c8] transition-colors hover:bg-[#3a3a37]">
|
||||
Dziś
|
||||
</button>
|
||||
<button type="button" id="${nextId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Następny okres">
|
||||
<i class="fas fa-chevron-right text-[11px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function formatCalendarMonthYear(date) {
|
||||
return `${CALENDAR_MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function formatCalendarSelectedDate(date) {
|
||||
return `${date.getDate()} ${CALENDAR_MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function isCalendarOnToday(mode, weekStart, monthAnchor, selectedDate) {
|
||||
const today = startOfDay(new Date());
|
||||
if (!sameDay(selectedDate, today)) return false;
|
||||
if (mode === 'week') return weekContains(weekStart, today);
|
||||
return startOfMonth(monthAnchor).getTime() === startOfMonth(today).getTime();
|
||||
}
|
||||
|
||||
export function syncCalendarTodayButton(buttonEl, isOnToday) {
|
||||
if (!buttonEl) return;
|
||||
const base = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none transition-colors';
|
||||
const active = `${base} text-[#d7d2c8] hover:bg-[#3a3a37]`;
|
||||
const dim = `${base} text-[#7d7a74] cursor-default`;
|
||||
buttonEl.className = isOnToday ? dim : active;
|
||||
buttonEl.disabled = isOnToday;
|
||||
}
|
||||
|
||||
export function renderCalendarGrid({
|
||||
gridEl,
|
||||
mode,
|
||||
anchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
}) {
|
||||
if (!gridEl) return;
|
||||
|
||||
if (mode === 'week') {
|
||||
const weekStart = startOfWeekMonday(anchorDate);
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const day = addDays(weekStart, i);
|
||||
const meta = {
|
||||
mode,
|
||||
selectedDate,
|
||||
inCurrentMonth: true,
|
||||
};
|
||||
cells.push(getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr));
|
||||
}
|
||||
gridEl.innerHTML = cells.join('');
|
||||
return;
|
||||
}
|
||||
|
||||
const { cells, month } = getMonthCells(anchorDate);
|
||||
gridEl.innerHTML = cells.map((day) => {
|
||||
const meta = {
|
||||
mode,
|
||||
selectedDate,
|
||||
inCurrentMonth: day.getMonth() === month,
|
||||
};
|
||||
return getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr);
|
||||
}).join('');
|
||||
}
|
||||
|
||||
export function renderCollapsibleCalendar({
|
||||
weekGridEl,
|
||||
monthGridEl,
|
||||
weekAnchorDate,
|
||||
monthAnchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
}) {
|
||||
renderCalendarGrid({
|
||||
gridEl: weekGridEl,
|
||||
mode: 'week',
|
||||
anchorDate: weekAnchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr,
|
||||
});
|
||||
renderCalendarGrid({
|
||||
gridEl: monthGridEl,
|
||||
mode: 'month',
|
||||
anchorDate: monthAnchorDate,
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr,
|
||||
});
|
||||
}
|
||||
|
||||
export function syncCollapsibleCalendarMode({
|
||||
mode,
|
||||
weekWrapEl,
|
||||
monthWrapEl,
|
||||
handleEl,
|
||||
activePaddingBottom = '0.75rem',
|
||||
weekMaxHeight = '10rem',
|
||||
monthMaxHeight = '17.25rem',
|
||||
}) {
|
||||
if (weekWrapEl) {
|
||||
weekWrapEl.style.maxHeight = mode === 'week' ? weekMaxHeight : '0';
|
||||
weekWrapEl.style.opacity = mode === 'week' ? '1' : '0';
|
||||
weekWrapEl.style.paddingBottom = mode === 'week' ? activePaddingBottom : '0';
|
||||
}
|
||||
if (monthWrapEl) {
|
||||
monthWrapEl.style.maxHeight = mode === 'month' ? monthMaxHeight : '0';
|
||||
monthWrapEl.style.opacity = mode === 'month' ? '1' : '0';
|
||||
monthWrapEl.style.paddingBottom = mode === 'month' ? activePaddingBottom : '0';
|
||||
}
|
||||
if (handleEl) handleEl.className = CALENDAR_HANDLE_CLASS;
|
||||
}
|
||||
|
||||
export function bindCalendarDayClicks(containerEl, onSelect, dayAttr = CALENDAR_DAY_ATTR) {
|
||||
if (!containerEl || typeof onSelect !== 'function') return;
|
||||
containerEl.addEventListener('click', (event) => {
|
||||
const button = event.target.closest(`[${dayAttr}]`);
|
||||
if (!button || !containerEl.contains(button)) return;
|
||||
const ts = Number(button.getAttribute(dayAttr));
|
||||
if (!Number.isFinite(ts)) return;
|
||||
onSelect(new Date(ts), button, event);
|
||||
});
|
||||
}
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
sameDay,
|
||||
sameMonth,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfWeekMonday,
|
||||
} from '../services/dateUtils.js';
|
||||
import {
|
||||
@@ -15,16 +14,23 @@ import {
|
||||
newPlanEntryId,
|
||||
savePlans,
|
||||
} from '../services/planStore.js';
|
||||
import { dayHasAnyMeal } from '../services/planIngredients.js';
|
||||
import { showAppToast } from './toast.js';
|
||||
import {
|
||||
bindCalendarDayClicks,
|
||||
createCalendarTopbarHTML,
|
||||
createCalendarWeekdayHeaderHTML,
|
||||
formatCalendarMonthYear,
|
||||
formatCalendarSelectedDate,
|
||||
isCalendarOnToday,
|
||||
renderCalendarGrid,
|
||||
syncCalendarTodayButton,
|
||||
} from './mealCalendar.js?v=1';
|
||||
|
||||
function esc(s) {
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
const MONTHS_LONG = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
|
||||
const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
|
||||
const WEEKDAYS_SHORT = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
|
||||
const WEEKDAYS_LONG = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
|
||||
const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
|
||||
|
||||
/* ── HTML template ──────────────────────────────────── */
|
||||
@@ -47,16 +53,15 @@ export function getMealPlanEditorHTML() {
|
||||
</div>
|
||||
<div id="mpe-body" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 py-3">
|
||||
<div id="mpe-cal-section" class="hidden mb-4">
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
<button id="mpe-cal-prev" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-left text-xs"></i></button>
|
||||
<p id="mpe-cal-title" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
|
||||
<button id="mpe-cal-next" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-right text-xs"></i></button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mb-2">
|
||||
<button id="mpe-cal-today" type="button" class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors hidden"><i class="fas fa-calendar-day text-[9px] opacity-70"></i> Dziś</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}</div>
|
||||
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-0.5"></div>
|
||||
${createCalendarTopbarHTML({
|
||||
titleId: 'mpe-cal-title',
|
||||
prevId: 'mpe-cal-prev',
|
||||
todayId: 'mpe-cal-today',
|
||||
nextId: 'mpe-cal-next',
|
||||
wrapperClass: 'mb-2 flex items-center gap-3',
|
||||
})}
|
||||
${createCalendarWeekdayHeaderHTML()}
|
||||
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
|
||||
<button id="mpe-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors"><i id="mpe-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i></button>
|
||||
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
|
||||
<div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
|
||||
@@ -142,19 +147,6 @@ export function setupMealPlanEditor() {
|
||||
|
||||
/* ── Calendar ──────────────────────────────────── */
|
||||
|
||||
function calCell(d, today, month) {
|
||||
const sel = S.date && sameDay(d, S.date);
|
||||
const past = d.getTime() < today.getTime();
|
||||
const other = d.getMonth() !== month;
|
||||
let cls = 'flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight ';
|
||||
if (sel) cls += 'bg-gray-900 text-white ';
|
||||
else if (past || other) cls += 'text-gray-300 ';
|
||||
else cls += 'text-gray-800 hover:bg-gray-100 ';
|
||||
if (!sel && !past && !other && sameDay(d, today)) cls += 'ring-1 ring-inset ring-gray-900 ';
|
||||
const inner = `<span>${d.getDate()}</span><span class="w-1 h-1"></span>`;
|
||||
return (past && !sel) ? `<div class="${cls}">${inner}</div>` : `<button type="button" class="mpe-cal-day ${cls}" data-ts="${d.getTime()}">${inner}</button>`;
|
||||
}
|
||||
|
||||
function renderCal() {
|
||||
const sec = document.getElementById('mpe-cal-section');
|
||||
if (!sec || !S.showCal) { sec?.classList.add('hidden'); return; }
|
||||
@@ -165,34 +157,34 @@ export function setupMealPlanEditor() {
|
||||
const icon = document.getElementById('mpe-cal-toggle-icon');
|
||||
if (!grid || !title) return;
|
||||
const today = startOfDay(new Date());
|
||||
const plans = loadPlans();
|
||||
const mode = S.calExpanded ? 'month' : 'week';
|
||||
|
||||
if (S.calExpanded) {
|
||||
const ms = startOfMonth(S.calDate);
|
||||
title.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
|
||||
icon.className = 'fas fa-chevron-up text-[10px]';
|
||||
const first = startOfWeekMonday(ms);
|
||||
const cells = [];
|
||||
let d = new Date(first);
|
||||
for (let i = 0; i < 42; i++) { cells.push(new Date(d)); d = addDays(d, 1); }
|
||||
while (cells.length > 7 && cells.slice(-7).every((c) => c.getMonth() !== ms.getMonth())) cells.splice(-7);
|
||||
grid.innerHTML = cells.map((c) => calCell(c, today, ms.getMonth())).join('');
|
||||
todayBtn?.classList.toggle('hidden', sameMonth(today, S.calDate));
|
||||
} else {
|
||||
const ws = startOfWeekMonday(S.calDate);
|
||||
title.textContent = `${MONTHS_LONG[S.calDate.getMonth()]} ${S.calDate.getFullYear()}`;
|
||||
icon.className = 'fas fa-chevron-down text-[10px]';
|
||||
const cells = [];
|
||||
for (let i = 0; i < 7; i++) cells.push(addDays(ws, i));
|
||||
grid.innerHTML = cells.map((c) => calCell(c, today, S.calDate.getMonth())).join('');
|
||||
todayBtn?.classList.toggle('hidden', sameDay(startOfWeekMonday(today), ws));
|
||||
title.textContent = S.calExpanded ? formatCalendarMonthYear(S.calDate) : formatCalendarSelectedDate(S.date);
|
||||
if (icon) {
|
||||
icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
|
||||
}
|
||||
syncCalendarTodayButton(
|
||||
todayBtn,
|
||||
isCalendarOnToday(mode, startOfWeekMonday(S.calDate), S.calDate, S.date),
|
||||
);
|
||||
|
||||
grid.querySelectorAll('.mpe-cal-day').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
S.date = new Date(Number(btn.dataset.ts));
|
||||
S.calDate = new Date(S.date);
|
||||
renderCal();
|
||||
});
|
||||
renderCalendarGrid({
|
||||
gridEl: grid,
|
||||
mode,
|
||||
anchorDate: S.calDate,
|
||||
selectedDate: S.date,
|
||||
resolveDayState: (day, meta) => {
|
||||
const isSelected = S.date && sameDay(day, S.date);
|
||||
const isPast = day.getTime() < today.getTime();
|
||||
return {
|
||||
disabled: isPast && !isSelected,
|
||||
dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
|
||||
showIndicator: meta.mode === 'month'
|
||||
? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
|
||||
: dayHasAnyMeal(plans, day),
|
||||
};
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -475,6 +467,11 @@ export function setupMealPlanEditor() {
|
||||
document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
|
||||
overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
|
||||
document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
|
||||
bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
|
||||
S.date = date;
|
||||
S.calDate = new Date(date);
|
||||
renderCal();
|
||||
});
|
||||
|
||||
document.getElementById('mpe-cal-prev')?.addEventListener('click', () => {
|
||||
if (!S.showCal) return;
|
||||
|
||||
Reference in New Issue
Block a user