rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sprint B: 5 neue UI-Helper für konsistente Patterns, SW by-v1103

Browse source 
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.
This commit is contained in:
rene 2026-05-27 07:19:52 +02:00
parent 459cd425f2
commit 1de39536af
6 changed files with 171 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

22
backend/static/index.html
View file

@ -86,13 +86,13 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1102"></script>
<script src="/js/boot-early.js?v=1103"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1102">
<link rel="stylesheet" href="/css/layout.css?v=1102">
<link rel="stylesheet" href="/css/components.css?v=1102">
<link rel="stylesheet" href="/css/utilities.css?v=1102">
<link rel="stylesheet" href="/css/design-system.css?v=1103">
<link rel="stylesheet" href="/css/layout.css?v=1103">
<link rel="stylesheet" href="/css/components.css?v=1103">
<link rel="stylesheet" href="/css/utilities.css?v=1103">
</head>
<body>
@ -616,11 +616,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1102"></script>
<script src="/js/ui.js?v=1102"></script>
<script src="/js/app.js?v=1102"></script>
<script src="/js/worlds.js?v=1102"></script>
<script src="/js/offline-indicator.js?v=1102"></script>
<script src="/js/api.js?v=1103"></script>
<script src="/js/ui.js?v=1103"></script>
<script src="/js/app.js?v=1103"></script>
<script src="/js/worlds.js?v=1103"></script>
<script src="/js/offline-indicator.js?v=1103"></script>
<!-- Feature-Seiten werden lazy geladen -->
@ -630,7 +630,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1102"></script>
<script src="/js/boot.js?v=1103"></script>
</body>