Files
dogfather-universe/workspace/assets/js/report.js
T
DogFatherGitandClaude Opus 5 a129525cb7 Kennzahlen werden Wege, Team wird sichtbar, Felder bekommen ein Aussehen
Vier Wuensche vom 01.09.2026, dazu ein gemeldeter Fehler.

SCREEN 1 -- "wenn man auf die Kisten drueckt, sofort zu der Seite,
diesem Punkt". Jede Kennzahl im Bericht fuehrt jetzt dorthin, wo die
gezaehlten Dinge stehen: nicht nur auf die richtige Seite, sondern auf
die richtige Stelle (?zeigen=...). Ein gemeinsamer Helfer in kopf.js,
damit nicht jede Seite ihr eigenes Sprungverhalten erfindet.

  Auf dem Aufgabenbrett wird HERVORGEHOBEN, nicht gefiltert -- das Brett
  lebt davon, dass man die vier Spalten nebeneinander sieht. Bei den
  Dateien wird gefiltert, denn die Seite hat ohnehin eine Filterleiste,
  und deren Knoepfe zeigen dann mit an, wo man steht. Der Kalender
  schaltet auf die Liste um: In der Monatsansicht liesse sich
  "vergangen" gar nicht sinnvoll markieren.

  Immer mit einem Weg zurueck ("Alles zeigen"), der auch den Parameter
  aus der Adresse nimmt. Eine Seite, die gefiltert bleibt, ist eine
  Falle: Man kommt spaeter wieder, sieht drei von zwanzig Aufgaben und
  haelt das fuer den Bestand.

  Drei Entscheidungen gegen den ersten Entwurf:
  * KEIN ?creator= im Verweis. Das sah hilfreich aus und waere eine
    Luege gewesen -- keine Zielseite liest den Wert.
  * Kisten mit Null fuehren NIRGENDWOHIN. Ein Weg zu null Dingen ist
    eine Enttaeuschung, kein Angebot.
  * "neu angelegt" fuehrt ohne Ausschnitt aufs Brett: Der Bericht zaehlt
    einen Zeitraum, das Brett kennt keinen. Eine Hervorhebung, die nicht
    dieselbe Menge trifft, ist schlimmer als keine.

SCREEN 2 -- "ich will, dass wir Manager, Scouts, DogFather auch die
Fotos, Namen und so alles sehen". Der Steckbrief war eine Einbahnstrasse:
Jeder pflegte seinen, niemand bekam ihn je zu Gesicht. Die
Schnittstelle dafuer lag fertig da und wurde von keiner Seite
aufgerufen. Jetzt steht "Das Team" auf steckbrief.html und (fuer
Creator) auf profil.html -- nach Rollen gruppiert, mit Bild, Rolle,
eigenem Satz und Kanaelen. Wer wen sieht, entscheidet weiterhin der
Server; ein Creator sieht seine Betreuung, nicht die anderen Creator.

SCREEN 4 -- "das soll richtig geil aussehen und nicht so einfach, auch
die Schrift". Die Ursache war kein Geschmack, sondern ein Loch im
Aufbau: Jede Seite gestaltete ihre Felder mit einem EIGENEN Selektor,
und wer ein Feld anderswo hinsetzt, faellt durch alle Netze. Genau so
stand "Ein Satz ueber dich" als grauer Kasten in MONOSPACE da --
<textarea> faellt ohne `font: inherit` auf Schreibmaschinenschrift
zurueck. Jetzt gibt es eine Grundlage fuer jedes Feld, und die drei
wortgleichen Kopien in aufgaben/profil/bereich sind weg.

  Der erste Anlauf setzte dort auch `width: 100%` -- die Pruefung
  meldete sofort Felder von 28 statt 362 Pixeln. Breite ist LAYOUT und
  gehoert der Seite; eine Grundlage mit Staerke null verliert jeden
  Breitenstreit, also darf sie ihn nicht anfangen.

SCREEN 5 -- "wieso seh ich mein Bild da nicht?" Ein lehrreicher Fehler:
Der Server liefert das Bild laengst mit, und im Quelltext dort steht
ausdruecklich "es steht in der Kopfleiste JEDER Seite UND IN DER
BEGRUESSUNG". Die Absicht war aufgeschrieben, die Haelfte nie gebaut --
und aufgefallen ist es nicht, weil ein Buchstabe im Kreis nicht falsch
aussieht, nur eben nicht wie man selbst.

PRUEFUNGEN. Zwei neue (pruef-sprung, pruef-team), eine erweiterte
(pruef-formulare). Sie haben vier echte Fehler gefunden, die mit blossem
Auge nicht zu sehen waren:
  * Der Sprung auf "dringend" hob auch ERLEDIGTE dringende Eintraege
    hervor -- man klickt auf "2" und bekommt drei markiert.
  * Auf einer leeren Zielseite erschien gar keine Erklaerung (frueher
    Ausstieg uebersprang sie). Das ist der wichtigere Fall: Wer auf eine
    Zahl klickt und im Leeren landet, glaubt, er sei falsch abgebogen.
  * Das Kachel-Merkzeichen stiess mit der Zahl zusammen.
  * Die Feldpruefung fand vier RICHTIGE Felder falsch (die Kanaele holen
    ihren Rahmen vom Umschlag mit dem "@"). Eine Pruefung, die
    Richtiges anmahnt, gewoehnt man sich ab zu lesen.
Und zwei Faelle, in denen die Pruefung sich selbst belogen haette: null
gefundene Felder galten als "in Ordnung", und der Ueberdeckungsvergleich
war nach einer Aenderung ohne ein einziges Vergleichselement gruen.
Beide zaehlen jetzt mit, wie viel sie tatsaechlich angesehen haben.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-01 20:18:39 +02:00

325 lines
14 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ===================================================================
Reports & Review.
Die Fragen der Abschnitte stammen woertlich aus dem Konzept, Seite 16:
"Was wurde erledigt? Was blockiert? Was hat funktioniert? Was kommt
naechste Woche?"
=================================================================== */
(() => {
'use strict';
/* DogFather und Manager haben dieselben Rechte -- die Unterscheidung
macht nur die Personenverwaltung, und die prueft der Server. */
const LEITUNG = new Set(['admin', 'manager']);
const $ = (id) => document.getElementById(id);
const BEREICHSNAME = {
live: 'LIVE', content: 'Content', technik: 'Technik',
community: 'Community', schutz: 'Schutz',
};
let ich = null;
let kiDa = false;
const el = (tag, klasse, text) => {
const k = document.createElement(tag);
if (klasse) k.className = klasse;
if (text !== undefined) k.textContent = text;
return k;
};
const melde = (t) => { $('fehler').textContent = t || ''; };
const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '—');
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('kein Zugriff'); }
return a;
}
/* Vorher/Nachher. `gut` sagt, ob ein Anstieg erfreulich ist -- bei
offenen Problemen ist er das nicht. */
function trend(jetzt, davor, gut = true) {
const t = el('span', 'trend');
t.dataset.gut = gut ? 'ja' : 'nein';
const diff = jetzt - davor;
if (!davor && !jetzt) { t.dataset.richtung = 'gleich'; t.textContent = '–'; return t; }
if (diff === 0) { t.dataset.richtung = 'gleich'; t.textContent = 'unverändert'; return t; }
t.dataset.richtung = diff > 0 ? 'hoch' : 'runter';
t.textContent = (diff > 0 ? '▲ +' : '▼ ') + diff + ' ggü. davor';
return t;
}
/* BEWUSST OHNE die Creator-Auswahl im Verweis. Der erste Entwurf hängte
?creator=<nr> an -- das sah hilfreich aus und wäre eine Lüge gewesen:
Keine der Zielseiten liest diesen Wert. Aufgabenbrett, Dateien und
Bereiche zeigen immer alles, was die angemeldete Person sehen darf.
Ein Parameter, der nichts bewirkt, wird beim nächsten Mal für
lebenden Code gehalten und mitgepflegt.
Wenn diese Seiten einmal nach Creator filtern können, gehört er
wieder dazu -- dann aber zusammen mit der Stelle, die ihn ausliest. */
/* Eine Kennzahl. `ziel` macht daraus einen Weg zu genau der Stelle,
an der die gezaehlten Dinge stehen (Wunsch 01.09.2026: "wenn man
auf die Kisten drueckt, sofort zu diesem Punkt weitergeschickt
werden").
Eine Zahl ohne Weg dahin ist eine Behauptung: Man kann sie nur
glauben oder von Hand nachsuchen. */
function kachel(zahl, name, { trendEl = null, warn = false, ziel = null } = {}) {
const k = el(ziel ? 'a' : 'div', 'kachel' + (ziel ? ' kachel--weg' : ''));
if (ziel) {
k.href = ziel;
/* Der ganze Satz fuer Vorleseprogramme -- "3" allein sagt nichts,
und ein Verweis ohne erkennbares Ziel ist fuer sie wertlos. */
k.setAttribute('aria-label', `${name}: ${zahl} – ansehen`);
}
if (warn) k.dataset.warn = 'ja';
const wert = el('div', 'kachel__wert');
wert.append(el('span', 'kachel__zahl', String(zahl)));
if (trendEl) wert.append(trendEl);
k.append(wert, el('span', 'kachel__name', name));
return k;
}
/* Wohin fuehrt ein Betreuungsbereich? Drei liegen auf bereich.html,
Content hat eine eigene Seite. Die Zuordnung steht EINMAL hier --
zweimal abgeschrieben waere sie beim naechsten neuen Bereich an
einer der beiden Stellen vergessen. */
const BEREICH_ZIEL = {
live: 'bereich.html?b=live',
community: 'bereich.html?b=community',
technik: 'bereich.html?b=technik',
schutz: 'bereich.html?b=schutz',
content: 'content.html',
};
const bereichZiel = (b, zeigen) => {
const z = BEREICH_ZIEL[b];
if (!z) return null;
return zeigen ? z + (z.includes('?') ? '&' : '?') + 'zeigen=' + zeigen : z;
};
function block(titel, frage, inhalt) {
const b = el('section', 'block');
b.append(el('h2', 'block__titel', titel));
if (frage) b.append(el('p', 'block__frage', frage));
b.append(inhalt);
return b;
}
/* ---------- Bericht zeichnen ------------------------------------------- */
function zeichne(d) {
const ziel = $('bericht');
ziel.textContent = '';
ziel.setAttribute('aria-busy', 'false');
$('unterzeile').textContent =
`${d.creator_name ? d.creator_name + ' · ' : 'Alle Creator · '}`
+ `${datum(d.zeitraum.ab)} bis ${datum(d.zeitraum.bis)}`
+ ` · Vergleich mit den ${d.zeitraum.tage} Tagen davor`;
/* Was wurde erledigt? */
const k1 = el('div', 'kacheln');
k1.append(kachel(d.aufgaben.erledigt, 'Aufgaben erledigt',
{ trendEl: trend(d.aufgaben.erledigt, d.aufgaben.erledigt_davor),
ziel: 'aufgaben.html?zeigen=erledigt' }));
/* "neu angelegt" fuehrt auf das Brett OHNE Ausschnitt: Der Bericht
zaehlt hier einen Zeitraum, das Brett kennt keinen. Ein Sprung auf
"zeigen=angelegt" wuerde etwas hervorheben, das nicht dieselbe
Menge ist -- und eine Hervorhebung, die nicht stimmt, ist
schlimmer als keine. */
k1.append(kachel(d.aufgaben.angelegt, 'neu angelegt',
{ trendEl: trend(d.aufgaben.angelegt, d.aufgaben.angelegt_davor),
ziel: 'aufgaben.html' }));
k1.append(kachel(d.termine.gewesen, 'Termine gewesen',
{ ziel: 'kalender.html?zeigen=vergangen' }));
k1.append(kachel(d.dateien.freigegeben, 'Dateien freigegeben',
{ ziel: 'dateien.html?zeigen=frei' }));
ziel.append(block('Was wurde erledigt?', null, k1));
/* Was blockiert? */
const k2 = el('div', 'kacheln');
k2.append(kachel(d.aufgaben.offen, 'Aufgaben offen',
{ ziel: 'aufgaben.html?zeigen=offen' }));
k2.append(kachel(d.aufgaben.ueberfaellig, 'überfällig',
{ warn: d.aufgaben.ueberfaellig > 0, ziel: 'aufgaben.html?zeigen=ueberfaellig' }));
const dringend = Object.values(d.bereiche).reduce((s, b) => s + b.dringend, 0);
/* Diese Zahl ist eine SUMME ueber alle Bereiche -- es gibt keine
einzelne Seite, auf der genau sie steht. Sie fuehrt deshalb in den
Bereich, in dem die meisten davon liegen, statt blind in die
LIVE-Analyse. Liegt nichts an, fuehrt sie nirgendwohin: ein Weg zu
null Dingen ist eine Enttaeuschung, kein Angebot. */
const meiste = Object.entries(d.bereiche)
.filter(([, w]) => w.dringend > 0)
.sort((a, b) => b[1].dringend - a[1].dringend)[0];
k2.append(kachel(dringend, 'dringende Punkte',
{ warn: dringend > 0, ziel: meiste ? bereichZiel(meiste[0], 'dringend') : null }));
k2.append(kachel(d.dateien.offen_review, 'Dateien im Review',
{ ziel: 'dateien.html?zeigen=review' }));
const b2 = block('Was blockiert?', 'Die drei Aufgaben, die am längsten offen liegen:', k2);
if (d.aufgaben.aeltester.length) {
const liste = el('ul', 'liste-klein');
for (const a of d.aufgaben.aeltester) {
const li = el('li');
li.append(document.createTextNode(a.titel));
li.append(el('span', 'klein',
`offen seit ${datum(a.erstellt)}${a.frist ? ' · Frist ' + datum(a.frist) : ''}`));
liste.append(li);
}
b2.append(liste);
} else {
b2.append(el('p', 'leer-hinweis', 'Nichts offen – sauber.'));
}
ziel.append(b2);
/* Was hat funktioniert? */
const k3 = el('div', 'kacheln');
const jetztS = d.live.jetzt.schnitt;
const davorS = d.live.davor.schnitt;
const kLive = kachel(jetztS === null ? '–' : String(jetztS).replace('.', ','),
`LIVE-Schnitt aus ${d.live.jetzt.anzahl} Bewertung(en)`,
{ ziel: d.live.jetzt.anzahl > 0 ? bereichZiel('live') : null });
if (jetztS !== null && davorS !== null) {
kLive.querySelector('.kachel__wert').append(
trend(Math.round(jetztS * 10), Math.round(davorS * 10)));
}
k3.append(kLive);
for (const [b, w] of Object.entries(d.bereiche)) {
k3.append(kachel(w.neu, BEREICHSNAME[b] + ': neue Einträge',
{ trendEl: trend(w.neu, w.neu_davor), ziel: bereichZiel(b) }));
}
ziel.append(block('Was hat funktioniert?',
'Bewegung in den Betreuungsbereichen im Vergleich zum Zeitraum davor:', k3));
/* Was kommt als Nächstes? */
const k4 = el('div', 'kacheln');
k4.append(kachel(d.termine.kommend, 'Termine stehen an',
{ ziel: 'kalender.html?zeigen=kommend' }));
for (const [b, w] of Object.entries(d.bereiche)) {
if (w.offen) k4.append(kachel(w.offen, BEREICHSNAME[b] + ': offen',
{ warn: w.dringend > 0, ziel: bereichZiel(b, 'offen') }));
}
const b4 = block('Was kommt als Nächstes?', null, k4);
if (d.profil && (d.profil.plan_prio1 || d.profil.plan_prio2 || d.profil.plan_prio3)) {
const liste = el('ul', 'liste-klein');
for (const [i, t] of [d.profil.plan_prio1, d.profil.plan_prio2, d.profil.plan_prio3].entries()) {
if (!t) continue;
const li = el('li');
li.append(document.createTextNode(t));
li.append(el('span', 'klein', `Priorität ${i + 1} aus dem 90-Tage-Plan`));
liste.append(li);
}
b4.append(liste);
}
if (d.profil?.naechster_review) {
b4.append(el('p', 'block__frage', 'Nächster Review-Termin: ' + datum(d.profil.naechster_review)));
}
ziel.append(b4);
$('entscheidung-block').hidden = false;
/* Zahlen in Worte -- erst auf Knopfdruck, nie von selbst. Der
Report ist ohne KI vollstaendig; das hier ist eine Zugabe. */
if (kiDa) {
const reihe = el('div', 'ki-reihe');
reihe.append(window.KI.knopf('In Worte fassen', async () => {
const zahlen = `Zeitraum ${d.zeitraum.tage} Tage`
+ `, ${d.aufgaben.erledigt} Aufgaben erledigt (davor ${d.aufgaben.erledigt_davor})`
+ `, ${d.aufgaben.angelegt} neu angelegt (davor ${d.aufgaben.angelegt_davor})`
+ `, ${d.aufgaben.offen} offen, ${d.aufgaben.ueberfaellig} überfällig`
+ `, ${Object.values(d.bereiche).reduce((s, b) => s + b.dringend, 0)} dringende Punkte`
+ `, LIVE-Schnitt ${d.live.jetzt.schnitt ?? '-'} aus ${d.live.jetzt.anzahl} Bewertungen`
+ `, ${d.termine.gewesen} Termine gewesen, ${d.termine.kommend} stehen an.`;
const r = await window.KI.frage('reporttext', { zahlen });
const alt = reihe.querySelector('.ki-text');
if (alt) alt.remove();
const text = el('p', 'ki-text', r.text);
reihe.append(text);
}));
ziel.append(reihe);
}
}
async function laden() {
melde('');
const creator = $('f-creator').value || 'alle';
const tage = $('f-tage').value;
try {
const a = await hole(`/workspace/api/report?creator=${encodeURIComponent(creator)}&tage=${tage}`);
if (!a.ok) { melde('Report konnte nicht erstellt werden.'); return; }
zeichne(await a.json());
} catch { /* umgeleitet */ }
}
/* ---------- Entscheidung ------------------------------------------------ */
$('entscheidung').addEventListener('submit', async (e) => {
e.preventDefault();
$('e-fehler').textContent = '';
const knopf = $('e-speichern');
knopf.disabled = true;
try {
const a = await hole('/workspace/api/report/entscheidung', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
titel: $('e-titel').value,
frist: $('e-frist').value,
creator_id: $('f-creator').value || null,
}),
});
if (!a.ok) {
$('e-fehler').textContent = (await a.json().catch(() => ({}))).fehler || 'Ging nicht.';
return;
}
$('entscheidung').reset();
$('e-stand').textContent = 'Als Aufgabe angelegt ✓';
setTimeout(() => { $('e-stand').textContent = ''; }, 3200);
await laden();
} catch { /* umgeleitet */ } finally { knopf.disabled = false; }
});
/* ---------- Start -------------------------------------------------------- */
(async () => {
try {
const a = await hole('/workspace/api/ich');
if (!a.ok) { location.assign('/workspace/'); return; }
ich = await a.json();
} catch { return; }
window.werZeigen?.(ich);
kiDa = await window.KI.verfuegbar();
try {
const { creator } = await (await hole('/workspace/api/report/creator')).json();
if (LEITUNG.has(ich.rolle)) {
$('creator-block').hidden = false;
const alle = document.createElement('option');
alle.value = ''; alle.textContent = 'Alle Creator';
$('f-creator').append(alle);
} else if (ich.rolle === 'scout') {
/* Ein Scout waehlt zwischen SEINEN Creator -- "alle" gibt es
fuer ihn nicht, das waere die Gesamtuebersicht. */
if (!creator.length) {
$('unterzeile').textContent =
'Dir ist noch kein Creator zugeteilt. DogFather legt fest, wen du betreust.';
return;
}
$('creator-block').hidden = false;
}
for (const c of creator) {
const o = document.createElement('option');
o.value = String(c.id); o.textContent = c.name;
$('f-creator').append(o);
}
if (ich.rolle === 'creator') $('f-creator').value = String(ich.id);
} catch { return; }
$('f-creator').addEventListener('change', laden);
$('f-tage').addEventListener('change', laden);
await laden();
})();
})();