From b6d2606a23600c085aa2687b01662bba87c70794 Mon Sep 17 00:00:00 2001 From: rene Date: Sun, 19 Apr 2026 10:09:02 +0200 Subject: [PATCH] =?UTF-8?q?Feature:=20Bottom-Nav=20umgebaut,=20Dog-Avatar?= =?UTF-8?q?=E2=86=92Welcome,=20Routen-Filter-Panel,=20Recording-Fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Bottom-Nav: Tagebuch | Routen | [+] | Forum | Benachrichtigungen (mit Badge) - Benachrichtigungs-Badge auch in Bottom-Nav (notif-nav-badge) - Dog-Avatar-Klick → Welcome-Seite (Name bleibt → Hund-Profil) - Routen: Filter in aufklappbarem Panel, aktive Filter zeigen roten Punkt - Routen: Start/Stop-Button fragt Page_map.isRecording() ab, kein veralteter lokaler State - SW by-v232, APP_VER 209 --- backend/static/css/components.css | 41 ++++++++++- backend/static/index.html | 24 +++---- backend/static/js/app.js | 18 +++-- backend/static/js/pages/routes.js | 109 ++++++++++++++++++++---------- backend/static/sw.js | 2 +- 5 files changed, 137 insertions(+), 57 deletions(-) diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 58fcff0..d1efa8b 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -2054,19 +2054,58 @@ html.modal-open { .rk-rec-btn--active { animation: rec-pulse 1.2s ease-in-out infinite; } +/* Filter-Panel (aufklappbar) */ +.rk-filter-toggle-btn { + position: relative; + flex-shrink: 0; +} +.rk-filter-toggle-btn.active { + background: var(--c-primary); + border-color: var(--c-primary); + color: #fff; +} +.rk-filter-badge { + position: absolute; + top: 2px; + right: 2px; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--c-danger, #EF4444); + border: 1.5px solid var(--c-surface); + pointer-events: none; +} +.rk-filter-panel { + border-top: 1px solid var(--c-border-light); + padding: var(--space-3) var(--space-3) var(--space-2); + background: var(--c-surface); +} .rk-filters { display: flex; flex-direction: column; gap: var(--space-2); } .rk-filter-group { + display: flex; + flex-direction: column; + gap: var(--space-1); +} +.rk-filter-label { + font-size: var(--text-xs); + font-weight: 600; + color: var(--c-text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; + padding-left: 2px; +} +.rk-chips-row { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } -.rk-filter-group::-webkit-scrollbar { display: none; } +.rk-chips-row::-webkit-scrollbar { display: none; } .rk-chip { padding: 4px 10px; border-radius: var(--radius-full); diff --git a/backend/static/index.html b/backend/static/index.html index 842eb04..cc8984c 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -284,24 +284,24 @@ Tagebuch -
- - Gesundheit +
+ + Routen
-
- - - - - Alarm +
+ + Forum
-
- - Ich +
+ + + + + Benachrichtigungen
diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 0bb57b6..86b0391 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 = '208'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '209'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const App = (() => { @@ -440,9 +440,15 @@ const App = (() => { try { const { count } = await API.notifications.unreadCount(); const badge = document.getElementById('notif-badge'); - if (!badge) return; - badge.textContent = count; - badge.style.display = count > 0 ? '' : 'none'; + if (badge) { + badge.textContent = count; + badge.style.display = count > 0 ? '' : 'none'; + } + const navBadge = document.getElementById('notif-nav-badge'); + if (navBadge) { + navBadge.textContent = count; + navBadge.classList.toggle('hidden', count === 0); + } } catch { /* ignorieren */ } } @@ -611,9 +617,9 @@ const App = (() => { ${UI.escape(dog.name)} ${othersHtml}`; - // Klick aktiver Avatar oder Name → Hund-Profil + // Klick aktiver Avatar → Welcome-Seite; Klick Name → Hund-Profil el.querySelector(`#dog-sw-active-${ctxId}`)?.addEventListener('click', () => { - navigate('dog-profile'); + navigate('welcome'); }); el.querySelector(`.dog-sw-title`)?.addEventListener('click', () => { navigate('dog-profile'); diff --git a/backend/static/js/pages/routes.js b/backend/static/js/pages/routes.js index 71f4d8d..4bf6b4d 100644 --- a/backend/static/js/pages/routes.js +++ b/backend/static/js/pages/routes.js @@ -18,6 +18,7 @@ window.Page_routes = (() => { let _onlyMine = false; let _isRecording = false; + let _filterOpen = false; // 'mine' | 'discover' let _browseMode = 'mine'; @@ -83,37 +84,58 @@ window.Page_routes = (() => {
+
-
-
- - - - -
-
- - - - - -
-
- - - - -
- - @@ -133,14 +155,12 @@ window.Page_routes = (() => { }); document.getElementById('rk-view-list').addEventListener('click', () => _switchView('list')); document.getElementById('rk-view-map').addEventListener('click', () => _switchView('map')); + document.getElementById('rk-filter-btn').addEventListener('click', _toggleFilterPanel); document.getElementById('rk-rec-btn').addEventListener('click', () => { - if (_isRecording) { - _isRecording = false; + if (window.Page_map?.isRecording?.()) { + window.Page_map.stopRecording(); _syncRecBtn(); - window.Page_map?.stopRecording?.(); } else { - _isRecording = true; - _syncRecBtn(); App.navigate('map'); setTimeout(() => window.Page_map?.startRecording?.(), 600); } @@ -154,7 +174,7 @@ window.Page_routes = (() => { const chip = e.target.closest('.rk-chip'); if (!chip) return; const { filter, val } = chip.dataset; - chip.closest('.rk-filter-group').querySelectorAll('.rk-chip') + chip.closest('.rk-chips-row').querySelectorAll('.rk-chip') .forEach(c => c.classList.remove('active')); chip.classList.add('active'); if (filter === 'difficulty') _difficulty = val; @@ -162,6 +182,7 @@ window.Page_routes = (() => { if (filter === 'sort') _sortBy = val; if (filter === 'mine') _onlyMine = chip.classList.contains('active') && val === 'mine'; if (filter === 'nearby') { _loadDataNearby(); return; } // async, calls _applyFilter itself + _updateFilterBadge(); _applyFilter(); }); // Mode toggle @@ -170,21 +191,34 @@ window.Page_routes = (() => { } function _syncRecBtn() { - // Falls Page_map bereits initialisiert ist, echten State abfragen - if (window.Page_map?.isRecording) { - _isRecording = window.Page_map.isRecording(); - } + const recording = window.Page_map?.isRecording?.() ?? false; + _isRecording = recording; const btn = document.getElementById('rk-rec-btn'); if (!btn) return; - if (_isRecording) { + if (recording) { btn.className = 'btn btn-danger btn-sm rk-rec-btn rk-rec-btn--active'; - btn.innerHTML = UI.icon('stop-circle') + ' Stopp'; + btn.innerHTML = UI.icon('path') + ' Stopp aufnehmen'; } else { btn.className = 'btn btn-primary btn-sm rk-rec-btn'; btn.innerHTML = UI.icon('path') + ' Aufzeichnen'; } } + function _toggleFilterPanel() { + _filterOpen = !_filterOpen; + const panel = document.getElementById('rk-filter-panel'); + const btn = document.getElementById('rk-filter-btn'); + if (panel) panel.style.display = _filterOpen ? '' : 'none'; + if (btn) btn.classList.toggle('active', _filterOpen); + } + + function _updateFilterBadge() { + const badge = document.getElementById('rk-filter-badge'); + if (!badge) return; + const hasFilter = _difficulty !== '' || _terrain !== '' || _sortBy !== 'newest' || _onlyMine; + badge.style.display = hasFilter ? '' : 'none'; + } + function _setBrowseMode(mode) { _browseMode = mode; document.getElementById('rk-mode-mine')?.classList.toggle('active', mode === 'mine'); @@ -474,6 +508,7 @@ window.Page_routes = (() => { document.querySelectorAll('.rk-chip').forEach(c => c.classList.remove('active')); document.querySelectorAll('.rk-chip[data-val=""]').forEach(c => c.classList.add('active')); document.querySelector('.rk-chip[data-val="newest"]')?.classList.add('active'); + _updateFilterBadge(); _applyFilter(); }); } else if (_browseMode === 'discover') { diff --git a/backend/static/sw.js b/backend/static/sw.js index 29f92ec..f5013e8 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-v231'; +const CACHE_VERSION = 'by-v232'; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten