Sprint B: 5 neue UI-Helper für konsistente Patterns, SW by-v1103
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:
parent
459cd425f2
commit
1de39536af
6 changed files with 171 additions and 20 deletions
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
|||
1102
|
||||
1103
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
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
|
||||
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
|
||||
window.APP_VERSION = APP_VERSION;
|
||||
|
|
|
|||
|
|
@ -291,11 +291,162 @@ const UI = (() => {
|
|||
${icon ? `<div class="empty-state-icon">${icon}</div>` : ''}
|
||||
${title ? `<div class="empty-state-title">${title}</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>
|
||||
`;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// 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)
|
||||
// ----------------------------------------------------------
|
||||
|
|
@ -1100,19 +1251,19 @@ const UI = (() => {
|
|||
toast, modal,
|
||||
setLoading, asyncButton,
|
||||
formData, setFormError, clearFormErrors,
|
||||
emptyState, time,
|
||||
setupPhotoPreview, scrollTop, skeleton,
|
||||
emptyState, errorState, time,
|
||||
setupPhotoPreview, scrollTop, skeleton, skeletonList,
|
||||
moneyInput, parseMoney, datePicker,
|
||||
icon: _svgIcon,
|
||||
escape, escHtml, help, pageInfo,
|
||||
saveToAlbum,
|
||||
loadLeaflet,
|
||||
leafletMarker,
|
||||
locationPicker,
|
||||
map,
|
||||
ratingStars,
|
||||
dogChip,
|
||||
bindDogChip,
|
||||
dogChip,
|
||||
bindDogChip,
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
============================================================ */
|
||||
|
||||
// ← 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_STATIC = `${CACHE_VERSION}-static`;
|
||||
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue