Files
dogfather-universe/workspace/assets/js/report.js
T
DogFatherGitandClaude Opus 5 ba0e326585 Team-Lage: fuenf Stufen mit eigener Farbe, Karten neu gebaut, 404 wirft nicht mehr hinaus
B7 -- "wenn ich auf diese sachen drücke werd ich auf die startseite
geschickt" und "ich will das es ein zwei kategorien mehr gibt und das
soll geiler aussehen und jede seine eigene farbe, stark erkennbar"

1. DER RAUSWURF. Ein Druck auf einen Stufen-Knopf schickte auf die
   Startseite. Ursache: `hole()` stand ACHTMAL Zeichen fuer Zeichen
   gleich in acht Dateien, und darin warf JEDER 404 hinaus -- auch der
   auf eine blosse Handlung. Jetzt eine gemeinsame `assets/js/holen.js`
   mit der engeren, abgeleiteten Regel: Ein 404 wirft nur, solange die
   Seite noch gar nichts bekommen hat.

2. ZWEI STUFEN MEHR, und keine davon erfunden: "Fortgeschritten" gibt
   es im Entwicklungs-Katalog laengst (ENTWICKLUNG_ERWARTUNG), hier
   fehlte genau diese Mitte; "Vertretung" stand bis heute IN der
   Beschreibung von Senior. Keine Datenbankaenderung noetig -- die
   Spalte ist absichtlich ein TEXT ohne CHECK.

3. DIE FARBEN SIND GERECHNET. Nachgemessen lagen "Probe" und
   "Standard" bei 0,0576 OKLab-Abstand; MINDEST_ABSTAND ist 0,090 --
   die beiden waren nebeneinander dieselbe Farbe, und alle drei lagen
   unter MINDEST_BUNTHEIT. Die neuen fuenf sind ein Faecher aus fuenf
   Farbwinkeln im Abstand von 72 Grad; der Versatz ist der, bei dem der
   kleinste Abstand am groessten wird. Ergebnis: 0,1531 untereinander,
   0,1108 zur Rollenmarke daneben, Kontrast 7,4 bis 8,6.

B8 -- "die sollen viel krasser geiler und übersichtlicher sein ... und
die kacheln sollen viel krass geiler und spezieller aussehen auch der
hintergrund, veränder das komplett"

4. DIE KARTE IST NEU: Kopfband in der Farbe der Stufe bis an die
   Kanten, Zeichen von 44 auf 52 px mit Ring, Zahlenband als eigene
   Flaeche, neuer Hintergrund (Farbschein unter dem Kopfband, feine
   Schraffur, dunklere Platte). 781 px hoch gemessen, danach 746.

5. DIE ROLLE STEHT JETZT DA -- als Marke auf der Karte und als
   Ueberschrift ueber jeder Gruppe. Sortiert war schon vorher nach
   Rolle; man konnte es nur nicht sehen.

DREI FEHLER, DIE DABEI AUFFIELEN

* `auto-fit` liess die einzelne Karte der rechten Hand ueber die ganze
  Bildschirmbreite laufen, sobald gruppiert wurde. `auto-fill` haelt
  die leeren Spalten offen.
* Der Name der Person trug `tperson__namen` statt `tperson__name` --
  ein Buchstabe, und damit die Klasse fuer graues Kleingedrucktes. Auf
  einer Seite ueber Personen war der Name kleiner als die Beschriftung
  darunter. Gefunden hat es die neue Pruefung, die ueberall "?" las.
* `stufeSetzen()` suchte das Stufen-Schild mit
  `[class*="tmerkmal--"]:not(...)` -- einer Aufzaehlung dessen, was es
  NICHT ist. Sobald die Rollenmarke davorstand, traf die Suche sie:
  Ein Druck auf "Standard" haette aus "Modi" das Wort "Standard"
  gemacht. Und die Karte faerbte sich beim Setzen nicht mit um.

DREI PRUEFUNGEN, ALLE MIT GEGENPROBE

* pruef-holen.mjs (NEU, 14): fuehrt die echte Datei aus und misst fuenf
  Wege; dieselben fuenf noch einmal an der ALTEN Fassung, die bei genau
  zwei durchfallen muss. Dazu: laedt jede der acht Seiten holen.js, und
  zwar VOR ihrem Skript.
* pruef-teamlage-karten.mjs (NEU, 22): im Browser. Gruppen, Rollenwort,
  Stufenknoepfe nur bei Modis, der Druck selbst (kein Sprung, ein
  Abruf, Schild und Kartenfarbe ziehen mit), Gegenprobe mit dem zweiten
  Druck, und die neuen Baender auf 390 px.
* pruef-team-stufen.mjs (28 -> 47): die abgeschriebene Liste
  ["probe","standard","senior"] ist raus -- geprueft werden jetzt
  Eigenschaften und die Farbabstaende, gelesen aus team.css. Gegenprobe
  ist der Stand von gestern, der durch dieselbe Messung faellt.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-22 19:46:47 +02:00

396 lines
17 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. */
/* Die Leitungsliste steht in bereiche.js -- eine Antwort statt neun.
Sie stand hier frueher selbst, ohne 'spicy', und genau das war der
Fehler, den Filipe am 07.09.2026 gefunden hat. */
const LEITUNG = window.Bereiche.LEITUNG;
const $ = (id) => document.getElementById(id);
const BEREICHSNAME = {
live: 'LIVE', content: 'Content', technik: 'Technik',
community: 'Community', schutz: 'Schutz', agentur: 'Agentur',
};
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('.') : '—');
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
die Regel darin sich als falsch herausstellte (jeder 404
warf auf die Startseite, auch bei einer blossen Handlung),
haette man sie achtmal aendern muessen. */
const hole = (pfad, optionen) => window.holen(pfad, optionen);
/* 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',
agentur: 'bereich.html?b=agentur',
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));
/* ---- WOMIT ANFANGEN? (15.09.2026, Stufe 9) ---------------------
Ein Brett mit dreissig offenen Karten sagt, WAS zu tun ist. Es
sagt nicht, WOMIT man anfaengt -- "wichtig" allein hilft dabei
nicht: Wenn acht Karten wichtig sind, ist keine davon die erste.
Die Verteilung kommt fertig vom Server. Der Browser rechnet hier
nichts nach; eine zweite Rechnung waere die, die irgendwann
anders antwortet als das Brett.
DIE GRUPPE "noch nicht eingeschaetzt" STEHT MIT DA, auch wenn sie
gross ist. Eine Uebersicht, die einen Teil der Arbeit unsichtbar
macht, ist schlimmer als keine -- man verlaesst sich darauf und
uebersieht genau das, was fehlt. */
if (Array.isArray(d.womit) && d.womit.some((f) => f.anzahl > 0)) {
const w = el('div', 'womit');
for (const f of d.womit) {
if (!f.anzahl) continue;
const k = el('section', 'womit__feld');
k.dataset.feld = f.schluessel;
const kopf = el('div', 'womit__kopf');
kopf.append(el('h3', 'womit__name', f.name));
kopf.append(el('span', 'womit__zahl', String(f.anzahl)));
k.append(kopf);
k.append(el('p', 'womit__satz', f.satz));
const liste = el('ul', 'womit__liste');
for (const a of f.aufgaben || []) {
const z = el('li', 'womit__eintrag');
const v = el('a', null, a.titel);
v.href = 'aufgaben.html#a' + a.id;
z.append(v);
liste.append(z);
}
k.append(liste);
if (f.gekuerzt) {
k.append(el('p', 'womit__mehr',
'und ' + (f.anzahl - (f.aufgaben || []).length) + ' weitere'));
}
w.append(k);
}
ziel.append(block('Womit anfangen?',
'Wichtig und Aufwand nebeneinander – daraus fällt die Entscheidung von selbst.', w));
}
/* 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 warten auf Freigabe',
{ 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 = sagWas((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 {
/* NICHT MEHR STUMM (20.09.2026). Hier stand `catch { return; }`
-- und damit blieb die Seite bei jedem Netzaussetzer fuer
immer auf "wird geladen …" stehen. Gemessen auf 13 von 21
Seiten. `ladefehler()` sagt, was los ist, und bietet einen
Knopf an, der es noch einmal versucht. */
window.ladefehler?.();
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) {
/* Nicht nur die Unterzeile beschriften: Der Berichtsbereich
stand danach für immer auf "Report wird erstellt …", weil
ihn nichts mehr anfasste. Für ein Vorleseprogramm ist eine
dauerhaft beschäftigte Fläche das Zeichen, hier nicht
weiterzulesen. Gefunden beim Rollen-Rundgang 02.09.2026. */
const satz = 'Dir ist noch kein Creator zugeteilt. '
+ 'DogFather legt fest, wen du betreust.';
$('unterzeile').textContent = satz;
const ziel = $('bericht');
ziel.setAttribute('aria-busy', 'false');
ziel.textContent = '';
const hinweis = document.createElement('p');
hinweis.className = 'leer-hinweis';
hinweis.textContent = satz;
ziel.append(hinweis);
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();
})();
})();