/* ============================================================ BAN YARO — Übungsbibliothek Seiten-Modul: Grundkommandos, Tricks, Problemverhalten, Grundlagen. ============================================================ */ window.Page_uebungen = (() => { let _container = null; let _appState = null; let _activeTab = 'grundkommandos'; // ---------------------------------------------------------- // API HELPERS // ---------------------------------------------------------- function _dogId() { return _appState?.activeDog?.id || null; } async function _apiPost(url, body) { const r = await fetch(url, { method: 'POST', credentials: 'include', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body) }); return r.ok ? r.json() : null; } async function _apiGet(url) { const r = await fetch(url, {credentials: 'include'}); return r.ok ? r.json() : null; } // ---------------------------------------------------------- // STATS STATE // ---------------------------------------------------------- let _helpHandle = null; // Rückgabe von UI.pageInfo — für inline Trigger-Button let _statsData = null; // cached stats from /api/training/stats let _badgesData = null; // cached badges from /api/achievements let _exercisesByTab = {}; // aus API geladen let _exercisesLoaded = false; let _scrollTarget = null; // { exercise_id, name } — nach _renderContent() scrollen let _searchQuery = ''; // aktuelle Sucheingabe // ---------------------------------------------------------- // DATEN // ---------------------------------------------------------- const TABS = [ { id: 'grundkommandos', label: 'Grundkommandos' }, { id: 'tricks', label: 'Tricks' }, { id: 'problemverhalten', label: 'Problemverhalten' }, { id: 'mentale-auslastung', label: 'Mentale Auslastung' }, { id: 'hundesport', label: 'Hundesport' }, { id: 'koerperpflege', label: 'Körperpflege' }, { id: 'welpe-basics', label: 'Welpe Basics' }, { id: 'grundlagen', label: 'Trainingsgrundlagen' }, { id: 'ki-trainer', label: 'KI-Trainer' }, { id: 'verlauf', label: 'Protokoll' }, ]; // ---------------------------------------------------------- // ÜBUNGS-STATUS // ---------------------------------------------------------- const STATUS = [ { id: null, icon: 'flag', color: 'var(--c-border)', label: 'Noch nicht geübt' }, { id: 'noch-nicht', icon: 'x', color: 'var(--c-danger)', label: 'Klappt noch nicht' }, { id: 'manchmal', icon: 'fire', color: '#f59e0b', label: 'Manchmal klappt es' }, { id: 'meistens', icon: 'star', color: '#eab308', label: 'Meistens klappt es' }, { id: 'sitzt', icon: 'trophy', color: 'var(--c-primary)', label: 'Sitzt!' }, ]; function _statusKey(tab, name) { return `ub_status_${tab}_${name.replace(/\s+/g, '_')}`; } // In-memory cache (loaded from API on init) let _progressCache = {}; // key → statusId let _progressLoaded = false; let _exerciseStats = {}; // exercise_id → {recent_avg, session_count, trend} function _progressKey(tab, name) { return `${tab}_${name.replace(/[\s/]+/g, '_')}`; } function _getStatus(tab, name) { const k = _progressKey(tab, name); return _progressCache[k] ?? null; } function _setStatus(tab, name, statusId) { const k = _progressKey(tab, name); _progressCache[k] = statusId; API.training.setProgress(k, statusId, _dogId()).catch(() => {}); } function _nextStatus(currentId) { const idx = STATUS.findIndex(s => s.id === currentId); const next = (idx + 1) % STATUS.length; return STATUS[next].id; } function _statusMeta(statusId) { return STATUS.find(s => s.id === statusId) || STATUS[0]; } const DIFF_META = { 'Anfänger': { label: 'Anfänger', color: 'var(--c-success)' }, 'Fortgeschrittener Anfänger': { label: 'Fortgeschr. Anfänger', color: '#eab308' }, 'Mittel': { label: 'Mittel', color: 'var(--c-primary)' }, 'Anfänger bis Fortgeschrittener': { label: 'Anfänger–Fortgeschr.', color: '#eab308' }, }; const GRUNDKOMMANDOS = [ { name: 'Sitz', schwierigkeit: 'Anfänger', alter: 'Ab 8 Wochen', dauer: '3–5 Minuten', material: 'Leckerlis, ruhige Umgebung', beschreibung: 'Der Hund setzt sich auf ein Signal hin. Das ist meist das erste Kommando und bildet die Basis für viele weitere Übungen.', schritte: [ 'Halte ein Leckerli knapp vor die Nase deines Hundes.', 'Führe das Leckerli langsam nach oben und leicht nach hinten über seinen Kopf.', 'Der Hund folgt mit der Nase — sein Hinterteil senkt sich automatisch.', 'Sobald er sitzt: sofort Markerwort ("Ja!" oder Klicker) + Leckerli.', 'Wiederhole 5–10x, bevor du das Wort "Sitz" hinzufügst.', 'Ab Wiederholung 10: Sage "Sitz" kurz bevor du die Handbewegung machst.', ], fehler: [ 'Leckerli zu hoch halten → Hund springt hoch statt zu sitzen', 'Kommando zu früh einführen → Hund lernt das Wort bevor er die Bewegung kennt', 'Zu lange Einheiten → Hund wird unkonzentriert', ], steigerung: 'Sitz mit Ablenkung → Sitz aus Bewegung → Sitz auf Distanz', }, { name: 'Platz', schwierigkeit: 'Anfänger', alter: 'Ab 10 Wochen', dauer: '3–5 Minuten', material: 'Leckerlis, ruhige Umgebung', beschreibung: 'Der Hund legt sich auf ein Signal hin. Wichtig für Ruhephasen, Wartesituationen und als Basis für "Bleib".', schritte: [ 'Beginne mit dem Hund im Sitz.', 'Halte ein Leckerli vor seine Nase und führe es langsam senkrecht nach unten zwischen seine Vorderpfoten.', 'Der Hund folgt mit der Nase und legt sich ab.', 'Sobald Ellenbogen und Hinterteil den Boden berühren: Markerwort + Leckerli.', 'Klappt es nicht: Leckerli unter ein angewinkeltes Knie halten — der Hund kriecht darunter durch und legt sich dabei ab.', 'Wort "Platz" erst nach 10–15 erfolgreichen Wiederholungen einführen.', ], fehler: [ 'Hund steht auf statt sich hinzulegen → Leckerli-Führung zu weit weg', 'Hund liegt nur kurz → zu früh belohnen, Dauer schrittweise aufbauen', ], steigerung: 'Platz mit Dauer → Platz mit Distanz → Platz bei Ablenkung', }, { name: 'Bleib', schwierigkeit: 'Anfänger bis Fortgeschrittener', alter: 'Ab 12 Wochen', dauer: '5 Minuten', material: 'Leckerlis, Geduld', beschreibung: 'Der Hund hält eine Position (Sitz oder Platz) bis er freigegeben wird. Drei Dimensionen: Dauer, Distanz, Ablenkung — immer nur eine auf einmal steigern.', schritte: [ 'Hund ins Sitz oder Platz bringen.', 'Einen Moment warten (2 Sekunden) → Markerwort + Leckerli.', 'Freigabewort einführen: "Okay" oder "Frei" — danach darf der Hund aufstehen.', 'Dauer schrittweise erhöhen: 2 → 5 → 10 → 30 Sekunden.', 'Erst wenn Dauer stabil ist: einen kleinen Schritt zurücktreten.', 'Zurückkehren zum Hund, belohnen — nicht den Hund zu dir kommen lassen.', ], fehler: [ 'Zu schnell Distanz aufbauen → Hund bricht ab', 'Hund wird zur Person gelobt statt an Ort → Hund kommt herangelaufen', 'Freigabewort vergessen → Hund weiß nicht wann er aufstehen darf', ], steigerung: 'Bleib 1 Min → Bleib mit Sichtkontaktverlust → Bleib bei Ablenkung (Ball rollen, andere Person)', }, { name: 'Hier / Komm', schwierigkeit: 'Anfänger', alter: 'Ab 8 Wochen', dauer: '5 Minuten', material: 'Leckerlis oder Spielzeug, Schleppleine empfohlen', beschreibung: 'Der Hund kommt zuverlässig zurück wenn er gerufen wird. Eines der wichtigsten Kommandos — im Zweifel lebensrettend.', schritte: [ 'Beginne in der Wohnung auf kurze Distanz (2–3 Meter).', 'Knie dich hin, öffne die Arme, freudige Stimme: "Hier!" oder "Komm!"', 'Sobald der Hund ankommt: große Freude, Leckerli, Streicheln.', 'Niemals rufen und dann etwas Unangenehmes tun (Bad, Krallen schneiden).', 'Im Garten: Schleppleine verwenden — Hund kann nicht wegbleiben, Erfolg ist garantiert.', 'Ruf nur einmal — wer mehrfach ruft trainiert den Hund aufs Ignorieren.', ], fehler: [ 'Hund rufen wenn er sicher nicht kommt → schlechte Gewohnheit', 'Hund bestrafen nach dem Kommen → nächstes Mal kommt er nicht', 'Monotone Stimme → Hund motiviert sich nicht', ], steigerung: 'Kurze Distanz innen → Garten mit Schleppleine → Park mit wenig Ablenkung → Freilauf', }, { name: 'Fuß', schwierigkeit: 'Fortgeschrittener Anfänger', alter: 'Ab 12 Wochen', dauer: '5–10 Minuten', material: 'Leckerlis, Leine', beschreibung: 'Der Hund läuft ruhig an der Leine neben dir, ohne zu ziehen. Die Leine hängt locker durch.', schritte: [ 'Hund an deine linke Seite stellen (klassisch), Leckerli in der linken Hand.', 'Einen Schritt vorwärts gehen, Leckerli auf Höhe deiner linken Hüfte halten.', 'Hund folgt dem Leckerli → Markerwort + belohnen.', 'Schrittweise mehr Schritte, immer wieder belohnen wenn Leine locker ist.', 'Zieht der Hund: stehen bleiben oder Richtung wechseln — nie mitziehen lassen.', 'Wort "Fuß" einführen sobald der Hund die Position versteht.', ], fehler: [ 'Leine straff halten → Hund lernt Zug als Normalzustand', 'Zu selten belohnen am Anfang → Hund verliert Interesse an der Position', 'Zu lange Einheiten → Überforderung', ], steigerung: 'Fuß in der Wohnung → ruhige Straße → belebte Umgebung → ohne Leckerli in der Hand', }, { name: 'Aus / Lass es', schwierigkeit: 'Anfänger', alter: 'Ab 10 Wochen', dauer: '3–5 Minuten', material: 'Leckerlis, Spielzeug oder Gegenstand', beschreibung: 'Der Hund lässt einen Gegenstand auf Kommando los. Wichtig für Sicherheit (Gefährliches fallen lassen) und Spielsituationen.', schritte: [ 'Gib dem Hund ein Spielzeug oder lass ihn etwas halten.', 'Halte ein Leckerli vor seine Nase — er lässt den Gegenstand fallen.', 'Sofort Markerwort + Leckerli geben.', 'Gegenstand kurz aufheben, dann wieder zurückgeben → Hund lernt: Loslassen lohnt sich.', 'Wort "Aus" kurz vor dem Leckerli-Zeigen einführen.', ], fehler: [ 'Gegenstand wegziehen → Hund lernt festhalten', 'Immer wegnehmen nach "Aus" → Hund gibt nicht mehr freiwillig her', ], steigerung: 'Spielzeug → Leckerli auf dem Boden → Gegenstand unterwegs → hochwertige Beute', }, { name: 'Warte', schwierigkeit: 'Anfänger', alter: 'Ab 10 Wochen', dauer: '3–5 Minuten', material: 'Leckerlis, Türschwelle oder Futterschüssel', beschreibung: 'Der Hund wartet kurz in einer Situation bis er freigegeben wird — z.B. vor der Tür, vor dem Futter, beim Aussteigen aus dem Auto.', schritte: [ 'Stelle die Futterschüssel auf den Boden — Hund stürmt drauf zu.', 'Schüssel mit der Hand abdecken oder hochhalten.', 'Sobald der Hund zurückweicht oder sitzt: Schüssel freigeben + "Okay".', 'Alternativ: an der Türschwelle — Tür öffnen, Hund wartet bis "Okay".', 'Wort "Warte" einführen sobald das Verhalten klar ist.', ], fehler: [ 'Hund wird nie freigegeben → verliert Vertrauen ins System', 'Zu lange warten lassen am Anfang → Frustration', ], steigerung: null, }, ]; const TRICKS = [ { name: 'Pfote / Schütteln', schwierigkeit: 'Anfänger', alter: 'Ab 12 Wochen', dauer: '3 Minuten', material: 'Leckerlis', beschreibung: null, schritte: [ 'Hund ins Sitz bringen.', 'Leckerli in der Faust verstecken, Faust auf Kniehöhe halten.', 'Hund schnuppert, kratzt irgendwann mit der Pfote an der Faust.', 'Sofort öffnen: Markerwort + Leckerli.', 'Wort "Pfote" einführen sobald die Bewegung zuverlässig kommt.', 'Auf flache offene Hand umstellen → Hund legt Pfote rein.', ], fehler: [], steigerung: null, }, { name: 'Dreh / Runde', schwierigkeit: 'Anfänger', alter: 'Ab 12 Wochen', dauer: '3–5 Minuten', material: 'Leckerlis', beschreibung: null, schritte: [ 'Leckerli vor die Nase des Hundes halten.', 'Langsam einen Kreis in der Luft führen — der Hund folgt mit der Nase.', 'Volle Drehung → Markerwort + Leckerli.', 'Wort "Dreh" (links) und "Runde" (rechts) einführen.', 'Handbewegung schrittweise kleiner machen.', ], fehler: [], steigerung: null, }, { name: 'Platz auf Decke / Matte', schwierigkeit: 'Fortgeschrittener Anfänger', alter: 'Ab 4 Monate', dauer: '5–10 Minuten', material: 'Leckerlis, Decke oder Matte', beschreibung: 'Der Hund geht selbstständig auf seine Decke und legt sich. Ideal für Besuche, Restaurant, ruhige Phasen.', schritte: [ 'Decke auf den Boden legen. Hund beschnuppert sie → Leckerli auf die Decke werfen.', 'Jedes Mal wenn der Hund die Decke betritt: Markerwort + Leckerli.', 'Warten bis der Hund sich spontan auf die Decke legt → große Belohnung.', '"Platz" zeigen sobald er auf der Decke steht.', 'Decke schrittweise weiter wegstellen.', 'Wort "Decke" oder "Platz geh" einführen.', ], fehler: [], steigerung: null, }, { name: 'Suchspiel / Nasenarbeit', schwierigkeit: 'Anfänger', alter: 'Ab 8 Wochen', dauer: '5–10 Minuten', material: 'Leckerlis, optional Döschen', beschreibung: 'Nasenarbeit ist mentale Auslastung — 10 Minuten Suchen ermüdet mehr als 1 Stunde Spaziergang.', schritte: [ 'Leckerli vor den Augen des Hundes unter einem Becher verstecken.', 'Hund darf suchen → findet er es: Markerwort + Leckerli.', 'Steigerung: mehrere Becher, Hund muss den richtigen finden.', 'Später: Leckerlis im Gras verstecken → "Such!"', 'Noch später: Spielzeug oder Schlüssel suchen lassen.', ], fehler: [], steigerung: null, }, ]; const PROBLEMVERHALTEN = [ { name: 'Nicht springen / Begrüßung', schwierigkeit: 'Anfänger', alter: 'Ab 8 Wochen', dauer: 'Bei jeder Begrüßung', material: 'Konsequenz aller Haushaltsmitglieder', beschreibung: 'Der Hund begrüßt Menschen mit allen vier Pfoten auf dem Boden.', schritte: [ 'Springt der Hund hoch: keine Reaktion (kein "Nein", kein Wegdrücken, kein Augenkontakt).', 'Sobald alle vier Pfoten unten sind: sofort Markerwort + Leckerli + Aufmerksamkeit.', 'Konsequenz ist entscheidend — alle im Haushalt müssen gleich reagieren.', 'Alternative: Hund ins Sitz schicken bei Begrüßung → dann begrüßen.', ], fehler: [], steigerung: null, }, { name: 'Alleine bleiben', schwierigkeit: 'Mittel', alter: 'Ab 10 Wochen', dauer: 'Mehrmals täglich kurze Einheiten', material: 'Geduld, Zeit, Kong oder Kauartikel', beschreibung: 'Der Hund bleibt ruhig wenn er allein ist — ohne Stress, Bellen oder Zerstören.', schritte: [ 'Hund beschäftigen (Kong mit Futter gefüllt, Kauartikel).', 'Zimmer verlassen für 10 Sekunden → zurückkommen, ruhig begrüßen.', 'Zeit schrittweise erhöhen: 30 Sek → 2 Min → 5 Min → 15 Min.', 'Nie dramatisch verabschieden oder begrüßen — Kommen und Gehen normalisieren.', 'Hund nicht bestrafen wenn er etwas angestellt hat — er versteht den Zusammenhang nicht mehr.', ], fehler: [], steigerung: null, hinweis: 'Welpen sollten nie länger als 1–2 Stunden allein gelassen werden. Erwachsene Hunde maximal 4–6 Stunden.', }, { name: 'Leinenführigkeit — Nicht ziehen', schwierigkeit: 'Mittel', alter: 'Ab 12 Wochen', dauer: 'Jeder Spaziergang', material: 'Leine, Leckerlis, Geduld', beschreibung: null, schritte: [ 'Beginne den Spaziergang ruhig — aufgeregte Starts fördern das Ziehen.', 'Zieht der Hund: stehen bleiben. Warten bis Leine locker ist.', 'Oder: Richtung wechseln sobald die Leine straff wird.', 'Locker Leine = Bewegung vorwärts + gelegentlich Leckerli.', 'Kein Ruck an der Leine — Hund lernt dadurch nicht.', ], fehler: [], steigerung: null, hinweis: 'Hilfsmittel bei hartnäckigem Ziehen: Brustgeschirr mit vorderer Befestigung (kein Würge- oder Stachelband).', }, { name: 'Bellen / Kläffen', schwierigkeit: 'Mittel', alter: 'Ab 8 Wochen', dauer: '5–10 Min täglich, konsequent', material: 'Leckerlis, Geduld, Konsequenz', beschreibung: 'Der Hund bellt nicht übermäßig auf Reize wie Klingel, Passanten oder andere Hunde — und beruhigt sich auf ein Signal hin.', schritte: [ 'Ursache kennen: Alarm-Bellen (Schutzinstinkt), Frust-Bellen (Leine, Zaun), Aufmerksamkeits-Bellen oder Angst-Bellen haben unterschiedliche Lösungswege.', 'Aufmerksamkeits-Bellen nie belohnen — auch nicht durch Zuwendung, Schimpfen oder Anfassen.', 'Signal „Ruhig" einführen: warten bis der Hund kurz pausiert, sofort markieren + belohnen.', 'Klingel / Türgeräusche: Reiz kontrolliert einüben (selbst klingeln), Hund ins Körbchen schicken und dort belohnen.', 'Bellt der Hund draußen auf Reize: Blickkontakt unterbrechen, Hund wegführen, Ablenkung mit Leckerli erst wenn er ruhig ist.', 'Ruhiges Verhalten konsequent belohnen — Hund lernt: Stille bringt Aufmerksamkeit, Bellen bringt nichts.', ], fehler: [ 'Schreien oder „Aus!"-Rufen während des Bellens — der Hund interpretiert es als Mitmachen.', 'Leckerli geben während der Hund noch bellt — das belohnt das Bellen.', 'Strafe: führt zu Angst, nicht zu weniger Bellen.', ], steigerung: 'Reiz gezielt aufbauen (z.B. Klingel-Ton am Handy), erst in ruhiger Umgebung üben, dann mit echten Auslösern.', hinweis: 'Anhaltend starkes Bellen kann auf Angst oder unerfüllte Bedürfnisse (Bewegung, Beschäftigung) hinweisen. Im Zweifel Verhaltensberater hinzuziehen.', }, { name: 'Enttriggern / Desensibilisierung', schwierigkeit: 'Fortgeschrittener Anfänger', alter: 'Ab 12 Wochen', dauer: '5–15 Min, mehrmals wöchentlich', material: 'Hochwertige Leckerlis, Geduld, Distanz', beschreibung: 'Der Hund bleibt unter einem Reiz (Hund, Mensch, Geräusch, Fahrrad…) entspannt — kein Bellen, kein Zerren, keine Überreaktion.', schritte: [ 'Trigger identifizieren: Was genau löst die Reaktion aus? Ab welcher Distanz beginnt sie?', 'Schwellenabstand ermitteln: Die Entfernung, bei der der Hund den Reiz wahrnimmt aber noch nicht überreagiert — dort arbeiten.', 'Reiz zeigen → sofort hochwertiges Leckerli geben, bevor der Hund reagiert (Gegenkonditionierung: Reiz = super Sache).', 'Distanz ganz langsam verringern, nur wenn der Hund auf der aktuellen Stufe entspannt bleibt.', 'Reagiert der Hund doch: ruhig mehr Abstand schaffen, keine Strafe — er war schlicht zu nah.', 'Ziel: Hund schaut Trigger an und dreht sich dann entspannt zu dir um (Blickwechsel als Zeichen von Entspannung).', ], fehler: [ 'Zu schnell zu nah — der Hund gerät über die Reizschwelle und übt die Überreaktion ein.', 'Hund zwingen den Trigger anzuschauen oder ihm entgegenzugehen.', 'Training abbrechen wenn Hund bereits reagiert — lieber Abstand nehmen und neu ansetzen.', ], steigerung: 'Erst mit einem einzelnen, vorhersehbaren Reiz üben. Dann wechselnde Reize, engere Distanz, schließlich Bewegung des Triggers.', hinweis: 'Bei starker Reaktivität oder Aggression unbedingt mit einem zertifizierten Verhaltenstherapeuten (IAABC, BHV) zusammenarbeiten.', }, ]; // ---------------------------------------------------------- // INIT // ---------------------------------------------------------- // DB-Kategorien → Tab-IDs const _KAT_TO_TAB = { 'grundkommando': 'grundkommandos', 'grundkommandos': 'grundkommandos', 'trick': 'tricks', 'tricks': 'tricks', 'problemverhalten': 'problemverhalten', 'mentale auslastung': 'mentale-auslastung', 'mentale-auslastung': 'mentale-auslastung', 'hundesport': 'hundesport', 'körperpflege': 'koerperpflege', 'koerperpflege': 'koerperpflege', 'welpe basics': 'welpe-basics', 'welpe-basics': 'welpe-basics', 'grundlagen': 'grundlagen', 'ki-trainer': 'ki-trainer', }; const _VALID_TABS = new Set(TABS.map(t => t.id)); async function init(container, appState, params = {}) { _container = container; _appState = appState; // Tab aus exercise_id (JS-Format) oder kategorie ableiten const exId = params.exercise_id || ''; if (exId) { for (const [, tabId] of Object.entries(_KAT_TO_TAB)) { if (exId.startsWith(tabId + '_') && _VALID_TABS.has(tabId)) { _activeTab = tabId; break; } } } else if (params.kategorie) { const mapped = _KAT_TO_TAB[params.kategorie.toLowerCase()] || params.kategorie; if (_VALID_TABS.has(mapped)) _activeTab = mapped; } _render(); _helpHandle = UI.pageInfo(_container, { pageId: 'uebungen', defaultClosed: true, title: 'Übungsbibliothek', icon: 'graduation-cap', intro: 'Hier findest du alle Übungen für deinen Hund — von Grundkommandos bis zu Tricks und Problemverhalten. Du kannst deinen Trainingsfortschritt für jede Übung festhalten.', steps: [ { icon: 'list-checks', title: 'Stand erfassen', text: 'Klicke auf "Stand erfassen" um schnell für alle Übungen einzutragen, was euer aktueller Stand ist.' }, { icon: 'flag', title: 'Übung üben', text: 'Tippe auf eine Übung, um die Anleitung zu lesen. Mit den Fortschritts-Icons (Flagge → Trophäe) trackst du, wie weit ihr seid.' }, { icon: 'star', title: 'KI-Trainer', text: 'Im Tab "KI-Trainer" analysiert unsere KI deinen Trainingsstand und gibt personalisierte Empfehlungen.' }, ], tip: 'Regelmäßiges Training stärkt die Bindung — auch 5 Minuten täglich machen einen großen Unterschied!', }); // Übungen aus DB laden (parallel mit Progress) if (!_exercisesLoaded) { API.get('/training/exercises').then(data => { _exercisesByTab = data || {}; _exercisesLoaded = true; _renderContent(); // neu rendern sobald Daten da }).catch(() => {}); } if (params.exercise_id || params.name) { _scrollTarget = { exercise_id: params.exercise_id || '', name: params.name || '' }; } // Progress vom Server laden (hund-spezifisch) const _did = _dogId(); _progressLoaded = false; API.training.getProgress(_did) .then(rows => { _progressCache = {}; rows.forEach(r => { _progressCache[r.exercise_id] = r.status; }); _progressLoaded = true; _renderContent(); }).catch(() => { _progressLoaded = true; _renderContent(); }); // Empfehlungen laden API.training.getSuggestions(_did).then(suggestions => { if (suggestions.length) _showSuggestions(suggestions); }).catch(() => {}); // Stats + Badges laden _loadStatsAndBadges(); // Virtueller Trainer laden _loadVirtualTrainer(); } async function _loadStatsAndBadges() { const dogId = _dogId(); if (!dogId) return; const [stats, achievements] = await Promise.all([ _apiGet(`/api/training/stats?dog_id=${dogId}`), _apiGet('/api/achievements'), ]); _statsData = stats; _badgesData = achievements; _renderStatsBanner(); } function refresh() { if (!_VALID_TABS.has(_activeTab)) _activeTab = 'grundkommandos'; _renderContent(); } function onDogChange() { _statsData = null; _badgesData = null; _progressCache = {}; _progressLoaded = false; _exerciseStats = {}; _verlaufSessions = []; _verlaufOffset = 0; _verlaufLoading = false; _verlaufView = 'datum'; _render(); _loadStatsAndBadges(); _loadVirtualTrainer(); } // ---------------------------------------------------------- // HAUPT-RENDER // ---------------------------------------------------------- function _render() { _container.innerHTML = `
${UI.dogChip(_appState)}
${_renderTabs()}
`; UI.bindDogChip(_container, _appState); _container.querySelector('#ueb-quicksetup-btn').addEventListener('click', _openQuickSetupModal); _container.querySelector('#ueb-tabs')?.style.setProperty('--ueb-tab-cols', Math.ceil(TABS.length / 2)); _container.querySelector('#ueb-search')?.addEventListener('input', e => { _searchQuery = e.target.value.trim().toLowerCase(); const tabs = _container.querySelector('#ueb-tabs'); if (tabs) tabs.style.display = _searchQuery ? 'none' : ''; _renderContent(); }); _bindTabs(); if (_progressLoaded) { _renderContent(); } else { const el = _container.querySelector('#ueb-content'); if (el) el.innerHTML = `
`; } _renderStatsBanner(); } // ---------------------------------------------------------- // STATS BANNER // ---------------------------------------------------------- function _renderStatsBanner() { const el = _container && _container.querySelector('#ueb-stats-banner'); if (!el) return; if (!_statsData || !_statsData.total_sessions) { el.innerHTML = ''; return; } const s = _statsData; const streakHtml = (s.streak_days >= 2) ? `  ·  ${s.streak_days}-Tage-Streak 🔥` : ''; const avgHtml = s.avg_erfolgsquote != null ? `  ·  Ø ${Math.round(s.avg_erfolgsquote)}% Erfolg` : ''; // Training-Badges filtern let badgesHtml = ''; if (_badgesData && Array.isArray(_badgesData.user_badges)) { const trainingBadges = _badgesData.user_badges.filter(b => b.badge_id && b.badge_id.startsWith('training_')); if (trainingBadges.length) { const visible = trainingBadges.slice(0, 3); const rest = trainingBadges.length - visible.length; const pills = visible.map(b => ` ${b.icon || '🏅'} ${UI.escape(b.name || b.badge_id)} `).join(''); const more = rest > 0 ? `+${rest} weitere` : ''; badgesHtml = `
${pills}${more}
`; } } el.innerHTML = `
${s.total_sessions} Einheit${s.total_sessions !== 1 ? 'en' : ''} ${avgHtml}${streakHtml} ${badgesHtml}
`; } // ---------------------------------------------------------- // VIRTUELLER TRAINER // ---------------------------------------------------------- async function _loadVirtualTrainer() { const dogId = _dogId(); const el = _container?.querySelector('#ueb-trainer'); if (!el) return; if (!dogId) { el.innerHTML = ''; return; } el.innerHTML = `
Lade Trainingsplan…
`; const data = await API.training.getRecommendations(dogId).catch(() => null); if (!data) { el.innerHTML = ''; return; } if (data.all_stats) { _exerciseStats = data.all_stats; _renderContent(); } if (!data.recommendations?.length) { el.innerHTML = ''; return; } _renderVirtualTrainer(el, data); } function _renderVirtualTrainer(el, data) { const recs = data.recommendations; const TYPE_CFG = { 'üben': { label: 'Üben', bg: 'rgba(234,88,12,0.10)', border: 'rgba(234,88,12,0.30)', text: '#fb923c', icon: 'fire' }, 'festigen': { label: 'Festigen', bg: 'rgba(22,163,74,0.10)', border: 'rgba(22,163,74,0.30)', text: '#4ade80', icon: 'star' }, 'entdecken': { label: 'Auffrischen',bg: 'var(--c-primary-subtle)', border: 'var(--c-primary-light)', text: 'var(--c-primary)', icon: 'clock' }, 'levelup': { label: 'Nächster Level', bg: 'rgba(234,179,8,0.10)', border: 'rgba(234,179,8,0.30)', text: '#facc15', icon: 'graduation-cap' }, }; const _phSm = n => ``; const TREND_ICON = { improving: _phSm('trend-up'), declining: _phSm('trend-down'), stable: _phSm('arrow-right'), new: _phSm('star') }; const TREND_COLOR = { improving: 'var(--c-success,#16a34a)', declining: '#dc2626', stable: 'var(--c-text-secondary)', new: 'var(--c-primary)' }; const cards = recs.map((r, i) => { const cfg = TYPE_CFG[r.type] || TYPE_CFG['üben']; const trend = TREND_ICON[r.trend] || ''; const trendColor = TREND_COLOR[r.trend] || 'var(--c-text-secondary)'; const prognose = r.prognose_sessions ? `
Prognose: ~${r.prognose_sessions} Einheiten bis 80%
` : ''; return `
${cfg.label}
${UI.escape(r.exercise_name)}
${UI.escape(r.reason)}
${r.suggested_reps}× empfohlen ${trend} ${prognose}
`; }); el.innerHTML = `
Dein Plan für heute
${cards.join('')}
`; if (_helpHandle) { document.getElementById('ueb-help-anchor')?.appendChild(_helpHandle.makeTriggerBtn()); } el.querySelectorAll('.ueb-trainer-btn').forEach(btn => { btn.addEventListener('click', () => { const tab = btn.dataset.tab; const name = btn.dataset.name; const reps = parseInt(btn.dataset.reps, 10) || 5; // Tab wechseln falls nötig if (tab && tab !== _activeTab) { _activeTab = tab; _container.querySelectorAll('#ueb-tabs .by-tab').forEach(b => b.classList.toggle('active', b.dataset.tab === tab) ); _renderContent(); } _openLogModal(tab, name, reps); }); }); } // ---------------------------------------------------------- // SCHNELL-SETUP: Stand aller Übungen erfassen // ---------------------------------------------------------- async function _openQuickSetupModal() { // Sicherstellen dass Progress geladen ist bevor das Modal öffnet if (!_progressLoaded) { const did = _dogId(); try { const rows = await API.training.getProgress(did); _progressCache = {}; rows.forEach(r => { _progressCache[r.exercise_id] = r.status; }); _progressLoaded = true; _renderContent(); } catch { _progressLoaded = true; } } const ALL = [ { group: 'Grundkommandos', tab: 'grundkommandos', items: GRUNDKOMMANDOS }, { group: 'Tricks', tab: 'tricks', items: TRICKS }, { group: 'Problemverhalten', tab: 'problemverhalten', items: PROBLEMVERHALTEN }, ]; const STATUS_QUICK = [ { id: null, label: '—', color: 'var(--c-text-secondary)', bg: 'var(--c-surface-2)' }, { id: 'noch-nicht',label: 'Nein', color: '#dc2626', bg: 'rgba(220,38,38,0.10)' }, { id: 'manchmal', label: 'Manchmal', color: '#c2410c', bg: 'rgba(234,88,12,0.10)' }, { id: 'meistens', label: 'Meistens', color: '#ca8a04', bg: 'rgba(234,179,8,0.10)' }, { id: 'sitzt', label: 'Sitzt ✓', color: '#15803d', bg: 'rgba(22,163,74,0.10)' }, ]; const overlay = document.createElement('div'); overlay.style.cssText = 'position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.5)'; const rows = ALL.flatMap(g => g.items.map(u => ({ tab: g.tab, name: u.name, group: g.group }))); let pending = {}; // key → statusId (nur geänderte) overlay.innerHTML = `
Stand erfassen
Tippe auf den aktuellen Stand deines Hundes — wird sofort im Profil sichtbar.
${ALL.map(g => `
${UI.escape(g.group)}
${g.items.map(u => { const key = _progressKey(g.tab, u.name); const cur = _getStatus(g.tab, u.name); return `
${UI.escape(u.name)}
${STATUS_QUICK.map(s => ` `).join('')}
`; }).join('')} `).join('')}
`; document.body.appendChild(overlay); // Button-Interaktion overlay.addEventListener('click', e => { const btn = e.target.closest('.qs-btn'); if (!btn) return; const key = btn.dataset.key; const val = btn.dataset.val || null; pending[key] = val; // Aktiven Button in dieser Zeile highlighten const row = overlay.querySelector(`[data-key="${CSS.escape(key)}"]`); row?.querySelectorAll('.qs-btn').forEach(b => { const s = STATUS_QUICK.find(s => (s.id ?? '') === (b.dataset.val)); const active = b.dataset.val === (val ?? ''); b.style.background = active ? s.bg : 'var(--c-surface-2)'; b.style.color = active ? s.color : 'var(--c-text-secondary)'; b.style.border = `1px solid ${active ? s.color + '66' : 'var(--c-border)'}`; }); }); overlay.querySelector('#qs-cancel').addEventListener('click', () => overlay.remove()); overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); }); overlay.querySelector('#qs-save').addEventListener('click', async () => { if (!Object.keys(pending).length) { overlay.remove(); return; } const saveBtn = overlay.querySelector('#qs-save'); saveBtn.disabled = true; saveBtn.textContent = 'Speichern…'; // Alle geänderten Status speichern const parts = Object.entries(pending).map(([key, val]) => { _progressCache[key] = val || null; return API.training.setProgress(key, val || null, _dogId()); }); await Promise.allSettled(parts); overlay.remove(); _renderContent(); UI.toast.success('Stand gespeichert!'); }); } function _renderTabs() { return `
${TABS.map(t => ` `).join('')}
`; } function _showSuggestions(suggestions) { const el = _container.querySelector('#ueb-suggestions'); if (!el || !suggestions.length) return; const COLORS = { help: { bg: 'rgba(220,38,38,0.08)', border: 'rgba(220,38,38,0.25)', text: '#f87171' }, boost: { bg: 'rgba(234,88,12,0.08)', border: 'rgba(234,88,12,0.25)', text: '#fb923c' }, next: { bg: 'rgba(22,163,74,0.08)', border: 'rgba(22,163,74,0.25)', text: '#4ade80' }, start: { bg: 'var(--c-primary-subtle)', border: 'var(--c-primary-light)', text: 'var(--c-primary)' }, }; el.innerHTML = suggestions.map(s => { const c = COLORS[s.type] || COLORS.start; return `
${UI.escape(s.title)}
${UI.escape(s.text)}
`; }).join(''); el.querySelectorAll('.ueb-suggestion-card').forEach(card => { card.addEventListener('click', () => { const tab = card.dataset.actionTab; if (tab && tab !== _activeTab) { _activeTab = tab; _container.querySelectorAll('#ueb-tabs .by-tab').forEach(b => b.classList.toggle('active', b.dataset.tab === tab) ); _renderContent(); } }); }); } function _bindTabs() { _container.querySelectorAll('#ueb-tabs .by-tab').forEach(btn => { btn.addEventListener('click', () => { _activeTab = btn.dataset.tab; _container.querySelectorAll('#ueb-tabs .by-tab').forEach(b => b.classList.toggle('active', b.dataset.tab === _activeTab) ); _renderContent(); }); }); } function _renderContent() { const el = _container.querySelector('#ueb-content'); if (!el) return; const isExerciseTab = ['grundkommandos','tricks','problemverhalten', 'mentale-auslastung','hundesport','koerperpflege','welpe-basics'].includes(_activeTab); const isVerlauf = _activeTab === 'verlauf'; const showIf = v => v ? '' : 'none'; const quickWrap = _container.querySelector('#ueb-quicksetup-btn')?.parentElement; if (quickWrap) quickWrap.style.display = isExerciseTab ? 'flex' : 'none'; const trainerEl = _container.querySelector('#ueb-trainer'); const suggestEl = _container.querySelector('#ueb-suggestions'); const bannerEl = _container.querySelector('#ueb-stats-banner'); if (trainerEl) trainerEl.style.display = showIf(isExerciseTab); if (suggestEl) suggestEl.style.display = showIf(isExerciseTab); if (bannerEl) bannerEl.style.display = showIf(isExerciseTab); switch (_activeTab) { case 'grundkommandos': case 'tricks': case 'problemverhalten': case 'mentale-auslastung': case 'hundesport': case 'koerperpflege': case 'welpe-basics': { if (_searchQuery) { el.innerHTML = _renderAllResults(); } else { const list = _exercisesByTab[_activeTab] || []; const html = list.length ? _renderUebungsList(list) : ''; el.innerHTML = html ? `
${html}
` : `
${UI.icon('spinner')} Übungen werden geladen…
`; } break; } case 'grundlagen': el.innerHTML = _renderGrundlagen(); break; case 'verlauf': { if (_verlaufSessions.length > 0) { el.innerHTML = `
${_verlaufToggleHtml()}
`; _renderVerlaufList(el.querySelector('#verlauf-list')); } else { el.innerHTML = _renderVerlaufShell(); _loadVerlauf(); } _bindVerlaufToggle(); break; } case 'ki-trainer': if (!App.hasPro(_appState?.user)) { el.innerHTML = `
Ban Yaro Pro
Der KI-Trainer ist ein Pro-Feature.
`; } else { el.innerHTML = _renderKiTrainer(); } break; } _bindAccordions(); _bindStatusButtons(); _bindLogButtons(); _bindNotizButtons(); if (_activeTab === 'ki-trainer') _loadKiTrainerFeedback(); _tryScrollToTarget(); } function _tryScrollToTarget() { if (!_scrollTarget) return; const t = _scrollTarget; requestAnimationFrame(() => { const card = (t.exercise_id ? _container.querySelector('[data-exercise-id="' + CSS.escape(t.exercise_id) + '"]') : null) || _container.querySelector('[data-exercise-name="' + CSS.escape(t.name) + '"]'); if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); _scrollTarget = null; } }); } // ---------------------------------------------------------- // ÜBUNGS-CARDS // ---------------------------------------------------------- function _renderUebungsList(list) { const filtered = _searchQuery ? list.filter(u => u.name.toLowerCase().includes(_searchQuery) || (u.beschreibung || '').toLowerCase().includes(_searchQuery) ) : list; if (!filtered.length) return ''; return filtered.map((u, i) => _renderCard(u, i)).join(''); } function _renderAllResults() { const q = _searchQuery; const allExercises = Object.entries(_exercisesByTab) .filter(([tab]) => !['grundlagen','ki-trainer'].includes(tab)) .flatMap(([, list]) => list) .filter(u => u.name.toLowerCase().includes(q) || (u.beschreibung || '').toLowerCase().includes(q) ); if (!allExercises.length) { return `
${UI.icon('magnifying-glass')} Keine Übungen gefunden für „${UI.escape(q)}"
`; } return `
${allExercises.map((u, i) => `
${UI.escape(u.kategorie)}
${_renderCard(u, i)}
`).join('')}
`; } function _sessionStatsChip(tab, name) { const key = _progressKey(tab, name); const stat = _exerciseStats[key]; if (!stat) return ''; const avg = Math.round(stat.recent_avg); const color = avg >= 75 ? '#15803d' : avg >= 50 ? '#c2410c' : '#dc2626'; const bg = avg >= 75 ? 'rgba(22,163,74,0.10)' : avg >= 50 ? 'rgba(234,88,12,0.10)' : 'rgba(220,38,38,0.10)'; const border = avg >= 75 ? 'rgba(22,163,74,0.30)' : avg >= 50 ? 'rgba(234,88,12,0.30)' : 'rgba(220,38,38,0.30)'; const _phXs = n => ``; const arrow = { improving: _phXs('trend-up'), declining: _phXs('trend-down'), stable: _phXs('arrow-right'), new: '' }[stat.trend] || ''; return ` ${avg}%${arrow} · ${stat.session_count}× `; } function _renderCard(u, i) { const diff = DIFF_META[u.schwierigkeit] || { label: u.schwierigkeit, color: 'var(--c-text-secondary)' }; const uid = `ueb-acc-${_activeTab}-${i}`; const currentId = _getStatus(_activeTab, u.name); const sm = _statusMeta(currentId); const hasBody = (u.schritte?.length > 0) || (u.fehler?.length > 0) || !!u.steigerung || !!u.tipp; return `
${UI.escape(u.name)} ${UI.escape(diff.label)}
${_sessionStatsChip(_activeTab, u.name)}
${UI.escape(u.dauer)} ${UI.escape(u.alter)} ${UI.escape(u.material)}
${u.beschreibung ? `

${UI.escape(u.beschreibung)}

` : ''} ${u.hinweis ? `
${UI.escape(u.hinweis)}
` : ''}
${hasBody ? ` ` : ''}
`; } function _bindStatusButtons() { _container.querySelectorAll('.ueb-status-btn').forEach(btn => { btn.addEventListener('click', e => { e.stopPropagation(); const tab = btn.dataset.tab; const name = btn.dataset.name; const cur = _getStatus(tab, name); const next = _nextStatus(cur); _setStatus(tab, name, next); if (next === 'sitzt') UI.toast.success(`🏆 „${name}" sitzt! Gut gemacht!`); // Update button in place (no full re-render) const sm = _statusMeta(next); btn.title = sm.label; btn.style.color = sm.color; btn.innerHTML = ` ${next ? `${UI.escape(sm.label)}` : ''} `; }); }); } // ---------------------------------------------------------- // LOG SESSION MODAL // ---------------------------------------------------------- function _bindLogButtons() { _container.querySelectorAll('.ueb-log-btn').forEach(btn => { btn.addEventListener('click', e => { e.stopPropagation(); _openLogModal(btn.dataset.tab, btn.dataset.name); }); }); } function _bindNotizButtons() { _container.querySelectorAll('.ueb-notiz-btn').forEach(btn => { btn.addEventListener('click', e => { e.stopPropagation(); const exerciseId = `${btn.dataset.tab}_${btn.dataset.name.replace(/[\s/]+/g, '_')}`; _openNotizModal(exerciseId, btn.dataset.name, btn); }); }); } async function _openNotizModal(exerciseId, exerciseName, triggerBtn) { const modalId = 'ueb-notiz-modal'; document.getElementById(modalId)?.remove(); // Lade bestehende Notiz let existingNote = null; if (_appState?.user) { try { const notes = await API.notes.get('training_session', exerciseId.length > 0 ? exerciseId : 0); if (notes && notes.length > 0) existingNote = notes[0]; } catch (_) {} } const overlay = document.createElement('div'); overlay.id = modalId; overlay.style.cssText = ` position:fixed;inset:0;z-index:9999; display:flex;align-items:flex-end;justify-content:center; background:rgba(0,0,0,0.45); `; const noteText = existingNote?.text || ''; const meta = existingNote?.meta_json || {}; const currentErfolgsquote = meta.erfolgsquote || null; const currentUmgebung = meta.umgebung || null; const currentStimmung = meta.hund_stimmung || null; overlay.innerHTML = `

Notiz: ${UI.escape(exerciseName)}

${[1,2,3,4,5].map(n => ` `).join('')}
${[['🏠','zuhause'],['🌿','natur'],['🌆','stadt']].map(([emoji, val]) => ` `).join('')}
${[['😊','super'],['😐','ok'],['😔','mude']].map(([emoji, val]) => ` `).join('')}
${existingNote ? ` ` : ''}
`; document.body.appendChild(overlay); // State let selectedErfolgsquote = currentErfolgsquote; let selectedUmgebung = currentUmgebung; let selectedStimmung = currentStimmung; // Pfoten-Buttons overlay.querySelectorAll('.ueb-notiz-pfote').forEach(btn => { btn.addEventListener('click', () => { const val = parseInt(btn.dataset.val, 10); selectedErfolgsquote = selectedErfolgsquote === val ? null : val; overlay.querySelectorAll('.ueb-notiz-pfote').forEach(b => { const active = parseInt(b.dataset.val, 10) === selectedErfolgsquote; b.style.background = active ? 'var(--c-primary-subtle)' : 'var(--c-surface-2)'; b.style.borderColor = active ? 'var(--c-primary)' : 'var(--c-border)'; }); }); }); // Umgebung-Buttons overlay.querySelectorAll('.ueb-notiz-umgebung').forEach(btn => { btn.addEventListener('click', () => { selectedUmgebung = selectedUmgebung === btn.dataset.val ? null : btn.dataset.val; overlay.querySelectorAll('.ueb-notiz-umgebung').forEach(b => { const active = b.dataset.val === selectedUmgebung; b.style.background = active ? 'var(--c-primary-subtle)' : 'var(--c-surface-2)'; b.style.borderColor = active ? 'var(--c-primary)' : 'var(--c-border)'; }); }); }); // Stimmung-Buttons overlay.querySelectorAll('.ueb-notiz-stimmung').forEach(btn => { btn.addEventListener('click', () => { selectedStimmung = selectedStimmung === btn.dataset.val ? null : btn.dataset.val; overlay.querySelectorAll('.ueb-notiz-stimmung').forEach(b => { const active = b.dataset.val === selectedStimmung; b.style.background = active ? 'var(--c-primary-subtle)' : 'var(--c-surface-2)'; b.style.borderColor = active ? 'var(--c-primary)' : 'var(--c-border)'; }); }); }); function _closeNotizModal() { overlay.remove(); } overlay.addEventListener('click', e => { if (e.target === overlay) _closeNotizModal(); }); overlay.querySelector('#ueb-notiz-cancel').addEventListener('click', _closeNotizModal); // Speichern overlay.querySelector('#ueb-notiz-save').addEventListener('click', async () => { const text = overlay.querySelector('#ueb-notiz-text').value.trim(); if (!text) { UI.toast.warning('Bitte gib eine Notiz ein.'); return; } const saveBtn = overlay.querySelector('#ueb-notiz-save'); saveBtn.disabled = true; saveBtn.textContent = 'Speichern…'; const meta = {}; if (selectedErfolgsquote) meta.erfolgsquote = selectedErfolgsquote; if (selectedUmgebung) meta.umgebung = selectedUmgebung; if (selectedStimmung) meta.hund_stimmung = selectedStimmung; const payload = { text, meta_json: Object.keys(meta).length > 0 ? meta : null, }; try { if (existingNote) { await API.notes.update(existingNote.id, payload); } else { await API.notes.create('training_session', exerciseId, payload); } _closeNotizModal(); UI.toast.success('Notiz gespeichert.'); // Notiz-Button leicht hervorheben if (triggerBtn) { triggerBtn.style.borderColor = 'var(--c-primary)'; triggerBtn.style.color = 'var(--c-primary)'; } } catch (err) { saveBtn.disabled = false; saveBtn.textContent = existingNote ? 'Aktualisieren' : 'Speichern'; UI.toast.error('Speichern fehlgeschlagen.'); } }); // Löschen overlay.querySelector('#ueb-notiz-delete')?.addEventListener('click', async () => { if (!existingNote) return; try { await API.notes.delete(existingNote.id); _closeNotizModal(); UI.toast.success('Notiz gelöscht.'); if (triggerBtn) { triggerBtn.style.borderColor = ''; triggerBtn.style.color = ''; } } catch (_) { UI.toast.error('Löschen fehlgeschlagen.'); } }); } function _openLogModal(tab, exerciseName, initialReps) { // Build the modal HTML const modalId = 'ueb-log-modal'; const formId = 'ueb-log-form'; // Remove existing if present document.getElementById(modalId)?.remove(); const overlay = document.createElement('div'); overlay.id = modalId; overlay.style.cssText = ` position:fixed;inset:0;z-index:9999; display:flex;align-items:flex-end;justify-content:center; background:rgba(0,0,0,0.45); `; overlay.innerHTML = `

Einheit loggen: ${UI.escape(exerciseName)}

5
${[['😓','0'],['😐','25'],['🙂','50'],['😊','75'],['🎉','100']].map(([emoji, val]) => ` `).join('')}
${[['🎯','aufmerksam'],['😴','müde'],['🌪️','abgelenkt'],['⚡','super']].map(([emoji, val]) => ` `).join('')}
${[1,2,3,4,5].map(n => ` `).join('')}
`; document.body.appendChild(overlay); // State let wiederholungen = initialReps || 5; let erfolgsquote = null; // must be selected let stimmung = null; let zufriedenheit = null; // Close helpers function _closeModal() { overlay.remove(); } overlay.addEventListener('click', e => { if (e.target === overlay) _closeModal(); }); overlay.querySelector('#ueb-log-cancel').addEventListener('click', _closeModal); // Stepper const repVal = overlay.querySelector('#ueb-rep-val'); repVal.textContent = wiederholungen; overlay.querySelector('#ueb-rep-minus').addEventListener('click', () => { if (wiederholungen > 1) { wiederholungen--; repVal.textContent = wiederholungen; } }); overlay.querySelector('#ueb-rep-plus').addEventListener('click', () => { wiederholungen++; repVal.textContent = wiederholungen; }); // Erfolg-Buttons overlay.querySelectorAll('.ueb-erfolg-btn').forEach(btn => { btn.addEventListener('click', () => { erfolgsquote = parseInt(btn.dataset.val, 10); overlay.querySelectorAll('.ueb-erfolg-btn').forEach(b => { b.style.background = 'var(--c-surface-2)'; b.style.borderColor = 'var(--c-border)'; b.style.transform = ''; }); btn.style.background = 'var(--c-primary-subtle)'; btn.style.borderColor = 'var(--c-primary)'; btn.style.transform = 'scale(1.15)'; }); }); // Stimmung-Buttons overlay.querySelectorAll('.ueb-stimmung-btn').forEach(btn => { btn.addEventListener('click', () => { stimmung = btn.dataset.val; overlay.querySelectorAll('.ueb-stimmung-btn').forEach(b => { b.style.background = 'var(--c-surface-2)'; b.style.borderColor = 'var(--c-border)'; }); btn.style.background = 'var(--c-primary-subtle)'; btn.style.borderColor = 'var(--c-primary)'; }); }); // Stern-Buttons overlay.querySelectorAll('.ueb-stern-btn').forEach(btn => { btn.addEventListener('click', () => { zufriedenheit = parseInt(btn.dataset.val, 10); overlay.querySelectorAll('.ueb-stern-btn').forEach(b => { b.style.opacity = parseInt(b.dataset.val, 10) <= zufriedenheit ? '1' : '0.35'; }); }); }); // Save overlay.querySelector('#ueb-log-save').addEventListener('click', async () => { const dogId = _dogId(); if (!dogId) { UI.toast.warning('Kein Hund ausgewählt.'); return; } if (erfolgsquote === null) { UI.toast.warning('Bitte wähle aus, wie es gelaufen ist.'); return; } const saveBtn = overlay.querySelector('#ueb-log-save'); saveBtn.disabled = true; saveBtn.textContent = 'Speichern…'; const exerciseId = `${tab}_${exerciseName.replace(/[\s/]+/g, '_')}`; const today = new Date().toISOString().slice(0, 10); const body = { dog_id: dogId, exercise_id: exerciseId, exercise_name: exerciseName, datum: today, wiederholungen: wiederholungen, erfolgsquote: erfolgsquote, hund_stimmung: stimmung || null, zufriedenheit: zufriedenheit || null, notiz: overlay.querySelector('#ueb-log-notiz').value.trim() || null, }; try { const resp = await _apiPost('/api/training/sessions', body); _closeModal(); if (!resp) { UI.toast.error('Speichern fehlgeschlagen.'); return; } // Streak aktualisieren — fire-and-forget, Toast bei neuem Streak-Rekord API.post(`/streak/${body.dog_id}/ping`).then(streak => { if (!streak) return; if (streak.current_streak > 1 && streak.current_streak === streak.longest_streak) { setTimeout(() => UI.toast.success(`🔥 Neuer Rekord! ${streak.current_streak} Tage in Folge trainiert!`), 1500); } else if (streak.current_streak > 1) { setTimeout(() => UI.toast.info(`🔥 Streak: ${streak.current_streak} Tage in Folge!`), 1500); } }).catch(() => {}); if (resp.ist_top) { UI.toast.success('🎉 Top-Training! Das war eine eurer besten Einheiten.'); } else { UI.toast.success('Einheit gespeichert!'); } if (resp.badges && resp.badges.length) { resp.badges.forEach((badge, idx) => { setTimeout(() => { UI.toast.success(`🏅 Neues Abzeichen: "${badge.name || badge}"!`); }, 1000 * (idx + 1)); }); } // Stats-Banner + Trainer aktualisieren _statsData = null; _loadStatsAndBadges(); _loadVirtualTrainer(); } catch (err) { saveBtn.disabled = false; saveBtn.textContent = 'Einheit speichern'; UI.toast.error('Speichern fehlgeschlagen.'); } }); } // ---------------------------------------------------------- // KI-TRAINER (neu: hundebasiertes Feedback) // ---------------------------------------------------------- function _renderKiTrainer() { const dogId = _dogId(); if (!dogId) { return `

Wähle einen Hund aus um den KI-Trainer zu nutzen.

`; } return `
KI-Trainer
Personalisiertes Feedback basierend auf deinen Trainingseinheiten

Lade KI-Feedback…

KI-Tipps ersetzen keinen professionellen Hundetrainer.

`; } async function _loadKiTrainerFeedback(forceRefresh) { const loading = _container.querySelector('#ki-loading'); const noSessions = _container.querySelector('#ki-no-sessions'); const feedbackCard = _container.querySelector('#ki-feedback-card'); const feedbackText = _container.querySelector('#ki-feedback-text'); const feedbackMeta = _container.querySelector('#ki-feedback-meta'); const regenBtn = _container.querySelector('#ki-regenerate'); if (!loading) return; // not on ki-trainer tab const dogId = _dogId(); if (!dogId) return; // Show loading loading.hidden = false; noSessions.hidden = true; feedbackCard.hidden = true; // Check if there are any sessions const stats = _statsData || await _apiGet(`/api/training/stats?dog_id=${dogId}`); if (!stats || !stats.total_sessions) { loading.hidden = true; noSessions.hidden = false; return; } try { const resp = await _apiPost('/api/training/ki-feedback', { dog_id: dogId }); loading.hidden = true; if (!resp || !resp.feedback) { noSessions.hidden = false; return; } feedbackText.textContent = resp.feedback; const cachedInfo = resp.cached ? 'Gespeichertes Feedback' : 'Gerade generiert'; const sessionInfo = stats.total_sessions ? ` · ${stats.total_sessions} Einheit${stats.total_sessions !== 1 ? 'en' : ''}` : ''; const limitInfo = (resp.daily_limit && !resp.cached) ? ` · ${resp.daily_used}/${resp.daily_limit} heute` : ''; feedbackMeta.textContent = `${cachedInfo}${sessionInfo}${limitInfo}`; if (regenBtn) { const limitReached = resp.daily_used >= resp.daily_limit && !resp.cached; regenBtn.textContent = resp.cached ? 'Neu generieren' : 'Aktualisieren'; regenBtn.style.opacity = (resp.cached && !limitReached) ? '0.6' : '1'; regenBtn.disabled = limitReached; if (limitReached) regenBtn.title = `Tages-Limit erreicht (${resp.daily_limit}/Tag)`; } feedbackCard.hidden = false; } catch (err) { loading.hidden = true; if (err?.status === 429 || (err?.message || '').includes('429')) { feedbackMeta.textContent = `Tages-Limit erreicht (${10}/Tag) — morgen wieder verfügbar.`; feedbackCard.hidden = false; } else { noSessions.hidden = false; } } // Bind regenerate button if (regenBtn) { regenBtn.addEventListener('click', async () => { regenBtn.disabled = true; regenBtn.textContent = 'Generiere…'; loading.hidden = false; feedbackCard.hidden = true; await _loadKiTrainerFeedback(true); regenBtn.disabled = false; }, { once: true }); } } function _bindAccordions() { _container.querySelectorAll('.ueb-acc-btn').forEach(btn => { btn.addEventListener('click', () => { const id = btn.dataset.acc; const body = document.getElementById(id); const chevron = _container.querySelector(`.ueb-chevron[data-acc="${id}"]`); if (!body) return; const isOpen = !body.hidden; body.hidden = isOpen; if (chevron) chevron.style.transform = isOpen ? '' : 'rotate(180deg)'; btn.querySelector('span').textContent = isOpen ? 'Anleitung anzeigen' : 'Anleitung ausblenden'; }); }); } // ---------------------------------------------------------- // TRAININGSPROTOKOLL (Verlauf-Tab) // ---------------------------------------------------------- let _verlaufSessions = []; let _verlaufOffset = 0; let _verlaufHasMore = false; let _verlaufLoading = false; let _verlaufView = 'datum'; // 'datum' | 'uebung' const _VERLAUF_LIMIT = 30; const _ERFOLG_EMOJI = { 0: '😓', 25: '😐', 50: '🙂', 75: '😊', 100: '🎉' }; const _STIMMUNG_EMOJI = { aufmerksam: '🎯', müde: '😴', abgelenkt: '🌪️', super: '⚡' }; function _renderVerlaufShell() { const dogId = _dogId(); if (!dogId) { return `

Wähle einen Hund aus um das Protokoll zu sehen.

`; } return `
${_verlaufToggleHtml()}
`; } function _verlaufToggleHtml() { const btnBase = `padding:var(--space-2) var(--space-3);border-radius:var(--radius-md); font-size:var(--text-xs);font-weight:var(--weight-semibold);cursor:pointer; border:1px solid var(--c-border);transition:all .15s`; const active = `background:var(--c-primary);color:#fff;border-color:var(--c-primary)`; const inactive = `background:var(--c-surface-2);color:var(--c-text-secondary)`; return `
`; } async function _loadVerlauf(append = false) { if (_verlaufLoading) return; const dogId = _dogId(); if (!dogId) return; if (!append) { _verlaufSessions = []; _verlaufOffset = 0; } _verlaufLoading = true; const data = await _apiGet( `/api/training/sessions?dog_id=${dogId}&limit=${_VERLAUF_LIMIT + 1}&offset=${_verlaufOffset}` ).catch(() => null); _verlaufLoading = false; // Element nach await neu holen — könnte durch Re-Render veraltet sein const el = _container?.querySelector('#verlauf-list'); if (!el) return; if (!data) { if (!append) el.innerHTML = `
Fehler beim Laden.
`; return; } _verlaufHasMore = data.length > _VERLAUF_LIMIT; const rows = data.slice(0, _VERLAUF_LIMIT); _verlaufSessions = append ? [..._verlaufSessions, ...rows] : rows; _verlaufOffset += rows.length; _renderVerlaufList(el); } function _bindVerlaufToggle() { const wrap = _container?.querySelector('#verlauf-wrap'); if (!wrap) return; const btnDatum = wrap.querySelector('#verlauf-btn-datum'); const btnUebung = wrap.querySelector('#verlauf-btn-uebung'); const setActive = view => { _verlaufView = view; const active = `var(--c-primary)`; const inBg = `var(--c-surface-2)`; btnDatum.style.background = view === 'datum' ? active : inBg; btnDatum.style.color = view === 'datum' ? '#fff' : 'var(--c-text-secondary)'; btnDatum.style.borderColor = view === 'datum' ? active : 'var(--c-border)'; btnUebung.style.background = view === 'uebung' ? active : inBg; btnUebung.style.color = view === 'uebung' ? '#fff' : 'var(--c-text-secondary)'; btnUebung.style.borderColor = view === 'uebung' ? active : 'var(--c-border)'; const listEl = wrap.querySelector('#verlauf-list'); if (listEl) _renderVerlaufList(listEl); }; btnDatum?.addEventListener('click', () => setActive('datum')); btnUebung?.addEventListener('click', () => setActive('uebung')); } function _renderVerlaufList(el) { if (!_verlaufSessions.length) { el.innerHTML = `

Noch keine Trainingseinheiten geloggt.

Tippe in einer Übung auf "+ Einheit" um zu starten.

`; return; } if (_verlaufView === 'uebung') { _renderVerlaufByUebung(el); } else { _renderVerlaufByDatum(el); } } function _sessionRow(s) { const erfolg = _ERFOLG_EMOJI[s.erfolgsquote] || '🙂'; const stimmung = s.hund_stimmung ? (_STIMMUNG_EMOJI[s.hund_stimmung] || '') : ''; const topBadge = s.ist_top ? `TOP` : ''; const noteHtml = s.notiz ? `
${UI.escape(s.notiz)}
` : ''; return `
${erfolg}
${UI.escape(s.exercise_name)} ${topBadge}
${s.wiederholungen}× Wdh.${stimmung ? ' · ' + stimmung : ''}${s.zufriedenheit ? ' · ' + '⭐'.repeat(s.zufriedenheit) : ''}
${noteHtml}
`; } function _renderVerlaufByDatum(el) { const today = new Date().toISOString().slice(0, 10); const yesterday = new Date(Date.now() - 86400000).toISOString().slice(0, 10); const groups = {}; _verlaufSessions.forEach(s => { groups[s.datum] = groups[s.datum] || []; groups[s.datum].push(s); }); const html = Object.entries(groups).map(([datum, sessions]) => { let label; if (datum === today) label = 'Heute'; else if (datum === yesterday) label = 'Gestern'; else { const d = new Date(datum + 'T00:00:00'); label = d.toLocaleDateString('de-DE', { weekday: 'short', day: 'numeric', month: 'short' }); } return `
${UI.escape(label)}
${sessions.map(_sessionRow).join('')}
`; }).join(''); const moreBtn = _verlaufHasMore ? `` : ''; el.innerHTML = html + moreBtn; el.querySelector('#verlauf-more')?.addEventListener('click', () => _loadVerlauf(true)); } function _renderVerlaufByUebung(el) { // Sessions nach Übungsname gruppieren const groups = {}; _verlaufSessions.forEach(s => { if (!groups[s.exercise_name]) groups[s.exercise_name] = []; groups[s.exercise_name].push(s); }); // Pro Gruppe Stats berechnen const today = new Date().toISOString().slice(0, 10); const exerciseStats = Object.entries(groups).map(([name, sessions]) => { const avg = Math.round(sessions.reduce((a, s) => a + s.erfolgsquote, 0) / sessions.length); const recent = sessions.slice(0, 3); const older = sessions.slice(3, 6); let trend = 'new'; if (older.length) { const rAvg = recent.reduce((a, s) => a + s.erfolgsquote, 0) / recent.length; const oAvg = older.reduce((a, s) => a + s.erfolgsquote, 0) / older.length; trend = rAvg - oAvg > 10 ? 'up' : rAvg - oAvg < -10 ? 'down' : 'stable'; } const lastDate = sessions[0].datum; const daysSince = Math.floor((new Date(today) - new Date(lastDate)) / 86400000); return { name, sessions, avg, trend, lastDate, daysSince, topCount: sessions.filter(s => s.ist_top).length }; }); // Sortieren: zuletzt trainiert zuerst exerciseStats.sort((a, b) => a.daysSince - b.daysSince); const TREND_ICON = { up: '↑', down: '↓', stable: '→', new: '★' }; const TREND_COLOR = { up: '#15803d', down: '#dc2626', stable: 'var(--c-text-secondary)', new: 'var(--c-primary)' }; const cards = exerciseStats.map((ex, i) => { const uid = `vl-ex-${i}`; const barColor = ex.avg >= 75 ? '#15803d' : ex.avg >= 50 ? '#c2410c' : '#dc2626'; const barBg = ex.avg >= 75 ? 'rgba(22,163,74,0.15)' : ex.avg >= 50 ? 'rgba(194,65,12,0.15)' : 'rgba(220,38,38,0.15)'; const lastLabel = ex.daysSince === 0 ? 'Heute' : ex.daysSince === 1 ? 'Gestern' : `vor ${ex.daysSince} Tagen`; const sessionRows = ex.sessions.map(s => { const d = new Date(s.datum + 'T00:00:00'); const dateLabel = d.toLocaleDateString('de-DE', { day: 'numeric', month: 'short' }); const erfolg = _ERFOLG_EMOJI[s.erfolgsquote] || '🙂'; const stimmung = s.hund_stimmung ? (_STIMMUNG_EMOJI[s.hund_stimmung] || '') : ''; const top = s.ist_top ? ' ★' : ''; return `
${UI.escape(dateLabel)} ${erfolg} ${s.erfolgsquote}%${top} ${s.wiederholungen}× Wdh.${stimmung ? ' ' + stimmung : ''}
`; }).join(''); return `
`; }).join(''); const hint = _verlaufHasMore ? `
Zeigt die letzten ${_verlaufSessions.length} Einheiten — ältere nicht berücksichtigt.
` : ''; el.innerHTML = cards + hint; // Akkordeon-Binding el.querySelectorAll('.verlauf-ex-btn').forEach(btn => { btn.addEventListener('click', () => { const uid = btn.dataset.uid; const body = document.getElementById(uid); const chev = el.querySelector(`.verlauf-ex-chevron[data-uid="${uid}"]`); const isOpen = !body.hidden; body.hidden = isOpen; if (chev) chev.style.transform = isOpen ? '' : 'rotate(180deg)'; }); }); } // ---------------------------------------------------------- // TRAININGSGRUNDLAGEN // ---------------------------------------------------------- function _renderGrundlagen() { return `

Das Markerwort

Ein Markerwort (z.B. "Ja!" oder ein Klicker) signalisiert dem Hund den exakten Moment des richtigen Verhaltens. Es überbrückt die Zeit bis das Leckerli in seinem Mund ist.

Wann belohnen?

${[ ['Neue Übung lernen', 'Jede korrekte Wiederholung'], ['Übung bekannt', 'Jede 2.–3. Wiederholung'], ['Übung gefestigt', 'Unregelmäßig (stärkt Motivation)'], ['Ablenkungstraining', 'Wieder häufiger (höhere Anforderung)'], ].map(([p, b], i) => ` `).join('')}
Phase Belohnungshäufigkeit
${UI.escape(p)} ${UI.escape(b)}

Leckerli-Hierarchie

Nicht alle Leckerlis sind gleich. Bei Ablenkung oder schwierigen Übungen brauchst du hochwertigere Belohnungen:

${[ ['Niedrig', 'Trockenfutter, normale Hundekekse', '#22c55e'], ['Mittel', 'Käse, Wurst, Hühnchen (gekocht)', '#eab308'], ['Hoch', 'Leberwurst, Lachs, Pansen (für besondere Momente)', '#ef4444'], ].map(([s, b, c], i) => ` `).join('')}
Stufe Beispiele
${UI.escape(s)} ${UI.escape(b)}

Trainingsregeln auf einen Blick

`; } // ---------------------------------------------------------- // HELPER // ---------------------------------------------------------- // ---------------------------------------------------------- // PUBLIC // ---------------------------------------------------------- return { init, refresh, onDogChange }; })();