+ `;
+
+ // Distanz-Chips
+ grid.querySelector('#rks-km-row').addEventListener('click', e => {
+ const btn = e.target.closest('.rks-km-chip');
+ if (!btn) return;
+ _suggestKm = parseInt(btn.dataset.km, 10);
+ grid.querySelectorAll('.rks-km-chip').forEach(b => b.classList.toggle('active', b === btn));
+ });
+
+ // Varianten-Buttons
+ grid.querySelector('#rks-var-row').addEventListener('click', e => {
+ const btn = e.target.closest('.rks-var-btn');
+ if (!btn) return;
+ _suggestSeed = parseInt(btn.dataset.seed, 10);
+ grid.querySelectorAll('.rks-var-btn').forEach(b => b.classList.toggle('active', b === btn));
+ });
+
+ // Berechnen
+ grid.querySelector('#rks-calc-btn').addEventListener('click', _calcSuggestRoute);
+ }
+
+ async function _calcSuggestRoute() {
+ // Standort prüfen
+ if (!_userPos) {
+ try { _userPos = await API.getLocation(); } catch {
+ const res = document.getElementById('rks-result');
+ if (res) res.innerHTML = `
+
+
+
+ Standort wird benötigt. Bitte erlaube den Zugriff in den Browser-Einstellungen.
+
+
`;
+ return;
+ }
+ }
+
+ // Alten Karteninhalt aufräumen
+ if (_suggestMap) { _suggestMap.remove(); _suggestMap = null; }
+
+ // Spinner anzeigen
+ const res = document.getElementById('rks-result');
+ if (!res) return;
+ res.innerHTML = `
+
+
+ `;
+
+ const calcBtn = document.getElementById('rks-calc-btn');
+ if (calcBtn) calcBtn.disabled = true;
+
+ let result;
+ try {
+ result = await API.post('/routes/suggest', {
+ lat: _userPos.lat,
+ lon: _userPos.lon,
+ distance_km: _suggestKm,
+ seed: _suggestSeed,
+ });
+ _suggestResult = result;
+ } catch (err) {
+ if (res) res.innerHTML = `
+
+ ${UI.icon('warning')} ${UI.escape(err.message || 'Fehler beim Berechnen des Rundwegs.')}
+
`;
+ if (calcBtn) calcBtn.disabled = false;
+ return;
+ }
+ if (calcBtn) calcBtn.disabled = false;
+
+ // Ergebnis rendern
+ const distStr = result.distanz_km ? result.distanz_km.toFixed(2) + ' km' : '–';
+ const durStr = result.dauer_min
+ ? (result.dauer_min < 60 ? result.dauer_min + ' min' : Math.floor(result.dauer_min/60) + 'h ' + (result.dauer_min%60||'') + 'min').trim()
+ : '–';
+ const diffLabel = { leicht: 'Leicht', mittel: 'Mittel', anspruchsvoll: 'Schwer' }[result.schwierigkeit] || '';
+
+ if (!res) return;
+ res.innerHTML = `
+
+
+
+
+
+
+ ${UI.icon('map-trifold')} ${UI.escape(distStr)}
+
+
+ ${UI.icon('timer')} ${UI.escape(durStr)}
+
+ ${diffLabel ? `${UI.escape(diffLabel)}` : ''}
+ ${UI.escape(result.name || '')}
+
+
+
+
+
+
+
+ `;
+
+ // Leaflet-Karte mit dem berechneten Track
+ const _initMap = () => {
+ const mapEl = document.getElementById('rks-map');
+ if (!mapEl || !window.L) return;
+ if (_suggestMap) { _suggestMap.remove(); _suggestMap = null; }
+
+ const track = result.gps_track || [];
+ if (track.length < 2) { mapEl.innerHTML = '
Kein Track vorhanden
'; return; }
+
+ const lls = track.map(p => [p.lat, p.lon]);
+ _suggestMap = L.map(mapEl, { zoomControl: false, attributionControl: false,
+ dragging: true, touchZoom: true, scrollWheelZoom: false });
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_suggestMap);
+ const poly = L.polyline(lls, { color: '#C4843A', weight: 4, opacity: 0.9 }).addTo(_suggestMap);
+ L.circleMarker(lls[0], { radius:7, color:'#22C55E', fillColor:'#22C55E', fillOpacity:1, weight:2 }).addTo(_suggestMap);
+ L.circleMarker(lls.at(-1), { radius:7, color:'#EF4444', fillColor:'#EF4444', fillOpacity:1, weight:2 }).addTo(_suggestMap);
+ _addRouteArrows(_suggestMap, track, '#3b82f6');
+ _suggestMap.fitBounds(poly.getBounds(), { padding: [16, 16] });
+ setTimeout(() => _suggestMap?.invalidateSize(), 120);
+ };
+
+ if (window.L) {
+ _initMap();
+ } else {
+ let tries = 0;
+ const poll = setInterval(() => {
+ if (window.L || ++tries > 40) { clearInterval(poll); if (window.L) _initMap(); }
+ }, 100);
+ }
+
+ // Navigation starten
+ document.getElementById('rks-nav-btn')?.addEventListener('click', () => {
+ if (!_suggestResult) return;
+ const route = {
+ id: 'suggest-' + Date.now(),
+ name: _suggestResult.name,
+ gps_track: _suggestResult.gps_track,
+ distanz_km: _suggestResult.distanz_km,
+ };
+ _openNavOverlay(route);
+ });
+
+ // Route speichern
+ document.getElementById('rks-save-btn')?.addEventListener('click', async () => {
+ const btn = document.getElementById('rks-save-btn');
+ if (!btn || !_suggestResult) return;
+ await UI.asyncButton(btn, async () => {
+ await API.post('/routes', {
+ name: _suggestResult.name,
+ gps_track: _suggestResult.gps_track,
+ distanz_km: _suggestResult.distanz_km,
+ dauer_min: _suggestResult.dauer_min,
+ schwierigkeit: _suggestResult.schwierigkeit,
+ });
+ UI.toast.success('Route gespeichert!');
+ await _loadData();
+ _setBrowseMode('mine');
+ });
+ });
}
async function _loadDataNearby() {
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 74c7811..4017bfe 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-v477';
+const CACHE_VERSION = 'by-v478';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten