Sprint 15: Suche, Ausweis, Teilen, Widget

- Volltext-Suche im Tagebuch (LIKE über Titel/Text/Tags, Debounce 350ms)
- Digitaler Heimtierausweis als druckbare HTML-Seite (/ausweis/{dog_id})
  Enthält Impfungen, Medikamente, Allergien, Tierärzte, Chip-Nr.
- Hund teilen: Einladungslink-System (dog_shares-Tabelle, /teilen/{token})
  Geteilte Hunde erscheinen in der Hundeliste, Tagebuch/Gesundheit lesbar
- Widget-Seite /#widget: zufälliges Tagebuchbild + nächste Erinnerung
  Als PWA-Shortcut im Manifest verankert
- SW-Cache by-v144, APP_VER 117
This commit is contained in:
rene 2026-04-17 15:51:09 +02:00
parent d5f09cd16b
commit 34f29f9d0a
16 changed files with 917 additions and 35 deletions

View file

@ -239,6 +239,90 @@
.health-transponder-label { color: var(--c-text-muted); }
.health-transponder-edit { margin-left: auto; }
/* Diary: Suchleiste */
.diary-search-wrap {
position: relative;
flex: 1;
min-width: 0;
}
.diary-search-icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
color: var(--c-text-muted);
pointer-events: none;
}
.diary-search-input {
width: 100%;
padding: var(--space-2) var(--space-3) var(--space-2) 2.2rem;
border: 1.5px solid var(--c-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: var(--font-sans);
background: var(--c-bg);
color: var(--c-text);
outline: none;
transition: border-color var(--transition-fast);
}
.diary-search-input:focus { border-color: var(--c-primary); }
/* Widget-Karte */
.widget-card {
background: var(--c-surface);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.widget-dog-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
}
.widget-dog-av {
width: 48px; height: 48px; border-radius: 50%;
object-fit: cover; border: 2px solid var(--c-primary-light);
flex-shrink: 0;
}
.widget-dog-av--placeholder {
display: flex; align-items: center; justify-content: center;
background: var(--c-surface-2); font-size: 1.5rem;
}
.widget-reminder {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--c-primary-subtle);
color: var(--c-primary-dark);
border-top: 1px solid var(--c-border-light);
}
.widget-reminder--overdue { background: var(--c-danger-subtle); color: var(--c-danger); }
.widget-reminder--ok { background: var(--c-success-subtle); color: var(--c-success); }
.widget-photo-wrap {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-top: 1px solid var(--c-border-light);
display: flex; align-items: center; justify-content: center;
background: var(--c-surface-2);
}
.widget-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.widget-photo-placeholder { flex-direction: column; gap: var(--space-2); }
.widget-photo-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: var(--space-2) var(--space-3);
background: linear-gradient(transparent, rgba(0,0,0,.55));
color: #fff;
font-size: var(--text-sm);
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.widget-photo-date { font-size: var(--text-xs); opacity: .8; }
/* Import: Format-Auswahl-Karten */
.import-format-card {
display: flex;

View file

@ -247,6 +247,10 @@
<div class="page-body page-container"></div>
</section>
<section class="page" id="page-widget">
<div class="page-body page-container"></div>
</section>
</main>
<!-- MOBILE BOTTOM NAVIGATION -->

View file

@ -408,6 +408,18 @@ const API = (() => {
resetToken: () => del('/webcal/token'),
};
const sharing = {
create: (dogId, role) => post(`/dogs/${dogId}/share`, { role }),
list: (dogId) => get(`/dogs/${dogId}/shares`),
revoke: (dogId, id) => del(`/dogs/${dogId}/share/${id}`),
accept: (token) => post(`/share/accept/${token}`, {}),
info: (token) => get(`/share/info/${token}`),
};
const widget = {
snapshot: () => get('/widget/snapshot'),
};
const importData = {
notestation(dogId, file) {
const fd = new FormData();
@ -440,7 +452,7 @@ const API = (() => {
get, post, put, patch, del, upload,
auth, dogs, diary, health, tieraerzte, poison,
places, routes, walks, events, sitting, forum, lost, knigge, weather, push,
friends, chat, webcal, importData,
friends, chat, webcal, importData, sharing, widget,
subscribeToPush, getLocation,
APIError,
};

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '116'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '117'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {
@ -56,6 +56,7 @@ const App = (() => {
admin: { title: 'Admin', module: null, requiresAuth: true },
impressum: { title: 'Impressum', module: null },
datenschutz: { title: 'Datenschutz', module: null },
widget: { title: 'Widget', module: null, requiresAuth: true },
};
// ----------------------------------------------------------
@ -573,9 +574,16 @@ const App = (() => {
_bindNavigation();
await _checkAuth();
// Einladungslink /teilen/{token} → direkt annehmen
const inviteMatch = location.pathname.match(/^\/teilen\/([A-Za-z0-9_-]+)$/);
if (inviteMatch) {
const token = inviteMatch[1];
navigate('diary', false);
_handleInvite(token);
return;
}
// Erste Seite laden: Hash aus URL oder Standard 'diary'.
// Bewusst NACH _checkAuth(), damit _loadPage() nur einmal aufgerufen wird
// (vorher war Hash-Navigation auch in _bindNavigation() → doppelter Aufruf).
const rawHash = location.hash.replace('#', '');
const [hashPage, hashQuery] = rawHash.split('?');
const hashParams = {};
@ -588,6 +596,38 @@ const App = (() => {
navigate(startPage, false, hashParams);
}
async function _handleInvite(token) {
try {
const info = await API.sharing.info(token);
if (info.accepted_at) {
UI.toast.success(`Du hast bereits Zugriff auf ${info.dog_name}.`);
history.replaceState(null, '', '/');
return;
}
const ok = await UI.modal.confirm(
`<strong>${UI.escape(info.owner_name)}</strong> möchte das Profil von
<strong>${UI.escape(info.dog_name)}</strong> mit dir teilen
(${info.role === 'editor' ? 'Lesen & Schreiben' : 'Nur lesen'}).
Möchtest du die Einladung annehmen?`
);
if (!ok) { history.replaceState(null, '', '/'); return; }
await API.sharing.accept(token);
// Hundeliste neu laden
state.dogs = await API.dogs.list();
const newDog = state.dogs.find(d => d.name === info.dog_name);
if (newDog) {
state.activeDog = newDog;
localStorage.setItem('by_active_dog', String(newDog.id));
_renderDogSwitcher();
}
history.replaceState(null, '', '/');
UI.toast.success(`${UI.escape(info.dog_name)} wurde deiner Liste hinzugefügt!`);
} catch (e) {
UI.toast.error(e.message || 'Einladungslink ungültig.');
history.replaceState(null, '', '/');
}
}
// ----------------------------------------------------------
// AUTH-GATE HELPER — einheitlicher "Bitte anmelden"-Block
// ----------------------------------------------------------

View file

@ -9,11 +9,12 @@ window.Page_diary = (() => {
// ----------------------------------------------------------
// MODUL-STATE
// ----------------------------------------------------------
let _container = null;
let _appState = null;
let _entries = [];
let _offset = 0;
const LIMIT = 20;
let _container = null;
let _appState = null;
let _entries = [];
let _offset = 0;
let _searchQuery = '';
const LIMIT = 20;
const TYPEN = {
eintrag: { label: 'Eintrag', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>' },
@ -53,9 +54,9 @@ window.Page_diary = (() => {
// ON DOG CHANGE — vom Header-Switcher ausgelöst
// ----------------------------------------------------------
async function onDogChange(dog) {
_offset = 0;
_entries = [];
// Direkt Diary laden — Hund wurde bereits extern gewählt
_offset = 0;
_entries = [];
_searchQuery = '';
await _renderDiary();
}
@ -136,9 +137,13 @@ window.Page_diary = (() => {
async function _renderDiary() {
_container.innerHTML = `
<div class="by-toolbar diary-toolbar">
<button class="btn btn-secondary btn-sm" id="diary-import-btn">
<div class="diary-search-wrap" id="diary-search-wrap">
<svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
<input type="search" class="diary-search-input" id="diary-search-input"
placeholder="Einträge durchsuchen…" autocomplete="off">
</div>
<button class="btn btn-secondary btn-sm" id="diary-import-btn" title="Importieren">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
Importieren
</button>
</div>
<div id="diary-list"></div>
@ -152,6 +157,20 @@ window.Page_diary = (() => {
_container.querySelector('#diary-btn-more')
?.addEventListener('click', () => _loadMore());
// Suche mit Debounce
let _searchTimer = null;
_container.querySelector('#diary-search-input')
?.addEventListener('input', e => {
clearTimeout(_searchTimer);
_searchTimer = setTimeout(async () => {
_offset = 0;
_entries = [];
_searchQuery = e.target.value.trim();
await _load();
_renderList();
}, 350);
});
await _load();
_renderList();
}
@ -163,7 +182,9 @@ window.Page_diary = (() => {
const dog = _appState.activeDog;
if (!dog) return;
try {
const batch = await API.diary.list(dog.id, { limit: LIMIT, offset: _offset });
const params = { limit: LIMIT, offset: _offset };
if (_searchQuery) params.q = _searchQuery;
const batch = await API.diary.list(dog.id, params);
_entries = _entries.concat(batch);
// "Mehr laden" anzeigen wenn volle Page geladen wurde

View file

@ -188,6 +188,16 @@ window.Page_dog_profile = (() => {
<button class="btn btn-primary w-full" id="dp-edit-btn">
Profil bearbeiten
</button>
<div style="display:flex;gap:var(--space-2)">
<button class="btn btn-secondary" style="flex:1" id="dp-ausweis-btn">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#identification-card"></use></svg>
Ausweis
</button>
<button class="btn btn-secondary" style="flex:1" id="dp-share-btn">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#share-network"></use></svg>
Teilen
</button>
</div>
<button class="btn btn-secondary w-full" id="dp-add-dog-btn">
+ Weiteren Hund anlegen
</button>
@ -240,6 +250,14 @@ window.Page_dog_profile = (() => {
_showChipEdit(dog);
});
document.getElementById('dp-ausweis-btn')?.addEventListener('click', () => {
window.open(`/ausweis/${dog.id}`, '_blank');
});
document.getElementById('dp-share-btn')?.addEventListener('click', () => {
_showShareModal(dog);
});
// Edit- und Add-Klicks laufen über Event-Delegation in init() — keine direkten Listener nötig.
}
@ -275,6 +293,102 @@ window.Page_dog_profile = (() => {
});
}
// ----------------------------------------------------------
// TEILEN
// ----------------------------------------------------------
async function _showShareModal(dog) {
UI.modal.open({
title: `${_esc(dog.name)} teilen`,
body: `
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-4)">
Erstelle einen Einladungslink, den du per WhatsApp, Signal oder E-Mail teilen kannst.
Die eingeladene Person sieht Tagebuch und Gesundheitsakte nach dem Annehmen.
</p>
<div class="form-group">
<label class="form-label">Berechtigung</label>
<select class="form-control" id="share-role-select">
<option value="editor">Mitschreiben (Tagebuch & Gesundheit bearbeiten)</option>
<option value="viewer">Nur lesen</option>
</select>
</div>
<div id="share-link-result" style="display:none;margin-top:var(--space-4)">
<label class="form-label">Einladungslink</label>
<div style="display:flex;gap:var(--space-2);align-items:center">
<input class="form-control" id="share-link-input" type="text" readonly
style="font-size:var(--text-xs)">
<button class="btn btn-secondary btn-sm" id="share-link-copy">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#clipboard-text"></use></svg>
</button>
</div>
<p style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-2)">
Dieser Link kann einmalig angenommen werden.
</p>
</div>
<div id="share-list-wrap" style="margin-top:var(--space-4)"></div>`,
footer: `
<button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>
<button class="btn btn-primary" id="share-create-btn">Link erstellen</button>`,
});
_loadShareList(dog.id);
document.getElementById('share-create-btn').addEventListener('click', async () => {
const role = document.getElementById('share-role-select').value;
const btn = document.getElementById('share-create-btn');
UI.setLoading(btn, true);
try {
const res = await API.sharing.create(dog.id, role);
const link = `${location.origin}${res.invite_path}`;
const inp = document.getElementById('share-link-input');
inp.value = link;
document.getElementById('share-link-result').style.display = 'block';
document.getElementById('share-link-copy').onclick = async () => {
await navigator.clipboard.writeText(link).catch(() => {});
UI.toast.success('Link kopiert!');
};
UI.setLoading(btn, false);
_loadShareList(dog.id);
} catch (e) {
UI.setLoading(btn, false);
UI.toast.error(e.message || 'Fehler');
}
});
}
async function _loadShareList(dogId) {
const wrap = document.getElementById('share-list-wrap');
if (!wrap) return;
try {
const shares = await API.sharing.list(dogId);
if (!shares.length) { wrap.innerHTML = ''; return; }
wrap.innerHTML = `
<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">
Aktive Einladungen
</div>` +
shares.map(s => `
<div style="display:flex;align-items:center;gap:var(--space-2);
padding:var(--space-2) var(--space-3);background:var(--c-surface);
border-radius:var(--radius-md);margin-bottom:var(--space-1)">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>
<div style="flex:1;font-size:var(--text-sm)">
${s.shared_with_name
? `<strong>${_esc(s.shared_with_name)}</strong> · ${s.role}`
: `<em style="color:var(--c-text-muted)">Ausstehend</em> · ${s.role}`}
</div>
<button class="btn btn-link btn-sm share-revoke-btn" data-share-id="${s.id}"
style="color:var(--c-danger);padding:0">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
</button>
</div>`).join('');
wrap.querySelectorAll('.share-revoke-btn').forEach(btn => {
btn.addEventListener('click', async () => {
await API.sharing.revoke(dogId, parseInt(btn.dataset.shareId));
_loadShareList(dogId);
});
});
} catch (e) { /* ignore */ }
}
// ----------------------------------------------------------
// NEU ANLEGEN (direkt auf der Seite, kein Modal)
// ----------------------------------------------------------

View file

@ -0,0 +1,145 @@
/* BAN YARO — Widget-Vorschau (Home-Screen-Widget) */
window.Page_widget = (() => {
let _container = null;
let _appState = null;
let _refreshTimer = null;
async function init(container, appState) {
_container = container;
_appState = appState;
await _render();
}
async function refresh() {
await _render();
}
async function _render() {
_container.innerHTML = `
<div style="padding:var(--space-4)">
<div style="text-align:center;color:var(--c-text-muted);padding:var(--space-8)">
<div style="font-size:2rem"></div>
<div>Lade</div>
</div>
</div>`;
if (!_appState.activeDog) {
_container.innerHTML = UI.emptyState({
icon: UI.icon('dog'),
title: 'Kein Hund angelegt',
text: 'Erstelle zuerst ein Hundeprofil.',
action: `<button class="btn btn-primary" onclick="App.navigate('dog-profile')">Profil erstellen</button>`,
});
return;
}
let data;
try {
data = await API.widget.snapshot();
} catch (e) {
_container.innerHTML = '<p style="padding:2rem;color:red">Fehler beim Laden.</p>';
return;
}
const dog = data.dog;
const photo = data.random_photo;
const rem = data.reminder;
const photoHtml = photo
? `<div class="widget-photo-wrap">
<img src="${_esc(photo.media_url)}" alt="${_esc(photo.titel || '')}" class="widget-photo">
<div class="widget-photo-caption">
${_esc(photo.titel || '')}
<span class="widget-photo-date">${_fmtDate(photo.datum)}</span>
</div>
</div>`
: `<div class="widget-photo-wrap widget-photo-placeholder">
<svg class="ph-icon" style="font-size:3rem" aria-hidden="true"><use href="/icons/phosphor.svg#image"></use></svg>
<div style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos im Tagebuch</div>
</div>`;
const reminderHtml = rem
? `<div class="widget-reminder">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-check"></use></svg>
<div>
<div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">${_esc(rem.bezeichnung)}</div>
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_fmtDate(rem.naechstes)}</div>
</div>
</div>`
: data.overdue > 0
? `<div class="widget-reminder widget-reminder--overdue">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg>
<div style="font-size:var(--text-sm)">${data.overdue} überfällige Erinnerung${data.overdue > 1 ? 'en' : ''}</div>
</div>`
: `<div class="widget-reminder widget-reminder--ok">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg>
<div style="font-size:var(--text-sm)">Keine offenen Erinnerungen</div>
</div>`;
const dogAvatar = dog.foto_url
? `<img src="${_esc(dog.foto_url)}" class="widget-dog-av" alt="${_esc(dog.name)}">`
: `<div class="widget-dog-av widget-dog-av--placeholder">🐕</div>`;
_container.innerHTML = `
<div style="padding:var(--space-4)">
<div class="widget-card">
<div class="widget-dog-row">
${dogAvatar}
<div>
<div style="font-weight:var(--weight-bold);font-size:var(--text-lg)">${_esc(dog.name)}</div>
${dog.rasse ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted)">${_esc(dog.rasse)}</div>` : ''}
</div>
<button class="btn btn-secondary btn-sm" id="widget-refresh-btn" style="margin-left:auto"
title="Neues Zufallsbild">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrows-clockwise"></use></svg>
</button>
</div>
${reminderHtml}
${photoHtml}
</div>
<div style="margin-top:var(--space-4);padding:var(--space-3) var(--space-4);
background:var(--c-surface);border-radius:var(--radius-md);
border:1px solid var(--c-border)">
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
margin-bottom:var(--space-2)">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#device-mobile"></use></svg>
Als Home-Screen-Widget nutzen
</div>
<p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
Füge diese Seite zum Home-Screen hinzu und öffne sie mit einem Tipp.
</p>
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">
<strong>iOS Safari:</strong> Teilen-Symbol Zum Home-Bildschirm"
</div>
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">
<strong>Android Chrome:</strong> Menü () Zum Startbildschirm hinzufügen"
</div>
</div>
</div>
</div>`;
_container.querySelector('#widget-refresh-btn')?.addEventListener('click', () => _render());
}
function _esc(str) {
if (!str) return '';
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function _fmtDate(d) {
if (!d) return '';
try {
const [y, m, day] = d.split('-');
return `${parseInt(day)}.${parseInt(m)}.${y}`;
} catch { return d; }
}
return { init, refresh };
})();

View file

@ -27,14 +27,21 @@
},
"shortcuts": [
{
"name": "Tagebuch",
"url": "/#diary",
"icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
"name": "Tagebuch",
"url": "/#diary",
"icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
},
{
"name": "Giftköder melden",
"url": "/#poison",
"icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
"name": "Widget",
"short_name": "Widget",
"description": "Nächste Erinnerung + zufälliges Tagebuchbild",
"url": "/#widget",
"icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
},
{
"name": "Giftköder melden",
"url": "/#poison",
"icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
}
]
}

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
const CACHE_VERSION = 'by-v143';
const CACHE_VERSION = 'by-v144';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten