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).
417 lines
17 KiB
JavaScript
417 lines
17 KiB
JavaScript
/* ============================================================
|
|
BAN YARO — Hunde-Knigge
|
|
Seiten-Modul: Begegnungen, Community-Voting, KI-Rat, Haftpflicht.
|
|
============================================================ */
|
|
|
|
window.Page_knigge = (() => {
|
|
|
|
// ----------------------------------------------------------
|
|
// MODUL-STATE
|
|
// ----------------------------------------------------------
|
|
let _container = null;
|
|
let _appState = null;
|
|
|
|
// Voting-State: { szenario_id: { counts: {}, user_answer: null } }
|
|
const _voteState = {};
|
|
|
|
// ----------------------------------------------------------
|
|
// HARDCODED INHALTE
|
|
// ----------------------------------------------------------
|
|
const BEGEGNUNGEN = [
|
|
{
|
|
icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>',
|
|
titel: 'Fremder Hund',
|
|
tipps: 'Kurze Leine, ruhig bleiben, Hunde schnüffeln lassen wenn beide entspannt. Eskalation: weglenken, Richtung wechseln.',
|
|
},
|
|
{
|
|
icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#users"></use></svg>',
|
|
titel: 'Kinder',
|
|
tipps: 'Hund nie unbeaufsichtigt mit Kindern. Kind fragen ob es streicheln darf. Hund dahinter positionieren, nicht zwischen Kind und Weg.',
|
|
},
|
|
{
|
|
icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#person-simple-bike"></use></svg>',
|
|
titel: 'Radfahrer',
|
|
tipps: 'Hund an die Seite nehmen. Fahrrad = potentielle Bedrohung für manche Hunde. Frühzeitig weglenken.',
|
|
},
|
|
{
|
|
icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#person-simple-run"></use></svg>',
|
|
titel: 'Jogger',
|
|
tipps: 'Kurze Leine, Abstand halten, Hund nicht anspringen lassen.',
|
|
},
|
|
{
|
|
icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#car"></use></svg>',
|
|
titel: 'ÖPNV',
|
|
tipps: 'Maulkorbpflicht gilt im ÖPNV (Deutschland-weit). Kleine Hunde in Transportbox kostenlos, große Hunde brauchen Fahrschein. Regeln je Stadt unterschiedlich.',
|
|
},
|
|
{
|
|
icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shopping-cart"></use></svg>',
|
|
titel: 'Supermarkt / Geschäfte',
|
|
tipps: 'Grundsätzlich Hausrecht des Betreibers. "Hunde willkommen"-Schild = explizite Einladung. Im Zweifel fragen. Außen anbinden nur kurz und beaufsichtigt.',
|
|
},
|
|
];
|
|
|
|
const SZENARIEN = [
|
|
{
|
|
id: 'begegnung_leine',
|
|
frage: 'Dein Hund ist gut sozialisiert und läuft frei. Ein angeleinten Hund kommt entgegen. Was tust du?',
|
|
antworten: [
|
|
{ key: 'a', text: 'Hund weiterlaufen lassen — er ist ja friedlich' },
|
|
{ key: 'b', text: 'Hund anleinen und Abstand halten' },
|
|
{ key: 'c', text: 'Besitzer fragen ob ein Treffen ok ist' },
|
|
],
|
|
richtig: 'b',
|
|
erklaerung: 'Freilaufende Hunde auf angeleine Hunde zulaufen zu lassen ist unhöflich und kann den angeleinten Hund in Stress versetzen ("Leinenfrust"). Immer erst anleinen und Abstand halten.',
|
|
},
|
|
{
|
|
id: 'gassi_kot',
|
|
frage: 'Dein Hund macht sein Geschäft im Park abseits des Weges im Gebüsch. Was machst du?',
|
|
antworten: [
|
|
{ key: 'a', text: 'Liegenlassen — im Gebüsch stört es niemanden' },
|
|
{ key: 'b', text: 'Aufsammeln, auch wenn es versteckt liegt' },
|
|
{ key: 'c', text: 'Nur aufsammeln wenn jemand zuschaut' },
|
|
],
|
|
richtig: 'b',
|
|
erklaerung: 'Kot grundsätzlich immer aufsammeln — auch im Gebüsch. Kinder spielen überall, und Parasiten (z.B. Spulwurm) können für Menschen gefährlich sein.',
|
|
},
|
|
{
|
|
id: 'restaurant_hund',
|
|
frage: 'Im Restaurant-Außenbereich sitzt du mit deinem Hund. Ein anderer Gast bittet dich deinen Hund wegzunehmen weil er Angst hat. Was tust du?',
|
|
antworten: [
|
|
{ key: 'a', text: 'Ablehnen — Außenbereich ist hundefreundlich' },
|
|
{ key: 'b', text: 'Hund wegsetzen oder selbst weiter hinten platzieren' },
|
|
{ key: 'c', text: 'Personal entscheiden lassen' },
|
|
],
|
|
richtig: 'c',
|
|
erklaerung: 'Das Personal / der Betreiber entscheidet über das Hausrecht. Gut wäre es, selbst Kompromissbereitschaft zu zeigen und den Hund etwas wegzurücken — das deeskaliert und signalisiert Rücksicht.',
|
|
},
|
|
{
|
|
id: 'anleine_pflicht',
|
|
frage: 'Im Park gibt es keine Schilder. Muss dein Hund an die Leine?',
|
|
antworten: [
|
|
{ key: 'a', text: 'Nein — kein Schild bedeutet keine Pflicht' },
|
|
{ key: 'b', text: 'Kommt auf die Gemeindeordnung an' },
|
|
{ key: 'c', text: 'Ja — immer Leinenpflicht in öffentlichen Parks' },
|
|
],
|
|
richtig: 'b',
|
|
erklaerung: 'Leinenpflicht ist Ländersache und variiert stark. Viele Bundesländer haben eine allgemeine Anleinpflicht in Ortschaften oder Parks. Im Zweifel Hund anleinen oder Gemeindewebsite prüfen.',
|
|
},
|
|
];
|
|
|
|
// ----------------------------------------------------------
|
|
// INIT
|
|
// ----------------------------------------------------------
|
|
async function init(container, appState) {
|
|
_container = container;
|
|
_appState = appState;
|
|
_render();
|
|
_loadAllVotes();
|
|
}
|
|
|
|
function refresh() {
|
|
// statische Seite — kein Reload nötig
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// HAUPT-RENDER
|
|
// ----------------------------------------------------------
|
|
function _render() {
|
|
_container.innerHTML = `
|
|
<div class="page-container">
|
|
${_renderBegegnungen()}
|
|
${_renderVoting()}
|
|
${_renderKiRat()}
|
|
${_renderHaftpflicht()}
|
|
</div>
|
|
`;
|
|
_bindAccordion();
|
|
_bindVoting();
|
|
_bindKiRat();
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// SECTION 1: BEGEGNUNGEN — Accordion-Karten
|
|
// ----------------------------------------------------------
|
|
function _renderBegegnungen() {
|
|
const cards = BEGEGNUNGEN.map((b, i) => `
|
|
<div class="knigge-accordion" id="acc-${i}">
|
|
<button class="knigge-accordion-head" data-acc="${i}" aria-expanded="false">
|
|
<span>${b.icon} <strong>${_esc(b.titel)}</strong></span>
|
|
<span class="knigge-accordion-arrow">${UI.icon('caret-down')}</span>
|
|
</button>
|
|
<div class="knigge-accordion-body" id="acc-body-${i}" hidden>
|
|
<p style="color:var(--c-text);line-height:1.6">${_esc(b.tipps)}</p>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
return `
|
|
<h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
|
|
${UI.icon('paw-print')} Begegnungen
|
|
</h2>
|
|
<div class="card" style="padding:0;overflow:hidden">
|
|
${cards}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function _bindAccordion() {
|
|
_container.querySelectorAll('.knigge-accordion-head').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const i = btn.dataset.acc;
|
|
const body = document.getElementById(`acc-body-${i}`);
|
|
const arrow = btn.querySelector('.knigge-accordion-arrow');
|
|
const open = !body.hidden;
|
|
body.hidden = open;
|
|
btn.setAttribute('aria-expanded', String(!open));
|
|
arrow.innerHTML = open ? UI.icon('caret-down') : UI.icon('caret-up');
|
|
});
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// SECTION 2: COMMUNITY VOTING
|
|
// ----------------------------------------------------------
|
|
function _renderVoting() {
|
|
const cards = SZENARIEN.map(s => `
|
|
<div class="card mb-4" id="sz-${s.id}">
|
|
<p style="font-weight:var(--weight-semibold);margin:0;padding:var(--space-5) var(--space-5) var(--space-3);line-height:1.5">
|
|
${_esc(s.frage)}
|
|
</p>
|
|
<div class="knigge-vote-options" id="opts-${s.id}" style="padding:0 var(--space-5) var(--space-5)">
|
|
${s.antworten.map(a => `
|
|
<button class="knigge-vote-btn btn btn-secondary"
|
|
data-sz="${s.id}" data-key="${a.key}"
|
|
style="width:100%;margin-bottom:var(--space-2);justify-content:flex-start;text-align:left">
|
|
${_esc(a.text)}
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
<div class="knigge-vote-result hidden" id="res-${s.id}"></div>
|
|
</div>
|
|
`).join('');
|
|
|
|
return `
|
|
<h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
|
|
${UI.icon('star')} Was wäre richtig?
|
|
</h2>
|
|
${cards}
|
|
`;
|
|
}
|
|
|
|
function _bindVoting() {
|
|
_container.querySelectorAll('.knigge-vote-btn').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const szId = btn.dataset.sz;
|
|
const key = btn.dataset.key;
|
|
if (!_appState.user) {
|
|
UI.toast.warning('Bitte melde dich an um abzustimmen.');
|
|
return;
|
|
}
|
|
try {
|
|
const result = await API.knigge.vote(szId, key);
|
|
_voteState[szId] = { counts: result.counts, user_answer: result.user_answer };
|
|
_renderVoteResult(szId);
|
|
} catch (err) {
|
|
UI.toast.error(err.message || 'Fehler beim Abstimmen.');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async function _loadAllVotes() {
|
|
for (const s of SZENARIEN) {
|
|
try {
|
|
const result = await API.knigge.votes(s.id);
|
|
_voteState[s.id] = { counts: result.counts, user_answer: result.user_answer };
|
|
if (result.user_answer) {
|
|
_renderVoteResult(s.id);
|
|
}
|
|
} catch {
|
|
// ignorieren — Votes werden on-demand geladen
|
|
}
|
|
}
|
|
}
|
|
|
|
function _renderVoteResult(szId) {
|
|
const szenario = SZENARIEN.find(s => s.id === szId);
|
|
if (!szenario) return;
|
|
const state = _voteState[szId];
|
|
if (!state) return;
|
|
|
|
const optsEl = document.getElementById(`opts-${szId}`);
|
|
const resEl = document.getElementById(`res-${szId}`);
|
|
if (!optsEl || !resEl) return;
|
|
|
|
// Optionen ausblenden
|
|
optsEl.classList.add('hidden');
|
|
resEl.classList.remove('hidden');
|
|
|
|
const counts = state.counts || {};
|
|
const userAnswer = state.user_answer;
|
|
const total = Object.values(counts).reduce((s, c) => s + c, 0) || 1;
|
|
const isCorrect = userAnswer === szenario.richtig;
|
|
|
|
const bars = szenario.antworten.map(a => {
|
|
const cnt = counts[a.key] || 0;
|
|
const pct = Math.round((cnt / total) * 100);
|
|
const isU = a.key === userAnswer;
|
|
const isR = a.key === szenario.richtig;
|
|
const color = isR
|
|
? 'var(--c-success, #22c55e)'
|
|
: (isU && !isR ? 'var(--c-danger, #ef4444)' : 'var(--c-border)');
|
|
return `
|
|
<div class="mb-3">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:var(--text-sm)">
|
|
<span style="color:${isU ? 'var(--c-text)' : 'var(--c-text-secondary)'};font-weight:${isU ? 'var(--weight-semibold)' : 'normal'}">
|
|
${isU ? UI.icon('arrow-right') + ' ' : ''}${_esc(a.text)}${isR ? ' ' + UI.icon('check') : ''}
|
|
</span>
|
|
<span class="text-secondary">${pct}% (${cnt})</span>
|
|
</div>
|
|
<div style="background:var(--c-surface-2);border-radius:4px;height:8px;overflow:hidden">
|
|
<div style="width:${pct}%;background:${color};height:8px;border-radius:4px;transition:width 0.4s"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
const badge = isCorrect
|
|
? `<span style="color:var(--c-success);font-weight:var(--weight-semibold)">${UI.icon('check')} Richtig!</span>`
|
|
: `<span style="color:var(--c-danger);font-weight:var(--weight-semibold)">${UI.icon('x')} Nicht ganz — </span>`;
|
|
|
|
resEl.innerHTML = `
|
|
<div style="margin-bottom:var(--space-4);padding:0 var(--space-5)">${bars}</div>
|
|
<div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);line-height:1.5">
|
|
${badge}
|
|
<span class="text-secondary">${_esc(szenario.erklaerung)}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// SECTION 3: KI-SITUATIONSBERATER
|
|
// ----------------------------------------------------------
|
|
function _renderKiRat() {
|
|
return `
|
|
<h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
|
|
${UI.icon('robot')} KI-Situationsberater
|
|
</h2>
|
|
<div class="card">
|
|
<div style="padding:var(--space-5)">
|
|
<textarea id="ki-situation-input" class="form-control"
|
|
rows="3"
|
|
placeholder="Beschreibe deine Situation…"
|
|
class="mb-3"></textarea>
|
|
<button class="btn btn-primary" id="ki-rat-btn" class="w-full">
|
|
Rat holen ${UI.icon('robot')}
|
|
</button>
|
|
<div id="ki-rat-result" style="margin-top:var(--space-4);display:none"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function _bindKiRat() {
|
|
const btn = _container.querySelector('#ki-rat-btn');
|
|
const input = _container.querySelector('#ki-situation-input');
|
|
const result = _container.querySelector('#ki-rat-result');
|
|
|
|
btn?.addEventListener('click', async () => {
|
|
const situation = input?.value?.trim();
|
|
if (!situation) {
|
|
UI.toast.warning('Bitte beschreibe zuerst deine Situation.');
|
|
return;
|
|
}
|
|
if (!_appState.user) {
|
|
UI.toast.warning('Bitte melde dich an um den KI-Rat zu nutzen.');
|
|
return;
|
|
}
|
|
|
|
UI.setLoading(btn, true);
|
|
result.style.display = 'none';
|
|
|
|
try {
|
|
const data = await API.knigge.kiRat(situation);
|
|
result.innerHTML = `
|
|
<div style="background:var(--c-surface-2);border-radius:var(--radius-md);
|
|
padding:var(--space-4);line-height:1.6;color:var(--c-text)">
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
|
color:var(--c-text-secondary);margin-bottom:var(--space-2)">${UI.icon('robot')} KI-Rat</div>
|
|
${_esc(data.rat)}
|
|
</div>
|
|
`;
|
|
result.style.display = 'block';
|
|
} catch (err) {
|
|
const is402 = err.status === 402 || err.status === 503;
|
|
result.innerHTML = `
|
|
<div style="background:var(--c-surface-2);border-radius:var(--radius-md);
|
|
padding:var(--space-4);color:var(--c-text-secondary);font-size:var(--text-sm)">
|
|
${is402
|
|
? 'Für KI-Rat wird Ban Yaro Plus oder ein laufender KI-Server benötigt.'
|
|
: _esc(err.message || 'Fehler beim KI-Abruf.')}
|
|
</div>
|
|
`;
|
|
result.style.display = 'block';
|
|
} finally {
|
|
UI.setLoading(btn, false);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// SECTION 4: HAFTPFLICHT-HINWEISE
|
|
// ----------------------------------------------------------
|
|
function _renderHaftpflicht() {
|
|
return `
|
|
<h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
|
|
${UI.icon('shield')} Haftpflicht-Hinweise
|
|
</h2>
|
|
<div class="card" style="margin-bottom:var(--space-8)">
|
|
<div style="padding:var(--space-5)">
|
|
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)">
|
|
<li style="display:flex;gap:var(--space-3);align-items:flex-start">
|
|
<span style="font-size:1.2rem;flex-shrink:0">${UI.icon('scales')}</span>
|
|
<span style="color:var(--c-text);line-height:1.5">
|
|
Hundehalter haften unbegrenzt für Schäden die ihr Hund verursacht
|
|
(§ 833 BGB) — auch ohne Verschulden.
|
|
</span>
|
|
</li>
|
|
<li style="display:flex;gap:var(--space-3);align-items:flex-start">
|
|
<span style="font-size:1.2rem;flex-shrink:0">${UI.icon('map-trifold')}</span>
|
|
<span style="color:var(--c-text);line-height:1.5">
|
|
Eine Hundehaftpflichtversicherung ist in einigen Bundesländern
|
|
(Bayern, Hamburg, Berlin u.a.) Pflicht.
|
|
</span>
|
|
</li>
|
|
<li style="display:flex;gap:var(--space-3);align-items:flex-start">
|
|
<span style="font-size:1.2rem;flex-shrink:0">${UI.icon('info')}</span>
|
|
<span style="color:var(--c-text);line-height:1.5">
|
|
Empfehlung: Absicherung ab ~50 €/Jahr.
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
<p style="margin-top:var(--space-4);font-size:var(--text-xs);color:var(--c-text-muted)">
|
|
Dies ist keine Rechtsberatung.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// HELPER
|
|
// ----------------------------------------------------------
|
|
function _esc(str) {
|
|
if (!str) return '';
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// PUBLIC
|
|
// ----------------------------------------------------------
|
|
return { init, refresh };
|
|
|
|
})();
|