feat: BL-07–BL-10 — notes search, weather refresh, vCard import/export, PWA offline page
- Notes: client-side full-text search bar (filters title + content) - Dashboard: weather refresh button + 30-min auto-refresh interval - Contacts: vCard 3.0 export per contact (GET /:id/vcard); vCard import via file input with client-side parser (FN, TEL, EMAIL, ADR, NOTE, CATEGORIES) - PWA: /offline.html served when network unavailable; cached in app-shell (sw v20) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Keine Verbindung – Oikos</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #1a1a2e;
|
||||
--color-surface: #16213e;
|
||||
--color-accent: #4A90D9;
|
||||
--color-text: #e8e8f0;
|
||||
--color-text-secondary: #8888a4;
|
||||
--color-border: rgba(255,255,255,0.08);
|
||||
--radius: 12px;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color-bg: #f5f5f7;
|
||||
--color-surface: #ffffff;
|
||||
--color-text: #1c1c1e;
|
||||
--color-text-secondary: #6e6e80;
|
||||
--color-border: rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body {
|
||||
height: 100%;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 40px 32px;
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 24px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 24px;
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
button:hover { opacity: 0.85; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
<path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/>
|
||||
<path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/>
|
||||
<path d="M10.71 5.05A16 16 0 0 1 22.56 9"/>
|
||||
<path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/>
|
||||
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
|
||||
<line x1="12" y1="20" x2="12.01" y2="20"/>
|
||||
</svg>
|
||||
<h1>Keine Verbindung</h1>
|
||||
<p>Oikos ist gerade nicht erreichbar. Bitte prüfe deine Internetverbindung und versuche es erneut.</p>
|
||||
<button onclick="location.reload()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<polyline points="23 4 23 10 17 10"/>
|
||||
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
|
||||
</svg>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -52,6 +52,11 @@ export async function render(container, { user }) {
|
||||
id="contacts-search" placeholder="Name, Telefon oder E-Mail suchen…"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
<label class="btn btn--secondary" title="vCard importieren" aria-label="Kontakt aus vCard importieren">
|
||||
<i data-lucide="upload" style="width:16px;height:16px;margin-right:4px;" aria-hidden="true"></i>
|
||||
Import
|
||||
<input type="file" id="contacts-import-input" accept=".vcf,text/vcard" style="display:none">
|
||||
</label>
|
||||
<button class="btn btn--primary" id="contacts-add-btn">
|
||||
<i data-lucide="plus" style="width:16px;height:16px;margin-right:4px;" aria-hidden="true"></i>
|
||||
Neu
|
||||
@@ -101,6 +106,24 @@ export async function render(container, { user }) {
|
||||
const addHandler = () => openContactModal({ mode: 'create' });
|
||||
_container.querySelector('#contacts-add-btn').addEventListener('click', addHandler);
|
||||
_container.querySelector('#fab-new-contact').addEventListener('click', addHandler);
|
||||
|
||||
// vCard-Import
|
||||
_container.querySelector('#contacts-import-input').addEventListener('change', async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
e.target.value = '';
|
||||
try {
|
||||
const text = await file.text();
|
||||
const contact = parseVCard(text);
|
||||
if (!contact.name) { window.oikos?.showToast('vCard enthält keinen Namen.', 'warning'); return; }
|
||||
const res = await api.post('/contacts', contact);
|
||||
state.contacts.push(res.data);
|
||||
renderList();
|
||||
window.oikos?.showToast(`${res.data.name} importiert.`, 'success');
|
||||
} catch (err) {
|
||||
window.oikos?.showToast('Import fehlgeschlagen: ' + err.message, 'danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
@@ -198,6 +221,10 @@ function renderContactItem(c) {
|
||||
</div>
|
||||
<div class="contact-item__actions">
|
||||
${phone}${email}${maps}
|
||||
<a href="/api/v1/contacts/${c.id}/vcard" download="${escHtml(c.name)}.vcf"
|
||||
class="contact-action-btn" aria-label="Als vCard exportieren" title="vCard exportieren">
|
||||
<i data-lucide="download" style="width:16px;height:16px;" aria-hidden="true"></i>
|
||||
</a>
|
||||
<button class="contact-action-btn" data-action="delete" data-id="${c.id}" aria-label="Kontakt löschen">
|
||||
<i data-lucide="trash-2" style="width:16px;height:16px;" aria-hidden="true"></i>
|
||||
</button>
|
||||
@@ -327,3 +354,39 @@ function escHtml(str) {
|
||||
.replace(/&/g, '&').replace(/</g, '<')
|
||||
.replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
/**
|
||||
* Minimaler vCard 3.0/4.0 Parser.
|
||||
* Gibt { name, phone, email, address, notes, category } zurück.
|
||||
*/
|
||||
function parseVCard(text) {
|
||||
const unescapeVCard = (s) => String(s || '')
|
||||
.replace(/\\n/g, '\n').replace(/\\,/g, ',').replace(/\\;/g, ';').replace(/\\\\/g, '\\');
|
||||
|
||||
// Zeilenfortsetzungen entfalten (RFC 6350 §3.2)
|
||||
const unfolded = text.replace(/\r?\n[ \t]/g, '');
|
||||
|
||||
const get = (prop) => {
|
||||
const re = new RegExp(`^${prop}(?:;[^:]*)?:(.*)$`, 'im');
|
||||
const m = re.exec(unfolded);
|
||||
return m ? unescapeVCard(m[1].trim()) : null;
|
||||
};
|
||||
|
||||
const name = get('FN') || get('N')?.split(';')[0] || null;
|
||||
const phone = get('TEL') || null;
|
||||
const email = get('EMAIL') || null;
|
||||
|
||||
// ADR: ;;street;city;region;postal;country
|
||||
const adrRaw = get('ADR');
|
||||
let address = null;
|
||||
if (adrRaw) {
|
||||
const parts = adrRaw.split(';').map((p) => p.trim()).filter(Boolean);
|
||||
address = parts.join(', ') || null;
|
||||
}
|
||||
|
||||
const notes = get('NOTE') || null;
|
||||
const catRaw = get('CATEGORIES') || null;
|
||||
const category = CATEGORIES.find((c) => catRaw?.toLowerCase().includes(c.toLowerCase())) || 'Sonstiges';
|
||||
|
||||
return { name, phone, email, address, notes, category };
|
||||
}
|
||||
|
||||
@@ -289,7 +289,10 @@ function renderWeatherWidget(weather) {
|
||||
}).join('');
|
||||
|
||||
return `
|
||||
<div class="widget weather-widget">
|
||||
<div class="widget weather-widget" id="weather-widget">
|
||||
<button class="weather-widget__refresh" id="weather-refresh-btn" aria-label="Wetter aktualisieren" title="Aktualisieren">
|
||||
<i data-lucide="refresh-cw" style="width:14px;height:14px;" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div class="weather-widget__inner">
|
||||
<div class="weather-widget__main">
|
||||
<div class="weather-widget__left">
|
||||
@@ -462,4 +465,50 @@ export async function render(container, { user }) {
|
||||
wireLinks(container);
|
||||
initFab(container, _fabController.signal);
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
|
||||
// Wetter-Refresh: Button + 30-Minuten-Interval
|
||||
const refreshBtn = container.querySelector('#weather-refresh-btn');
|
||||
if (refreshBtn) {
|
||||
const doWeatherRefresh = async () => {
|
||||
refreshBtn.disabled = true;
|
||||
refreshBtn.classList.add('weather-widget__refresh--spinning');
|
||||
try {
|
||||
const res = await api.get('/weather').catch(() => ({ data: null }));
|
||||
const wWidget = container.querySelector('#weather-widget');
|
||||
if (wWidget) {
|
||||
const fresh = renderWeatherWidget(res.data ?? null);
|
||||
wWidget.outerHTML = fresh;
|
||||
const newWidget = container.querySelector('#weather-widget');
|
||||
if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
|
||||
wireWeatherRefresh(container);
|
||||
}
|
||||
} catch { /* silently ignore */ }
|
||||
};
|
||||
|
||||
refreshBtn.addEventListener('click', doWeatherRefresh, { signal: _fabController.signal });
|
||||
|
||||
// 30-Minuten Auto-Refresh — abortiert wenn Seite verlassen wird
|
||||
const timerId = setInterval(doWeatherRefresh, 30 * 60 * 1000);
|
||||
_fabController.signal.addEventListener('abort', () => clearInterval(timerId));
|
||||
}
|
||||
}
|
||||
|
||||
function wireWeatherRefresh(container) {
|
||||
const refreshBtn = container.querySelector('#weather-refresh-btn');
|
||||
if (!refreshBtn) return;
|
||||
const doWeatherRefresh = async () => {
|
||||
refreshBtn.disabled = true;
|
||||
refreshBtn.classList.add('weather-widget__refresh--spinning');
|
||||
try {
|
||||
const res = await api.get('/weather').catch(() => ({ data: null }));
|
||||
const wWidget = container.querySelector('#weather-widget');
|
||||
if (wWidget) {
|
||||
wWidget.outerHTML = renderWeatherWidget(res.data ?? null);
|
||||
const newWidget = container.querySelector('#weather-widget');
|
||||
if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
|
||||
wireWeatherRefresh(container);
|
||||
}
|
||||
} catch { /* silently ignore */ }
|
||||
};
|
||||
refreshBtn.addEventListener('click', doWeatherRefresh, { signal: _fabController.signal });
|
||||
}
|
||||
|
||||
+25
-5
@@ -21,7 +21,7 @@ const NOTE_COLORS = [
|
||||
// State
|
||||
// --------------------------------------------------------
|
||||
|
||||
let state = { notes: [], user: null };
|
||||
let state = { notes: [], user: null, filterQuery: '' };
|
||||
let _container = null;
|
||||
|
||||
// --------------------------------------------------------
|
||||
@@ -49,6 +49,12 @@ export async function render(container, { user }) {
|
||||
<div class="notes-page">
|
||||
<div class="notes-toolbar">
|
||||
<h1 class="notes-toolbar__title">Pinnwand</h1>
|
||||
<div class="notes-toolbar__search">
|
||||
<i data-lucide="search" class="notes-toolbar__search-icon" aria-hidden="true"></i>
|
||||
<input type="search" id="notes-search" class="notes-toolbar__search-input"
|
||||
placeholder="Notizen durchsuchen…" autocomplete="off"
|
||||
value="${escHtml(state.filterQuery)}">
|
||||
</div>
|
||||
<button class="btn btn--primary" id="notes-add-btn">
|
||||
<i data-lucide="plus" style="width:16px;height:16px;margin-right:4px;" aria-hidden="true"></i>
|
||||
Neue Notiz
|
||||
@@ -91,6 +97,11 @@ export async function render(container, { user }) {
|
||||
const addHandler = () => openNoteModal({ mode: 'create' });
|
||||
_container.querySelector('#notes-add-btn').addEventListener('click', addHandler);
|
||||
_container.querySelector('#fab-new-note').addEventListener('click', addHandler);
|
||||
|
||||
_container.querySelector('#notes-search').addEventListener('input', (e) => {
|
||||
state.filterQuery = e.target.value;
|
||||
renderGrid();
|
||||
});
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
@@ -101,7 +112,16 @@ function renderGrid() {
|
||||
const grid = _container.querySelector('#notes-grid');
|
||||
if (!grid) return;
|
||||
|
||||
if (!state.notes.length) {
|
||||
const q = state.filterQuery.trim().toLowerCase();
|
||||
const visible = q
|
||||
? state.notes.filter((n) =>
|
||||
(n.title || '').toLowerCase().includes(q) ||
|
||||
(n.content || '').toLowerCase().includes(q)
|
||||
)
|
||||
: state.notes;
|
||||
|
||||
if (!visible.length) {
|
||||
const isFiltered = q.length > 0;
|
||||
grid.innerHTML = `
|
||||
<div class="empty-state" style="column-span:all;">
|
||||
<svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
||||
@@ -111,15 +131,15 @@ function renderGrid() {
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
<polyline points="10 9 9 9 8 9"/>
|
||||
</svg>
|
||||
<div class="empty-state__title">Noch keine Notizen</div>
|
||||
<div class="empty-state__description">Neue Notiz über den + Button erstellen.</div>
|
||||
<div class="empty-state__title">${isFiltered ? 'Keine Treffer' : 'Noch keine Notizen'}</div>
|
||||
<div class="empty-state__description">${isFiltered ? `Keine Notiz enthält „${escHtml(state.filterQuery)}".` : 'Neue Notiz über den + Button erstellen.'}</div>
|
||||
</div>
|
||||
`;
|
||||
if (window.lucide) lucide.createIcons();
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = state.notes.map((n) => renderNoteCard(n)).join('');
|
||||
grid.innerHTML = visible.map((n) => renderNoteCard(n)).join('');
|
||||
if (window.lucide) lucide.createIcons();
|
||||
stagger(grid.querySelectorAll('.note-card'));
|
||||
}
|
||||
|
||||
@@ -542,10 +542,46 @@
|
||||
* Layout mit bis zu 5-Tage-Vorhersage.
|
||||
* -------------------------------------------------------- */
|
||||
.weather-widget {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, #1E5CB3 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.weather-widget__refresh {
|
||||
position: absolute;
|
||||
top: var(--space-2);
|
||||
right: var(--space-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: #fff;
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.weather-widget__refresh:hover {
|
||||
background: rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
.weather-widget__refresh:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.weather-widget__refresh--spinning i {
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.weather-widget__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -43,6 +43,39 @@
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.notes-toolbar__search {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.notes-toolbar__search-icon {
|
||||
position: absolute;
|
||||
left: var(--space-2);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--color-text-secondary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notes-toolbar__search-input {
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) * 2 + 16px);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: var(--text-sm);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.notes-toolbar__search-input:focus {
|
||||
outline: 2px solid var(--color-accent);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Masonry-Grid
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
+11
-4
@@ -12,9 +12,9 @@
|
||||
* API: Immer Netzwerk (kein Caching von Nutzerdaten)
|
||||
*/
|
||||
|
||||
const SHELL_CACHE = 'oikos-shell-v19';
|
||||
const PAGES_CACHE = 'oikos-pages-v19';
|
||||
const ASSETS_CACHE = 'oikos-assets-v19';
|
||||
const SHELL_CACHE = 'oikos-shell-v20';
|
||||
const PAGES_CACHE = 'oikos-pages-v20';
|
||||
const ASSETS_CACHE = 'oikos-assets-v20';
|
||||
const ALL_CACHES = [SHELL_CACHE, PAGES_CACHE, ASSETS_CACHE];
|
||||
|
||||
// App-Shell: sofort benötigt für ersten Render
|
||||
@@ -41,6 +41,7 @@ const APP_SHELL = [
|
||||
'/styles/budget.css',
|
||||
'/styles/settings.css',
|
||||
'/components/oikos-install-prompt.js',
|
||||
'/offline.html',
|
||||
'/manifest.json',
|
||||
'/favicon.ico',
|
||||
'/icons/favicon-32.png',
|
||||
@@ -157,6 +158,10 @@ async function networkFirst(request, cacheName) {
|
||||
const shell = await cache.match('/index.html');
|
||||
if (shell) return shell;
|
||||
|
||||
// Letzter Ausweg: Offline-Seite
|
||||
const offline = await caches.match('/offline.html');
|
||||
if (offline) return offline;
|
||||
|
||||
return new Response('Keine Verbindung', {
|
||||
status: 503,
|
||||
headers: { 'Content-Type': 'text/plain; charset=utf-8' },
|
||||
@@ -192,10 +197,12 @@ async function staleWhileRevalidate(request, cacheName) {
|
||||
const networkResponse = await networkPromise;
|
||||
if (networkResponse) return networkResponse;
|
||||
|
||||
// Offline-Fallback: SPA-Shell für Navigation
|
||||
// Offline-Fallback für Navigation
|
||||
if (request.mode === 'navigate') {
|
||||
const shell = await caches.match('/index.html');
|
||||
if (shell) return shell;
|
||||
const offline = await caches.match('/offline.html');
|
||||
if (offline) return offline;
|
||||
}
|
||||
|
||||
// Letzter Ausweg: leere 503-Antwort statt Promise-Rejection
|
||||
|
||||
Reference in New Issue
Block a user