/* ===================================================================== Wie geht's dir? (15.09.2026) Eine Seite, ein Zweck. Vorher führte die Kachel auf die Entwicklungsseite — also auf Namen und Beobachtungen über andere Menschen, während auf der Kachel „die Antworten sieht nur du" stand. --------------------------------------------------------------------- DREI DINGE, DIE DIESE SEITE ANDERS MACHT ALS EIN FRAGEBOGEN 1. SIE SPEICHERT SOFORT. Kein „Absenden", das man vergessen kann. Jeder Klick steht. Der Knopf am Ende schließt nur die RUNDE ab — er trägt den Stand in den Verlauf ein. 2. SIE FRAGT WIEDER. Nach vierzehn Tagen. Ein Befinden von vor drei Monaten ist keine Auskunft mehr, sondern ein Andenken. 3. SIE ZEIGT DEN VERLAUF. Das Warnzeichen ist nicht ein einzelnes „da hakt es" — das ist ein schlechter Tag. Es ist dieselbe Antwort über mehrere Runden. Sehen kann das nur die Person selbst. ===================================================================== */ (() => { const $ = (id) => document.getElementById(id); const el = (t, k, text) => { const n = document.createElement(t); if (k) n.className = k; if (text !== undefined) n.textContent = text; return n; }; const melde = (t) => { const f = $('fehler'); if (f) { f.textContent = t; f.hidden = !t; } }; async function hole(pfad, optionen = {}) { const a = await fetch(pfad, { credentials: 'same-origin', ...optionen }); if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); } if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); } return a; } let stufen = []; let daten = null; /* ---- Die vier Knöpfe zu einer Frage --------------------------------- */ function knopfsatz(gewaehlt, beiKlick) { const reihe = el('div', 'e-wahl'); for (const s of stufen) { const b = el('button', 'e-wahl__knopf'); b.type = 'button'; b.dataset.stufe = s.schluessel; b.setAttribute('aria-pressed', String(gewaehlt === s.schluessel)); b.append(el('span', 'e-wahl__zeichen', s.zeichen)); b.append(document.createTextNode(s.name)); b.addEventListener('click', () => beiKlick(s.schluessel, b)); reihe.append(b); } return reihe; } /* ---- Der Rhythmus --------------------------------------------------- */ function takt() { const r = daten.rhythmus; const kasten = $('takt'); const satz = $('takt-satz'); const knopf = $('takt-knopf'); kasten.hidden = false; const offen = daten.punkte.filter((p) => !p.meins).length; const alle = daten.punkte.length; if (!r.letzte) { satz.textContent = offen ? `Noch ${offen} von ${alle} Fragen offen. Wenn du durch bist, halte den Stand fest – ` + `dann siehst du beim nächsten Mal, was sich verändert hat.` : 'Alle sechs beantwortet. Halte den Stand fest, dann hast du beim nächsten Mal ' + 'einen Vergleich.'; kasten.dataset.lage = offen ? 'offen' : 'bereit'; } else if (r.faellig) { satz.textContent = `Deine letzte Runde ist ${r.tage} Tage her. ` + (offen ? `Noch ${offen} von ${alle} Fragen offen.` : 'Geh die sechs Fragen noch einmal durch – es dauert zwei Minuten.'); kasten.dataset.lage = 'faellig'; } else { const rest = daten.rhythmus_tage - r.tage; /* „Vor 0 Tagen" ist keine Zeitangabe, sondern eine Rechnung, die man laut vorliest. Drei Faelle, drei Saetze -- derselbe Grund, aus dem die Ampel nebenan drei hat. */ const wann = r.tage === 0 ? 'Heute festgehalten.' : r.tage === 1 ? 'Gestern festgehalten.' : `Zuletzt vor ${r.tage} Tagen festgehalten.`; satz.textContent = `${wann} ` + (rest <= 1 ? 'Morgen fragt die Seite wieder – ' : `In ${rest} Tagen fragt die Seite wieder – `) + `du kannst aber jederzeit etwas ändern.`; kasten.dataset.lage = 'ruhig'; } /* DER KNOPF ERSCHEINT NUR, WENN ER ETWAS TUN KANN. Ein Knopf, der "erst alle sechs beantworten" sagt, ist eine Absage mit Umweg -- der Satz darüber sagt es schon. */ knopf.hidden = offen > 0; } /* ---- Die sechs Fragen ------------------------------------------------ */ function fragen() { const ziel = $('fragen'); ziel.textContent = ''; ziel.setAttribute('aria-busy', 'false'); for (const pt of daten.punkte) { const z = el('article', 'e-punkt e-punkt--meins'); if (pt.meins) z.dataset.stufe = pt.meins.stufe; z.append(el('h3', 'e-punkt__titel', pt.titel)); z.append(el('p', 'e-punkt__text', pt.text)); z.append(knopfsatz(pt.meins?.stufe || null, async (stufe, knopf) => { for (const b of knopf.parentElement.querySelectorAll('.e-wahl__knopf')) { b.setAttribute('aria-pressed', String(b === knopf)); } z.dataset.stufe = stufe; const s = await hole(`/workspace/api/entwicklung/mich/${pt.schluessel}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ stufe }), }); if (!s.ok) { melde('Ging nicht.'); return; } melde(''); /* Den Stand im Kopf mitführen, statt die ganze Seite neu zu holen: Ein Neuaufbau nach jedem Klick würde die Seite unter den Fingern springen lassen. */ pt.meins = { ...(pt.meins || {}), stufe }; takt(); })); ziel.append(z); } } /* ---- Der Verlauf ----------------------------------------------------- */ function verlauf() { const block = $('verlauf-block'); const v = daten.verlauf || []; if (v.length < 2) { /* MIT EINER EINZIGEN RUNDE GIBT ES KEINEN VERLAUF. Eine Spalte allein sähe aus wie ein Muster und wäre keins. */ block.hidden = true; return; } block.hidden = false; $('verlauf-satz').textContent = `Deine letzten ${v.length} Stände. Was zählt, ist nicht ein einzelnes Kreuz – ` + `sondern dieselbe Antwort mehrmals hintereinander.`; const ziel = $('verlauf'); ziel.textContent = ''; /* Älteste links: Ein Verlauf liest sich von links nach rechts. */ const runden = [...v].reverse(); const kopf = el('div', 'b-verlauf__zeile b-verlauf__zeile--kopf'); kopf.append(el('span', 'b-verlauf__frage', '')); for (const r of runden) { const d = new Date(r.runde); kopf.append(el('span', 'b-verlauf__datum', d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' }))); } ziel.append(kopf); const name = {}; for (const s of stufen) name[s.schluessel] = s; for (const pt of daten.punkte) { const zeile = el('div', 'b-verlauf__zeile'); zeile.append(el('span', 'b-verlauf__frage', pt.titel)); for (const r of runden) { const stufe = r.antworten[pt.schluessel] || null; const p = el('span', 'b-verlauf__punkt', stufe ? name[stufe]?.zeichen || '·' : '·'); p.dataset.stufe = stufe || 'leer'; /* DAS ZEICHEN ALLEIN IST NICHT DIE AUSKUNFT -- der Name steht im Titel, damit auch ein Vorleseprogramm ihn ansagt. */ p.title = stufe ? `${pt.titel}: ${name[stufe]?.name || stufe}` : 'keine Antwort'; p.setAttribute('aria-label', p.title); zeile.append(p); } ziel.append(zeile); } } /* ---- Runde abschließen ----------------------------------------------- */ $('takt-knopf')?.addEventListener('click', async (e) => { const k = e.currentTarget; k.disabled = true; try { const a = await hole('/workspace/api/befinden/runde', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' }); const j = await a.json().catch(() => ({})); if (!a.ok) { melde(j.fehler === 'unvollstaendig' ? `Es fehlen noch ${j.offen} von ${j.gesamt} Fragen.` : 'Ging nicht.'); return; } melde('Festgehalten. Beim nächsten Mal siehst du, was sich verändert hat.'); await laden(); } finally { k.disabled = false; } }); async function laden() { const a = await hole('/workspace/api/befinden'); if (!a.ok) { melde('Ging nicht.'); return; } daten = await a.json(); stufen = daten.stufen || []; takt(); fragen(); verlauf(); } (async () => { try { const a = await fetch('/workspace/api/ich', { credentials: 'same-origin' }); if (a.ok) window.werZeigen?.(await a.json()); } catch { /* der Kopf holt es sonst selbst */ } try { await laden(); } catch { /* umgeleitet */ } })(); })();