feat: Phase 3 Schritte 16–18 — Pinnwand, Kontakte, Budget-Tracker
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 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
@@ -21,6 +21,9 @@
|
||||
<link rel="stylesheet" href="/styles/shopping.css" />
|
||||
<link rel="stylesheet" href="/styles/meals.css" />
|
||||
<link rel="stylesheet" href="/styles/calendar.css" />
|
||||
<link rel="stylesheet" href="/styles/notes.css" />
|
||||
<link rel="stylesheet" href="/styles/contacts.css" />
|
||||
<link rel="stylesheet" href="/styles/budget.css" />
|
||||
|
||||
<!-- Lucide Icons (CDN) -->
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
|
||||
+425
-13
@@ -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 = `
|
||||
<div class="page">
|
||||
<div class="page__header">
|
||||
<h1 class="page__title">Budget</h1>
|
||||
<div class="budget-page">
|
||||
<div class="budget-nav">
|
||||
<button class="btn btn--icon" id="budget-prev" aria-label="Vorheriger Monat">
|
||||
<i data-lucide="chevron-left"></i>
|
||||
</button>
|
||||
<button class="budget-nav__today" id="budget-today">Aktuell</button>
|
||||
<span class="budget-nav__label" id="budget-label"></span>
|
||||
<button class="btn btn--primary btn--icon" id="budget-add" aria-label="Eintrag hinzufügen">
|
||||
<i data-lucide="plus"></i>
|
||||
</button>
|
||||
<button class="btn btn--icon" id="budget-next" aria-label="Nächster Monat">
|
||||
<i data-lucide="chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__title">Kommt bald.</div>
|
||||
<div class="empty-state__description">Dieses Modul wird in Phase 2 implementiert.</div>
|
||||
<div id="budget-body" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<div style="padding:2rem;text-align:center;color:var(--color-text-disabled);">Lade…</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<!-- Zusammenfassung -->
|
||||
<div class="budget-summary">
|
||||
<div class="budget-summary-card budget-summary-card--income">
|
||||
<div class="budget-summary-card__label">Einnahmen</div>
|
||||
<div class="budget-summary-card__amount">${formatAmount(s.income)}</div>
|
||||
</div>
|
||||
<div class="budget-summary-card budget-summary-card--expenses">
|
||||
<div class="budget-summary-card__label">Ausgaben</div>
|
||||
<div class="budget-summary-card__amount">${formatAmount(Math.abs(s.expenses))}</div>
|
||||
</div>
|
||||
<div class="budget-summary-card ${balanceClass}">
|
||||
<div class="budget-summary-card__label">Saldo</div>
|
||||
<div class="budget-summary-card__amount">${formatAmount(s.balance)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kategorie-Balken -->
|
||||
${s.byCategory.length ? `
|
||||
<div class="budget-chart-section">
|
||||
<div class="budget-chart-section__title">Nach Kategorie</div>
|
||||
<div class="budget-chart">
|
||||
${renderCategoryBars(s.byCategory)}
|
||||
</div>
|
||||
</div>` : ''}
|
||||
|
||||
<!-- Transaktionsliste -->
|
||||
<div class="budget-list-section">
|
||||
<div class="budget-list-header">
|
||||
<span class="budget-list-header__title">Transaktionen</span>
|
||||
${state.entries.length ? `
|
||||
<a href="/api/v1/budget/export?month=${state.month}" class="btn btn--secondary"
|
||||
style="font-size:var(--text-sm);padding:var(--space-1) var(--space-3);">
|
||||
<i data-lucide="download" style="width:14px;height:14px;margin-right:4px;"></i>CSV
|
||||
</a>` : ''}
|
||||
</div>
|
||||
<div class="budget-list" id="budget-list">
|
||||
${renderEntries()}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 `
|
||||
<div class="budget-bar-row">
|
||||
<div class="budget-bar-row__label" title="${escHtml(c.category)}">${escHtml(c.category)}</div>
|
||||
<div class="budget-bar-row__track">
|
||||
<div class="budget-bar-row__fill ${cls}" style="width:${pct}%;"></div>
|
||||
</div>
|
||||
<div class="budget-bar-row__amount" style="color:${isExpense ? 'var(--color-danger)' : 'var(--color-success)'};">
|
||||
${formatAmount(c.total)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderEntries() {
|
||||
if (!state.entries.length) {
|
||||
return `<div class="budget-empty">
|
||||
<i data-lucide="receipt" style="width:48px;height:48px;color:var(--color-text-disabled);margin-bottom:var(--space-3);"></i>
|
||||
<div style="font-size:var(--text-base);font-weight:600;">Keine Einträge</div>
|
||||
<div style="font-size:var(--text-sm);margin-top:var(--space-1);">Noch keine Transaktionen für diesen Monat.</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
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 `
|
||||
<div class="budget-entry" data-id="${e.id}">
|
||||
<div class="budget-entry__indicator ${indClass}"></div>
|
||||
<div class="budget-entry__body">
|
||||
<div class="budget-entry__title">${escHtml(e.title)}</div>
|
||||
<div class="budget-entry__meta">${date} · ${escHtml(e.category)}${e.is_recurring ? ' 🔁' : ''}</div>
|
||||
</div>
|
||||
<div class="budget-entry__amount ${amtClass}">${sign}${formatAmount(e.amount)}</div>
|
||||
<button class="budget-entry__delete" data-action="delete" data-id="${e.id}" title="Löschen">
|
||||
<i data-lucide="trash-2" style="width:14px;height:14px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}).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) =>
|
||||
`<option value="${c}" ${isEdit && entry.category === c ? 'selected' : ''}>${c}</option>`
|
||||
).join('');
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'budget-modal-overlay';
|
||||
overlay.className = 'budget-modal-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="budget-modal" role="dialog" aria-modal="true">
|
||||
<div class="budget-modal__header">
|
||||
<h2 class="budget-modal__title">${isEdit ? 'Eintrag bearbeiten' : 'Neuer Eintrag'}</h2>
|
||||
<button class="budget-modal__close" id="bm-close" aria-label="Schließen">
|
||||
<i data-lucide="x" style="width:16px;height:16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="budget-modal__body">
|
||||
<!-- Einnahme / Ausgabe Toggle -->
|
||||
<div class="amount-type-toggle">
|
||||
<button class="amount-type-btn amount-type-btn--expenses ${isExpense ? 'amount-type-btn--active' : ''}"
|
||||
id="type-expense" type="button">Ausgabe</button>
|
||||
<button class="amount-type-btn amount-type-btn--income ${!isExpense ? 'amount-type-btn--active' : ''}"
|
||||
id="type-income" type="button">Einnahme</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bm-title">Titel *</label>
|
||||
<input type="text" class="form-input" id="bm-title"
|
||||
placeholder="z.B. REWE Einkauf" value="${escHtml(isEdit ? entry.title : '')}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bm-amount">Betrag (€) *</label>
|
||||
<input type="number" class="form-input" id="bm-amount"
|
||||
placeholder="0,00" step="0.01" min="0"
|
||||
value="${absAmount}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bm-category">Kategorie</label>
|
||||
<select class="form-input" id="bm-category">${catOpts}</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bm-date">Datum *</label>
|
||||
<input type="date" class="form-input" id="bm-date"
|
||||
value="${isEdit ? entry.date : today}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="allday-toggle">
|
||||
<input type="checkbox" id="bm-recurring" ${isEdit && entry.is_recurring ? 'checked' : ''}>
|
||||
<span class="allday-toggle__label">Wiederkehrend</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="budget-modal__footer">
|
||||
${isEdit ? `<button class="btn btn--danger btn--icon" id="bm-delete" title="Löschen">
|
||||
<i data-lucide="trash-2" style="width:16px;height:16px;"></i>
|
||||
</button>` : '<div></div>'}
|
||||
<div class="budget-modal__footer-actions">
|
||||
<button class="btn btn--secondary" id="bm-cancel">Abbrechen</button>
|
||||
<button class="btn btn--primary" id="bm-save">${isEdit ? 'Speichern' : 'Hinzufügen'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
+316
-13
@@ -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 = `
|
||||
<div class="page">
|
||||
<div class="page__header">
|
||||
<h1 class="page__title">Contacts</h1>
|
||||
<div class="contacts-page">
|
||||
<div class="contacts-toolbar">
|
||||
<div class="contacts-toolbar__search">
|
||||
<i data-lucide="search" class="contacts-toolbar__search-icon"></i>
|
||||
<input type="search" class="contacts-toolbar__search-input"
|
||||
id="contacts-search" placeholder="Name, Telefon oder E-Mail suchen…"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
<button class="btn btn--primary" id="contacts-add-btn">
|
||||
<i data-lucide="plus" style="width:16px;height:16px;margin-right:4px;"></i>
|
||||
Neu
|
||||
</button>
|
||||
</div>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__title">Kommt bald.</div>
|
||||
<div class="empty-state__description">Dieses Modul wird in Phase 2 implementiert.</div>
|
||||
<div class="contacts-filters" id="contacts-filters">
|
||||
<button class="contact-filter-chip contact-filter-chip--active" data-cat="">Alle</button>
|
||||
${CATEGORIES.map((c) => `
|
||||
<button class="contact-filter-chip" data-cat="${escHtml(c)}">${CATEGORY_ICONS[c] || ''} ${escHtml(c)}</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
<div id="contacts-list" class="contacts-list"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<div class="contacts-empty">
|
||||
<i data-lucide="users" style="width:48px;height:48px;color:var(--color-text-disabled);margin-bottom:var(--space-3);"></i>
|
||||
<div style="font-size:var(--text-base);font-weight:600;">Keine Kontakte gefunden</div>
|
||||
</div>
|
||||
`;
|
||||
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]) => `
|
||||
<div class="contact-group">
|
||||
<div class="contact-group__header">${CATEGORY_ICONS[cat] || ''} ${escHtml(cat)}</div>
|
||||
${items.map((c) => renderContactItem(c)).join('')}
|
||||
</div>
|
||||
`).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 ? `<a href="tel:${escHtml(c.phone)}" class="contact-action-btn contact-action-btn--call" title="Anrufen"><i data-lucide="phone" style="width:16px;height:16px;"></i></a>` : '';
|
||||
const email = c.email ? `<a href="mailto:${escHtml(c.email)}" class="contact-action-btn contact-action-btn--mail" title="E-Mail"><i data-lucide="mail" style="width:16px;height:16px;"></i></a>` : '';
|
||||
const maps = c.address ? `<a href="https://maps.google.com/?q=${encodeURIComponent(c.address)}" target="_blank" rel="noopener" class="contact-action-btn contact-action-btn--maps" title="In Maps öffnen"><i data-lucide="map-pin" style="width:16px;height:16px;"></i></a>` : '';
|
||||
const meta = [c.phone, c.email].filter(Boolean).join(' · ');
|
||||
|
||||
return `
|
||||
<div class="contact-item" data-id="${c.id}">
|
||||
<div class="contact-item__icon">${CATEGORY_ICONS[c.category] || '📋'}</div>
|
||||
<div class="contact-item__body">
|
||||
<div class="contact-item__name">${escHtml(c.name)}</div>
|
||||
${meta ? `<div class="contact-item__meta">${escHtml(meta)}</div>` : ''}
|
||||
</div>
|
||||
<div class="contact-item__actions">
|
||||
${phone}${email}${maps}
|
||||
<button class="contact-action-btn" data-action="delete" data-id="${c.id}" title="Löschen">
|
||||
<i data-lucide="trash-2" style="width:16px;height:16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
// 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) =>
|
||||
`<option value="${c}" ${isEdit && contact.category === c ? 'selected' : ''}>${c}</option>`
|
||||
).join('');
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'contact-modal-overlay';
|
||||
overlay.className = 'contact-modal-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="contact-modal" role="dialog" aria-modal="true">
|
||||
<div class="contact-modal__header">
|
||||
<h2 class="contact-modal__title">${isEdit ? 'Kontakt bearbeiten' : 'Neuer Kontakt'}</h2>
|
||||
<button class="contact-modal__close" id="cm-close" aria-label="Schließen">
|
||||
<i data-lucide="x" style="width:16px;height:16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="contact-modal__body">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="cm-name">Name *</label>
|
||||
<input type="text" class="form-input" id="cm-name" placeholder="Vollständiger Name" value="${v('name')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="cm-category">Kategorie</label>
|
||||
<select class="form-input" id="cm-category">${catOpts}</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="cm-phone">Telefon</label>
|
||||
<input type="tel" class="form-input" id="cm-phone" placeholder="+49 …" value="${v('phone')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="cm-email">E-Mail</label>
|
||||
<input type="email" class="form-input" id="cm-email" placeholder="name@beispiel.de" value="${v('email')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="cm-address">Adresse</label>
|
||||
<input type="text" class="form-input" id="cm-address" placeholder="Straße, PLZ Ort" value="${v('address')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="cm-notes">Notizen</label>
|
||||
<textarea class="form-input" id="cm-notes" rows="2" placeholder="Optional…">${v('notes')}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-modal__footer">
|
||||
${isEdit ? `<button class="btn btn--danger btn--icon" id="cm-delete" title="Löschen">
|
||||
<i data-lucide="trash-2" style="width:16px;height:16px;"></i>
|
||||
</button>` : '<div></div>'}
|
||||
<div style="display:flex;gap:var(--space-3);">
|
||||
<button class="btn btn--secondary" id="cm-cancel">Abbrechen</button>
|
||||
<button class="btn btn--primary" id="cm-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
+281
-13
@@ -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, '<strong>$1</strong>')
|
||||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||
.replace(/^- (.+)$/gm, '• $1')
|
||||
.replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
// Entry Point
|
||||
// --------------------------------------------------------
|
||||
|
||||
export async function render(container, { user }) {
|
||||
state.user = user;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="page">
|
||||
<div class="page__header">
|
||||
<h1 class="page__title">Notes</h1>
|
||||
<div class="notes-page">
|
||||
<div class="notes-toolbar">
|
||||
<span class="notes-toolbar__title">Pinnwand</span>
|
||||
<button class="btn btn--primary" id="notes-add-btn">
|
||||
<i data-lucide="plus" style="width:16px;height:16px;margin-right:4px;"></i>
|
||||
Neue Notiz
|
||||
</button>
|
||||
</div>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__title">Kommt bald.</div>
|
||||
<div class="empty-state__description">Dieses Modul wird in Phase 2 implementiert.</div>
|
||||
<div id="notes-grid" class="notes-grid"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<div class="notes-empty" style="columns:unset;grid-column:1/-1;">
|
||||
<i data-lucide="sticky-note" class="notes-empty__icon"></i>
|
||||
<div style="font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);">Noch keine Notizen</div>
|
||||
<div style="font-size:var(--text-sm);">Klicke auf „Neue Notiz" um loszulegen.</div>
|
||||
</div>
|
||||
`;
|
||||
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 `
|
||||
<div class="note-card ${note.pinned ? 'note-card--pinned' : ''}"
|
||||
data-id="${note.id}"
|
||||
style="background-color:${escHtml(note.color)};color:${textColor};">
|
||||
<button class="note-card__pin" data-action="pin" data-id="${note.id}"
|
||||
title="${note.pinned ? 'Anpinnen aufheben' : 'Anpinnen'}">
|
||||
<i data-lucide="${note.pinned ? 'pin-off' : 'pin'}" style="width:12px;height:12px;"></i>
|
||||
</button>
|
||||
${note.title ? `<div class="note-card__title">${escHtml(note.title)}</div>` : ''}
|
||||
<div class="note-card__content">${renderMarkdownLight(note.content)}</div>
|
||||
<div class="note-card__footer">
|
||||
<div class="note-card__creator">
|
||||
<span class="note-card__avatar"
|
||||
style="background-color:${escHtml(note.creator_color || '#8E8E93')}">${initials}</span>
|
||||
<span>${escHtml(note.creator_name || '')}</span>
|
||||
</div>
|
||||
<button class="note-card__delete" data-action="delete" data-id="${note.id}" title="Löschen">
|
||||
<i data-lucide="trash-2" style="width:12px;height:12px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
// 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 = `
|
||||
<div class="note-modal" role="dialog" aria-modal="true">
|
||||
<div class="note-modal__header">
|
||||
<h2 class="note-modal__title">${isEdit ? 'Notiz bearbeiten' : 'Neue Notiz'}</h2>
|
||||
<button class="note-modal__close" id="note-modal-close" aria-label="Schließen">
|
||||
<i data-lucide="x" style="width:16px;height:16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note-modal__body">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="note-title">Titel (optional)</label>
|
||||
<input type="text" class="form-input" id="note-title"
|
||||
placeholder="Kein Titel" value="${escHtml(isEdit && note.title ? note.title : '')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="note-content">Inhalt *</label>
|
||||
<textarea class="form-input" id="note-content" rows="6"
|
||||
placeholder="Notiz eingeben… (** fett **, * kursiv *, - Liste)"
|
||||
style="resize:vertical;">${escHtml(isEdit ? note.content : '')}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Farbe</label>
|
||||
<div class="note-color-picker">
|
||||
${NOTE_COLORS.map((c) => `
|
||||
<div class="note-color-swatch ${c === selColor ? 'note-color-swatch--active' : ''}"
|
||||
data-color="${c}"
|
||||
style="background-color:${c};border:2px solid ${c === '#FFFFFF' ? '#E5E5EA' : c};"
|
||||
role="radio" tabindex="0" aria-label="Farbe ${c}"></div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="allday-toggle">
|
||||
<input type="checkbox" id="note-pinned" ${isEdit && note.pinned ? 'checked' : ''}>
|
||||
<span class="allday-toggle__label">Anpinnen (erscheint auf Dashboard)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-modal__footer">
|
||||
<button class="btn btn--secondary" id="note-modal-cancel">Abbrechen</button>
|
||||
<button class="btn btn--primary" id="note-modal-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user