rene
459cd425f2
PHASE 1 — Sofort-Cleanup ohne Risiko: - Neue Datei utilities.css mit ~25 Klassen für häufige Kombinationen: * text-xs-muted, text-xs-secondary, text-sm-muted, text-sm-secondary * flex-gap-2/3, flex-col-gap-2/3/4, flex-center-gap-1/2/3 * flex-between, flex-1-min, mb-1/3, mt-1/3 * icon-xs/sm/md/lg, label-block, caption - index.html bindet utilities.css ein - mb-3/mt-3 ergänzt (waren in design-system.css unvollständig) PHASE 2 — .by-tab Modifier für Vereinheitlichung: - .by-tabs.grid (mit --tab-cols Variable für Admin/Health/etc.) - .by-tabs.sticky (Desktop vertikale Tabs für Admin) - .by-tabs.wrap (Zuchthunde, flex-wrap statt scroll) - .by-tabs.separated (Sitting, mit eigenem Hintergrund + Border) PHASE 3 — Inline-Style → Klassen-Migration (Python-Script): - 948 Inline-Styles entfernt (5101 → 4153, -18%) - 962 Migrationen über 47 Page-Dateien - Top-Treffer: admin.js (180), health.js (67), dog-profile.js (67), litters.js (62), settings.js (61), zuchthunde.js (51) - Patterns: text-muted, text-secondary, text-danger, text-xs-muted, text-sm-muted, grid-2 (Duplikat-Bug behoben!), flex-col-gap-3, p-3/4, mb-2/3/4, hidden, w-full, flex-1, ... - Bewahrt bestehende class-Attribute (mergt korrekt) Alle 19 Tests grün. Kein visueller Diff erwartet (gleiche Property-Werte).
464 lines
17 KiB
JavaScript
464 lines
17 KiB
JavaScript
/* ============================================================
|
|
BAN YARO — Onboarding-Wizard
|
|
3-Schritt-Wizard für neue User ohne Hund.
|
|
============================================================ */
|
|
|
|
window.Page_onboarding = (() => {
|
|
|
|
let _container = null;
|
|
let _appState = null;
|
|
let _step = 1; // 1 = Willkommen, 2 = Hund anlegen, 3 = Fertig
|
|
|
|
// ----------------------------------------------------------
|
|
// INIT
|
|
// ----------------------------------------------------------
|
|
async function init(container, appState) {
|
|
_container = container;
|
|
_appState = appState;
|
|
_step = 1;
|
|
_render();
|
|
}
|
|
|
|
function refresh() {
|
|
// Wenn User nach Abschluss zurücknavigiert und schon fertig ist → Tagebuch
|
|
if (localStorage.getItem('by_onboarding_done')) {
|
|
App.navigate('diary');
|
|
return;
|
|
}
|
|
_render();
|
|
}
|
|
|
|
function onDogChange() {}
|
|
|
|
// ----------------------------------------------------------
|
|
// RENDER
|
|
// ----------------------------------------------------------
|
|
function _render() {
|
|
_container.innerHTML = `
|
|
<div style="max-width:480px;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)">
|
|
|
|
<!-- Schritt-Indikator -->
|
|
<div style="display:flex;align-items:center;justify-content:center;
|
|
gap:var(--space-2);margin-bottom:var(--space-8)">
|
|
${[1, 2, 3].map(n => `
|
|
<div style="display:flex;align-items:center;gap:var(--space-2)">
|
|
<div style="width:32px;height:32px;border-radius:50%;
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:var(--text-sm);font-weight:var(--weight-bold);
|
|
transition:background 0.2s,color 0.2s;
|
|
${n === _step
|
|
? 'background:var(--c-primary);color:#fff;'
|
|
: n < _step
|
|
? 'background:var(--c-success);color:#fff;'
|
|
: 'background:var(--c-bg-secondary);color:var(--c-text-secondary);'}">
|
|
${n < _step
|
|
? `<svg style="width:16px;height:16px" aria-hidden="true"><use href="/icons/phosphor.svg#check"></use></svg>`
|
|
: n}
|
|
</div>
|
|
${n < 3 ? `<div style="width:40px;height:2px;
|
|
background:${n < _step ? 'var(--c-success)' : 'var(--c-border)'};
|
|
border-radius:1px;transition:background 0.2s"></div>` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<!-- Schritt-Inhalt -->
|
|
<div id="onboarding-step-content">
|
|
${_stepContent()}
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
|
|
_bindEvents();
|
|
}
|
|
|
|
function _stepContent() {
|
|
if (_step === 1) return _step1();
|
|
if (_step === 2) return _step2();
|
|
if (_step === 3) return _step3();
|
|
return '';
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// SCHRITT 1 — Willkommen
|
|
// ----------------------------------------------------------
|
|
function _step1() {
|
|
return `
|
|
<div class="text-center">
|
|
|
|
<!-- Logo -->
|
|
<div style="margin-bottom:var(--space-6)">
|
|
<img src="/icons/icon-180.png" alt="Ban Yaro"
|
|
style="width:96px;height:96px;border-radius:var(--radius-xl);
|
|
box-shadow:var(--shadow-md)">
|
|
</div>
|
|
|
|
<!-- Überschrift -->
|
|
<h1 style="font-size:var(--text-2xl);font-weight:var(--weight-bold);
|
|
color:var(--c-text);margin:0 0 var(--space-4)">
|
|
Willkommen bei Ban Yaro!
|
|
</h1>
|
|
|
|
<!-- Beschreibung -->
|
|
<p style="font-size:var(--text-base);color:var(--c-text-secondary);
|
|
line-height:1.6;margin:0 0 var(--space-3)">
|
|
Ban Yaro ist dein digitaler Begleiter für alles rund um deinen Hund —
|
|
Tagebuch, Gesundheit, Karte und Community in einer App.
|
|
</p>
|
|
<p style="font-size:var(--text-base);color:var(--c-text-secondary);
|
|
line-height:1.6;margin:0 0 var(--space-8)">
|
|
In nur zwei Schritten richtest du dein Profil ein und bist sofort startklar.
|
|
</p>
|
|
|
|
<!-- Feature-Highlights -->
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
|
|
margin-bottom:var(--space-8);text-align:left">
|
|
${[
|
|
['book-open', 'Tagebuch', 'Momente & Fotos'],
|
|
['syringe', 'Gesundheit', 'Impfungen & Arzt'],
|
|
['map-trifold', 'Karte', 'Orte & Routen'],
|
|
['users', 'Community', 'Freunde & Treffen'],
|
|
].map(([icon, title, desc]) => `
|
|
<div style="display:flex;gap:var(--space-3);align-items:center;
|
|
background:var(--c-bg-secondary);border-radius:var(--radius-md);
|
|
padding:var(--space-3)">
|
|
<div style="width:36px;height:36px;border-radius:var(--radius-md);
|
|
background:var(--c-primary-subtle);flex-shrink:0;
|
|
display:flex;align-items:center;justify-content:center">
|
|
<svg style="fill:currentColor;width:18px;height:18px;color:var(--c-primary)" aria-hidden="true">
|
|
<use href="/icons/phosphor.svg#${icon}"></use>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
|
color:var(--c-text)">${title}</div>
|
|
<div class="text-xs-secondary">${desc}</div>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex-col-gap-3">
|
|
<button class="btn btn-primary" id="ob-next-btn" class="w-full">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrow-right"></use></svg>
|
|
Los geht's
|
|
</button>
|
|
<button class="btn btn-ghost" id="ob-skip-btn" class="w-full">
|
|
Überspringen
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// SCHRITT 2 — Hund anlegen
|
|
// ----------------------------------------------------------
|
|
function _step2() {
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
return `
|
|
<div>
|
|
|
|
<!-- Überschrift -->
|
|
<div style="text-align:center;margin-bottom:var(--space-6)">
|
|
<div style="width:64px;height:64px;border-radius:50%;
|
|
background:var(--c-primary-subtle);margin:0 auto var(--space-4);
|
|
display:flex;align-items:center;justify-content:center">
|
|
<svg style="fill:currentColor;width:32px;height:32px;color:var(--c-primary)" aria-hidden="true">
|
|
<use href="/icons/phosphor.svg#dog"></use>
|
|
</svg>
|
|
</div>
|
|
<h2 style="font-size:var(--text-xl);font-weight:var(--weight-bold);
|
|
color:var(--c-text);margin:0 0 var(--space-2)">
|
|
Dein erster Hund
|
|
</h2>
|
|
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0">
|
|
Nur der Name ist Pflicht — alles andere kannst du später ergänzen.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Formular -->
|
|
<form id="ob-dog-form" autocomplete="off">
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Name *</label>
|
|
<input class="form-control" type="text" name="name" id="ob-dog-name"
|
|
placeholder="z. B. Luna, Max, Bello …" required autofocus>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
Rasse
|
|
<span style="color:var(--c-text-secondary);font-weight:400">(optional)</span>
|
|
</label>
|
|
<input class="form-control" type="text" name="rasse"
|
|
placeholder="z. B. Golden Retriever, Mischling …">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
Geburtstag
|
|
<span style="color:var(--c-text-secondary);font-weight:400">(optional)</span>
|
|
</label>
|
|
<input class="form-control" type="date" name="geburtstag" max="${today}">
|
|
</div>
|
|
|
|
<!-- Foto-Upload -->
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
Foto
|
|
<span style="color:var(--c-text-secondary);font-weight:400">(optional)</span>
|
|
</label>
|
|
<div id="ob-photo-preview" style="display:none;margin-bottom:var(--space-2)">
|
|
<img id="ob-photo-img" src="" alt="Vorschau"
|
|
style="width:80px;height:80px;object-fit:cover;
|
|
border-radius:50%;border:2px solid var(--c-border)">
|
|
</div>
|
|
<label class="btn btn-secondary" style="width:100%;cursor:pointer;
|
|
display:flex;align-items:center;justify-content:center;gap:var(--space-2)">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg>
|
|
<span id="ob-photo-label">Foto auswählen</span>
|
|
<input type="file" name="foto" id="ob-photo-input"
|
|
accept="image/*" class="hidden">
|
|
</label>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<!-- Buttons -->
|
|
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-6)">
|
|
<button class="btn btn-secondary" id="ob-back-btn">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrow-left"></use></svg>
|
|
</button>
|
|
<button type="submit" form="ob-dog-form" class="btn btn-primary" id="ob-save-btn"
|
|
class="flex-1">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
|
|
Hund anlegen
|
|
</button>
|
|
</div>
|
|
<div style="text-align:center;margin-top:var(--space-3)">
|
|
<button class="btn btn-ghost" id="ob-skip-btn" class="text-sm">
|
|
Ohne Hund fortfahren
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// SCHRITT 3 — Fertig
|
|
// ----------------------------------------------------------
|
|
function _step3() {
|
|
const dogName = _appState.activeDog?.name;
|
|
return `
|
|
<div class="text-center">
|
|
|
|
<!-- Erfolgs-Icon -->
|
|
<div style="margin-bottom:var(--space-6)">
|
|
<div style="width:80px;height:80px;border-radius:50%;
|
|
background:var(--c-success-subtle,#dcfce7);margin:0 auto var(--space-4);
|
|
display:flex;align-items:center;justify-content:center">
|
|
<svg style="fill:currentColor;width:40px;height:40px;color:var(--c-success)" aria-hidden="true">
|
|
<use href="/icons/phosphor.svg#check-circle"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text -->
|
|
<h2 style="font-size:var(--text-2xl);font-weight:var(--weight-bold);
|
|
color:var(--c-text);margin:0 0 var(--space-4)">
|
|
Dein Profil ist bereit!
|
|
</h2>
|
|
${dogName ? `
|
|
<p style="font-size:var(--text-base);color:var(--c-text-secondary);
|
|
line-height:1.6;margin:0 0 var(--space-3)">
|
|
<strong>${_esc(dogName)}</strong> ist jetzt in Ban Yaro.
|
|
Du kannst jetzt Einträge im Tagebuch anlegen, die Gesundheit pflegen
|
|
und viele weitere Funktionen nutzen.
|
|
</p>
|
|
` : `
|
|
<p style="font-size:var(--text-base);color:var(--c-text-secondary);
|
|
line-height:1.6;margin:0 0 var(--space-3)">
|
|
Ban Yaro ist bereit. Du kannst jetzt die Karte, das Wiki und viele
|
|
weitere Funktionen erkunden.
|
|
</p>
|
|
`}
|
|
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);
|
|
line-height:1.6;margin:0 0 var(--space-8)">
|
|
Du kannst dein Hundeprofil jederzeit unter
|
|
<strong>Mein Hund</strong> bearbeiten und ergänzen.
|
|
</p>
|
|
|
|
<!-- CTA -->
|
|
<div class="flex-col-gap-3">
|
|
<button class="btn btn-primary" id="ob-diary-btn" class="w-full">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
|
|
Zum Tagebuch
|
|
</button>
|
|
${dogName ? `
|
|
<button class="btn btn-secondary" id="ob-profile-btn" class="w-full">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
|
|
Profil vervollständigen
|
|
</button>
|
|
` : ''}
|
|
</div>
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// EVENTS
|
|
// ----------------------------------------------------------
|
|
function _bindEvents() {
|
|
// Weiter-Button (Schritt 1)
|
|
_container.querySelector('#ob-next-btn')?.addEventListener('click', () => {
|
|
_step = 2;
|
|
_render();
|
|
});
|
|
|
|
// Zurück-Button (Schritt 2)
|
|
_container.querySelector('#ob-back-btn')?.addEventListener('click', () => {
|
|
_step = 1;
|
|
_render();
|
|
});
|
|
|
|
// Überspringen
|
|
_container.querySelector('#ob-skip-btn')?.addEventListener('click', () => {
|
|
_finish();
|
|
});
|
|
|
|
// Foto-Vorschau
|
|
_container.querySelector('#ob-photo-input')?.addEventListener('change', e => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
const url = URL.createObjectURL(file);
|
|
const preview = _container.querySelector('#ob-photo-preview');
|
|
const img = _container.querySelector('#ob-photo-img');
|
|
const label = _container.querySelector('#ob-photo-label');
|
|
if (preview) preview.style.display = '';
|
|
if (img) img.src = url;
|
|
if (label) label.textContent = file.name.length > 20
|
|
? file.name.slice(0, 17) + '...'
|
|
: file.name;
|
|
});
|
|
|
|
// Formular abschicken (Schritt 2)
|
|
_container.querySelector('#ob-dog-form')?.addEventListener('submit', async e => {
|
|
e.preventDefault();
|
|
await _saveDog(e.target);
|
|
});
|
|
|
|
// Zu Tagebuch (Schritt 3)
|
|
_container.querySelector('#ob-diary-btn')?.addEventListener('click', () => {
|
|
App.navigate('diary');
|
|
});
|
|
|
|
// Zu Hund-Profil (Schritt 3)
|
|
_container.querySelector('#ob-profile-btn')?.addEventListener('click', () => {
|
|
App.navigate('dog-profile');
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// HUND SPEICHERN
|
|
// ----------------------------------------------------------
|
|
async function _saveDog(form) {
|
|
const saveBtn = _container.querySelector('#ob-save-btn');
|
|
if (saveBtn) {
|
|
saveBtn.disabled = true;
|
|
saveBtn.innerHTML = `
|
|
<svg class="ph-icon spin" aria-hidden="true"><use href="/icons/phosphor.svg#circle-notch"></use></svg>
|
|
Wird angelegt…
|
|
`;
|
|
}
|
|
|
|
try {
|
|
const data = new FormData(form);
|
|
const payload = {
|
|
name: data.get('name')?.trim(),
|
|
rasse: data.get('rasse')?.trim() || null,
|
|
geburtstag: data.get('geburtstag') || null,
|
|
};
|
|
|
|
if (!payload.name) {
|
|
UI.toast.error('Bitte gib einen Namen ein.');
|
|
return;
|
|
}
|
|
|
|
// Hund anlegen
|
|
const dog = await API.dogs.create(payload);
|
|
|
|
// Foto hochladen (falls vorhanden)
|
|
const fotoFile = data.get('foto');
|
|
if (fotoFile && fotoFile.size > 0) {
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append('file', fotoFile);
|
|
await API.dogs.uploadPhoto(dog.id, fd);
|
|
} catch {
|
|
// Foto-Upload-Fehler ist nicht kritisch
|
|
UI.toast.warning('Hund angelegt, Foto konnte nicht hochgeladen werden.');
|
|
}
|
|
}
|
|
|
|
// State aktualisieren
|
|
const dogs = await API.dogs.list();
|
|
_appState.dogs = dogs;
|
|
const newDog = dogs.find(d => d.id === dog.id) || dogs[0];
|
|
_appState.activeDog = newDog;
|
|
if (newDog) {
|
|
localStorage.setItem('by_active_dog', String(newDog.id));
|
|
}
|
|
App.renderDogSwitcher();
|
|
|
|
UI.toast.success(`${_esc(dog.name)} wurde angelegt!`);
|
|
|
|
_step = 3;
|
|
_render();
|
|
|
|
} catch (err) {
|
|
UI.toast.error(err.message || 'Hund konnte nicht angelegt werden.');
|
|
} finally {
|
|
if (saveBtn) {
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = `
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
|
|
Hund anlegen
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// ABSCHLUSS
|
|
// ----------------------------------------------------------
|
|
function _finish() {
|
|
localStorage.setItem('by_onboarding_done', '1');
|
|
if (_appState.dogs.length > 0) {
|
|
if (window.Worlds) window.Worlds.init(_appState);
|
|
else App.navigate('diary');
|
|
} else {
|
|
// Ohne Hund: Welten zeigen (HUND-Tab mit "Jetzt anlegen"-Karte)
|
|
if (window.Worlds) window.Worlds.init(_appState);
|
|
else App.navigate('welcome');
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// HELPER
|
|
// ----------------------------------------------------------
|
|
function _esc(s) {
|
|
return UI.escape(s || '');
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// PUBLIC
|
|
// ----------------------------------------------------------
|
|
return { init, refresh, onDogChange };
|
|
|
|
})();
|