/**
* Modul: Dashboard
* Zweck: Startseite mit Begrüßung, Terminen, Aufgaben, Essen, Notizen und FAB
* Abhängigkeiten: /api.js
*/
import { api } from '/api.js';
import { t, formatDate, formatTime, getLocale } from '/i18n.js';
import { esc, fmtLocation } from '/utils/html.js';
import { openModal, closeModal } from '/components/modal.js';
// Hält den AbortController des aktuellen FAB-Listeners - wird bei jedem render() erneuert.
let _fabController = null;
// --------------------------------------------------------
// Widget-Definitionen (Reihenfolge = Standard-Layout)
// --------------------------------------------------------
const WIDGET_IDS = ['weather', 'tasks', 'calendar', 'shopping', 'meals', 'notes'];
const DEFAULT_WIDGET_CONFIG = WIDGET_IDS.map((id) => ({ id, visible: true }));
function widgetLabel(id) {
const map = {
tasks: () => t('nav.tasks'),
calendar: () => t('nav.calendar'),
shopping: () => t('nav.shopping'),
meals: () => t('nav.meals'),
notes: () => t('nav.notes'),
weather: () => t('dashboard.weather'),
};
return (map[id] ?? (() => id))();
}
function widgetIcon(id) {
const map = { tasks: 'check-square', calendar: 'calendar', shopping: 'shopping-cart', meals: 'utensils', notes: 'pin', weather: 'cloud-sun' };
return map[id] ?? 'layout-dashboard';
}
// --------------------------------------------------------
// Hilfsfunktionen
// --------------------------------------------------------
function greeting(displayName) {
const h = new Date().getHours();
if (h < 12) return t('dashboard.greetingMorning', { name: esc(displayName) });
if (h < 18) return t('dashboard.greetingDay', { name: esc(displayName) });
return t('dashboard.greetingEvening', { name: esc(displayName) });
}
function formatDateTime(isoString) {
if (!isoString) return '';
const d = new Date(isoString);
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);
const dateStr = d.toDateString() === today.toDateString()
? t('common.today')
: d.toDateString() === tomorrow.toDateString()
? t('common.tomorrow')
: formatDate(d);
const timeStr = formatTime(d);
const suffix = t('calendar.timeSuffix');
return `${dateStr}, ${timeStr}${suffix ? ' ' + suffix : ''}`.trim();
}
function formatDueDate(dateStr, timeStr) {
if (!dateStr) return null;
const dueDate = timeStr
? new Date(`${dateStr}T${timeStr}`)
: new Date(`${dateStr}T23:59:59`);
if (isNaN(dueDate)) return null;
const now = new Date();
const diffMs = dueDate - now;
const diffH = diffMs / (1000 * 60 * 60);
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const dueDay = new Date(dueDate.getFullYear(), dueDate.getMonth(), dueDate.getDate());
const calDayDiff = Math.round((dueDay - today) / (1000 * 60 * 60 * 24));
const fullLabel = timeStr
? `${formatDate(dueDate)}, ${formatTime(dueDate)}` // beide aus i18n.js
: formatDate(dueDate);
if (diffMs < 0) {
return { text: `${t('dashboard.overdue')} – ${fullLabel}`, overdue: true };
}
if (calDayDiff === 1 && dueDate.getHours() >= 22 && diffH < 24) {
return { text: `${t('dashboard.dueSoon')} – ${fullLabel}`, overdue: false, soon: true };
}
if (calDayDiff === 0) {
return { text: `${t('dashboard.dueToday')} – ${formatTime(dueDate)}`, overdue: false, soon: true };
}
if (calDayDiff === 1) {
return { text: `${t('dashboard.dueTomorrow')} – ${formatTime(dueDate)}`, overdue: false };
}
return { text: fullLabel, overdue: false };
}
const PRIORITY_LABELS = () => ({
urgent: t('tasks.priorityUrgent'),
high: t('tasks.priorityHigh'),
medium: t('tasks.priorityMedium'),
low: t('tasks.priorityLow'),
});
const MEAL_LABELS = () => ({
breakfast: t('meals.typeBreakfast'),
lunch: t('meals.typeLunch'),
dinner: t('meals.typeDinner'),
snack: t('meals.typeSnack'),
});
const MEAL_ICONS = {
breakfast: 'sunrise',
lunch: 'sun',
dinner: 'moon',
snack: 'apple',
};
function initials(name = '') {
return name.split(' ').map((w) => w[0]).join('').slice(0, 2).toUpperCase();
}
function widgetHeader(icon, title, count, linkHref, linkLabel) {
linkLabel = linkLabel ?? t('dashboard.allLink');
const badge = count != null
? `${count}`
: '';
return `
`;
}
// --------------------------------------------------------
// Skeleton
// --------------------------------------------------------
function skeletonWidget(lines = 3) {
const lineHtml = Array.from({ length: lines }, (_, i) => `
`).join('');
return `
`;
}
// --------------------------------------------------------
// Widget-Renderer
// --------------------------------------------------------
function renderGreeting(user, stats = {}) {
const { overdueCount = 0, dueSoonCount = 0, todayEventCount = 0, todayMealTitle = null } = stats;
const statChips = [];
if (overdueCount > 0)
statChips.push(`
${overdueCount > 1 ? t('dashboard.overdueTasksChipPlural', { count: overdueCount }) : t('dashboard.overdueTasksChip', { count: overdueCount })}
`);
if (dueSoonCount > 0)
statChips.push(`
${dueSoonCount > 1 ? t('dashboard.urgentTasksChipPlural', { count: dueSoonCount }) : t('dashboard.urgentTasksChip', { count: dueSoonCount })}
`);
if (todayEventCount > 0)
statChips.push(`
${todayEventCount > 1 ? t('dashboard.eventsChipPlural', { count: todayEventCount }) : t('dashboard.eventsChip', { count: todayEventCount })}
`);
if (todayMealTitle)
statChips.push(`
${t('dashboard.todayMealChip', { title: esc(todayMealTitle) })}
`);
let time = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
return `
`;
}
function renderUrgentTasks(tasks) {
if (!tasks.length) {
return ``;
}
const items = tasks.map((t) => {
const due = formatDueDate(t.due_date, t.due_time);
return `
${t.priority !== 'none' ? `
` : ''}
${PRIORITY_LABELS()[t.priority] ?? t.priority}
${esc(t.title)}
${due ? `
${due.text}
` : ''}
${t.assigned_color ? `
${esc(initials(t.assigned_name || ''))}
` : ''}
${esc(e.title)}
${isToday ? t('common.today') : formatDateTime(e.start_datetime).split(',')[0]}
${timeStr}
${e.location ? ` · ${esc(fmtLocation(e.location))}` : ''}
${e.cal_name ? `${esc(e.cal_name)}` : ''}
`;
}).join('');
return ``;
}
function renderTodayMeals(meals) {
const MEAL_ORDER = ['breakfast', 'lunch', 'dinner', 'snack'];
const mealLabels = MEAL_LABELS();
const slots = MEAL_ORDER.map((type) => {
const meal = meals.find((m) => m.meal_type === type);
return `
${mealLabels[type]}
${meal ? esc(meal.title) : '-'}
`;
}).join('');
return ``;
}
function renderPinnedNotes(notes) {
if (!notes.length) {
return ``;
}
const items = notes.map((n) => `
${n.title ? `
${esc(n.title)}
` : ''}
${esc(n.content)}
${esc(item.name)}
${item.quantity ? `${esc(item.quantity)}` : ''}
`).join('');
const moreCount = list.open_count - list.items.length;
return `
`;
}).join('');
return ``;
}
// --------------------------------------------------------
// Wetter-Widget
// --------------------------------------------------------
const WEATHER_ICON_BASE = '/api/v1/weather/icon/';
function renderWeatherWidget(weather) {
if (!weather) return '';
const { city, current, forecast, units } = weather;
const unitSymbol = units === 'imperial' ? '°F' : units === 'standard' ? 'K' : '°C';
const forecastHtml = forecast.map((d, i) => {
const date = new Date(d.date + 'T12:00:00');
const label = new Intl.DateTimeFormat(getLocale(), { weekday: 'short' }).format(date);
const extraCls = i >= 3 ? ' weather-forecast__day--extended' : '';
return `
`;
}).join('');
return `
`;
}
// --------------------------------------------------------
// FAB Speed-Dial
// --------------------------------------------------------
const FAB_ACTIONS = () => [
{ route: '/tasks', label: t('dashboard.fabTask'), icon: 'check-square' },
{ route: '/calendar', label: t('dashboard.fabCalendar'), icon: 'calendar-plus' },
{ route: '/shopping', label: t('dashboard.fabShopping'), icon: 'shopping-cart' },
{ route: '/notes', label: t('dashboard.fabNote'), icon: 'sticky-note' },
];
function renderFab() {
const actionsHtml = FAB_ACTIONS().map((a) => `
${a.label}
`).join('');
return `
`;
}
function initFab(container, signal) {
const fabMain = container.querySelector('#fab-main');
const fabActions = container.querySelector('#fab-actions');
const fabBackdrop = container.querySelector('#fab-backdrop');
if (!fabMain) return;
let open = false;
function toggleFab(force) {
open = force !== undefined ? force : !open;
fabMain.classList.toggle('fab-main--open', open);
fabMain.setAttribute('aria-expanded', String(open));
fabActions.classList.toggle('fab-actions--visible', open);
fabActions.setAttribute('aria-hidden', String(!open));
fabBackdrop?.classList.toggle('fab-backdrop--visible', open);
fabActions.querySelectorAll('[role="button"]').forEach((el) => {
el.tabIndex = open ? 0 : -1;
});
if (window.lucide) window.lucide.createIcons();
}
fabMain.addEventListener('click', (e) => { e.stopPropagation(); toggleFab(); });
fabActions.querySelectorAll('[data-route]').forEach((el) => {
const go = () => { toggleFab(false); window.oikos.navigate(el.dataset.route); };
el.addEventListener('click', go);
el.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); }
});
});
document.addEventListener('click', () => { if (open) toggleFab(false); }, { signal });
}
// --------------------------------------------------------
// Widget-Rendering nach Konfiguration
// --------------------------------------------------------
function renderWidgets(cfg, data, weather) {
const renderers = {
tasks: () => renderUrgentTasks(data.urgentTasks ?? []),
calendar: () => renderUpcomingEvents(data.upcomingEvents ?? []),
shopping: () => renderShoppingLists(data.shoppingLists ?? []),
meals: () => renderTodayMeals(data.todayMeals ?? []),
notes: () => renderPinnedNotes(data.pinnedNotes ?? []),
weather: () => (weather ? renderWeatherWidget(weather) : ''),
};
return cfg
.filter((w) => w.visible)
.map((w) => (renderers[w.id] ? renderers[w.id]() : ''))
.join('');
}
// --------------------------------------------------------
// Customize-Modal
// --------------------------------------------------------
function openCustomizeModal(currentConfig, onSave) {
let draft = currentConfig.map((w) => ({ ...w }));
function buildRows() {
return draft.map((w, i) => {
const isFirst = i === 0;
const isLast = i === draft.length - 1;
return `
`;
}).join('');
}
openModal({
title: t('dashboard.customizeTitle'),
size: 'sm',
content: `
${buildRows()}
`,
onSave(panel) {
if (window.lucide) window.lucide.createIcons({ el: panel });
function rebuildList() {
const list = panel.querySelector('#customize-list');
if (!list) return;
list.replaceChildren();
list.insertAdjacentHTML('beforeend', buildRows());
if (window.lucide) window.lucide.createIcons({ el: list });
wireRows();
}
function wireRows() {
const list = panel.querySelector('#customize-list');
if (!list) return;
list.querySelectorAll('.customize-row__check').forEach((cb) => {
cb.addEventListener('change', () => {
const id = cb.dataset.id;
const entry = draft.find((w) => w.id === id);
if (entry) entry.visible = cb.checked;
});
});
list.querySelectorAll('[data-move]').forEach((btn) => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const dir = btn.dataset.move;
const idx = draft.findIndex((w) => w.id === id);
if (dir === 'up' && idx > 0) {
[draft[idx - 1], draft[idx]] = [draft[idx], draft[idx - 1]];
} else if (dir === 'down' && idx < draft.length - 1) {
[draft[idx], draft[idx + 1]] = [draft[idx + 1], draft[idx]];
}
rebuildList();
});
});
}
wireRows();
panel.querySelector('#customize-reset')?.addEventListener('click', () => {
draft = DEFAULT_WIDGET_CONFIG.map((w) => ({ ...w }));
rebuildList();
});
panel.querySelector('#customize-save')?.addEventListener('click', async () => {
const saveBtn = panel.querySelector('#customize-save');
saveBtn.disabled = true;
try {
await api.put('/preferences', { dashboard_widgets: draft });
closeModal();
onSave(draft);
window.oikos?.showToast(t('dashboard.customizeSaved'), 'success', 1500);
} catch {
window.oikos?.showToast(t('common.errorGeneric'), 'error');
} finally {
saveBtn.disabled = false;
}
});
},
});
}
// --------------------------------------------------------
// Navigations-Links verdrahten
// --------------------------------------------------------
function wireLinks(container) {
container.querySelectorAll('[data-route]').forEach((el) => {
if (el.id === 'fab-main' || el.closest('#fab-actions')) return;
const go = () => window.oikos.navigate(el.dataset.route);
if (el.tagName === 'A') {
el.addEventListener('click', (e) => { e.preventDefault(); go(); });
} else {
el.addEventListener('click', go);
el.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); }
});
}
});
}
// --------------------------------------------------------
// Haupt-Render
// --------------------------------------------------------
export async function render(container, { user }) {
_fabController?.abort();
_fabController = new AbortController();
container.innerHTML = `
${t('dashboard.title')}
${renderGreeting(user, {})}
${skeletonWidget(3)}
${skeletonWidget(3)}
${skeletonWidget(2)}
${skeletonWidget(3)}
${renderFab()}
`;
let data = { upcomingEvents: [], urgentTasks: [], todayMeals: [], pinnedNotes: [], shoppingLists: [] };
let weather = null;
let widgetConfig = DEFAULT_WIDGET_CONFIG;
try {
const [dashRes, weatherRes, prefsRes] = await Promise.all([
api.get('/dashboard'),
api.get('/weather').catch(() => ({ data: null })),
api.get('/preferences').catch(() => ({ data: {} })),
]);
data = dashRes;
weather = weatherRes.data ?? null;
widgetConfig = prefsRes.data?.dashboard_widgets ?? DEFAULT_WIDGET_CONFIG;
} catch (err) {
console.error('[Dashboard] Ladefehler:', err.message, 'Status:', err.status ?? 'network');
window.oikos?.showToast(t('dashboard.loadError'), 'warning');
}
const today = new Date().toDateString();
const stats = {
overdueCount: (data.urgentTasks ?? []).filter((t) => {
const due = formatDueDate(t.due_date, t.due_time);
return due?.overdue === true;
}).length,
dueSoonCount: (data.urgentTasks ?? []).filter((t) => {
const due = formatDueDate(t.due_date, t.due_time);
return due?.soon === true;
}).length,
todayEventCount: (data.upcomingEvents ?? []).filter((e) =>
new Date(e.start_datetime).toDateString() === today
).length,
todayMealTitle: (data.todayMeals ?? []).find((m) => m.meal_type === 'lunch')?.title
?? (data.todayMeals ?? [])[0]?.title
?? null,
};
const rerender = () => render(container, { user });
function rebuildGrid(cfg) {
const grid = container.querySelector('.dashboard__grid');
if (!grid) return;
const greeting = grid.querySelector('.widget-greeting');
grid.replaceChildren(...(greeting ? [greeting] : []));
grid.insertAdjacentHTML('beforeend', renderWidgets(cfg, data, weather));
wireLinks(container, rerender);
if (window.lucide) window.lucide.createIcons();
wireWeatherRefresh(container);
}
// Greeting in-place aktualisieren (Stats-Chips hinzufügen), kein Gesamt-Reset
const greetingEl = container.querySelector('.widget-greeting');
if (greetingEl) greetingEl.outerHTML = renderGreeting(user, stats);
// Skeletons durch echte Widgets ersetzen
rebuildGrid(widgetConfig);
initFab(container, _fabController.signal);
container.querySelector('#dashboard-customize-btn')?.addEventListener(
'click',
() => openCustomizeModal(widgetConfig, (newConfig) => {
widgetConfig = newConfig;
rebuildGrid(widgetConfig);
}),
{ signal: _fabController.signal },
);
// 30-Minuten Auto-Refresh für Wetter
const refreshBtn = container.querySelector('#weather-refresh-btn');
if (refreshBtn) {
const doAutoRefresh = async () => {
try {
const res = await api.get('/weather').catch(() => ({ data: null }));
const wWidget = container.querySelector('#weather-widget');
if (wWidget) {
wWidget.outerHTML = renderWeatherWidget(res.data ?? null);
const newWidget = container.querySelector('#weather-widget');
if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
wireWeatherRefresh(container);
}
} catch { /* silently ignore */ }
};
const timerId = setInterval(doAutoRefresh, 30 * 60 * 1000);
_fabController.signal.addEventListener('abort', () => clearInterval(timerId));
}
}
function wireWeatherRefresh(container) {
const refreshBtn = container.querySelector('#weather-refresh-btn');
if (!refreshBtn) return;
const doWeatherRefresh = async () => {
refreshBtn.disabled = true;
refreshBtn.classList.add('weather-widget__refresh--spinning');
try {
const res = await api.get('/weather').catch(() => ({ data: null }));
const wWidget = container.querySelector('#weather-widget');
if (wWidget) {
wWidget.outerHTML = renderWeatherWidget(res.data ?? null);
const newWidget = container.querySelector('#weather-widget');
if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
wireWeatherRefresh(container);
window.oikos?.showToast(t('dashboard.weatherUpdated'), 'success', 1500);
}
} catch { /* silently ignore */ }
};
refreshBtn.addEventListener('click', doWeatherRefresh, { signal: _fabController.signal });
}