diff --git a/backend/static/index.html b/backend/static/index.html
index f42f248..559a4e0 100644
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -8,6 +8,11 @@
+
+
+
+ JETZT
+ HUND
+ WELT
+
+
+
+
+
+
+
+
+
@@ -525,6 +566,7 @@
+
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 850b1a0..792086d 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
-const APP_VER = '607'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '639'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.2.1'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
@@ -75,6 +75,7 @@ const App = (() => {
recalls: { title: 'Rückrufe', module: null },
adoption: { title: 'Adoption', module: null },
playdate: { title: 'Playdate', module: null, requiresAuth: true },
+ wetter: { title: 'Wetter', module: null },
};
// ----------------------------------------------------------
@@ -98,6 +99,7 @@ const App = (() => {
// ----------------------------------------------------------
function navigate(pageId, pushHistory = true, params = {}) {
if (!pages[pageId]) return;
+ if (window.Worlds?._visible) window.Worlds.hide();
// Aktive Seite ausblenden
document.querySelector('.page.active')?.classList.remove('active');
@@ -852,6 +854,9 @@ const App = (() => {
const startPage = (hashPage && pages[hashPage]) ? hashPage : 'welcome';
// Nicht eingeloggte User immer zur Welcome-Seite — auch bei direktem Link auf Forum, Map etc.
navigate(state.user ? startPage : 'welcome', false, hashParams);
+
+ // Drei Welten nach initialer Navigation starten (damit hide() in navigate() sie nicht gleich killt)
+ if (window.Worlds) window.Worlds.init(state);
}
async function _handleInvite(token) {
@@ -925,6 +930,8 @@ const App = (() => {
})();
+window.App = App; // Worlds kann App.navigate() aufrufen
+
// App starten
document.addEventListener('DOMContentLoaded', () => {
App.init();
diff --git a/backend/static/js/worlds.js b/backend/static/js/worlds.js
new file mode 100644
index 0000000..37c9ba7
--- /dev/null
+++ b/backend/static/js/worlds.js
@@ -0,0 +1,988 @@
+/* ============================================================
+ BAN YARO — Drei Welten Navigation
+ JETZT | HUND | WELT — horizontales Swipe-System
+ ============================================================ */
+
+window.Worlds = (() => {
+
+ let _state = null;
+ let _cur = 1; // 0=JETZT 1=HUND 2=WELT
+ let _visible = false;
+ let _map = null;
+ let _weltInited = false;
+ let _lastUserId = undefined;
+ let _dogs = []; // gecachte Hundesliste
+ let _dogIdx = 0; // aktuell angezeigter Hund
+
+ // Touch-Tracking
+ const _t = { x:0, y:0, active:false, vert:null, moved:0 };
+
+ // ── OFFLINE-CACHE (localStorage) ────────────────────────────
+ // Letzten bekannten Zustand speichern → sofort zeigen, dann updaten
+
+ function _wSave(key, data) {
+ try { localStorage.setItem('w3_' + key, JSON.stringify({ ts: Date.now(), data })); } catch {}
+ }
+ function _wLoad(key) {
+ try {
+ const p = JSON.parse(localStorage.getItem('w3_' + key) || 'null');
+ return p ? { data: p.data, ageMin: Math.round((Date.now() - p.ts) / 60000) } : null;
+ } catch { return null; }
+ }
+ // API-Aufruf mit Cache-Fallback: sofort Cache, dann Netz
+ async function _cachedGet(cacheKey, path) {
+ const cached = _wLoad(cacheKey);
+ let fresh = null;
+ try {
+ fresh = await API.get(path);
+ _wSave(cacheKey, fresh);
+ } catch {}
+ return { data: fresh ?? cached?.data ?? null, fromCache: !fresh, ageMin: fresh ? 0 : (cached?.ageMin ?? null) };
+ }
+
+ // ── PUBLIC ──────────────────────────────────────────────────
+
+ async function init(appState) {
+ _state = appState;
+ _cur = 1; // immer HUND als Start
+ _setupSwipe();
+ _setupButtons();
+ _goTo(_cur, false);
+ show();
+ // Welten parallel rendern
+ _renderJetzt();
+ _renderHund();
+ }
+
+ function show(worldIdx) {
+ const ov = document.getElementById('worlds-overlay');
+ if (!ov) return;
+ ov.style.display = 'block';
+ requestAnimationFrame(() => ov.classList.add('worlds-visible'));
+ _visible = true;
+ document.getElementById('app-header')?.classList.add('worlds-hidden');
+ document.getElementById('bottom-nav')?.classList.add('worlds-hidden');
+ document.getElementById('worlds-back')?.classList.remove('worlds-back-visible');
+ if (worldIdx != null) _goTo(worldIdx, false);
+ if (_cur === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
+
+ // Nach Login/Logout neu rendern
+ const currentUserId = _state?.user?.id ?? null;
+ if (currentUserId !== _lastUserId) {
+ _lastUserId = currentUserId;
+ _renderJetzt();
+ _renderHund();
+ }
+ }
+
+ function hide() {
+ const ov = document.getElementById('worlds-overlay');
+ if (!ov) return;
+ ov.classList.remove('worlds-visible');
+ ov.style.display = 'none';
+ _visible = false;
+ document.getElementById('app-header')?.classList.remove('worlds-hidden');
+ document.getElementById('bottom-nav')?.classList.remove('worlds-hidden');
+ document.getElementById('worlds-back')?.classList.add('worlds-back-visible');
+ }
+
+ function navigateTo(pageId) {
+ hide();
+ if (window.App?.navigate) window.App.navigate(pageId);
+ }
+
+ // ── SWIPE ────────────────────────────────────────────────────
+
+ function _setupSwipe() {
+ const track = document.getElementById('worlds-track');
+ if (!track) return;
+
+ track.addEventListener('touchstart', e => {
+ _t.x = e.touches[0].clientX;
+ _t.y = e.touches[0].clientY;
+ _t.active = true; _t.vert = null; _t.moved = 0;
+ track.style.transition = 'none';
+ }, { passive: true });
+
+ track.addEventListener('touchmove', e => {
+ if (!_t.active) return;
+ const dx = e.touches[0].clientX - _t.x;
+ const dy = e.touches[0].clientY - _t.y;
+ if (_t.vert === null) _t.vert = Math.abs(dy) > Math.abs(dx) + 4;
+ if (_t.vert) return;
+ e.preventDefault();
+ _t.moved = dx;
+ const base = -_cur * (100 / 3);
+ track.style.transform = `translateX(calc(${base}% + ${dx}px))`;
+ }, { passive: false });
+
+ track.addEventListener('touchend', () => {
+ if (!_t.active || _t.vert) { _t.active = false; return; }
+ _t.active = false;
+ let next = _cur;
+ if (_t.moved < -55 && _cur < 2) next = _cur + 1;
+ else if (_t.moved > 55 && _cur > 0) next = _cur - 1;
+ _goTo(next, true);
+ if (next === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
+ });
+ }
+
+ function _goTo(idx, animated) {
+ _cur = Math.max(0, Math.min(2, idx));
+ const track = document.getElementById('worlds-track');
+ if (!track) return;
+ track.style.transition = animated
+ ? 'transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+ : 'none';
+ track.style.transform = `translateX(${-_cur * (100 / 3)}%)`;
+ _updateDots();
+ _updateFab();
+ // Karte neu rendern nachdem Transition abgeschlossen
+ if (_cur === 2 && _map) {
+ setTimeout(() => _map.invalidateSize(), animated ? 380 : 50);
+ }
+ }
+
+ function _updateDots() {
+ document.querySelectorAll('.wdot').forEach((d, i) => d.classList.toggle('active', i === _cur));
+ }
+
+ function _updateFab() {
+ const fab = document.getElementById('worlds-fab');
+ if (!fab) return;
+ const icons = ['note-pencil', 'paw-print', 'warning'];
+ const titles = ['Schnelleintrag', 'Hund-Eintrag', 'Alarm melden'];
+ fab.querySelector('use')?.setAttribute('href', `/icons/phosphor.svg#${icons[_cur]}`);
+ fab.title = titles[_cur];
+ }
+
+ function _setupButtons() {
+ document.getElementById('worlds-fab')?.addEventListener('click', _openFab);
+ document.getElementById('worlds-settings')?.addEventListener('click', () => navigateTo('settings'));
+ document.getElementById('worlds-back')?.addEventListener('click', () => show());
+ document.querySelectorAll('.wdot').forEach((dot, i) => {
+ dot.style.pointerEvents = 'auto';
+ dot.addEventListener('click', () => {
+ _goTo(i, true);
+ if (i === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
+ });
+ });
+ }
+
+ function _openFab() {
+ const isWelt = _cur === 2;
+ const dogName = _state?.user ? null : null; // falls mehrere Hunde: erweiterbar
+
+ const options = isWelt ? [
+ { icon:'skull', color:'#EF4444', label:'Giftköder melden', sub:'Warnung für andere Hundebesitzer', page:'poison' },
+ { icon:'dog', color:'#3B82F6', label:'Verlorenen Hund melden', sub:'Hilf beim Wiederfinden', page:'lost' },
+ { icon:'map-pin', color:'#10B981', label:'Ort vorschlagen', sub:'Neuen POI auf der Karte', page:'map' },
+ ] : [
+ { icon:'book-open', color:'#8B5CF6', label:'Tagebucheintrag', sub:'Erlebnis, Foto oder Notiz', page:'diary', action:'openNew' },
+ { icon:'target', color:'#F59E0B', label:'Training aufzeichnen',sub:'Übung absolviert', page:'uebungen' },
+ { icon:'heartbeat', color:'#EF4444', label:'Tierarztbesuch', sub:'Befund oder Impfung eintragen', page:'health' },
+ { icon:'wave-sine', color:'#06B6D4', label:'Gewicht messen', sub:'Aktuelles Gewicht eintragen', page:'health' },
+ ];
+
+ // Overlay erstellen
+ const ov = document.createElement('div');
+ ov.id = 'fab-overlay';
+ ov.style.cssText = 'position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;justify-content:flex-end';
+ ov.innerHTML = `
+
+
+
+
+ ${isWelt ? 'Was möchtest du melden?' : 'Was möchtest du eintragen?'}
+
+
+
+
+
+ ${options.map(o => `
+
+
+
+
+
+
+
${o.label}
+
${o.sub}
+
+ `).join('')}
+
+
+
+
+
+
Abbrechen
+
Welten einrichten
+
Fertig
+
+
+
+
+ Lang drücken & ziehen zum Verschieben. ✕ zum Entfernen.
+
+
+ Zurücksetzen
+
+
+ ${['jetzt','hund','welt','pool'].map(w => {
+ const chips = w === 'pool' ? poolChips() : (cfg[w] || []).map(_chipMeta).filter(c => c && _chipAllowed(c));
+ const col = worldColors[w] || 'var(--c-border)';
+ return `
+
+
+ (${chips.length}) ` : ''}
+
+
+ ${chips.map(c => `
+
+ ${!c.pinned ? `
+
+
+
+ ` : `
+
+
+
+
`}
+
+
+
${c.label.replace('\n','
+
+ `).join('')}
+ ${chips.length === 0 ? `
+ ${w==='pool'?'Alle Chips sind zugeordnet':'Leer — ziehe Chips hierher'}
+
` : ''}
+
+
+ `;
+ }).join('')}
+
+
+
+ ${label}
+
`;
+ }
+
+ // ── JETZT WORLD ──────────────────────────────────────────────
+
+ async function _renderJetzt() {
+ const el = document.getElementById('wj-content');
+ if (!el) return;
+
+ const user = _state?.user;
+ el.innerHTML = _skeleton(3);
+
+ const [weatherRes, dogsRes, alertsRes] = await Promise.allSettled([
+ _getCachedWeather(),
+ user ? _cachedGet('dogs', '/dogs') : Promise.resolve({ data: [], fromCache: false, ageMin: 0 }),
+ user ? _getNearbyAlerts() : Promise.resolve([]),
+ ]);
+
+ const weatherObj = weatherRes.value || { data: null, fromCache: false, ageMin: 0 };
+ const dogsObj = dogsRes.value || { data: [], fromCache: false, ageMin: 0 };
+ const w = weatherObj.data;
+ const dogList = dogsObj.data || [];
+ const dog = dogList[0] || null;
+ const alertList = alertsRes.value || [];
+ const isOffline = weatherObj.fromCache && dogsObj.fromCache;
+ const staleMin = Math.max(weatherObj.ageMin || 0, dogsObj.ageMin || 0);
+
+ // Panorama-Bild setzen (nur wenn noch kein Bild vorhanden)
+ const track = document.getElementById('worlds-track');
+ if (dog && !track?.style.backgroundImage?.startsWith('url')) {
+ _loadDailyImage(dog).then(_applyBgImage);
+ } else if (!dog) { _applyBgImage(null); }
+
+ const hour = new Date().getHours();
+ const greet = hour < 5 ? 'Gute Nacht' : hour < 12 ? 'Guten Morgen' : hour < 18 ? 'Hallo' : 'Guten Abend';
+ const firstName = user?.name?.split(' ')[0] || '';
+ const dayStr = new Date().toLocaleDateString('de-DE', { weekday:'long', day:'numeric', month:'long' });
+ const stale = isOffline && staleMin > 5
+ ? `· Offline ` : '';
+ const weatherLine = w
+ ? `${Math.round(w.temp_c)}° ${_esc(w.desc?.split(' ')[0] || '')} · ${Math.round(w.wind_kmh || 0)} km/h · ${w.precip_prob || 0}% Regen`
+ : '';
+
+ // Streak-Reminder
+ let streakHtml = '';
+ if (user && dog) {
+ try {
+ const sr = await _cachedGet(`streak_${dog.id}`, `/streak/${dog.id}`);
+ const s = sr.data;
+ const streak = s?.current_streak || 0;
+ const trainedToday = s?.last_training_date === new Date().toISOString().slice(0,10);
+ const col = trainedToday ? 'rgba(16,185,129,0.8)' : (streak > 0 ? 'rgba(245,158,11,0.8)' : 'rgba(255,255,255,0.4)');
+ const label = streak > 0
+ ? (trainedToday ? `✓ ${streak} Tage Streak` : `🔥 ${streak} Tage — heute noch trainieren!`)
+ : (trainedToday ? '✓ Heute trainiert' : 'Noch kein Training heute');
+ streakHtml = `
+
+
+
+ ${label}
+
`;
+ } catch {}
+ }
+
+ // Alert-Reminder
+ const alertHtml = alertList.slice(0,1).map(a => `
+
+
+
+ ${_esc(a.title)}
+
`).join('');
+
+ // Feature Chips aus Config
+ const features = user
+ ? _chipsForWorld('jetzt')
+ : [
+ { icon:'sun', label:'Wetter', page:'wetter' },
+ { icon:'first-aid',label:'Erste Hilfe', page:'erste-hilfe' },
+ { icon:'gear', label:'Anmelden', page:'settings' },
+ ];
+
+ // User-Avatar für JETZT Info-Card
+ const uFoto = _state?.user?.foto_url;
+ const uInitial = firstName ? firstName.charAt(0).toUpperCase() : '?';
+ const userAvatarHtml = `
+
+ ${uFoto
+ ? `
`
+ : `
${uInitial}
`}
+
+
+
+
+
+ ${_esc(greet)}${firstName ? `, ${_esc(firstName)} ` : ''}${stale}
+
+
${_esc(dayStr)}${weatherLine ? ' · ' + weatherLine : ''}
+
+ ${user ? userAvatarHtml : ''}
+
+
+ ${alertHtml}
+ ${streakHtml}
+
+
Deine Bereiche
+
+ ${features.map(f => _chip(f.icon, f.label, f.page)).join('')}
+
+
+
🐾
+
Dein Hund wartet
+
Melde dich an um loszulegen
+
Anmelden
+
+
🐶
+
Noch kein Hund angelegt
+
Erstelle das Profil deines Hundes
+
Hund anlegen
+
🐶
`;
+
+ // Andere Hunde-Avatare (rechts, überlagernd, → Hund wechseln)
+ const otherAvatarsHtml = otherDogs.length > 0 ? `
+
+ ${otherDogs.slice(0, 4).map((d, i) => {
+ const targetIdx = _dogs.indexOf(d);
+ return `
+
+ ${d.foto_url
+ ? `
`
+ : `
+ ${_esc(d.name?.charAt(0)?.toUpperCase() || '?')}
+
`}
+
`;
+ }).join('')}
+
+
+
+ ${dogAvatarHtml}
+
+
${_esc(dog.name)}
+ ${stats ? `
${_esc(stats)}
` : ''}
+
+ ${otherAvatarsHtml}
+
+
+
+
Alles über ${_esc(dog.name)}
+
+ ${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
+
+
+
+
Gedanke des Tages
+
+ »${_esc(quote.t)}«
+
+
+ — ${_esc(quote.a)}
+
+
+
+
Die Welt da draußen
+
+ ${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
+
+
+ `).join('');
+ }
+
+ function _fmtDate(d) {
+ if (!d) return '';
+ try { return new Date(d).toLocaleDateString('de-DE', { day:'numeric', month:'short' }); }
+ catch { return d; }
+ }
+
+ function _fmtAlter(j) {
+ if (!j) return '';
+ if (j < 1) return `${Math.round(j * 12)} Monate`;
+ return j < 2 ? '1 Jahr' : `${Math.round(j)} Jahre`;
+ }
+
+ function _esc(s) {
+ if (s == null) return '';
+ return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
+ }
+
+ return { init, show, hide, navigateTo, openConfig: _openConfigModal, get _visible() { return _visible; } };
+
+})();
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 177e86b..6ff893c 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
-const CACHE_VERSION = 'by-v607';
+const CACHE_VERSION = 'by-v639';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache
@@ -125,11 +125,34 @@ const _CACHEABLE_GET = [
/^\/api\/training\/progress/,
/^\/api\/wiki\/rassen/,
/^\/api\/dogs\/\d+\/diary\/stats/,
+ // Drei Welten — offline-fähig
+ /^\/api\/streak\/\d+/,
+ /^\/api\/forum\/threads/,
+ /^\/api\/weather$/,
+ /^\/api\/passport\/\d+$/,
];
function _isCacheableGet(pathname) {
return _CACHEABLE_GET.some(re => re.test(pathname));
}
+// Cache-TTL: stabile Daten länger, dynamische kürzer
+const _STABLE_GET = [/^\/api\/training\/exercises/, /^\/api\/wiki\/rassen/];
+const _TTL_STABLE = 60 * 60 * 1000; // 1 Stunde
+const _TTL_DEFAULT = 5 * 60 * 1000; // 5 Minuten
+
+const _cacheTs = new Map(); // pathname → timestamp (in-memory, ok bei SW-Neustart)
+
+function _cacheTTL(pathname) {
+ return _STABLE_GET.some(re => re.test(pathname)) ? _TTL_STABLE : _TTL_DEFAULT;
+}
+function _cacheStale(pathname) {
+ const ts = _cacheTs.get(pathname);
+ return !ts || (Date.now() - ts) > _cacheTTL(pathname);
+}
+function _cacheMark(pathname) {
+ _cacheTs.set(pathname, Date.now());
+}
+
// ----------------------------------------------------------
// INSTALL — App Shell cachen
// ----------------------------------------------------------
@@ -173,19 +196,27 @@ self.addEventListener('fetch', event => {
if (method === 'GET' && _isCacheableGet(url.pathname)) {
event.respondWith((async () => {
const cached = await caches.match(event.request);
+ const stale = _cacheStale(url.pathname);
+
const networkPromise = _fetchTimeout(event.request.clone(), 8000)
.then(resp => {
- if (resp.ok) caches.open(CACHE_API).then(c => c.put(event.request, resp.clone()));
+ if (resp.ok) {
+ _cacheMark(url.pathname);
+ caches.open(CACHE_API).then(c => c.put(event.request, resp.clone()));
+ }
return resp;
})
.catch(() => null);
- // Stale-While-Revalidate: sofort aus Cache, im Hintergrund holen
- if (cached) {
- networkPromise.catch(() => {}); // fire and forget
+
+ // Cache noch frisch → sofort zurückgeben, Netz im Hintergrund
+ if (cached && !stale) {
+ networkPromise.catch(() => {});
return cached;
}
+ // Cache vorhanden aber abgelaufen → Netz zuerst, Cache als Fallback
const fresh = await networkPromise;
if (fresh) return fresh;
+ if (cached) return cached; // lieber veraltet als nichts
return new Response(JSON.stringify({ detail: 'Offline — keine Daten im Cache.' }),
{ status: 503, headers: { 'Content-Type': 'application/json' } });
})());