From bcbf9a9645a7b913d7a7c036b4c0c12b7710dfe6 Mon Sep 17 00:00:00 2001 From: rene Date: Fri, 5 Jun 2026 20:12:30 +0200 Subject: [PATCH] Regenradar: abspielbare Zeitleiste (RainViewer ~2h Verlauf + Nowcast) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bisher nur der neueste Frame; jetzt alle ~13-16 RainViewer-Frames (past+nowcast, 10-Min-Schritte) mit Play/Pause + Slider + Zeitstempel (jetzt / +N / -N Min, Vorhersage-Frames bläulich) — RainToday-artig. Frame-Wechsel smooth via raster setTiles (kein Flackern), Loop, _radarNowIdx = letzter Vergangenheits-Frame. Timeline unten-mittig, wird bei Radar-AUS entfernt. Pro-Feature wie das Radar. Headless verifiziert: 13 Frames, Play scrubbt (12→0→1→2), keine Fehler. --- VERSION | 2 +- backend/static/css/components.css | 38 +++++++++++ backend/static/index.html | 24 +++---- backend/static/js/app.js | 2 +- backend/static/js/pages/map.js | 102 ++++++++++++++++++++++++++++-- backend/static/landing.html | 2 +- backend/static/sw.js | 2 +- 7 files changed, 151 insertions(+), 21 deletions(-) diff --git a/VERSION b/VERSION index 4dedbee..f0236b5 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1214 \ No newline at end of file +1215 \ No newline at end of file diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 9f996ab..31efac9 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -3052,6 +3052,44 @@ html.modal-open { } .map-legend::-webkit-scrollbar { display: none; } +/* Regenradar-Zeitleiste (RainViewer: ~2h Vergangenheit + ~30min Nowcast, Play/Pause + Slider) */ +.map-radar-timeline { + position: absolute; + left: 50%; + bottom: calc(92px + env(safe-area-inset-bottom, 0px)); + transform: translateX(-50%); + z-index: 900; + display: flex; + align-items:center; + gap: 10px; + width: min(400px, calc(100% - 28px)); + padding: 7px 12px; + border-radius: 999px; + background: rgba(15, 22, 35, 0.82); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); + color: #fff; + pointer-events: auto; +} +.rdr-play { + flex-shrink: 0; + width: 34px; height: 34px; + border: none; border-radius: 50%; + background: rgba(255, 255, 255, 0.16); + color: #fff; cursor: pointer; + display: flex; align-items: center; justify-content: center; +} +.rdr-play:active { background: rgba(255, 255, 255, 0.3); } +.rdr-slider { flex: 1; min-width: 0; height: 4px; accent-color: #60a5fa; cursor: pointer; } +.rdr-time { + flex-shrink: 0; + font-size: 12px; font-weight: 600; + font-variant-numeric: tabular-nums; + min-width: 82px; text-align: right; opacity: 0.92; +} +.rdr-time.is-forecast { color: #93c5fd; } /* Nowcast/Vorhersage-Frames bläulich */ + .map-legend-btn { flex-shrink: 0; display: inline-flex; diff --git a/backend/static/index.html b/backend/static/index.html index 8819f3e..90578c2 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -86,14 +86,14 @@ Ban Yaro - + - - - - - + + + + + @@ -617,11 +617,11 @@ - - - - - + + + + + @@ -631,7 +631,7 @@ - + diff --git a/backend/static/js/app.js b/backend/static/js/app.js index ca60503..cf67a4d 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 = '1214'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '1215'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator) window.APP_VERSION = APP_VERSION; diff --git a/backend/static/js/pages/map.js b/backend/static/js/pages/map.js index 90959b7..29bff06 100644 --- a/backend/static/js/pages/map.js +++ b/backend/static/js/pages/map.js @@ -426,6 +426,13 @@ window.Page_map = (() => { let _tempMaxZoom = 18; let _tempMarkers = []; let _tempDebounce = null; + // Regenradar-Zeitleiste (RainViewer: ~2h Vergangenheit + ~30min Nowcast, 10-Min-Schritte) + let _radarFrames = []; // [{ path, time }] + let _radarHost = 'https://tilecache.rainviewer.com'; + let _radarIdx = null; // aktueller Frame + let _radarNowIdx = 0; // Index des "jetzt"-Frames (letzte Vergangenheit) + let _radarPlaying = false; + let _radarPlayTimer = null; async function _toggleRadar() { if (!App.hasPro(_appState?.user)) { @@ -435,8 +442,10 @@ window.Page_map = (() => { const btn = document.getElementById('map-radar-btn'); if (_radarActive) { _radarActive = false; + _radarPause(); if (_radarLayer) { _wxRemoveRaster(_radarLayer); _radarLayer = null; } clearInterval(_radarTimer); + document.getElementById('map-radar-timeline')?.remove(); btn?.classList.remove('active'); return; } @@ -444,7 +453,7 @@ window.Page_map = (() => { btn?.classList.add('active'); if (_map && _map.getZoom() > 7) _map.setZoom(7); await _loadRadar(); - _radarTimer = setInterval(_loadRadar, 5 * 60 * 1000); + _radarTimer = setInterval(_loadRadar, 5 * 60 * 1000); // Frames frisch halten } async function _toggleTemp() { @@ -565,13 +574,96 @@ window.Page_map = (() => { try { const resp = await fetch('https://api.rainviewer.com/public/weather-maps.json', { cache: 'no-store' }); const data = await resp.json(); - const frames = [...(data.radar?.past || []), ...(data.radar?.nowcast || [])]; + const past = data.radar?.past || [], nowcast = data.radar?.nowcast || []; + const frames = [...past, ...nowcast]; if (!frames.length) return; - const latest = frames[frames.length - 1].path; - const url = `https://tilecache.rainviewer.com${latest}/256/{z}/{x}/{y}/4/1_1.png`; + _radarHost = data.host || _radarHost; + _radarFrames = frames.map(f => ({ path: f.path, time: f.time })); + _radarNowIdx = Math.max(0, past.length - 1); // "jetzt" = letzter Vergangenheits-Frame + if (_radarIdx == null || _radarIdx >= _radarFrames.length) _radarIdx = _radarNowIdx; + _showRadarFrame(_radarIdx); + _buildRadarTimeline(); + } catch { /* still */ } + } + + function _radarUrl(idx) { + return `${_radarHost}${_radarFrames[idx].path}/256/{z}/{x}/{y}/4/1_1.png`; + } + + // Frame anzeigen — wenn möglich smooth via setTiles (kein Flackern), sonst Layer neu. + function _showRadarFrame(idx) { + if (!_radarActive || !_radarFrames[idx]) return; + _radarIdx = idx; + const url = _radarUrl(idx); + const src = _engineGL && _radarLayer && _map.getSource && _map.getSource('wx-radar'); + if (src && src.setTiles) { + src.setTiles([url]); + } else { if (_radarLayer) _wxRemoveRaster(_radarLayer); _radarLayer = _wxAddRaster('radar', url, 0.7, 7); - } catch { /* still */ } + } + _updateRadarTimelineUI(); + } + + function _buildRadarTimeline() { + if (!_radarFrames.length) return; + let el = document.getElementById('map-radar-timeline'); + if (!el) { + el = document.createElement('div'); + el.id = 'map-radar-timeline'; + el.className = 'map-radar-timeline'; + el.innerHTML = ` + + + `; + document.getElementById('central-map')?.appendChild(el); + el.querySelector('#rdr-play').addEventListener('click', _toggleRadarPlay); + el.querySelector('#rdr-slider').addEventListener('input', e => { + _radarPause(); + _showRadarFrame(parseInt(e.target.value, 10)); + }); + } else { + el.querySelector('#rdr-slider').max = _radarFrames.length - 1; + } + _updateRadarTimelineUI(); + } + + function _updateRadarTimelineUI() { + const slider = document.getElementById('rdr-slider'); + const timeEl = document.getElementById('rdr-time'); + const playBtn = document.getElementById('rdr-play'); + if (slider) slider.value = _radarIdx; + if (playBtn) playBtn.querySelector('use')?.setAttribute('href', `/icons/phosphor.svg#${_radarPlaying ? 'pause' : 'play'}`); + const f = _radarFrames[_radarIdx]; + if (timeEl && f) { + const d = new Date(f.time * 1000); + const hhmm = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; + const diffMin = Math.round((f.time - _radarFrames[_radarNowIdx].time) / 60); + const rel = diffMin === 0 ? 'jetzt' : (diffMin > 0 ? `+${diffMin} Min` : `${diffMin} Min`); + timeEl.textContent = `${hhmm} · ${rel}`; + timeEl.classList.toggle('is-forecast', diffMin > 0); + } + } + + function _toggleRadarPlay() { _radarPlaying ? _radarPause() : _radarPlay(); } + function _radarPlay() { + if (_radarFrames.length < 2) return; + _radarPlaying = true; + _updateRadarTimelineUI(); + clearInterval(_radarPlayTimer); + _radarPlayTimer = setInterval(() => { + let next = _radarIdx + 1; + if (next >= _radarFrames.length) next = 0; // Loop ans Ende → zurück zum Anfang + _showRadarFrame(next); + }, 500); + } + function _radarPause() { + _radarPlaying = false; + clearInterval(_radarPlayTimer); + _radarPlayTimer = null; + _updateRadarTimelineUI(); } // ---------------------------------------------------------- diff --git a/backend/static/landing.html b/backend/static/landing.html index 42acd35..a45e786 100644 --- a/backend/static/landing.html +++ b/backend/static/landing.html @@ -4,7 +4,7 @@ - + Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz diff --git a/backend/static/sw.js b/backend/static/sw.js index 800b14d..c410400 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -4,7 +4,7 @@ ============================================================ */ // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab -const VER = '1214'; +const VER = '1215'; const CACHE_VERSION = `by-v${VER}`; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten