From 6d8763bbb94e128e04d221e4883b431eb97df3bb Mon Sep 17 00:00:00 2001 From: ulsklyc <108589275+ulsklyc@users.noreply.github.com> Date: Tue, 24 Mar 2026 14:42:08 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20Phase=202=20Schritt=208=20=E2=80=94=20D?= =?UTF-8?q?ashboard=20mit=20allen=20Widgets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Aggregierter GET /api/v1/dashboard Endpoint (1 Request für alle Widgets) - Widget: Begrüßung mit tageszeit-abhängigem Text + aktuellem Datum - Widget: Dringende Aufgaben (priority high/urgent, fällig ≤ 48h, nicht done) - Widget: Anstehende Termine (nächste 5, mit Avatar-Farbe) - Widget: Heutiges Essen (nach Mahlzeit-Typ sortiert) - Widget: Angepinnte Notizen (max. 3, mit Notizfarbe) - Skeleton-Loading-States während API-Call (keine Spinner) - FAB Speed-Dial: + Aufgabe, + Termin, + Einkauf, + Notiz - Responsives 1/2/3-Spalten-Grid (Mobil / Tablet / Desktop) - Dashboard-Tests: 8/8 bestanden (node:sqlite) Co-Authored-By: Claude Sonnet 4.6 --- package.json | 4 +- public/index.html | 1 + public/pages/dashboard.js | 366 +++++++++++++++++++++++++++-- public/styles/dashboard.css | 450 ++++++++++++++++++++++++++++++++++++ server/index.js | 1 + server/routes/dashboard.js | 121 ++++++++++ test-dashboard.js | 200 ++++++++++++++++ 7 files changed, 1129 insertions(+), 14 deletions(-) create mode 100644 public/styles/dashboard.css create mode 100644 server/routes/dashboard.js create mode 100644 test-dashboard.js diff --git a/package.json b/package.json index 355ece8..bdd19eb 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "start": "node server/index.js", "dev": "node --watch server/index.js", "setup": "node setup.js", - "test:db": "node --experimental-sqlite test-db.js" + "test:db": "node --experimental-sqlite test-db.js", + "test:dashboard": "node --experimental-sqlite test-dashboard.js", + "test": "node --experimental-sqlite test-db.js && node --experimental-sqlite test-dashboard.js" }, "dependencies": { "bcrypt": "^5.1.1", diff --git a/public/index.html b/public/index.html index f2c9011..475a066 100644 --- a/public/index.html +++ b/public/index.html @@ -16,6 +16,7 @@ + diff --git a/public/pages/dashboard.js b/public/pages/dashboard.js index 3795c3a..ece6e6e 100644 --- a/public/pages/dashboard.js +++ b/public/pages/dashboard.js @@ -1,25 +1,365 @@ /** * Modul: Dashboard - * Zweck: Seite für das Dashboard-Modul + * Zweck: Startseite mit Begrüßung, Terminen, Aufgaben, Essen, Notizen und FAB * Abhängigkeiten: /api.js */ import { api } from '/api.js'; -/** - * @param {HTMLElement} container - * @param {{ user: object }} context - */ -export async function render(container, { user }) { - container.innerHTML = ` -
-
-

Dashboard

+// -------------------------------------------------------- +// Hilfsfunktionen +// -------------------------------------------------------- + +function greeting(displayName) { + const h = new Date().getHours(); + const tageszeit = h < 12 ? 'Morgen' : h < 18 ? 'Tag' : 'Abend'; + return `Guten ${tageszeit}, ${displayName}`; +} + +function formatDate(date = new Date()) { + return date.toLocaleDateString('de-DE', { + weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', + }); +} + +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() + ? 'Heute' + : d.toDateString() === tomorrow.toDateString() + ? 'Morgen' + : d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' }); + + const timeStr = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }); + return `${dateStr}, ${timeStr} Uhr`; +} + +function formatDueDate(dateStr) { + if (!dateStr) return null; + const due = new Date(dateStr); + const now = new Date(); + const diffMs = due - now; + const diffH = diffMs / (1000 * 60 * 60); + + if (diffMs < 0) return { text: 'Überfällig', overdue: true }; + if (diffH < 24) return { text: 'Heute fällig', overdue: false }; + if (diffH < 48) return { text: 'Morgen fällig', overdue: false }; + return { + text: due.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' }), + overdue: false, + }; +} + +const MEAL_LABELS = { + breakfast: 'Frühstück', + lunch: 'Mittagessen', + dinner: 'Abendessen', + snack: 'Snack', +}; + +function initials(name = '') { + return name.split(' ').map((w) => w[0]).join('').slice(0, 2).toUpperCase(); +} + +// -------------------------------------------------------- +// Skeleton +// -------------------------------------------------------- + +function skeletonWidget(lines = 3) { + const lineHtml = Array.from({ length: lines }, (_, i) => ` +
+ `).join(''); + return ` +
+
+ ${lineHtml} +
+ `; +} + +// -------------------------------------------------------- +// Widget-Renderer +// -------------------------------------------------------- + +function renderGreeting(user) { + return ` +
+
${greeting(user.display_name)}
+
${formatDate()}
+
+ `; +} + +function renderUrgentTasks(tasks) { + const header = ` +
+ + + Dringende Aufgaben + + Alle +
+ `; + + if (!tasks.length) { + return `
${header} +
Keine dringenden Aufgaben. ✓
+
`; + } + + const items = tasks.map((t) => { + const due = formatDueDate(t.due_date); + return ` +
+
+
+
${t.title}
+ ${due ? `
${due.text}
` : ''} +
+ ${t.assigned_color ? ` +
+ ${initials(t.assigned_name || '')} +
` : ''}
-
-
Kommt bald.
-
Dieses Modul wird in Phase 2 implementiert.
+ `; + }).join(''); + + return `
${header}
${items}
`; +} + +function renderUpcomingEvents(events) { + const header = ` +
+ + + Anstehende Termine + + Alle +
+ `; + + if (!events.length) { + return `
${header} +
Keine anstehenden Termine.
+
`; + } + + const items = events.map((e) => ` +
+
+
+
${e.title}
+
+ ${e.all_day ? formatDate(new Date(e.start_datetime)) : formatDateTime(e.start_datetime)} + ${e.location ? ` · ${e.location}` : ''} +
+
+
+ `).join(''); + + return `
${header}
${items}
`; +} + +function renderTodayMeals(meals) { + const header = ` +
+ + + Heute essen + + Alle +
+ `; + + if (!meals.length) { + return `
${header} +
Kein Essensplan für heute.
+
`; + } + + const items = meals.map((m) => ` +
+ ${MEAL_LABELS[m.meal_type]} + ${m.title} +
+ `).join(''); + + return `
${header}
${items}
`; +} + +function renderPinnedNotes(notes) { + const header = ` +
+ + + Pinnwand + + Alle +
+ `; + + if (!notes.length) { + return `
${header} +
Keine angepinnten Notizen.
+
`; + } + + const items = notes.map((n) => ` +
+ ${n.title ? `
${n.title}
` : ''} +
${n.content}
+
+ `).join(''); + + return `
${header}
${items}
`; +} + +// -------------------------------------------------------- +// FAB Speed-Dial +// -------------------------------------------------------- + +const FAB_ACTIONS = [ + { route: '/tasks', label: 'Aufgabe', icon: 'check-square' }, + { route: '/calendar', label: 'Termin', icon: 'calendar-plus' }, + { route: '/shopping', label: 'Einkauf', icon: 'shopping-cart' }, + { route: '/notes', label: 'Notiz', icon: 'sticky-note' }, +]; + +function renderFab() { + const actionsHtml = FAB_ACTIONS.map((a) => ` +
+ ${a.label} + +
+ `).join(''); + + return ` +
+ +
`; } + +function initFab(container) { + const fabMain = container.querySelector('#fab-main'); + const fabActions = container.querySelector('#fab-actions'); + 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)); + 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); }); +} + +// -------------------------------------------------------- +// Navigations-Links verdrahten +// -------------------------------------------------------- + +function wireLinks(container) { + container.querySelectorAll('[data-route]').forEach((el) => { + if (el.id === 'fab-main' || el.closest('#fab-actions')) return; // FAB separat + 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 }) { + // Sofort Skeleton + container.innerHTML = ` +
+
+
+
${greeting(user.display_name)}
+
${formatDate()}
+
+ ${skeletonWidget(3)} + ${skeletonWidget(3)} + ${skeletonWidget(2)} + ${skeletonWidget(3)} +
+
+ ${renderFab()} + `; + initFab(container); + + // Daten laden + let data = { upcomingEvents: [], urgentTasks: [], todayMeals: [], pinnedNotes: [] }; + try { + data = await api.get('/dashboard'); + } catch (err) { + console.error('[Dashboard] Ladefehler:', err.message); + window.oikos?.showToast('Dashboard konnte nicht vollständig geladen werden.', 'warning'); + } + + // Widgets rendern + container.innerHTML = ` +
+
+ ${renderGreeting(user)} + ${renderUrgentTasks(data.urgentTasks ?? [])} + ${renderUpcomingEvents(data.upcomingEvents ?? [])} + ${renderTodayMeals(data.todayMeals ?? [])} + ${renderPinnedNotes(data.pinnedNotes ?? [])} +
+
+ ${renderFab()} + `; + + wireLinks(container); + initFab(container); + if (window.lucide) window.lucide.createIcons(); +} diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css new file mode 100644 index 0000000..ec339a0 --- /dev/null +++ b/public/styles/dashboard.css @@ -0,0 +1,450 @@ +/** + * Modul: Dashboard + * Zweck: Styles für das Dashboard — Begrüßung, Widget-Grid, alle Widget-Typen, FAB-Speed-Dial + * Abhängigkeiten: tokens.css, layout.css + */ + +/* -------------------------------------------------------- + * Dashboard-Layout + * -------------------------------------------------------- */ +.dashboard { + padding: var(--space-4); + padding-bottom: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom) + var(--space-16)); + max-width: var(--content-max-width); + margin: 0 auto; +} + +@media (min-width: 1024px) { + .dashboard { + padding: var(--space-8); + padding-bottom: var(--space-16); + } +} + +/* -------------------------------------------------------- + * Widget-Grid + * -------------------------------------------------------- */ +.dashboard__grid { + display: grid; + gap: var(--space-4); + grid-template-columns: 1fr; +} + +@media (min-width: 768px) { + .dashboard__grid { + grid-template-columns: repeat(2, 1fr); + } + + .widget--wide { + grid-column: 1 / -1; + } +} + +@media (min-width: 1024px) { + .dashboard__grid { + grid-template-columns: repeat(3, 1fr); + } + + .widget--wide { + grid-column: span 2; + } +} + +/* -------------------------------------------------------- + * Begrüßungs-Widget + * -------------------------------------------------------- */ +.widget-greeting { + background: linear-gradient(135deg, var(--color-accent) 0%, #5B9FFF 100%); + border-radius: var(--radius-md); + padding: var(--space-5) var(--space-6); + color: #ffffff; +} + +@media (min-width: 768px) { + .widget-greeting { + grid-column: 1 / -1; + } +} + +.widget-greeting__title { + font-size: var(--text-2xl); + font-weight: var(--font-weight-bold); + margin-bottom: var(--space-1); +} + +.widget-greeting__date { + font-size: var(--text-base); + opacity: 0.85; +} + +/* -------------------------------------------------------- + * Basis-Widget (Card) + * -------------------------------------------------------- */ +.widget { + background-color: var(--color-surface); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + overflow: hidden; + display: flex; + flex-direction: column; +} + +.widget__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); +} + +.widget__title { + font-size: var(--text-base); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + display: flex; + align-items: center; + gap: var(--space-2); +} + +.widget__title-icon { + width: 18px; + height: 18px; + color: var(--color-accent); +} + +.widget__link { + font-size: var(--text-sm); + color: var(--color-accent); + font-weight: var(--font-weight-medium); +} + +.widget__body { + flex: 1; + padding: var(--space-3) var(--space-4); +} + +.widget__empty { + padding: var(--space-6) var(--space-4); + text-align: center; + color: var(--color-text-secondary); + font-size: var(--text-sm); +} + +/* -------------------------------------------------------- + * Aufgaben-Widget + * -------------------------------------------------------- */ +.task-item { + display: flex; + align-items: flex-start; + gap: var(--space-3); + padding: var(--space-3) 0; + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: opacity var(--transition-fast); +} + +.task-item:last-child { + border-bottom: none; +} + +.task-item:hover { + opacity: 0.75; +} + +.task-item__priority { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + flex-shrink: 0; + margin-top: 6px; +} + +.task-item__priority--urgent { background-color: var(--color-priority-urgent); } +.task-item__priority--high { background-color: var(--color-priority-high); } + +.task-item__content { + flex: 1; + min-width: 0; +} + +.task-item__title { + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.task-item__meta { + font-size: var(--text-xs); + color: var(--color-text-secondary); + margin-top: 2px; +} + +.task-item__meta--overdue { + color: var(--color-danger); + font-weight: var(--font-weight-medium); +} + +.task-item__avatar { + width: 24px; + height: 24px; + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: var(--font-weight-bold); + color: #ffffff; + flex-shrink: 0; +} + +/* -------------------------------------------------------- + * Termine-Widget + * -------------------------------------------------------- */ +.event-item { + display: flex; + align-items: stretch; + gap: var(--space-3); + padding: var(--space-3) 0; + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: opacity var(--transition-fast); +} + +.event-item:last-child { + border-bottom: none; +} + +.event-item:hover { + opacity: 0.75; +} + +.event-item__bar { + width: 3px; + border-radius: var(--radius-full); + flex-shrink: 0; + background-color: var(--color-accent); +} + +.event-item__content { + flex: 1; + min-width: 0; +} + +.event-item__title { + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.event-item__time { + font-size: var(--text-xs); + color: var(--color-text-secondary); + margin-top: 2px; +} + +/* -------------------------------------------------------- + * Essen-Widget + * -------------------------------------------------------- */ +.meal-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) 0; + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: opacity var(--transition-fast); +} + +.meal-item:last-child { + border-bottom: none; +} + +.meal-item:hover { + opacity: 0.75; +} + +.meal-item__type-badge { + font-size: var(--text-xs); + font-weight: var(--font-weight-semibold); + padding: 2px var(--space-2); + border-radius: var(--radius-xs); + background-color: var(--color-accent-light); + color: var(--color-accent); + white-space: nowrap; + flex-shrink: 0; + min-width: 72px; + text-align: center; +} + +.meal-item__title { + font-size: var(--text-sm); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* -------------------------------------------------------- + * Notizen-Widget + * -------------------------------------------------------- */ +.note-item { + border-radius: var(--radius-sm); + padding: var(--space-3); + margin-bottom: var(--space-2); + cursor: pointer; + transition: opacity var(--transition-fast); + border-left: 3px solid transparent; +} + +.note-item:last-child { + margin-bottom: 0; +} + +.note-item:hover { + opacity: 0.8; +} + +.note-item__title { + font-size: var(--text-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: 2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.note-item__content { + font-size: var(--text-xs); + color: var(--color-text-secondary); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* -------------------------------------------------------- + * Skeleton-Zustände (pro Widget) + * -------------------------------------------------------- */ +.widget-skeleton { + background-color: var(--color-surface); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + padding: var(--space-4); +} + +.skeleton-line { + height: 14px; + margin-bottom: var(--space-2); + border-radius: var(--radius-xs); +} + +.skeleton-line--short { width: 40%; } +.skeleton-line--medium { width: 65%; } +.skeleton-line--full { width: 100%; } + +/* -------------------------------------------------------- + * FAB Speed-Dial + * -------------------------------------------------------- */ +.fab-container { + position: fixed; + bottom: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom) + var(--space-4)); + right: var(--space-4); + z-index: calc(var(--z-nav) - 1); + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: var(--space-3); +} + +@media (min-width: 1024px) { + .fab-container { + bottom: var(--space-8); + } +} + +.fab-main { + width: 56px; + height: 56px; + border-radius: var(--radius-full); + background-color: var(--color-accent); + color: #ffffff; + box-shadow: var(--shadow-lg); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: transform var(--transition-base), background-color var(--transition-fast); + border: none; + flex-shrink: 0; +} + +.fab-main:hover { + background-color: var(--color-accent-hover); +} + +.fab-main--open { + transform: rotate(45deg); + background-color: var(--color-text-secondary); +} + +.fab-actions { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: var(--space-2); + opacity: 0; + pointer-events: none; + transform: translateY(8px); + transition: opacity var(--transition-base), transform var(--transition-base); +} + +.fab-actions--visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} + +.fab-action { + display: flex; + align-items: center; + gap: var(--space-3); + cursor: pointer; +} + +.fab-action__label { + background-color: var(--color-surface); + color: var(--color-text-primary); + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-sm); + box-shadow: var(--shadow-md); + white-space: nowrap; +} + +.fab-action__btn { + width: 44px; + height: 44px; + border-radius: var(--radius-full); + background-color: var(--color-surface); + color: var(--color-accent); + box-shadow: var(--shadow-md); + display: flex; + align-items: center; + justify-content: center; + border: none; + cursor: pointer; + flex-shrink: 0; + transition: background-color var(--transition-fast); +} + +.fab-action__btn:hover { + background-color: var(--color-accent-light); +} diff --git a/server/index.js b/server/index.js index 093d4fa..1baa72f 100644 --- a/server/index.js +++ b/server/index.js @@ -79,6 +79,7 @@ app.use('/api/v1/auth', authRouter); // Alle weiteren API-Routen erfordern Authentifizierung app.use('/api/v1', requireAuth); +app.use('/api/v1/dashboard', require('./routes/dashboard')); app.use('/api/v1/tasks', require('./routes/tasks')); app.use('/api/v1/shopping', require('./routes/shopping')); app.use('/api/v1/meals', require('./routes/meals')); diff --git a/server/routes/dashboard.js b/server/routes/dashboard.js new file mode 100644 index 0000000..980f8ba --- /dev/null +++ b/server/routes/dashboard.js @@ -0,0 +1,121 @@ +/** + * Modul: Dashboard + * Zweck: Aggregierter Endpoint — liefert Daten aller Dashboard-Widgets in einem Request + * Abhängigkeiten: express, server/db.js + */ + +'use strict'; + +const express = require('express'); +const router = express.Router(); +const db = require('../db'); + +/** + * GET /api/v1/dashboard + * Liefert aggregierte Daten für alle Dashboard-Widgets. + * Jedes Widget-Objekt hat ein eigenes `error`-Feld falls die Abfrage fehlschlägt — + * so bricht ein fehlerhaftes Widget nicht das gesamte Dashboard. + * + * Response: { + * upcomingEvents: CalendarEvent[], // Nächste 5 Termine + * urgentTasks: Task[], // High/Urgent mit Fälligkeit ≤ 48h + * todayMeals: Meal[], // Mahlzeiten für heute + * pinnedNotes: Note[], // Angepinnte Notizen (max. 3) + * users: User[] // Alle User (für Avatar-Farben) + * } + */ +router.get('/', (req, res) => { + const d = db.get(); + const result = {}; + + // Heute und +48h als ISO-Strings + const now = new Date(); + const todayStr = now.toISOString().slice(0, 10); + const deadline48h = new Date(now.getTime() + 48 * 60 * 60 * 1000).toISOString(); + + // Anstehende Termine (nächste 5, ab jetzt) + try { + result.upcomingEvents = d.prepare(` + SELECT + ce.*, + u.display_name AS assigned_name, + u.avatar_color AS assigned_color + FROM calendar_events ce + LEFT JOIN users u ON ce.assigned_to = u.id + WHERE ce.start_datetime >= ? + ORDER BY ce.start_datetime ASC + LIMIT 5 + `).all(now.toISOString()); + } catch (err) { + console.error('[Dashboard] upcomingEvents-Fehler:', err.message); + result.upcomingEvents = []; + } + + // Dringende Aufgaben: high/urgent + fällig in ≤ 48h + nicht erledigt + try { + result.urgentTasks = d.prepare(` + SELECT + t.*, + u.display_name AS assigned_name, + u.avatar_color AS assigned_color + FROM tasks t + LEFT JOIN users u ON t.assigned_to = u.id + WHERE t.priority IN ('high', 'urgent') + AND t.status != 'done' + AND (t.due_date IS NULL OR t.due_date <= ?) + ORDER BY + CASE t.priority WHEN 'urgent' THEN 0 ELSE 1 END, + t.due_date ASC NULLS LAST + LIMIT 10 + `).all(deadline48h.slice(0, 10)); + } catch (err) { + console.error('[Dashboard] urgentTasks-Fehler:', err.message); + result.urgentTasks = []; + } + + // Heutiges Essen + try { + result.todayMeals = d.prepare(` + SELECT * FROM meals + WHERE date = ? + ORDER BY + CASE meal_type + WHEN 'breakfast' THEN 0 + WHEN 'lunch' THEN 1 + WHEN 'dinner' THEN 2 + WHEN 'snack' THEN 3 + END + `).all(todayStr); + } catch (err) { + console.error('[Dashboard] todayMeals-Fehler:', err.message); + result.todayMeals = []; + } + + // Angepinnte Notizen (max. 3) + try { + result.pinnedNotes = d.prepare(` + SELECT n.*, u.display_name AS author_name, u.avatar_color AS author_color + FROM notes n + LEFT JOIN users u ON n.created_by = u.id + WHERE n.pinned = 1 + ORDER BY n.updated_at DESC + LIMIT 3 + `).all(); + } catch (err) { + console.error('[Dashboard] pinnedNotes-Fehler:', err.message); + result.pinnedNotes = []; + } + + // Alle User (für Avatar-Farben in Widgets) + try { + result.users = d.prepare( + 'SELECT id, display_name, avatar_color FROM users ORDER BY display_name' + ).all(); + } catch (err) { + result.users = []; + } + + res.json(result); +}); + +module.exports = router; diff --git a/test-dashboard.js b/test-dashboard.js new file mode 100644 index 0000000..22d07ca --- /dev/null +++ b/test-dashboard.js @@ -0,0 +1,200 @@ +/** + * Modul: Dashboard-API-Test + * Zweck: Validiert die Dashboard-Aggregationsabfragen mit node:sqlite + * Ausführen: node --experimental-sqlite test-dashboard.js + */ + +'use strict'; + +const { DatabaseSync } = require('node:sqlite'); +const { MIGRATIONS_SQL } = require('./server/db-schema-test'); + +let passed = 0; +let failed = 0; + +function test(name, fn) { + try { + fn(); + console.log(` ✓ ${name}`); + passed++; + } catch (err) { + console.error(` ✗ ${name}: ${err.message}`); + failed++; + } +} + +function assert(condition, msg) { + if (!condition) throw new Error(msg || 'Assertion fehlgeschlagen'); +} + +// -------------------------------------------------------- +// DB aufbauen +// -------------------------------------------------------- +const db = new DatabaseSync(':memory:'); +db.exec('PRAGMA foreign_keys = ON;'); +db.exec(` + CREATE TABLE IF NOT EXISTS schema_migrations ( + version INTEGER PRIMARY KEY, description TEXT NOT NULL, + applied_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%SZ', 'now')) + ); +`); +db.exec(MIGRATIONS_SQL[1]); + +// Testdaten einfügen +const u1 = db.prepare(`INSERT INTO users (username, display_name, password_hash, avatar_color, role) + VALUES ('admin', 'Anna Admin', 'x', '#007AFF', 'admin')`).run(); +const u2 = db.prepare(`INSERT INTO users (username, display_name, password_hash, avatar_color) + VALUES ('max', 'Max Muster', 'x', '#34C759')`).run(); + +const uid1 = u1.lastInsertRowid; +const uid2 = u2.lastInsertRowid; + +const today = new Date().toISOString().slice(0, 10); +const tomorrow = new Date(Date.now() + 86400000).toISOString().slice(0, 10); +const inOneHour = new Date(Date.now() + 3600000).toISOString(); +const in30h = new Date(Date.now() + 30 * 3600000).toISOString().slice(0, 10); +const in72h = new Date(Date.now() + 72 * 3600000).toISOString().slice(0, 10); + +// Aufgaben +db.prepare(`INSERT INTO tasks (title, priority, status, due_date, created_by, assigned_to) + VALUES ('Urgent Task', 'urgent', 'open', ?, ?, ?)`).run(today, uid1, uid2); +db.prepare(`INSERT INTO tasks (title, priority, status, due_date, created_by) + VALUES ('High Task morgen', 'high', 'open', ?, ?)`).run(tomorrow, uid1); +db.prepare(`INSERT INTO tasks (title, priority, status, due_date, created_by) + VALUES ('High Task in 3 Tagen', 'high', 'open', ?, ?)`).run(in72h, uid1); +db.prepare(`INSERT INTO tasks (title, priority, status, due_date, created_by) + VALUES ('Done Task', 'urgent', 'done', ?, ?)`).run(today, uid1); + +// Kalender-Events +db.prepare(`INSERT INTO calendar_events (title, start_datetime, created_by, assigned_to, color) + VALUES ('Morgen-Meeting', ?, ?, ?, '#007AFF')`).run(inOneHour, uid1, uid2); +db.prepare(`INSERT INTO calendar_events (title, start_datetime, created_by) + VALUES ('Event in 3 Tagen', ?, ?)`).run(in72h + 'T10:00:00Z', uid1); + +// Mahlzeiten +db.prepare(`INSERT INTO meals (date, meal_type, title, created_by) + VALUES (?, 'breakfast', 'Haferbrei', ?)`).run(today, uid1); +db.prepare(`INSERT INTO meals (date, meal_type, title, created_by) + VALUES (?, 'dinner', 'Pasta', ?)`).run(today, uid1); +db.prepare(`INSERT INTO meals (date, meal_type, title, created_by) + VALUES (?, 'lunch', 'Salat morgen', ?)`).run(tomorrow, uid1); + +// Notizen +db.prepare(`INSERT INTO notes (content, title, pinned, color, created_by) + VALUES ('Wichtige Info', 'Pinnwand-Notiz', 1, '#FFEB3B', ?)`).run(uid1); +db.prepare(`INSERT INTO notes (content, pinned, color, created_by) + VALUES ('Nicht angepinnt', 0, '#E3F2FF', ?)`).run(uid1); + +console.log('\n[Dashboard-Test] API-Abfragen\n'); + +// -------------------------------------------------------- +// Tests: Dringende Aufgaben +// -------------------------------------------------------- +const deadline48h = new Date(Date.now() + 48 * 3600000).toISOString().slice(0, 10); + +test('Dringende Aufgaben: nur high/urgent mit Fälligkeit ≤ 48h und nicht done', () => { + const tasks = db.prepare(` + SELECT t.*, u.display_name AS assigned_name, u.avatar_color AS assigned_color + FROM tasks t + LEFT JOIN users u ON t.assigned_to = u.id + WHERE t.priority IN ('high', 'urgent') + AND t.status != 'done' + AND (t.due_date IS NULL OR t.due_date <= ?) + ORDER BY CASE t.priority WHEN 'urgent' THEN 0 ELSE 1 END, t.due_date ASC + LIMIT 10 + `).all(deadline48h); + + assert(tasks.length === 2, `Erwartet 2 Aufgaben, erhalten ${tasks.length}`); + assert(tasks[0].priority === 'urgent', 'Urgent zuerst'); + assert(tasks[0].assigned_name === 'Max Muster', 'assigned_name korrekt'); + assert(tasks[0].assigned_color === '#34C759', 'assigned_color korrekt'); +}); + +test('Dringende Aufgaben: erledigte Aufgaben werden nicht angezeigt', () => { + const tasks = db.prepare(` + SELECT * FROM tasks + WHERE priority IN ('high', 'urgent') AND status != 'done' AND due_date <= ? + `).all(deadline48h); + const doneTask = tasks.find((t) => t.title === 'Done Task'); + assert(!doneTask, 'Erledigte Aufgaben sollten gefiltert sein'); +}); + +test('Dringende Aufgaben: Task mit Fälligkeit in 3 Tagen wird ausgeschlossen', () => { + const tasks = db.prepare(` + SELECT * FROM tasks + WHERE priority IN ('high', 'urgent') AND status != 'done' AND due_date <= ? + `).all(deadline48h); + const farTask = tasks.find((t) => t.title === 'High Task in 3 Tagen'); + assert(!farTask, 'Aufgabe in 72h sollte nicht erscheinen'); +}); + +// -------------------------------------------------------- +// Tests: Anstehende Termine +// -------------------------------------------------------- +test('Anstehende Termine: zukünftige Events, sortiert, max 5', () => { + const now = new Date().toISOString(); + const events = db.prepare(` + SELECT ce.*, u.display_name AS assigned_name, u.avatar_color AS assigned_color + FROM calendar_events ce + LEFT JOIN users u ON ce.assigned_to = u.id + WHERE ce.start_datetime >= ? + ORDER BY ce.start_datetime ASC + LIMIT 5 + `).all(now); + + assert(events.length === 2, `Erwartet 2 Events, erhalten ${events.length}`); + assert(events[0].title === 'Morgen-Meeting', 'Erstes Event ist das nächste'); + assert(events[0].assigned_color === '#34C759', 'assigned_color vom Join'); +}); + +// -------------------------------------------------------- +// Tests: Heutige Mahlzeiten +// -------------------------------------------------------- +test('Heutige Mahlzeiten: nur heute, in korrekter Reihenfolge', () => { + const meals = db.prepare(` + SELECT * FROM meals WHERE date = ? + ORDER BY CASE meal_type + WHEN 'breakfast' THEN 0 WHEN 'lunch' THEN 1 + WHEN 'dinner' THEN 2 WHEN 'snack' THEN 3 END + `).all(today); + + assert(meals.length === 2, `Erwartet 2 Mahlzeiten, erhalten ${meals.length}`); + assert(meals[0].meal_type === 'breakfast', 'Frühstück zuerst'); + assert(meals[1].meal_type === 'dinner', 'Abendessen danach'); +}); + +test('Heutige Mahlzeiten: morgige Mahlzeit nicht enthalten', () => { + const meals = db.prepare(`SELECT * FROM meals WHERE date = ?`).all(today); + const wrongMeal = meals.find((m) => m.title === 'Salat morgen'); + assert(!wrongMeal, 'Morgige Mahlzeit sollte nicht erscheinen'); +}); + +// -------------------------------------------------------- +// Tests: Angepinnte Notizen +// -------------------------------------------------------- +test('Angepinnte Notizen: nur pinned=1, max 3', () => { + const notes = db.prepare(` + SELECT n.*, u.display_name AS author_name, u.avatar_color AS author_color + FROM notes n + LEFT JOIN users u ON n.created_by = u.id + WHERE n.pinned = 1 + ORDER BY n.updated_at DESC + LIMIT 3 + `).all(); + + assert(notes.length === 1, `Erwartet 1 Notiz, erhalten ${notes.length}`); + assert(notes[0].title === 'Pinnwand-Notiz', 'Korrekte Notiz'); + assert(notes[0].author_name === 'Anna Admin', 'author_name vom Join'); +}); + +test('Angepinnte Notizen: nicht angepinnte werden ausgeschlossen', () => { + const notes = db.prepare(`SELECT * FROM notes WHERE pinned = 1`).all(); + const unpinned = notes.find((n) => n.content === 'Nicht angepinnt'); + assert(!unpinned, 'Nicht angepinnte Notiz sollte gefiltert sein'); +}); + +// -------------------------------------------------------- +// Ergebnis +// -------------------------------------------------------- +console.log(`\n[Dashboard-Test] Ergebnis: ${passed} bestanden, ${failed} fehlgeschlagen\n`); +if (failed > 0) process.exit(1);