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

2
VERSION
View file

@ -1 +1 @@
1102 1103

22
backend/static/index.html
View file

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

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '1102'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '1103'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt 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_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
window.APP_VERSION = APP_VERSION; window.APP_VERSION = APP_VERSION;

161
backend/static/js/ui.js
View file

@ -291,11 +291,162 @@ const UI = (() => {
${icon ? `<div class="empty-state-icon">${icon}</div>` : ''} ${icon ? `<div class="empty-state-icon">${icon}</div>` : ''}
${title ? `<div class="empty-state-title">${title}</div>` : ''} ${title ? `<div class="empty-state-title">${title}</div>` : ''}
${text ? `<div class="empty-state-text">${text}</div>` : ''} ${text ? `<div class="empty-state-text">${text}</div>` : ''}
${action ? `<div style="margin-top:var(--space-4)">${action}</div>` : ''} ${action ? `<div class="mt-4">${action}</div>` : ''}
</div> </div>
`; `;
} }
// ----------------------------------------------------------
// ERROR-STATE (dedizierte Error-UI, optional mit Retry-Button)
// ----------------------------------------------------------
// Verwendung:
// container.innerHTML = UI.errorState({
// title: 'Fehler beim Laden',
// message: err.message,
// retry: async () => { await _loadData(); }
// });
let _errorRetryHandlers = new Map();
function errorState({ icon, title = 'Etwas ist schiefgelaufen', message = '', retry = null } = {}) {
const iconHtml = icon || _svgIcon('warning-circle');
const retryId = retry ? `err-retry-${Date.now()}-${Math.random().toString(36).slice(2,7)}` : '';
if (retry) _errorRetryHandlers.set(retryId, retry);
setTimeout(() => {
if (!retryId) return;
const btn = document.getElementById(retryId);
const fn = _errorRetryHandlers.get(retryId);
if (btn && fn) {
btn.addEventListener('click', () => asyncButton(btn, fn));
_errorRetryHandlers.delete(retryId);
}
}, 0);
return `
<div class="empty-state" role="alert">
<div class="empty-state-icon text-danger">${iconHtml}</div>
<div class="empty-state-title">${escHtml(title)}</div>
${message ? `<div class="empty-state-text">${escHtml(message)}</div>` : ''}
${retry ? `<div class="mt-4">
<button id="${retryId}" class="btn btn-primary btn-sm">
${_svgIcon('arrow-clockwise')} Erneut versuchen
</button>
</div>` : ''}
</div>
`;
}
// ----------------------------------------------------------
// SKELETON LIST — Karten-Skeleton für Listen-Loading
// ----------------------------------------------------------
// Verwendung: container.innerHTML = UI.skeletonList(5);
function skeletonList(count = 4) {
return `<div class="flex-col-gap-3">${
Array.from({ length: count }, () => `
<div class="card" style="padding:var(--space-3);display:flex;gap:var(--space-3);align-items:center">
<div style="width:48px;height:48px;border-radius:50%;
background:var(--c-surface-2);animation:skeleton-pulse 1.5s ease infinite;
flex-shrink:0"></div>
<div class="flex-1-min">
<div style="height:14px;width:60%;background:var(--c-surface-2);
border-radius:var(--radius-sm);margin-bottom:var(--space-2);
animation:skeleton-pulse 1.5s ease infinite"></div>
<div style="height:10px;width:85%;background:var(--c-surface-2);
border-radius:var(--radius-sm);
animation:skeleton-pulse 1.5s ease infinite"></div>
</div>
</div>
`).join('')
}</div>
<style>@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.4}}</style>`;
}
// ----------------------------------------------------------
// MONEY-INPUT (Euro-Input mit Locale-Format)
// ----------------------------------------------------------
// Verwendung: UI.moneyInput({ name: 'betrag', value: 12.50, required: true })
// Rendert: <div class="money-input-wrap"><span>€</span><input type="number" ...></div>
function moneyInput({ name, value = '', placeholder = '0,00', required = false, currency = '€' } = {}) {
const val = (value === '' || value == null) ? '' : Number(value).toFixed(2).replace('.', ',');
return `
<div style="position:relative;display:flex;align-items:center">
<span style="position:absolute;left:var(--space-3);color:var(--c-text-muted);
pointer-events:none;font-weight:600">${currency}</span>
<input type="text" inputmode="decimal" name="${escHtml(name)}"
class="form-control" placeholder="${escHtml(placeholder)}"
style="padding-left:calc(var(--space-3) + 18px)"
pattern="[0-9]+([,.][0-9]{1,2})?"
value="${val}" ${required ? 'required' : ''}>
</div>
`;
}
// Money parser: Frontend-Helper für Form-Submit
function parseMoney(str) {
if (str == null || str === '') return null;
const cleaned = String(str).replace(',', '.').replace(/[^0-9.]/g, '');
const n = parseFloat(cleaned);
return isNaN(n) ? null : Math.round(n * 100) / 100;
}
// ----------------------------------------------------------
// DATE-PICKER (Wrapper für <input type=date> mit Label)
// ----------------------------------------------------------
// Verwendung: UI.datePicker({ name: 'datum', label: 'Datum', value: '2026-05-27', max: 'today' })
function datePicker({ name, label = '', value = '', min = '', max = '', required = false } = {}) {
const today = new Date().toISOString().slice(0, 10);
const _min = min === 'today' ? today : min;
const _max = max === 'today' ? today : max;
const id = `dp-${name}-${Date.now().toString(36)}`;
return `
${label ? `<label for="${id}" class="label-block">${escHtml(label)}${required ? ' *' : ''}</label>` : ''}
<input type="date" id="${id}" name="${escHtml(name)}" class="form-control"
value="${escHtml(value || '')}"
${_min ? `min="${escHtml(_min)}"` : ''}
${_max ? `max="${escHtml(_max)}"` : ''}
${required ? 'required' : ''}>
`;
}
// ----------------------------------------------------------
// MAP — Leaflet-Karte zentralisiert erstellen
// ----------------------------------------------------------
// Verwendung:
// const map = await UI.map.create('mein-map', { center:[51,10], zoom:6 });
// Optional: { darkFilter: true } für CSS-Filter im Dark-Mode
const map = {
OSM_URL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
OSM_MAX_ZOOM: 19,
async create(containerId, options = {}) {
await loadLeaflet();
const {
center = [51.1657, 10.4515],
zoom = 6,
zoomControl = true,
attributionControl = false,
darkFilter = false,
} = options;
const m = L.map(containerId, { zoomControl, attributionControl }).setView(center, zoom);
const tiles = L.tileLayer(this.OSM_URL, { maxZoom: this.OSM_MAX_ZOOM }).addTo(m);
if (darkFilter) {
const isDark = document.documentElement.dataset.theme === 'dark';
if (isDark) tiles.getContainer().style.filter = 'brightness(0.7) invert(1) contrast(0.9) hue-rotate(200deg)';
}
return m;
},
// SVG-Marker mit eigenem HTML (z.B. mit Pulse-Animation, Rotation, etc.)
svgMarker(lat, lon, html, { size = 32, anchorY = null, className = '' } = {}) {
const icon = L.divIcon({
className,
html,
iconSize: [size, size],
iconAnchor: [size / 2, anchorY != null ? anchorY : size / 2],
});
return L.marker([lat, lon], { icon });
},
};
// ---------------------------------------------------------- // ----------------------------------------------------------
// DATUM-FORMATIERUNG (Deutsch, relativ) // DATUM-FORMATIERUNG (Deutsch, relativ)
// ---------------------------------------------------------- // ----------------------------------------------------------
@ -1100,19 +1251,19 @@ const UI = (() => {
toast, modal, toast, modal,
setLoading, asyncButton, setLoading, asyncButton,
formData, setFormError, clearFormErrors, formData, setFormError, clearFormErrors,
emptyState, time, emptyState, errorState, time,
setupPhotoPreview, scrollTop, skeleton, setupPhotoPreview, scrollTop, skeleton, skeletonList,
moneyInput, parseMoney, datePicker,
icon: _svgIcon, icon: _svgIcon,
escape, escHtml, help, pageInfo, escape, escHtml, help, pageInfo,
saveToAlbum, saveToAlbum,
loadLeaflet, loadLeaflet,
leafletMarker, leafletMarker,
locationPicker, locationPicker,
map,
ratingStars, ratingStars,
dogChip, dogChip,
bindDogChip, bindDogChip,
dogChip,
bindDogChip,
}; };
})(); })();

2
backend/static/landing.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<script src="/js/landing-init.js?v=1102"></script> <script src="/js/landing-init.js?v=1103"></script>
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title> <title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store."> <meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz"> <meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">

2
backend/static/sw.js
View file

@ -4,7 +4,7 @@
============================================================ */ ============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1102'; const VER = '1103';
const CACHE_VERSION = `by-v${VER}`; const CACHE_VERSION = `by-v${VER}`;
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten