From 74b6e5f078368bfae90eb3878844e89c27d75f68 Mon Sep 17 00:00:00 2001 From: ulsklyc <108589275+ulsklyc@users.noreply.github.com> Date: Tue, 24 Mar 2026 21:24:08 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20Phase=203=20Schritte=2016=E2=80=9318=20?= =?UTF-8?q?=E2=80=94=20Pinnwand,=20Kontakte,=20Budget-Tracker?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pinnwand (Notes): - server/routes/notes.js: GET (sortiert: angeheftet zuerst), POST, PUT, PATCH /pin, DELETE - public/pages/notes.js: Masonry-Grid, Markdown-Light-Renderer (fett/kursiv/Liste), Farb-Auswahl (8 Farben), helle/dunkle Textfarbe je nach Hintergrund, Pin-Toggle - public/styles/notes.css: Masonry-Layout, Sticky-Note-Karten, Hover-Aktionen Kontakte: - server/routes/contacts.js: GET (Kategorie- + Volltextfilter), POST, PUT, DELETE, GET /meta - public/pages/contacts.js: Kategorie-Filter-Chips, Echtzeit-Suche, Gruppenansicht, tel:/mailto:/maps-Links, CRUD-Modal - public/styles/contacts.css: Toolbar mit Suche, Filter-Chips, Kontaktliste, Aktions-Buttons Budget-Tracker: - server/routes/budget.js: GET (Monatfilter), GET /summary (Einnahmen/Ausgaben/Saldo + Aufschlüsselung), GET /export (CSV mit BOM), POST, PUT, DELETE, GET /meta - public/pages/budget.js: Monatsnavigation, 3 Zusammenfassungs-Karten, Kategorie-Balken (reines CSS, kein Canvas), Transaktionsliste, Einnahme/Ausgabe-Toggle, CSV-Download - public/styles/budget.css: Summary-Cards, Balkendiagramm, Transaktionsliste, Modal Tests: 34 neue Tests (10 Notes + 9 Contacts + 15 Budget), gesamt 146/146 Co-Authored-By: Claude Sonnet 4.6 --- package.json | 3 +- public/index.html | 3 + public/pages/budget.js | 438 +++++++++++++++++++++++++++++++++- public/pages/contacts.js | 329 ++++++++++++++++++++++++- public/pages/notes.js | 294 ++++++++++++++++++++++- public/styles/budget.css | 402 +++++++++++++++++++++++++++++++ public/styles/contacts.css | 312 ++++++++++++++++++++++++ public/styles/notes.css | 320 +++++++++++++++++++++++++ server/routes/budget.js | 283 +++++++++++++++++++++- server/routes/contacts.js | 148 +++++++++++- server/routes/notes.js | 147 +++++++++++- test-notes-contacts-budget.js | 310 ++++++++++++++++++++++++ 12 files changed, 2935 insertions(+), 54 deletions(-) create mode 100644 public/styles/budget.css create mode 100644 public/styles/contacts.css create mode 100644 public/styles/notes.css create mode 100644 test-notes-contacts-budget.js diff --git a/package.json b/package.json index 23cbf13..22c2e57 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "test:shopping": "node --experimental-sqlite test-shopping.js", "test:meals": "node --experimental-sqlite test-meals.js", "test:calendar": "node --experimental-sqlite test-calendar.js", - "test": "node --experimental-sqlite test-db.js && node --experimental-sqlite test-dashboard.js && node --experimental-sqlite test-tasks.js && node --experimental-sqlite test-shopping.js && node --experimental-sqlite test-meals.js && node --experimental-sqlite test-calendar.js" + "test:ncb": "node --experimental-sqlite test-notes-contacts-budget.js", + "test": "node --experimental-sqlite test-db.js && node --experimental-sqlite test-dashboard.js && node --experimental-sqlite test-tasks.js && node --experimental-sqlite test-shopping.js && node --experimental-sqlite test-meals.js && node --experimental-sqlite test-calendar.js && node --experimental-sqlite test-notes-contacts-budget.js" }, "dependencies": { "bcrypt": "^5.1.1", diff --git a/public/index.html b/public/index.html index 0c15883..e143b29 100644 --- a/public/index.html +++ b/public/index.html @@ -21,6 +21,9 @@ + + + diff --git a/public/pages/budget.js b/public/pages/budget.js index 744c130..c961e13 100644 --- a/public/pages/budget.js +++ b/public/pages/budget.js @@ -1,25 +1,437 @@ /** - * Modul: Budget - * Zweck: Seite für das Budget-Modul - * Abhängigkeiten: /api.js + * Modul: Budget-Tracker (Budget) + * Zweck: Monatsübersicht, Kategorie-Balkendiagramm (Canvas), Transaktionsliste, + * CRUD, CSV-Export + * Abhängigkeiten: /api.js, /router.js (window.oikos) */ import { api } from '/api.js'; -/** - * @param {HTMLElement} container - * @param {{ user: object }} context - */ +// -------------------------------------------------------- +// Konstanten +// -------------------------------------------------------- + +const CATEGORIES = [ + 'Lebensmittel', 'Miete', 'Versicherung', 'Mobilität', + 'Freizeit', 'Kleidung', 'Gesundheit', 'Bildung', 'Sonstiges', +]; + +const MONTH_NAMES = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', + 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']; + +// -------------------------------------------------------- +// State +// -------------------------------------------------------- + +let state = { + month: '', // YYYY-MM + entries: [], + summary: null, +}; + +// -------------------------------------------------------- +// Formatierung +// -------------------------------------------------------- + +function formatAmount(n) { + return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(n); +} + +function formatMonthLabel(ym) { + const [y, m] = ym.split('-'); + return `${MONTH_NAMES[parseInt(m, 10) - 1]} ${y}`; +} + +function addMonths(ym, n) { + const [y, m] = ym.split('-').map(Number); + const d = new Date(y, m - 1 + n, 1); + return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`; +} + +// -------------------------------------------------------- +// API +// -------------------------------------------------------- + +async function loadMonth(month) { + const [entriesRes, summaryRes] = await Promise.all([ + api.get(`/budget?month=${month}`), + api.get(`/budget/summary?month=${month}`), + ]); + state.month = month; + state.entries = entriesRes.data; + state.summary = summaryRes.data; +} + +// -------------------------------------------------------- +// Entry Point +// -------------------------------------------------------- + export async function render(container, { user }) { + const today = new Date(); + state.month = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`; + container.innerHTML = ` -
-
-

Budget

+
+
+ + + + +
-
-
Kommt bald.
-
Dieses Modul wird in Phase 2 implementiert.
+
+
Lade…
`; + + if (window.lucide) lucide.createIcons(); + + await loadMonth(state.month); + renderBody(); + wireNav(); +} + +// -------------------------------------------------------- +// Navigation +// -------------------------------------------------------- + +function wireNav() { + document.getElementById('budget-prev').addEventListener('click', async () => { + await loadMonth(addMonths(state.month, -1)); + renderBody(); + updateLabel(); + }); + document.getElementById('budget-next').addEventListener('click', async () => { + await loadMonth(addMonths(state.month, 1)); + renderBody(); + updateLabel(); + }); + document.getElementById('budget-today').addEventListener('click', async () => { + const today = new Date(); + const m = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`; + if (m === state.month) return; + await loadMonth(m); + renderBody(); + updateLabel(); + }); + document.getElementById('budget-add').addEventListener('click', () => openModal({ mode: 'create' })); + updateLabel(); +} + +function updateLabel() { + const lbl = document.getElementById('budget-label'); + if (lbl) lbl.textContent = formatMonthLabel(state.month); +} + +// -------------------------------------------------------- +// Body +// -------------------------------------------------------- + +function renderBody() { + const body = document.getElementById('budget-body'); + if (!body) return; + updateLabel(); + + const s = state.summary; + const balanceClass = s.balance >= 0 ? 'budget-summary-card--balance-positive' : 'budget-summary-card--balance-negative'; + + body.innerHTML = ` + +
+
+
Einnahmen
+
${formatAmount(s.income)}
+
+
+
Ausgaben
+
${formatAmount(Math.abs(s.expenses))}
+
+
+
Saldo
+
${formatAmount(s.balance)}
+
+
+ + + ${s.byCategory.length ? ` +
+
Nach Kategorie
+
+ ${renderCategoryBars(s.byCategory)} +
+
` : ''} + + +
+
+ Transaktionen + ${state.entries.length ? ` + + CSV + ` : ''} +
+
+ ${renderEntries()} +
+
+ `; + + if (window.lucide) lucide.createIcons(); + + document.getElementById('budget-list')?.addEventListener('click', async (e) => { + const delBtn = e.target.closest('[data-action="delete"]'); + if (delBtn) { await deleteEntry(parseInt(delBtn.dataset.id, 10)); return; } + + const item = e.target.closest('.budget-entry[data-id]'); + if (item && !e.target.closest('[data-action]')) { + const entry = state.entries.find((e) => e.id === parseInt(item.dataset.id, 10)); + if (entry) openModal({ mode: 'edit', entry }); + } + }); +} + +function renderCategoryBars(byCategory) { + const maxAbs = Math.max(...byCategory.map((c) => Math.abs(c.total)), 1); + + return byCategory.map((c) => { + const isExpense = c.total < 0; + const pct = Math.round((Math.abs(c.total) / maxAbs) * 100); + const cls = isExpense ? 'budget-bar-row__fill--expenses' : 'budget-bar-row__fill--income'; + + return ` +
+
${escHtml(c.category)}
+
+
+
+
+ ${formatAmount(c.total)} +
+
+ `; + }).join(''); +} + +function renderEntries() { + if (!state.entries.length) { + return `
+ +
Keine Einträge
+
Noch keine Transaktionen für diesen Monat.
+
`; + } + + return state.entries.map((e) => { + const isIncome = e.amount > 0; + const amtClass = isIncome ? 'budget-entry__amount--income' : 'budget-entry__amount--expenses'; + const indClass = isIncome ? 'budget-entry__indicator--income' : 'budget-entry__indicator--expenses'; + const sign = isIncome ? '+' : ''; + const date = formatEntryDate(e.date); + + return ` +
+
+
+
${escHtml(e.title)}
+
${date} · ${escHtml(e.category)}${e.is_recurring ? ' 🔁' : ''}
+
+
${sign}${formatAmount(e.amount)}
+ +
+ `; + }).join(''); +} + +function formatEntryDate(dateStr) { + const d = new Date(dateStr + 'T00:00:00'); + return `${d.getDate().toString().padStart(2, '0')}.${(d.getMonth() + 1).toString().padStart(2, '0')}.`; +} + +// -------------------------------------------------------- +// Modal +// -------------------------------------------------------- + +function openModal({ mode, entry = null }) { + document.getElementById('budget-modal-overlay')?.remove(); + + const isEdit = mode === 'edit'; + const today = new Date().toISOString().slice(0, 10); + + const isExpense = isEdit ? entry.amount < 0 : true; // Standard: Ausgabe + const absAmount = isEdit ? Math.abs(entry.amount).toFixed(2) : ''; + + const catOpts = CATEGORIES.map((c) => + `` + ).join(''); + + const overlay = document.createElement('div'); + overlay.id = 'budget-modal-overlay'; + overlay.className = 'budget-modal-overlay'; + overlay.innerHTML = ` + + `; + + document.body.appendChild(overlay); + if (window.lucide) lucide.createIcons(); + + // Typ-Toggle + let currentType = isExpense ? 'expense' : 'income'; + overlay.querySelector('#type-expense').addEventListener('click', () => { + currentType = 'expense'; + overlay.querySelector('#type-expense').classList.add('amount-type-btn--active'); + overlay.querySelector('#type-income').classList.remove('amount-type-btn--active'); + }); + overlay.querySelector('#type-income').addEventListener('click', () => { + currentType = 'income'; + overlay.querySelector('#type-income').classList.add('amount-type-btn--active'); + overlay.querySelector('#type-expense').classList.remove('amount-type-btn--active'); + }); + + overlay.querySelector('#bm-close').addEventListener('click', () => overlay.remove()); + overlay.querySelector('#bm-cancel').addEventListener('click', () => overlay.remove()); + overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); + + overlay.querySelector('#bm-delete')?.addEventListener('click', async () => { + if (!confirm(`"${entry.title}" wirklich löschen?`)) return; + overlay.remove(); + await deleteEntry(entry.id); + }); + + overlay.querySelector('#bm-save').addEventListener('click', async () => { + const saveBtn = overlay.querySelector('#bm-save'); + const title = overlay.querySelector('#bm-title').value.trim(); + const absVal = parseFloat(overlay.querySelector('#bm-amount').value); + const category = overlay.querySelector('#bm-category').value; + const date = overlay.querySelector('#bm-date').value; + const recurring = overlay.querySelector('#bm-recurring').checked ? 1 : 0; + + if (!title) { window.oikos?.showToast('Titel ist erforderlich', 'error'); return; } + if (isNaN(absVal) || absVal <= 0) { window.oikos?.showToast('Gültigen Betrag eingeben', 'error'); return; } + if (!date) { window.oikos?.showToast('Datum ist erforderlich', 'error'); return; } + + const amount = currentType === 'expense' ? -absVal : absVal; + + saveBtn.disabled = true; + saveBtn.textContent = '…'; + + try { + const body = { title, amount, category, date, is_recurring: recurring }; + if (mode === 'create') { + const res = await api.post('/budget', body); + state.entries.unshift(res.data); + } else { + const res = await api.put(`/budget/${entry.id}`, body); + const idx = state.entries.findIndex((e) => e.id === entry.id); + if (idx !== -1) state.entries[idx] = res.data; + } + // Zusammenfassung neu laden + const sumRes = await api.get(`/budget/summary?month=${state.month}`); + state.summary = sumRes.data; + + overlay.remove(); + renderBody(); + window.oikos?.showToast(mode === 'create' ? 'Eintrag hinzugefügt' : 'Eintrag gespeichert', 'success'); + } catch (err) { + window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error'); + saveBtn.disabled = false; + saveBtn.textContent = isEdit ? 'Speichern' : 'Hinzufügen'; + } + }); + + overlay.querySelector('#bm-title').focus(); +} + +// -------------------------------------------------------- +// Eintrag löschen +// -------------------------------------------------------- + +async function deleteEntry(id) { + if (!confirm('Eintrag wirklich löschen?')) return; + try { + await api.delete(`/budget/${id}`); + state.entries = state.entries.filter((e) => e.id !== id); + const sumRes = await api.get(`/budget/summary?month=${state.month}`); + state.summary = sumRes.data; + renderBody(); + window.oikos?.showToast('Eintrag gelöscht', 'success'); + } catch (err) { + window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error'); + } +} + +// -------------------------------------------------------- +// Hilfsfunktion +// -------------------------------------------------------- + +function escHtml(str) { + if (!str) return ''; + return String(str) + .replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } diff --git a/public/pages/contacts.js b/public/pages/contacts.js index cb218ea..54d2203 100644 --- a/public/pages/contacts.js +++ b/public/pages/contacts.js @@ -1,25 +1,328 @@ /** - * Modul: Contacts - * Zweck: Seite für das Contacts-Modul - * Abhängigkeiten: /api.js + * Modul: Kontakte (Contacts) + * Zweck: Kontaktliste mit Kategorie-Filter, Suche, CRUD, tel:/mailto:/maps-Links + * Abhängigkeiten: /api.js, /router.js (window.oikos) */ import { api } from '/api.js'; -/** - * @param {HTMLElement} container - * @param {{ user: object }} context - */ +// -------------------------------------------------------- +// Konstanten +// -------------------------------------------------------- + +const CATEGORIES = ['Arzt', 'Schule/Kita', 'Behörde', 'Versicherung', + 'Handwerker', 'Notfall', 'Sonstiges']; + +const CATEGORY_ICONS = { + 'Arzt': '🏥', + 'Schule/Kita': '🏫', + 'Behörde': '🏛️', + 'Versicherung': '🛡️', + 'Handwerker': '🔧', + 'Notfall': '🚨', + 'Sonstiges': '📋', +}; + +// -------------------------------------------------------- +// State +// -------------------------------------------------------- + +let state = { + contacts: [], + activeCategory: null, + searchQuery: '', +}; + +// -------------------------------------------------------- +// Entry Point +// -------------------------------------------------------- + export async function render(container, { user }) { container.innerHTML = ` -
-
-

Contacts

+
+
+
+ + +
+
-
-
Kommt bald.
-
Dieses Modul wird in Phase 2 implementiert.
+
+ + ${CATEGORIES.map((c) => ` + + `).join('')} +
+
+
+ `; + + if (window.lucide) lucide.createIcons(); + + const res = await api.get('/contacts'); + state.contacts = res.data; + renderList(); + + // Suche + let searchTimer; + document.getElementById('contacts-search').addEventListener('input', (e) => { + clearTimeout(searchTimer); + searchTimer = setTimeout(() => { + state.searchQuery = e.target.value.trim(); + renderList(); + }, 200); + }); + + // Kategorie-Filter + document.getElementById('contacts-filters').addEventListener('click', (e) => { + const chip = e.target.closest('[data-cat]'); + if (!chip) return; + document.querySelectorAll('.contact-filter-chip').forEach((c) => + c.classList.toggle('contact-filter-chip--active', c === chip) + ); + state.activeCategory = chip.dataset.cat || null; + renderList(); + }); + + // Neu + document.getElementById('contacts-add-btn').addEventListener('click', () => + openModal({ mode: 'create' }) + ); +} + +// -------------------------------------------------------- +// Liste rendern +// -------------------------------------------------------- + +function filterContacts() { + let list = state.contacts; + + if (state.activeCategory) { + list = list.filter((c) => c.category === state.activeCategory); + } + + if (state.searchQuery) { + const q = state.searchQuery.toLowerCase(); + list = list.filter((c) => + c.name.toLowerCase().includes(q) || + (c.phone && c.phone.toLowerCase().includes(q)) || + (c.email && c.email.toLowerCase().includes(q)) + ); + } + + return list; +} + +function renderList() { + const container = document.getElementById('contacts-list'); + if (!container) return; + + const contacts = filterContacts(); + + if (!contacts.length) { + container.innerHTML = ` +
+ +
Keine Kontakte gefunden
+
+ `; + if (window.lucide) lucide.createIcons(); + return; + } + + // Nach Kategorie gruppieren + const groups = {}; + for (const c of contacts) { + if (!groups[c.category]) groups[c.category] = []; + groups[c.category].push(c); + } + + container.innerHTML = Object.entries(groups) + .sort(([a], [b]) => CATEGORIES.indexOf(a) - CATEGORIES.indexOf(b)) + .map(([cat, items]) => ` +
+
${CATEGORY_ICONS[cat] || ''} ${escHtml(cat)}
+ ${items.map((c) => renderContactItem(c)).join('')} +
+ `).join(''); + + if (window.lucide) lucide.createIcons(); + + // Event-Delegation + container.addEventListener('click', async (e) => { + if (e.target.closest('[data-action="delete"]')) { + const id = parseInt(e.target.closest('[data-action="delete"]').dataset.id, 10); + await deleteContact(id); + return; + } + const item = e.target.closest('.contact-item[data-id]'); + if (item && !e.target.closest('a') && !e.target.closest('[data-action]')) { + const c = state.contacts.find((c) => c.id === parseInt(item.dataset.id, 10)); + if (c) openModal({ mode: 'edit', contact: c }); + } + }); +} + +function renderContactItem(c) { + const phone = c.phone ? `` : ''; + const email = c.email ? `` : ''; + const maps = c.address ? `` : ''; + const meta = [c.phone, c.email].filter(Boolean).join(' · '); + + return ` +
+
${CATEGORY_ICONS[c.category] || '📋'}
+
+
${escHtml(c.name)}
+ ${meta ? `
${escHtml(meta)}
` : ''} +
+
+ ${phone}${email}${maps} +
`; } + +// -------------------------------------------------------- +// Modal +// -------------------------------------------------------- + +function openModal({ mode, contact = null }) { + document.getElementById('contact-modal-overlay')?.remove(); + + const isEdit = mode === 'edit'; + const v = (field) => escHtml(isEdit && contact[field] ? contact[field] : ''); + + const catOpts = CATEGORIES.map((c) => + `` + ).join(''); + + const overlay = document.createElement('div'); + overlay.id = 'contact-modal-overlay'; + overlay.className = 'contact-modal-overlay'; + overlay.innerHTML = ` + + `; + + document.body.appendChild(overlay); + if (window.lucide) lucide.createIcons(); + + overlay.querySelector('#cm-close').addEventListener('click', () => overlay.remove()); + overlay.querySelector('#cm-cancel').addEventListener('click', () => overlay.remove()); + overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); + + overlay.querySelector('#cm-delete')?.addEventListener('click', async () => { + if (!confirm(`"${contact.name}" wirklich löschen?`)) return; + overlay.remove(); + await deleteContact(contact.id); + }); + + overlay.querySelector('#cm-save').addEventListener('click', async () => { + const saveBtn = overlay.querySelector('#cm-save'); + const name = overlay.querySelector('#cm-name').value.trim(); + const category = overlay.querySelector('#cm-category').value; + const phone = overlay.querySelector('#cm-phone').value.trim() || null; + const email = overlay.querySelector('#cm-email').value.trim() || null; + const address = overlay.querySelector('#cm-address').value.trim() || null; + const notes = overlay.querySelector('#cm-notes').value.trim() || null; + + if (!name) { window.oikos?.showToast('Name ist erforderlich', 'error'); return; } + + saveBtn.disabled = true; + saveBtn.textContent = '…'; + + try { + const body = { name, category, phone, email, address, notes }; + if (mode === 'create') { + const res = await api.post('/contacts', body); + state.contacts.push(res.data); + state.contacts.sort((a, b) => + CATEGORIES.indexOf(a.category) - CATEGORIES.indexOf(b.category) || + a.name.localeCompare(b.name) + ); + } else { + const res = await api.put(`/contacts/${contact.id}`, body); + const idx = state.contacts.findIndex((c) => c.id === contact.id); + if (idx !== -1) state.contacts[idx] = res.data; + } + overlay.remove(); + renderList(); + window.oikos?.showToast(mode === 'create' ? 'Kontakt gespeichert' : 'Kontakt aktualisiert', 'success'); + } catch (err) { + window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error'); + saveBtn.disabled = false; + saveBtn.textContent = isEdit ? 'Speichern' : 'Erstellen'; + } + }); + + overlay.querySelector('#cm-name').focus(); +} + +async function deleteContact(id) { + if (!confirm('Kontakt wirklich löschen?')) return; + try { + await api.delete(`/contacts/${id}`); + state.contacts = state.contacts.filter((c) => c.id !== id); + renderList(); + window.oikos?.showToast('Kontakt gelöscht', 'success'); + } catch (err) { + window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error'); + } +} + +function escHtml(str) { + if (!str) return ''; + return String(str) + .replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); +} diff --git a/public/pages/notes.js b/public/pages/notes.js index f58bff4..b743788 100644 --- a/public/pages/notes.js +++ b/public/pages/notes.js @@ -1,25 +1,293 @@ /** - * Modul: Notes - * Zweck: Seite für das Notes-Modul - * Abhängigkeiten: /api.js + * Modul: Pinnwand / Notizen (Notes) + * Zweck: Masonry-Grid mit farbigen Sticky Notes, Pin-Toggle, CRUD + * Abhängigkeiten: /api.js, /router.js (window.oikos) */ import { api } from '/api.js'; -/** - * @param {HTMLElement} container - * @param {{ user: object }} context - */ +// -------------------------------------------------------- +// Konstanten +// -------------------------------------------------------- + +const NOTE_COLORS = [ + '#FFEB3B', '#FFD54F', '#A5D6A7', '#80DEEA', + '#90CAF9', '#CE93D8', '#FFAB91', '#FFFFFF', +]; + +// -------------------------------------------------------- +// State +// -------------------------------------------------------- + +let state = { notes: [], user: null }; + +// -------------------------------------------------------- +// Markdown-Light Renderer +// -------------------------------------------------------- + +function renderMarkdownLight(text) { + if (!text) return ''; + return escHtml(text) + .replace(/\*\*(.+?)\*\*/g, '$1') + .replace(/\*(.+?)\*/g, '$1') + .replace(/^- (.+)$/gm, '• $1') + .replace(/\n/g, '
'); +} + +// -------------------------------------------------------- +// Entry Point +// -------------------------------------------------------- + export async function render(container, { user }) { + state.user = user; + container.innerHTML = ` -
-
-

Notes

+
+
+ Pinnwand +
-
-
Kommt bald.
-
Dieses Modul wird in Phase 2 implementiert.
+
+
+ `; + + if (window.lucide) lucide.createIcons(); + + const res = await api.get('/notes'); + state.notes = res.data; + renderGrid(); + + document.getElementById('notes-add-btn').addEventListener('click', () => openModal({ mode: 'create' })); +} + +// -------------------------------------------------------- +// Grid +// -------------------------------------------------------- + +function renderGrid() { + const grid = document.getElementById('notes-grid'); + if (!grid) return; + + if (!state.notes.length) { + grid.innerHTML = ` +
+ +
Noch keine Notizen
+
Klicke auf „Neue Notiz" um loszulegen.
+
+ `; + if (window.lucide) lucide.createIcons(); + return; + } + + grid.innerHTML = state.notes.map((n) => renderNoteCard(n)).join(''); + if (window.lucide) lucide.createIcons(); + + grid.addEventListener('click', async (e) => { + // Pin + const pinBtn = e.target.closest('[data-action="pin"]'); + if (pinBtn) { e.stopPropagation(); await togglePin(parseInt(pinBtn.dataset.id, 10)); return; } + + // Delete + const delBtn = e.target.closest('[data-action="delete"]'); + if (delBtn) { e.stopPropagation(); await deleteNote(parseInt(delBtn.dataset.id, 10)); return; } + + // Edit + const card = e.target.closest('.note-card[data-id]'); + if (card) { + const note = state.notes.find((n) => n.id === parseInt(card.dataset.id, 10)); + if (note) openModal({ mode: 'edit', note }); + } + }); +} + +function renderNoteCard(note) { + const initials = note.creator_name + ? note.creator_name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2) + : '?'; + + const textColor = isLightColor(note.color) ? 'rgba(0,0,0,0.8)' : '#ffffff'; + + return ` +
+ + ${note.title ? `
${escHtml(note.title)}
` : ''} +
${renderMarkdownLight(note.content)}
+
+
+ ${initials} + ${escHtml(note.creator_name || '')} +
+
`; } + +// -------------------------------------------------------- +// Modal +// -------------------------------------------------------- + +function openModal({ mode, note = null }) { + document.getElementById('note-modal-overlay')?.remove(); + + const overlay = document.createElement('div'); + overlay.id = 'note-modal-overlay'; + overlay.className = 'note-modal-overlay'; + + const isEdit = mode === 'edit'; + const selColor = isEdit ? note.color : NOTE_COLORS[0]; + + overlay.innerHTML = ` + + `; + + document.body.appendChild(overlay); + if (window.lucide) lucide.createIcons(); + + // Farb-Swatch + overlay.querySelectorAll('.note-color-swatch').forEach((sw) => { + sw.addEventListener('click', () => { + overlay.querySelectorAll('.note-color-swatch').forEach((s) => s.classList.remove('note-color-swatch--active')); + sw.classList.add('note-color-swatch--active'); + }); + }); + + overlay.querySelector('#note-modal-close').addEventListener('click', () => overlay.remove()); + overlay.querySelector('#note-modal-cancel').addEventListener('click', () => overlay.remove()); + overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); + + overlay.querySelector('#note-modal-save').addEventListener('click', async () => { + const saveBtn = overlay.querySelector('#note-modal-save'); + const title = overlay.querySelector('#note-title').value.trim() || null; + const content = overlay.querySelector('#note-content').value.trim(); + const color = overlay.querySelector('.note-color-swatch--active')?.dataset.color || NOTE_COLORS[0]; + const pinned = overlay.querySelector('#note-pinned').checked ? 1 : 0; + + if (!content) { window.oikos?.showToast('Inhalt ist erforderlich', 'error'); return; } + + saveBtn.disabled = true; + saveBtn.textContent = '…'; + + try { + if (mode === 'create') { + const res = await api.post('/notes', { title, content, color, pinned }); + state.notes.unshift(res.data); + } else { + const res = await api.put(`/notes/${note.id}`, { title, content, color, pinned }); + const idx = state.notes.findIndex((n) => n.id === note.id); + if (idx !== -1) state.notes[idx] = res.data; + // Angepinnte nach oben sortieren + state.notes.sort((a, b) => b.pinned - a.pinned); + } + overlay.remove(); + renderGrid(); + window.oikos?.showToast(mode === 'create' ? 'Notiz erstellt' : 'Notiz gespeichert', 'success'); + } catch (err) { + window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error'); + saveBtn.disabled = false; + saveBtn.textContent = isEdit ? 'Speichern' : 'Erstellen'; + } + }); + + overlay.querySelector('#note-content').focus(); +} + +// -------------------------------------------------------- +// Aktionen +// -------------------------------------------------------- + +async function togglePin(id) { + try { + const res = await api.patch(`/notes/${id}/pin`, {}); + const note = state.notes.find((n) => n.id === id); + if (note) note.pinned = res.data.pinned; + state.notes.sort((a, b) => b.pinned - a.pinned); + renderGrid(); + } catch (err) { + window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error'); + } +} + +async function deleteNote(id) { + if (!confirm('Notiz wirklich löschen?')) return; + try { + await api.delete(`/notes/${id}`); + state.notes = state.notes.filter((n) => n.id !== id); + renderGrid(); + window.oikos?.showToast('Notiz gelöscht', 'success'); + } catch (err) { + window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error'); + } +} + +// -------------------------------------------------------- +// Hilfsfunktionen +// -------------------------------------------------------- + +function isLightColor(hex) { + if (!hex) return true; + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + return (r * 299 + g * 587 + b * 114) / 1000 > 150; +} + +function escHtml(str) { + if (!str) return ''; + return String(str) + .replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); +} diff --git a/public/styles/budget.css b/public/styles/budget.css new file mode 100644 index 0000000..d94c87c --- /dev/null +++ b/public/styles/budget.css @@ -0,0 +1,402 @@ +/** + * Modul: Budget-Tracker (Budget) + * Zweck: Styles für Monatsübersicht, Balkendiagramm, Transaktionsliste, Modal + * Abhängigkeiten: tokens.css, layout.css + */ + +/* -------------------------------------------------------- + * Seiten-Layout + * -------------------------------------------------------- */ +.budget-page { + display: flex; + flex-direction: column; + height: calc(100dvh - var(--nav-height-mobile) - var(--safe-area-inset-bottom)); + max-width: var(--content-max-width); + margin: 0 auto; +} + +@media (min-width: 1024px) { + .budget-page { height: 100dvh; } +} + +/* -------------------------------------------------------- + * Monat-Navigation + * -------------------------------------------------------- */ +.budget-nav { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + background-color: var(--color-surface); + flex-shrink: 0; +} + +.budget-nav__label { + font-size: var(--text-base); + font-weight: var(--font-weight-semibold); + flex: 1; + text-align: center; +} + +.budget-nav__today { + font-size: var(--text-sm); + color: var(--color-accent); + font-weight: var(--font-weight-medium); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + background: var(--color-accent-light); + cursor: pointer; + border: none; + white-space: nowrap; +} + +/* -------------------------------------------------------- + * Zusammenfassungs-Karten + * -------------------------------------------------------- */ +.budget-summary { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + padding: var(--space-4); + flex-shrink: 0; +} + +.budget-summary-card { + background-color: var(--color-surface); + border-radius: var(--radius-md); + padding: var(--space-3); + box-shadow: var(--shadow-sm); + text-align: center; +} + +.budget-summary-card__label { + font-size: var(--text-xs); + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: var(--space-1); +} + +.budget-summary-card__amount { + font-size: var(--text-xl); + font-weight: var(--font-weight-bold); +} + +.budget-summary-card--income .budget-summary-card__amount { color: var(--color-success); } +.budget-summary-card--expenses .budget-summary-card__amount { color: var(--color-danger); } +.budget-summary-card--balance .budget-summary-card__amount { color: var(--color-text-primary); } +.budget-summary-card--balance-positive .budget-summary-card__amount { color: var(--color-success); } +.budget-summary-card--balance-negative .budget-summary-card__amount { color: var(--color-danger); } + +/* -------------------------------------------------------- + * Kategorien-Diagramm (Canvas) + * -------------------------------------------------------- */ +.budget-chart-section { + padding: 0 var(--space-4) var(--space-3); + flex-shrink: 0; +} + +.budget-chart-section__title { + font-size: var(--text-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + margin-bottom: var(--space-2); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.budget-chart { + width: 100%; + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.budget-bar-row { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.budget-bar-row__label { + font-size: var(--text-xs); + color: var(--color-text-secondary); + width: 90px; + flex-shrink: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.budget-bar-row__track { + flex: 1; + height: 10px; + background-color: var(--color-surface-2); + border-radius: var(--radius-full); + overflow: hidden; +} + +.budget-bar-row__fill { + height: 100%; + border-radius: var(--radius-full); + transition: width 0.4s ease; +} + +.budget-bar-row__fill--income { background-color: var(--color-success); } +.budget-bar-row__fill--expenses { background-color: var(--color-danger); } + +.budget-bar-row__amount { + font-size: var(--text-xs); + font-weight: var(--font-weight-medium); + width: 64px; + text-align: right; + flex-shrink: 0; +} + +/* -------------------------------------------------------- + * Transaktions-Liste + * -------------------------------------------------------- */ +.budget-list-section { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + border-top: 1px solid var(--color-border); +} + +.budget-list-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4) var(--space-2); + flex-shrink: 0; +} + +.budget-list-header__title { + font-size: var(--text-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.budget-list { + flex: 1; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.budget-entry { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: background-color var(--transition-fast); +} + +.budget-entry:hover { + background-color: var(--color-surface-2); +} + +.budget-entry__indicator { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + flex-shrink: 0; +} + +.budget-entry__indicator--income { background-color: var(--color-success); } +.budget-entry__indicator--expenses { background-color: var(--color-danger); } + +.budget-entry__body { + flex: 1; + min-width: 0; +} + +.budget-entry__title { + font-size: var(--text-base); + font-weight: var(--font-weight-medium); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.budget-entry__meta { + font-size: var(--text-sm); + color: var(--color-text-secondary); + margin-top: 1px; +} + +.budget-entry__amount { + font-size: var(--text-base); + font-weight: var(--font-weight-semibold); + flex-shrink: 0; +} + +.budget-entry__amount--income { color: var(--color-success); } +.budget-entry__amount--expenses { color: var(--color-danger); } + +.budget-entry__delete { + width: 28px; + height: 28px; + border-radius: var(--radius-sm); + background: none; + border: none; + cursor: pointer; + color: var(--color-text-disabled); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity var(--transition-fast), color var(--transition-fast); + min-height: unset; +} + +.budget-entry:hover .budget-entry__delete { + opacity: 1; +} + +.budget-entry__delete:hover { + color: var(--color-danger); +} + +/* -------------------------------------------------------- + * Leer-Zustand + * -------------------------------------------------------- */ +.budget-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + padding: var(--space-12) var(--space-6); + text-align: center; + color: var(--color-text-secondary); +} + +/* -------------------------------------------------------- + * Modal + * -------------------------------------------------------- */ +.budget-modal-overlay { + position: fixed; + inset: 0; + background-color: rgba(0,0,0,0.5); + z-index: var(--z-modal); + display: flex; + align-items: flex-end; + justify-content: center; + animation: fadeIn var(--transition-fast) ease; +} + +@media (min-width: 768px) { + .budget-modal-overlay { + align-items: center; + padding: var(--space-4); + } +} + +.budget-modal { + background-color: var(--color-surface); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + width: 100%; + max-height: 90dvh; + display: flex; + flex-direction: column; + overflow: hidden; + animation: slideUp var(--transition-base) ease; +} + +@media (min-width: 768px) { + .budget-modal { + border-radius: var(--radius-lg); + max-width: 460px; + max-height: 80dvh; + } +} + +.budget-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; +} + +.budget-modal__title { + font-size: var(--text-lg); + font-weight: var(--font-weight-bold); +} + +.budget-modal__close { + width: 32px; + height: 32px; + border-radius: var(--radius-full); + background: var(--color-border); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-secondary); + min-height: unset; +} + +.budget-modal__body { + flex: 1; + overflow-y: auto; + padding: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +/* Einnahme/Ausgabe-Toggle */ +.amount-type-toggle { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-2); + background-color: var(--color-surface-2); + border-radius: var(--radius-sm); + padding: 3px; +} + +.amount-type-btn { + padding: var(--space-2) var(--space-3); + border-radius: 6px; + border: none; + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + cursor: pointer; + background: none; + color: var(--color-text-secondary); + transition: all var(--transition-fast); + min-height: unset; +} + +.amount-type-btn--income.amount-type-btn--active { + background-color: var(--color-success); + color: #ffffff; +} + +.amount-type-btn--expenses.amount-type-btn--active { + background-color: var(--color-danger); + color: #ffffff; +} + +.budget-modal__footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4); + border-top: 1px solid var(--color-border); + flex-shrink: 0; +} + +.budget-modal__footer-actions { + display: flex; + gap: var(--space-3); +} diff --git a/public/styles/contacts.css b/public/styles/contacts.css new file mode 100644 index 0000000..19aeb8c --- /dev/null +++ b/public/styles/contacts.css @@ -0,0 +1,312 @@ +/** + * Modul: Kontakte (Contacts) + * Zweck: Styles für Kontaktliste, Kategorie-Chips, Kontakt-Karte, Modal + * Abhängigkeiten: tokens.css, layout.css + */ + +/* -------------------------------------------------------- + * Seiten-Layout + * -------------------------------------------------------- */ +.contacts-page { + display: flex; + flex-direction: column; + height: calc(100dvh - var(--nav-height-mobile) - var(--safe-area-inset-bottom)); + max-width: var(--content-max-width); + margin: 0 auto; +} + +@media (min-width: 1024px) { + .contacts-page { height: 100dvh; } +} + +/* -------------------------------------------------------- + * Toolbar: Suche + Filter + Neu + * -------------------------------------------------------- */ +.contacts-toolbar { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + background-color: var(--color-surface); + flex-shrink: 0; +} + +.contacts-toolbar__search { + flex: 1; + position: relative; +} + +.contacts-toolbar__search-icon { + position: absolute; + left: var(--space-3); + top: 50%; + transform: translateY(-50%); + width: 16px; + height: 16px; + color: var(--color-text-disabled); + pointer-events: none; +} + +.contacts-toolbar__search-input { + width: 100%; + padding: var(--space-2) var(--space-3) var(--space-2) 36px; + border-radius: var(--radius-sm); + border: 1.5px solid var(--color-border); + background-color: var(--color-surface-2); + color: var(--color-text-primary); + font-size: var(--text-sm); + transition: border-color var(--transition-fast); + min-height: 36px; +} + +.contacts-toolbar__search-input:focus { + outline: none; + border-color: var(--color-accent); + background-color: var(--color-surface); +} + +/* -------------------------------------------------------- + * Kategorie-Filter (horizontal scroll) + * -------------------------------------------------------- */ +.contacts-filters { + display: flex; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border-bottom: 1px solid var(--color-border); + overflow-x: auto; + scrollbar-width: none; + flex-shrink: 0; +} + +.contacts-filters::-webkit-scrollbar { display: none; } + +.contact-filter-chip { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + white-space: nowrap; + cursor: pointer; + border: 1.5px solid var(--color-border); + background: transparent; + color: var(--color-text-secondary); + transition: all var(--transition-fast); + min-height: 30px; +} + +.contact-filter-chip--active { + background-color: var(--color-accent); + border-color: var(--color-accent); + color: #ffffff; +} + +/* -------------------------------------------------------- + * Kontaktliste + * -------------------------------------------------------- */ +.contacts-list { + flex: 1; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +.contact-group { + margin-bottom: 0; +} + +.contact-group__header { + font-size: var(--text-xs); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.06em; + padding: var(--space-2) var(--space-4) var(--space-1); + background-color: var(--color-bg); + border-bottom: 1px solid var(--color-border); + position: sticky; + top: 0; + z-index: var(--z-base); +} + +.contact-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: background-color var(--transition-fast); +} + +.contact-item:hover { + background-color: var(--color-surface-2); +} + +.contact-item__icon { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + background-color: var(--color-accent-light); + color: var(--color-accent); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-size: var(--text-lg); +} + +.contact-item__body { + flex: 1; + min-width: 0; +} + +.contact-item__name { + font-size: var(--text-base); + font-weight: var(--font-weight-medium); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.contact-item__meta { + font-size: var(--text-sm); + color: var(--color-text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 1px; +} + +.contact-item__actions { + display: flex; + gap: var(--space-1); + flex-shrink: 0; +} + +.contact-action-btn { + width: 36px; + height: 36px; + border-radius: var(--radius-full); + border: none; + background: var(--color-surface-2); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-secondary); + transition: background-color var(--transition-fast), color var(--transition-fast); + min-height: unset; + text-decoration: none; +} + +.contact-action-btn:hover { + background-color: var(--color-accent-light); + color: var(--color-accent); +} + +.contact-action-btn--call:hover { background-color: var(--color-success-light); color: var(--color-success); } +.contact-action-btn--mail:hover { background-color: var(--color-accent-light); color: var(--color-accent); } +.contact-action-btn--maps:hover { background-color: var(--color-warning-light); color: var(--color-warning); } + +/* -------------------------------------------------------- + * Leer-Zustand + * -------------------------------------------------------- */ +.contacts-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + padding: var(--space-12) var(--space-6); + text-align: center; + color: var(--color-text-secondary); +} + +/* -------------------------------------------------------- + * Modal (gleiche Struktur wie andere Module) + * -------------------------------------------------------- */ +.contact-modal-overlay { + position: fixed; + inset: 0; + background-color: rgba(0,0,0,0.5); + z-index: var(--z-modal); + display: flex; + align-items: flex-end; + justify-content: center; + animation: fadeIn var(--transition-fast) ease; +} + +@media (min-width: 768px) { + .contact-modal-overlay { + align-items: center; + padding: var(--space-4); + } +} + +.contact-modal { + background-color: var(--color-surface); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + width: 100%; + max-height: 90dvh; + display: flex; + flex-direction: column; + overflow: hidden; + animation: slideUp var(--transition-base) ease; +} + +@media (min-width: 768px) { + .contact-modal { + border-radius: var(--radius-lg); + max-width: 480px; + max-height: 85dvh; + } +} + +.contact-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; +} + +.contact-modal__title { + font-size: var(--text-lg); + font-weight: var(--font-weight-bold); +} + +.contact-modal__close { + width: 32px; + height: 32px; + border-radius: var(--radius-full); + background: var(--color-border); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-secondary); + min-height: unset; +} + +.contact-modal__body { + flex: 1; + overflow-y: auto; + padding: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.contact-modal__footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4); + border-top: 1px solid var(--color-border); + flex-shrink: 0; +} diff --git a/public/styles/notes.css b/public/styles/notes.css new file mode 100644 index 0000000..ec9697d --- /dev/null +++ b/public/styles/notes.css @@ -0,0 +1,320 @@ +/** + * Modul: Pinnwand / Notizen (Notes) + * Zweck: Styles für Masonry-Grid, Sticky-Note-Karten, Modal + * Abhängigkeiten: tokens.css, layout.css + */ + +/* -------------------------------------------------------- + * Seiten-Layout + * -------------------------------------------------------- */ +.notes-page { + display: flex; + flex-direction: column; + height: calc(100dvh - var(--nav-height-mobile) - var(--safe-area-inset-bottom)); + max-width: var(--content-max-width); + margin: 0 auto; +} + +@media (min-width: 1024px) { + .notes-page { height: 100dvh; } +} + +/* -------------------------------------------------------- + * Header / Toolbar + * -------------------------------------------------------- */ +.notes-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + background-color: var(--color-surface); + flex-shrink: 0; + gap: var(--space-3); +} + +.notes-toolbar__title { + font-size: var(--text-lg); + font-weight: var(--font-weight-bold); +} + +/* -------------------------------------------------------- + * Masonry-Grid + * -------------------------------------------------------- */ +.notes-grid { + flex: 1; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + padding: var(--space-4); + columns: 2; + column-gap: var(--space-3); +} + +@media (min-width: 600px) { + .notes-grid { columns: 3; } +} + +@media (min-width: 900px) { + .notes-grid { columns: 4; } +} + +@media (min-width: 1200px) { + .notes-grid { columns: 5; } +} + +/* -------------------------------------------------------- + * Notiz-Karte + * -------------------------------------------------------- */ +.note-card { + break-inside: avoid; + margin-bottom: var(--space-3); + border-radius: var(--radius-md); + padding: var(--space-3); + cursor: pointer; + position: relative; + transition: transform var(--transition-fast), box-shadow var(--transition-fast); + box-shadow: var(--shadow-sm); +} + +.note-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.note-card--pinned { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); +} + +.note-card__pin { + position: absolute; + top: var(--space-2); + right: var(--space-2); + width: 24px; + height: 24px; + border-radius: var(--radius-full); + background: rgba(0,0,0,0.1); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + min-height: unset; + opacity: 0; + transition: opacity var(--transition-fast), background-color var(--transition-fast); + color: rgba(0,0,0,0.6); +} + +.note-card--pinned .note-card__pin { + opacity: 1; + background: rgba(0,0,0,0.15); +} + +.note-card:hover .note-card__pin { + opacity: 1; +} + +.note-card__pin:hover { + background: rgba(0,0,0,0.2); +} + +.note-card__title { + font-size: var(--text-sm); + font-weight: var(--font-weight-semibold); + margin-bottom: var(--space-1); + color: rgba(0,0,0,0.8); + padding-right: var(--space-6); +} + +.note-card__content { + font-size: var(--text-sm); + line-height: var(--line-height-relaxed); + color: rgba(0,0,0,0.75); + word-break: break-word; + white-space: pre-wrap; +} + +/* Markdown-light: fett, kursiv, Listen */ +.note-card__content strong { font-weight: var(--font-weight-bold); } +.note-card__content em { font-style: italic; } + +.note-card__footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: var(--space-2); + padding-top: var(--space-2); + border-top: 1px solid rgba(0,0,0,0.08); +} + +.note-card__creator { + display: flex; + align-items: center; + gap: var(--space-1); + font-size: var(--text-xs); + color: rgba(0,0,0,0.5); +} + +.note-card__avatar { + width: 16px; + height: 16px; + border-radius: var(--radius-full); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 9px; + font-weight: var(--font-weight-bold); + color: #ffffff; + flex-shrink: 0; +} + +.note-card__delete { + width: 24px; + height: 24px; + border-radius: var(--radius-full); + background: rgba(0,0,0,0.08); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + min-height: unset; + color: rgba(0,0,0,0.5); + opacity: 0; + transition: opacity var(--transition-fast), background-color var(--transition-fast); +} + +.note-card:hover .note-card__delete { + opacity: 1; +} + +.note-card__delete:hover { + background: rgba(255,59,48,0.2); + color: var(--color-danger); +} + +/* -------------------------------------------------------- + * Leer-Zustand + * -------------------------------------------------------- */ +.notes-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-12) var(--space-6); + text-align: center; + flex: 1; + color: var(--color-text-secondary); +} + +.notes-empty__icon { + width: 56px; + height: 56px; + color: var(--color-text-disabled); + margin-bottom: var(--space-4); +} + +/* -------------------------------------------------------- + * Modal + * -------------------------------------------------------- */ +.note-modal-overlay { + position: fixed; + inset: 0; + background-color: rgba(0,0,0,0.5); + z-index: var(--z-modal); + display: flex; + align-items: flex-end; + justify-content: center; + animation: fadeIn var(--transition-fast) ease; +} + +@media (min-width: 768px) { + .note-modal-overlay { + align-items: center; + padding: var(--space-4); + } +} + +.note-modal { + background-color: var(--color-surface); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + width: 100%; + max-height: 90dvh; + display: flex; + flex-direction: column; + overflow: hidden; + animation: slideUp var(--transition-base) ease; +} + +@media (min-width: 768px) { + .note-modal { + border-radius: var(--radius-lg); + max-width: 520px; + max-height: 80dvh; + } +} + +.note-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; +} + +.note-modal__title { + font-size: var(--text-lg); + font-weight: var(--font-weight-bold); +} + +.note-modal__close { + width: 32px; + height: 32px; + border-radius: var(--radius-full); + background: var(--color-border); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-secondary); + min-height: unset; +} + +.note-modal__body { + flex: 1; + overflow-y: auto; + padding: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +/* Farb-Auswahl */ +.note-color-picker { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); +} + +.note-color-swatch { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + border: 2px solid transparent; + cursor: pointer; + transition: transform var(--transition-fast), border-color var(--transition-fast); +} + +.note-color-swatch:hover { transform: scale(1.15); } +.note-color-swatch--active { border-color: var(--color-text-primary); transform: scale(1.1); } + +.note-modal__footer { + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-3); + padding: var(--space-4); + border-top: 1px solid var(--color-border); + flex-shrink: 0; +} diff --git a/server/routes/budget.js b/server/routes/budget.js index 5779808..aa1a5e9 100644 --- a/server/routes/budget.js +++ b/server/routes/budget.js @@ -1,13 +1,286 @@ /** * Modul: Budget-Tracker (Budget) - * Zweck: REST-API-Routen für Einnahmen und Ausgaben + * Zweck: REST-API-Routen für Einnahmen/Ausgaben, Monatsübersicht, CSV-Export * Abhängigkeiten: express, server/db.js, server/auth.js */ -const express = require('express'); -const router = express.Router(); +'use strict'; -// Platzhalter — wird in Phase 3 implementiert -router.get('/', (req, res) => res.json({ data: [] })); +const express = require('express'); +const router = express.Router(); +const db = require('../db'); + +const VALID_CATEGORIES = [ + 'Lebensmittel', 'Miete', 'Versicherung', 'Mobilität', + 'Freizeit', 'Kleidung', 'Gesundheit', 'Bildung', 'Sonstiges', +]; +const DATE_RE = /^\d{4}-\d{2}-\d{2}$/; + +// -------------------------------------------------------- +// Statische Routen vor /:id +// -------------------------------------------------------- + +/** + * GET /api/v1/budget/summary + * Monatsübersicht: Einnahmen, Ausgaben, Saldo, Aufschlüsselung nach Kategorie. + * Query: ?month=YYYY-MM (default: aktueller Monat) + * Response: { data: { month, income, expenses, balance, byCategory: [] } } + */ +router.get('/summary', (req, res) => { + try { + const today = new Date().toISOString().slice(0, 7); // YYYY-MM + const month = req.query.month || today; + + if (!/^\d{4}-\d{2}$/.test(month)) + return res.status(400).json({ error: 'month muss YYYY-MM sein', code: 400 }); + + const from = `${month}-01`; + const to = `${month}-31`; + + const totals = db.get().prepare(` + SELECT + SUM(CASE WHEN amount > 0 THEN amount ELSE 0 END) AS income, + SUM(CASE WHEN amount < 0 THEN amount ELSE 0 END) AS expenses, + SUM(amount) AS balance + FROM budget_entries + WHERE date BETWEEN ? AND ? + `).get(from, to); + + const byCategory = db.get().prepare(` + SELECT category, + SUM(CASE WHEN amount > 0 THEN amount ELSE 0 END) AS income, + SUM(CASE WHEN amount < 0 THEN amount ELSE 0 END) AS expenses, + SUM(amount) AS total + FROM budget_entries + WHERE date BETWEEN ? AND ? + GROUP BY category + ORDER BY ABS(SUM(amount)) DESC + `).all(from, to); + + res.json({ + data: { + month, + income: totals.income || 0, + expenses: totals.expenses || 0, + balance: totals.balance || 0, + byCategory, + }, + }); + } catch (err) { + console.error('[budget/GET /summary]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * GET /api/v1/budget/export + * Monatseinträge als CSV-Download. + * Query: ?month=YYYY-MM + * Response: text/csv + */ +router.get('/export', (req, res) => { + try { + const today = new Date().toISOString().slice(0, 7); + const month = req.query.month || today; + + if (!/^\d{4}-\d{2}$/.test(month)) + return res.status(400).json({ error: 'month muss YYYY-MM sein', code: 400 }); + + const from = `${month}-01`; + const to = `${month}-31`; + const entries = db.get().prepare(` + SELECT b.*, u.display_name AS creator_name + FROM budget_entries b + LEFT JOIN users u ON u.id = b.created_by + WHERE b.date BETWEEN ? AND ? + ORDER BY b.date ASC + `).all(from, to); + + const header = 'Datum,Titel,Betrag,Kategorie,Wiederkehrend,Erstellt von\n'; + const rows = entries.map((e) => + [ + e.date, + `"${(e.title || '').replace(/"/g, '""')}"`, + e.amount.toFixed(2).replace('.', ','), + e.category, + e.is_recurring ? 'Ja' : 'Nein', + `"${(e.creator_name || '').replace(/"/g, '""')}"`, + ].join(',') + ).join('\n'); + + res.setHeader('Content-Type', 'text/csv; charset=utf-8'); + res.setHeader('Content-Disposition', `attachment; filename="budget-${month}.csv"`); + res.send('\uFEFF' + header + rows); // BOM für Excel + } catch (err) { + console.error('[budget/GET /export]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * GET /api/v1/budget/meta + * Kategorien-Liste für Dropdowns. + * Response: { data: { categories } } + */ +router.get('/meta', (req, res) => { + res.json({ data: { categories: VALID_CATEGORIES } }); +}); + +// -------------------------------------------------------- +// CRUD-Routen +// -------------------------------------------------------- + +/** + * GET /api/v1/budget + * Einträge eines Monats abrufen. + * Query: ?month=YYYY-MM&category= + * Response: { data: Entry[] } + */ +router.get('/', (req, res) => { + try { + const today = new Date().toISOString().slice(0, 7); + const month = req.query.month || today; + + if (!/^\d{4}-\d{2}$/.test(month)) + return res.status(400).json({ error: 'month muss YYYY-MM sein', code: 400 }); + + const from = `${month}-01`; + const to = `${month}-31`; + let sql = ` + SELECT b.*, u.display_name AS creator_name + FROM budget_entries b + LEFT JOIN users u ON u.id = b.created_by + WHERE b.date BETWEEN ? AND ? + `; + const params = [from, to]; + + if (req.query.category && VALID_CATEGORIES.includes(req.query.category)) { + sql += ' AND b.category = ?'; + params.push(req.query.category); + } + + sql += ' ORDER BY b.date DESC, b.created_at DESC'; + + const entries = db.get().prepare(sql).all(...params); + res.json({ data: entries }); + } catch (err) { + console.error('[budget/GET /]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * POST /api/v1/budget + * Neuen Eintrag anlegen. + * Body: { title, amount, category?, date, is_recurring?, recurrence_rule? } + * Response: { data: Entry } + */ +router.post('/', (req, res) => { + try { + const { + title, amount, category = 'Sonstiges', + date, is_recurring = 0, recurrence_rule = null, + } = req.body; + + if (!title || !title.trim()) + return res.status(400).json({ error: 'Titel ist erforderlich', code: 400 }); + if (amount === undefined || amount === null || isNaN(Number(amount))) + return res.status(400).json({ error: 'Betrag (Zahl) ist erforderlich', code: 400 }); + if (!date || !DATE_RE.test(date)) + return res.status(400).json({ error: 'Gültiges Datum (YYYY-MM-DD) erforderlich', code: 400 }); + if (!VALID_CATEGORIES.includes(category)) + return res.status(400).json({ error: `Ungültige Kategorie: ${category}`, code: 400 }); + + const result = db.get().prepare(` + INSERT INTO budget_entries (title, amount, category, date, is_recurring, recurrence_rule, created_by) + VALUES (?, ?, ?, ?, ?, ?, ?) + `).run( + title.trim(), Number(amount), category, date, + is_recurring ? 1 : 0, recurrence_rule || null, + req.session.userId + ); + + const entry = db.get().prepare(` + SELECT b.*, u.display_name AS creator_name + FROM budget_entries b LEFT JOIN users u ON u.id = b.created_by + WHERE b.id = ? + `).get(result.lastInsertRowid); + + res.status(201).json({ data: entry }); + } catch (err) { + console.error('[budget/POST /]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * PUT /api/v1/budget/:id + * Eintrag bearbeiten. + * Body: alle Felder optional + * Response: { data: Entry } + */ +router.put('/:id', (req, res) => { + try { + const id = parseInt(req.params.id, 10); + const entry = db.get().prepare('SELECT * FROM budget_entries WHERE id = ?').get(id); + if (!entry) return res.status(404).json({ error: 'Eintrag nicht gefunden', code: 404 }); + + const { title, amount, category, date, is_recurring, recurrence_rule } = req.body; + + if (amount !== undefined && isNaN(Number(amount))) + return res.status(400).json({ error: 'Betrag muss eine Zahl sein', code: 400 }); + if (date !== undefined && !DATE_RE.test(date)) + return res.status(400).json({ error: 'Ungültiges Datum', code: 400 }); + if (category !== undefined && !VALID_CATEGORIES.includes(category)) + return res.status(400).json({ error: `Ungültige Kategorie: ${category}`, code: 400 }); + + db.get().prepare(` + UPDATE budget_entries + SET title = COALESCE(?, title), + amount = COALESCE(?, amount), + category = COALESCE(?, category), + date = COALESCE(?, date), + is_recurring = COALESCE(?, is_recurring), + recurrence_rule = ? + WHERE id = ? + `).run( + title?.trim() ?? null, + amount !== undefined ? Number(amount) : null, + category ?? null, + date ?? null, + is_recurring !== undefined ? (is_recurring ? 1 : 0) : null, + recurrence_rule !== undefined ? (recurrence_rule || null) : entry.recurrence_rule, + id + ); + + const updated = db.get().prepare(` + SELECT b.*, u.display_name AS creator_name + FROM budget_entries b LEFT JOIN users u ON u.id = b.created_by WHERE b.id = ? + `).get(id); + + res.json({ data: updated }); + } catch (err) { + console.error('[budget/PUT /:id]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * DELETE /api/v1/budget/:id + * Eintrag löschen. + * Response: 204 No Content + */ +router.delete('/:id', (req, res) => { + try { + const id = parseInt(req.params.id, 10); + const result = db.get().prepare('DELETE FROM budget_entries WHERE id = ?').run(id); + if (result.changes === 0) + return res.status(404).json({ error: 'Eintrag nicht gefunden', code: 404 }); + res.status(204).end(); + } catch (err) { + console.error('[budget/DELETE /:id]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); module.exports = router; diff --git a/server/routes/contacts.js b/server/routes/contacts.js index 2e1bdcc..5f823dc 100644 --- a/server/routes/contacts.js +++ b/server/routes/contacts.js @@ -4,10 +4,150 @@ * Abhängigkeiten: express, server/db.js, server/auth.js */ -const express = require('express'); -const router = express.Router(); +'use strict'; -// Platzhalter — wird in Phase 3 implementiert -router.get('/', (req, res) => res.json({ data: [] })); +const express = require('express'); +const router = express.Router(); +const db = require('../db'); + +const VALID_CATEGORIES = ['Arzt', 'Schule/Kita', 'Behörde', 'Versicherung', + 'Handwerker', 'Notfall', 'Sonstiges']; + +/** + * GET /api/v1/contacts + * Alle Kontakte, optional nach Kategorie gefiltert und nach Name gesucht. + * Query: ?category=&q= + * Response: { data: Contact[] } + */ +router.get('/', (req, res) => { + try { + let sql = 'SELECT * FROM contacts'; + const params = []; + const where = []; + + if (req.query.category && VALID_CATEGORIES.includes(req.query.category)) { + where.push('category = ?'); + params.push(req.query.category); + } + + if (req.query.q) { + where.push('(name LIKE ? OR phone LIKE ? OR email LIKE ?)'); + const like = `%${req.query.q}%`; + params.push(like, like, like); + } + + if (where.length) sql += ' WHERE ' + where.join(' AND '); + sql += ' ORDER BY category ASC, name ASC'; + + const contacts = db.get().prepare(sql).all(...params); + res.json({ data: contacts }); + } catch (err) { + console.error('[contacts/GET /]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * POST /api/v1/contacts + * Neuen Kontakt anlegen. + * Body: { name, category?, phone?, email?, address?, notes? } + * Response: { data: Contact } + */ +router.post('/', (req, res) => { + try { + const { + name, category = 'Sonstiges', + phone = null, email = null, address = null, notes = null, + } = req.body; + + if (!name || !name.trim()) + return res.status(400).json({ error: 'Name ist erforderlich', code: 400 }); + if (!VALID_CATEGORIES.includes(category)) + return res.status(400).json({ error: `Ungültige Kategorie: ${category}`, code: 400 }); + + const result = db.get().prepare(` + INSERT INTO contacts (name, category, phone, email, address, notes) + VALUES (?, ?, ?, ?, ?, ?) + `).run(name.trim(), category, phone || null, email || null, + address || null, notes || null); + + const contact = db.get().prepare('SELECT * FROM contacts WHERE id = ?').get(result.lastInsertRowid); + res.status(201).json({ data: contact }); + } catch (err) { + console.error('[contacts/POST /]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * PUT /api/v1/contacts/:id + * Kontakt bearbeiten. + * Body: alle Felder optional + * Response: { data: Contact } + */ +router.put('/:id', (req, res) => { + try { + const id = parseInt(req.params.id, 10); + const contact = db.get().prepare('SELECT * FROM contacts WHERE id = ?').get(id); + if (!contact) return res.status(404).json({ error: 'Kontakt nicht gefunden', code: 404 }); + + const { name, category, phone, email, address, notes } = req.body; + + if (category !== undefined && !VALID_CATEGORIES.includes(category)) + return res.status(400).json({ error: `Ungültige Kategorie: ${category}`, code: 400 }); + + db.get().prepare(` + UPDATE contacts + SET name = COALESCE(?, name), + category = COALESCE(?, category), + phone = ?, + email = ?, + address = ?, + notes = ? + WHERE id = ? + `).run( + name?.trim() ?? null, + category ?? null, + phone !== undefined ? (phone || null) : contact.phone, + email !== undefined ? (email || null) : contact.email, + address !== undefined ? (address || null) : contact.address, + notes !== undefined ? (notes || null) : contact.notes, + id + ); + + const updated = db.get().prepare('SELECT * FROM contacts WHERE id = ?').get(id); + res.json({ data: updated }); + } catch (err) { + console.error('[contacts/PUT /:id]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * DELETE /api/v1/contacts/:id + * Kontakt löschen. + * Response: 204 No Content + */ +router.delete('/:id', (req, res) => { + try { + const id = parseInt(req.params.id, 10); + const result = db.get().prepare('DELETE FROM contacts WHERE id = ?').run(id); + if (result.changes === 0) + return res.status(404).json({ error: 'Kontakt nicht gefunden', code: 404 }); + res.status(204).end(); + } catch (err) { + console.error('[contacts/DELETE /:id]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * GET /api/v1/contacts/meta + * Kategorien-Liste für Dropdowns. + * Response: { data: { categories } } + */ +router.get('/meta', (req, res) => { + res.json({ data: { categories: VALID_CATEGORIES } }); +}); module.exports = router; diff --git a/server/routes/notes.js b/server/routes/notes.js index 238acc5..78e8fa9 100644 --- a/server/routes/notes.js +++ b/server/routes/notes.js @@ -1,13 +1,150 @@ /** * Modul: Pinnwand / Notizen (Notes) - * Zweck: REST-API-Routen für Notizen + * Zweck: REST-API-Routen für Notizen (CRUD, Pin-Toggle) * Abhängigkeiten: express, server/db.js, server/auth.js */ -const express = require('express'); -const router = express.Router(); +'use strict'; -// Platzhalter — wird in Phase 3 implementiert -router.get('/', (req, res) => res.json({ data: [] })); +const express = require('express'); +const router = express.Router(); +const db = require('../db'); + +const COLOR_RE = /^#[0-9A-Fa-f]{6}$/; + +/** + * GET /api/v1/notes + * Alle Notizen, angepinnte zuerst, dann nach updated_at DESC. + * Response: { data: Note[] } + */ +router.get('/', (req, res) => { + try { + const notes = db.get().prepare(` + SELECT n.*, u.display_name AS creator_name, u.avatar_color AS creator_color + FROM notes n + LEFT JOIN users u ON u.id = n.created_by + ORDER BY n.pinned DESC, n.updated_at DESC + `).all(); + res.json({ data: notes }); + } catch (err) { + console.error('[notes/GET /]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * POST /api/v1/notes + * Neue Notiz anlegen. + * Body: { content, title?, color?, pinned? } + * Response: { data: Note } + */ +router.post('/', (req, res) => { + try { + const { content, title = null, color = '#FFEB3B', pinned = 0 } = req.body; + + if (!content || !content.trim()) + return res.status(400).json({ error: 'Inhalt ist erforderlich', code: 400 }); + if (!COLOR_RE.test(color)) + return res.status(400).json({ error: 'Farbe muss #RRGGBB sein', code: 400 }); + + const result = db.get().prepare(` + INSERT INTO notes (content, title, color, pinned, created_by) + VALUES (?, ?, ?, ?, ?) + `).run(content.trim(), title?.trim() || null, color, pinned ? 1 : 0, req.session.userId); + + const note = db.get().prepare(` + SELECT n.*, u.display_name AS creator_name, u.avatar_color AS creator_color + FROM notes n LEFT JOIN users u ON u.id = n.created_by + WHERE n.id = ? + `).get(result.lastInsertRowid); + + res.status(201).json({ data: note }); + } catch (err) { + console.error('[notes/POST /]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * PUT /api/v1/notes/:id + * Notiz bearbeiten. + * Body: { content?, title?, color?, pinned? } + * Response: { data: Note } + */ +router.put('/:id', (req, res) => { + try { + const id = parseInt(req.params.id, 10); + const note = db.get().prepare('SELECT * FROM notes WHERE id = ?').get(id); + if (!note) return res.status(404).json({ error: 'Notiz nicht gefunden', code: 404 }); + + const { content, title, color, pinned } = req.body; + + if (color !== undefined && !COLOR_RE.test(color)) + return res.status(400).json({ error: 'Farbe muss #RRGGBB sein', code: 400 }); + + db.get().prepare(` + UPDATE notes + SET content = COALESCE(?, content), + title = ?, + color = COALESCE(?, color), + pinned = COALESCE(?, pinned) + WHERE id = ? + `).run( + content?.trim() ?? null, + title !== undefined ? (title?.trim() || null) : note.title, + color ?? null, + pinned !== undefined ? (pinned ? 1 : 0) : null, + id + ); + + const updated = db.get().prepare(` + SELECT n.*, u.display_name AS creator_name, u.avatar_color AS creator_color + FROM notes n LEFT JOIN users u ON u.id = n.created_by WHERE n.id = ? + `).get(id); + + res.json({ data: updated }); + } catch (err) { + console.error('[notes/PUT /:id]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * PATCH /api/v1/notes/:id/pin + * Pin-Status toggeln. + * Response: { data: { id, pinned } } + */ +router.patch('/:id/pin', (req, res) => { + try { + const id = parseInt(req.params.id, 10); + const note = db.get().prepare('SELECT pinned FROM notes WHERE id = ?').get(id); + if (!note) return res.status(404).json({ error: 'Notiz nicht gefunden', code: 404 }); + + const newPinned = note.pinned ? 0 : 1; + db.get().prepare('UPDATE notes SET pinned = ? WHERE id = ?').run(newPinned, id); + res.json({ data: { id, pinned: newPinned } }); + } catch (err) { + console.error('[notes/PATCH /:id/pin]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); + +/** + * DELETE /api/v1/notes/:id + * Notiz löschen. + * Response: 204 No Content + */ +router.delete('/:id', (req, res) => { + try { + const id = parseInt(req.params.id, 10); + const result = db.get().prepare('DELETE FROM notes WHERE id = ?').run(id); + if (result.changes === 0) + return res.status(404).json({ error: 'Notiz nicht gefunden', code: 404 }); + res.status(204).end(); + } catch (err) { + console.error('[notes/DELETE /:id]', err); + res.status(500).json({ error: 'Interner Fehler', code: 500 }); + } +}); module.exports = router; diff --git a/test-notes-contacts-budget.js b/test-notes-contacts-budget.js new file mode 100644 index 0000000..8c4e7bc --- /dev/null +++ b/test-notes-contacts-budget.js @@ -0,0 +1,310 @@ +/** + * Modul: Notes / Contacts / Budget — Tests + * Zweck: Validiert CRUD, Constraints, Filterabfragen, Aggregation für alle drei Module + * Ausführen: node --experimental-sqlite test-notes-contacts-budget.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(cond, msg) { if (!cond) throw new Error(msg || 'Assertion fehlgeschlagen'); } + +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]); + +const u1 = db.prepare(`INSERT INTO users (username, display_name, password_hash, role) + VALUES ('admin', 'Admin', 'x', 'admin')`).run(); +const uid = u1.lastInsertRowid; + +// ============================================================ +// NOTES +// ============================================================ +console.log('\n[Notes-Test] Notizen, Pin, Sortierung\n'); + +let noteId1, noteId2, noteId3; + +test('Notiz erstellen', () => { + const r = db.prepare(`INSERT INTO notes (content, color, pinned, created_by) + VALUES ('Einkaufen nicht vergessen', '#FFEB3B', 0, ?)`).run(uid); + noteId1 = r.lastInsertRowid; + assert(noteId1 > 0); +}); + +test('Zweite Notiz mit Titel erstellen', () => { + const r = db.prepare(`INSERT INTO notes (title, content, color, pinned, created_by) + VALUES ('Wichtig', 'Arzttermin morgen', '#90CAF9', 1, ?)`).run(uid); + noteId2 = r.lastInsertRowid; + assert(noteId2 > 0); +}); + +test('Dritte Notiz erstellen', () => { + const r = db.prepare(`INSERT INTO notes (content, color, created_by) + VALUES ('Notiz drei', '#A5D6A7', ?)`).run(uid); + noteId3 = r.lastInsertRowid; + assert(noteId3 > 0); +}); + +test('Sortierung: Angepinnte zuerst', () => { + const notes = db.prepare(` + SELECT * FROM notes ORDER BY pinned DESC, updated_at DESC + `).all(); + assert(notes.length === 3); + assert(notes[0].pinned === 1, `Erste Notiz muss angeheftet sein, ist: ${notes[0].pinned}`); +}); + +test('Notiz aktualisieren (Inhalt + Farbe)', () => { + db.prepare(`UPDATE notes SET content = 'Neuer Inhalt', color = '#FF9500' WHERE id = ?`).run(noteId1); + const n = db.prepare('SELECT content, color FROM notes WHERE id = ?').get(noteId1); + assert(n.content === 'Neuer Inhalt'); + assert(n.color === '#FF9500'); +}); + +test('Pin-Toggle: pinned 0 → 1', () => { + const before = db.prepare('SELECT pinned FROM notes WHERE id = ?').get(noteId1); + const newPin = before.pinned ? 0 : 1; + db.prepare('UPDATE notes SET pinned = ? WHERE id = ?').run(newPin, noteId1); + const after = db.prepare('SELECT pinned FROM notes WHERE id = ?').get(noteId1); + assert(after.pinned === 1, 'Jetzt angeheftet'); +}); + +test('Notiz löschen', () => { + db.prepare('DELETE FROM notes WHERE id = ?').run(noteId3); + const n = db.prepare('SELECT * FROM notes WHERE id = ?').get(noteId3); + assert(!n, 'Notiz gelöscht'); +}); + +test('Verbleibende Notizen nach Löschung: 2', () => { + const notes = db.prepare('SELECT * FROM notes').all(); + assert(notes.length === 2, `Erwartet 2, erhalten ${notes.length}`); +}); + +test('JOIN: Ersteller-Name verfügbar', () => { + const n = db.prepare(` + SELECT n.*, u.display_name AS creator_name + FROM notes n LEFT JOIN users u ON u.id = n.created_by + WHERE n.id = ? + `).get(noteId2); + assert(n.creator_name === 'Admin'); +}); + +test('Index idx_notes_pinned genutzt', () => { + const plan = db.prepare(`EXPLAIN QUERY PLAN SELECT * FROM notes WHERE pinned = 1`).all(); + const usesIndex = plan.some((r) => (r.detail || '').includes('INDEX')); + assert(usesIndex, JSON.stringify(plan)); +}); + +// ============================================================ +// CONTACTS +// ============================================================ +console.log('\n[Contacts-Test] CRUD, Kategorien, Suche\n'); + +let cId1, cId2, cId3; + +test('Kontakt erstellen (Arzt)', () => { + const r = db.prepare(`INSERT INTO contacts (name, category, phone, email) + VALUES ('Dr. Müller', 'Arzt', '+49 30 12345', 'mueller@praxis.de')`).run(); + cId1 = r.lastInsertRowid; + assert(cId1 > 0); +}); + +test('Kontakt erstellen (Notfall)', () => { + const r = db.prepare(`INSERT INTO contacts (name, category, phone) + VALUES ('Feuerwehr', 'Notfall', '112')`).run(); + cId2 = r.lastInsertRowid; + assert(cId2 > 0); +}); + +test('Kontakt erstellen (Handwerker)', () => { + const r = db.prepare(`INSERT INTO contacts (name, category, phone, address) + VALUES ('Klempner Fritz', 'Handwerker', '+49 170 99999', 'Musterstr. 1, Berlin')`).run(); + cId3 = r.lastInsertRowid; + assert(cId3 > 0); +}); + +test('Alle Kontakte abrufen', () => { + const contacts = db.prepare('SELECT * FROM contacts ORDER BY category ASC, name ASC').all(); + assert(contacts.length === 3); +}); + +test('Nach Kategorie filtern (Arzt)', () => { + const contacts = db.prepare(`SELECT * FROM contacts WHERE category = 'Arzt'`).all(); + assert(contacts.length === 1); + assert(contacts[0].name === 'Dr. Müller'); +}); + +test('Volltextsuche nach Name', () => { + const q = '%Feuerwehr%'; + const contacts = db.prepare(` + SELECT * FROM contacts WHERE name LIKE ? OR phone LIKE ? OR email LIKE ? + `).all(q, q, q); + assert(contacts.length === 1); + assert(contacts[0].category === 'Notfall'); +}); + +test('Suche nach Telefonnummer', () => { + const q = '%112%'; + const contacts = db.prepare(`SELECT * FROM contacts WHERE phone LIKE ?`).all(q); + assert(contacts.length === 1); +}); + +test('Kontakt aktualisieren', () => { + db.prepare(`UPDATE contacts SET phone = '+49 30 99999' WHERE id = ?`).run(cId1); + const c = db.prepare('SELECT phone FROM contacts WHERE id = ?').get(cId1); + assert(c.phone === '+49 30 99999'); +}); + +test('Kontakt löschen', () => { + db.prepare('DELETE FROM contacts WHERE id = ?').run(cId3); + const c = db.prepare('SELECT * FROM contacts WHERE id = ?').get(cId3); + assert(!c, 'Kontakt gelöscht'); +}); + +// ============================================================ +// BUDGET +// ============================================================ +console.log('\n[Budget-Test] Einnahmen, Ausgaben, Saldo, Aggregation, CSV-Vorbereitung\n'); + +let bId1, bId2, bId3, bId4; + +test('Ausgabe eintragen (Lebensmittel)', () => { + const r = db.prepare(`INSERT INTO budget_entries (title, amount, category, date, created_by) + VALUES ('REWE', -85.40, 'Lebensmittel', '2026-03-10', ?)`).run(uid); + bId1 = r.lastInsertRowid; + assert(bId1 > 0); +}); + +test('Einnahme eintragen (Gehalt)', () => { + const r = db.prepare(`INSERT INTO budget_entries (title, amount, category, date, created_by) + VALUES ('Gehalt März', 2800.00, 'Sonstiges', '2026-03-01', ?)`).run(uid); + bId2 = r.lastInsertRowid; + assert(bId2 > 0); +}); + +test('Ausgabe (Miete)', () => { + const r = db.prepare(`INSERT INTO budget_entries (title, amount, category, date, is_recurring, created_by) + VALUES ('Miete', -950.00, 'Miete', '2026-03-01', 1, ?)`).run(uid); + bId3 = r.lastInsertRowid; + assert(bId3 > 0); +}); + +test('Ausgabe im anderen Monat (April)', () => { + const r = db.prepare(`INSERT INTO budget_entries (title, amount, category, date, created_by) + VALUES ('Strom April', -55.00, 'Sonstiges', '2026-04-15', ?)`).run(uid); + bId4 = r.lastInsertRowid; + assert(bId4 > 0); +}); + +test('Monatsfilter März: nur März-Einträge', () => { + const entries = db.prepare(` + SELECT * FROM budget_entries WHERE date BETWEEN '2026-03-01' AND '2026-03-31' + ORDER BY date ASC + `).all(); + assert(entries.length === 3, `Erwartet 3, erhalten ${entries.length}`); +}); + +test('Monatsfilter April: nur April-Eintrag', () => { + const entries = db.prepare(` + SELECT * FROM budget_entries WHERE date BETWEEN '2026-04-01' AND '2026-04-30' + `).all(); + assert(entries.length === 1); + assert(entries[0].title === 'Strom April'); +}); + +test('Einnahmen-Summe März', () => { + const row = db.prepare(` + SELECT SUM(CASE WHEN amount > 0 THEN amount ELSE 0 END) AS income + FROM budget_entries WHERE date BETWEEN '2026-03-01' AND '2026-03-31' + `).get(); + assert(Math.abs(row.income - 2800.00) < 0.01, `Einnahmen: ${row.income}`); +}); + +test('Ausgaben-Summe März', () => { + const row = db.prepare(` + SELECT SUM(CASE WHEN amount < 0 THEN amount ELSE 0 END) AS expenses + FROM budget_entries WHERE date BETWEEN '2026-03-01' AND '2026-03-31' + `).get(); + const expected = -(85.40 + 950.00); + assert(Math.abs(row.expenses - expected) < 0.01, `Ausgaben: ${row.expenses}`); +}); + +test('Saldo März positiv', () => { + const row = db.prepare(` + SELECT SUM(amount) AS balance + FROM budget_entries WHERE date BETWEEN '2026-03-01' AND '2026-03-31' + `).get(); + assert(row.balance > 0, `Saldo: ${row.balance}`); +}); + +test('Aggregation nach Kategorie', () => { + const cats = db.prepare(` + SELECT category, + SUM(CASE WHEN amount > 0 THEN amount ELSE 0 END) AS income, + SUM(CASE WHEN amount < 0 THEN amount ELSE 0 END) AS expenses, + SUM(amount) AS total + FROM budget_entries + WHERE date BETWEEN '2026-03-01' AND '2026-03-31' + GROUP BY category ORDER BY ABS(SUM(amount)) DESC + `).all(); + assert(cats.length >= 2, `Mindestens 2 Kategorien, erhalten ${cats.length}`); + // Miete sollte die größte Ausgabe sein + const miete = cats.find((c) => c.category === 'Miete'); + assert(miete, 'Miete in Kategorien vorhanden'); + assert(Math.abs(miete.expenses + 950.00) < 0.01, `Miete-Ausgaben: ${miete.expenses}`); +}); + +test('Wiederkehrend-Flag korrekt', () => { + const r = db.prepare('SELECT is_recurring FROM budget_entries WHERE id = ?').get(bId3); + assert(r.is_recurring === 1, 'Miete ist wiederkehrend'); +}); + +test('Eintrag aktualisieren', () => { + db.prepare(`UPDATE budget_entries SET amount = -90.50 WHERE id = ?`).run(bId1); + const e = db.prepare('SELECT amount FROM budget_entries WHERE id = ?').get(bId1); + assert(Math.abs(e.amount + 90.50) < 0.01); +}); + +test('Eintrag löschen', () => { + db.prepare('DELETE FROM budget_entries WHERE id = ?').run(bId4); + const e = db.prepare('SELECT * FROM budget_entries WHERE id = ?').get(bId4); + assert(!e, 'Eintrag gelöscht'); +}); + +test('CSV-Vorbereitung: alle März-Einträge mit JOIN', () => { + const entries = db.prepare(` + SELECT b.*, u.display_name AS creator_name + FROM budget_entries b + LEFT JOIN users u ON u.id = b.created_by + WHERE b.date BETWEEN '2026-03-01' AND '2026-03-31' + ORDER BY b.date ASC + `).all(); + assert(entries.length === 3); + assert(entries[0].creator_name === 'Admin'); +}); + +test('Index idx_budget_date genutzt', () => { + const plan = db.prepare(` + EXPLAIN QUERY PLAN SELECT * FROM budget_entries WHERE date BETWEEN '2026-03-01' AND '2026-03-31' + `).all(); + const usesIndex = plan.some((r) => (r.detail || '').includes('INDEX')); + assert(usesIndex, JSON.stringify(plan)); +}); + +// -------------------------------------------------------- +// Ergebnis +// -------------------------------------------------------- +console.log(`\n[Notes/Contacts/Budget-Test] Ergebnis: ${passed} bestanden, ${failed} fehlgeschlagen\n`); +if (failed > 0) process.exit(1);