MapLibre-GL-Migration ist verifiziert (Staging) → GL jetzt Default auf allen
deployten Hosts statt nur staging.banyaro.app. localhost/LAN bleibt OSM-Raster
(keine lokalen Tiles), by_map_gl=0 erzwingt weiterhin den Leaflet-Fallback.
Tiles (dach.pmtiles, 15 Länder) + Glyphs liegen nun auch im Prod-Data-Volume.
SW-Bump 1219→1220.
offline-indicator.js: im GL-Offline-Modus (by_offline_tiles) prüft Segment 5
'Karten-Kacheln' jetzt eine gespeicherte Vektor-Region in IndexedDB (statt des
OSM-Raster-Counts, den die GL-Karte nicht nutzt → war falsch-grün). 'Fehlende
nachladen' (Segment 5) stößt im GL-Modus MapOffline.downloadAround(GPS, 5km) an.
- _offlineRegionStored legt dasselbe IDB-Schema/Version an wie map-offline.js
(sonst bricht ein versionsloses open() die Store-Erstellung)
- UI.loadMapLibreUI exportiert (für den FAB-Download)
Headless verifiziert: Flag an, keine Fehler; Segment 5 vor Download grau (0),
nach Download grün (97 Tiles).
Eigentliche Ursache von 'Detailkarte zoomt nicht auf die Route': die Karte war
auf dem Gerät gar keine GL-Karte mehr, sondern der Leaflet+OSM-RASTER-Fallback.
Grund: _detailMap (GL-Kontext) wurde beim Schließen des Modals NIE freigegeben —
jede geöffnete Route leakte einen WebGL-Kontext. Nach ~8 wirft MapLibre, und
UI.map.create fällt auf Leaflet+OSM zurück. Genau die Mapnik-Kacheln aus Renés
Screenshots (und die OSM-Attribution, die wir doch loswerden wollten).
Fixes:
- _detailMap modulweit + im onClose des Detail-Modals freigeben.
- routes.js destroy(): _detailMap/_suggestMap/_searchMap + Mini-Maps beim
Verlassen der Seite freigeben.
- ui.js: Offscreen-Snapshot-Kontext nach 15s Leerlauf freigeben (hielt dauerhaft
einen Kontext; Cache bleibt → kein Neu-Rendern).
- _fitRouteMap fittet jetzt aufs 'load'/'idle'-Event der Karte (iOS verwirft ein
fitBounds VOR dem ersten Render) statt nur auf feste Timeouts.
Verifiziert (headless): 12 Detail-Öffnungen in Folge bleiben ALLE GL
(Leaflet:false), GL-Canvas-Zahl bleibt bei 1–2 statt zu wachsen. Vorher leakte
jede Öffnung einen Kontext.
In der Routenliste fehlte der geografische Kontext — man sah nur die Routen-
form auf grünem Grund, nicht WO sie liegt oder wo sie entlangführt.
Lösung: UI.map.snapshot() rendert pro Track ein PNG aus EINEM geteilten
Offscreen-GL-Kontext (gleicher Style wie die echte Karte: Straßen, Orte,
Wald, Gewässer), zeichnet Route + Start/Ziel-Marker ein und cached das
Ergebnis. So bekommt jede Karte ihren Kontext, ohne bei vielen Listen-
einträgen das WebGL-Kontextlimit (iOS ~8) zu sprengen.
- ui.js: Offscreen-Singleton + serielle Render-Queue + Cache (_glSnapshot)
- routes.js: _buildMiniMap zeigt sofort SVG, upgradet dann aufs PNG
- GL aus → null → SVG-Platzhalter bleibt (Produktion/Flag aus unverändert)
Main-Thread-Rendering von protomaps-leaflet + App-Map-Logik blockiert UI-Thread.
Greift auch bei localStorage-Flag=1. Performance erst lösen, dann reaktivieren.
UI.ratingStars lud die Bewertungen via API, speicherte/renderte das ratings-Array
aber nie — nur Durchschnitt+Anzahl. Jetzt wird die Liste aller Bewertungen mit
Kommentar (Name + Sterne + Text) angezeigt; nach dem Speichern neu geladen.
Backend war korrekt. SW v1168
User-Report: nach Sprint-Migration auf _preview.webp tauchen
Fragezeichen-Icons auf — wenn weder Preview noch Original verfügbar.
Probleme im vorigen Fix:
- UI.escape() ist HTML-Escape, kein JS-String-Escape → URL mit
?param=value wurde &-encoded und damit kaputt
- 'opacity:0.3' lässt das Browser-Default-Broken-Image-Icon
durchscheinen (Fragezeichen sichtbar)
- Kein Loop-Schutz beim onerror
Fixes:
- String-Escape via .replace(/'/g, \"\\'\") statt UI.escape()
- display:none + .img-broken-Klasse bei finalem Fehler
- dataset.fb='1' verhindert Endlos-Loop wenn Original-URL auch 404
- Wenn URL nicht mit /media/ startet: direkt ausblenden (keine
Preview-Variante zu probieren)
Symptom: Friends-Seite lädt Avatare langsam — Original-Bilder
(z.B. 4-12MB iPhone-Fotos) statt der vorhandenen _preview.webp
Vorschauen.
Neue zentrale Helper in ui.js:
- UI.previewUrl(url): ersetzt /media/...jpg → /media/..._preview.webp
- UI.previewFallback(originalUrl): onerror-Handler der Original
nachlädt falls _preview nicht existiert (für ältere Uploads)
friends.js 3 Stellen migriert:
- _userAvatar (Freundes-Karte + Aktivitäts-Feed)
- Activity-Avatar (dog_foto + avatar_url)
- Dog-Mini-Thumbs im Profil-Modal
Zusätzlich auf allen drei Stellen:
- loading="lazy" für off-screen Bilder
- decoding="async" damit der Hauptthread nicht blockiert
Reuse-Potential: wiki.js, dog-profile.js und andere können später
auf die zentralen Helper umgestellt werden.
Neue zentrale Komponenten in ui.js:
1. UI.errorState({icon, title, message, retry})
Dedizierte Error-UI statt nur Toast. Mit optionalem Retry-Button
(asyncButton-integriert). Analog zu UI.emptyState. Behebt
Inkonsistenzen: Toast vs. ad-hoc HTML vs. Empty-State-Reuse.
2. UI.skeletonList(count)
Karten-Skeleton für Listen-Loading (Avatar + 2 Zeilen pro Item).
Erweitert UI.skeleton(lines) — beide bleiben verfügbar.
3. UI.moneyInput({name, value, currency='€', placeholder})
Euro-Input mit Prefix + locale-Format (Komma als Dezimal-
trenner). Extrahiert aus expenses.js Best-Practice.
Plus UI.parseMoney(str) als Parser-Helper.
4. UI.datePicker({name, label, value, min, max, required})
Standard-Date-Input mit Label, min/max ('today' wird zu ISO-
Datum konvertiert). Vereinfacht Form-Boilerplate.
5. UI.map.create(containerId, opts)
Zentraler Leaflet-Init mit OSM-Tiles + Dark-Mode-Filter-Option.
Konstanten OSM_URL + OSM_MAX_ZOOM zentral. Plus UI.map.svgMarker
für eigene divIcon-Marker (für events.js Diamant, lost.js Puls).
Alle Helper sind backward-kompatibel — bestehende Patterns funktionieren
weiter. Tests 19/19 grün. Migration der Aufrufer kommt in Sprint C+D.
- UI.pageInfo(): generische Hilfe-Funktion — erstes Öffnen zeigt Info-Banner, danach ? Button oben rechts; CSS-Klassen pinfo-*
- Übungen-Seite nutzt UI.pageInfo() als erstes Beispiel
- Karte POI: Mehrfachauswahl (außer Giftköder), Kombi-Typen entfernt, type als comma-separated im Backend
- daily_quotes Tabelle in DB (346 Einträge via import_quotes.py importiert)
- GET /widget/quote — deterministischer Tagesspruch (wechselt täglich)
Nach capture-Aufnahmen erscheint Button 'Zum Fotoalbum hinzufügen'.
Nutzt Web Share API (iOS/Android) mit <a download> als Fallback.
UI.saveToAlbum() als wiederverwendbare Utility in ui.js.
SW by-v200, APP_VER 168.
- UI.escape() fehlte im Public-API von ui.js (crash nach Profil speichern)
- Chip-Nr.-Karte im Hunde-Profil immer sichtbar, auch ohne Wert
- "Eintragen"-Button öffnet Inline-Edit-Modal direkt im Profil
- SW-Cache by-v143
