Files
dogfather-universe/workspace/assets/js/report.js
T
DogFatherGitandClaude Opus 5 e74254263f Buehne aus den echten Marken-Bildern, Kopfleiste und Begruessung neu
Filipe hatte recht, und zwar zweifach: Der Husky war der FALSCHE (ein
fremder Neon-Husky aus dem alten Bilderordner statt DogFather), und zwei
in die Ecken geklebte Bilder ergeben noch kein Bild.

DIE BUEHNE, zweiter Anlauf. Aus den zehn geschickten Bildern das Studio
gewaehlt, in dem HasiDog und DogFather stehen -- nicht aus Geschmack,
sondern wegen der ANORDNUNG: Die beiden stehen weit aussen, die Mitte ist
dunkel. Genau dort steht der Inhalt. Bei den Bildern mit den Figuren in
der Mitte waeren sie hinter dem Text gelandet.

Ueber die ganze Flaeche, fest an der Scheibe, 138 % breit: Bei 100 %
staenden die beiden bei 20 % und 78 % der Breite -- mitten unter der
Textspalte. Vergroessert man das Bild ueber die Scheibe hinaus, wandern
sie nach aussen (rund 9 % und 88 %) und der leere Hallenboden liegt dort,
wo gelesen wird. Ein Bild groesser zu machen, damit WENIGER davon im Weg
ist, klingt verkehrt und ist genau richtig.

Fuer schmale Schirme ein eigener Hochkant-Ausschnitt derselben Szene --
ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand.
1,9 MB PNG -> 28 KB WebP.

DIE VIER STELLEN aus den Bildschirmfotos:

* Kopfleiste: der DogFather-Kopf davor. Als MASKE aus dem Logo gerechnet
  (Dunkelheit wird Deckkraft), nicht als Bild -- so laesst er sich im
  Stil einfaerben; ein fertig eingefaerbtes Bild muesste man fuer jede
  Farbe neu bauen. 114 KB -> 3 KB.

* "Dogfather · DogFather" war der peinlichste Punkt: Name und Rolle lasen
  sich gleich, es sah nach einem Fehler aus. Jetzt drei unterscheidbare
  Dinge -- Zeichen mit dem Anfangsbuchstaben, Name, Rolle als Marke in
  ihrer Farbe. Gebaut in kopf.js, EINMAL statt vierzehnmal: Jede
  Seitendatei setzte diese Zeile bisher selbst zusammen.

* Begruessung: leuchtender Strich, groesserer Gruss, auslaufende
  Trennlinie. Dieselben Striche vor "WAS IST DRAN" und "DEINE AUFGABEN" --
  so gehoert sichtbar zusammen, was zusammengehoert.

ZWEI EIGENE FEHLER, die die Pruefungen gefunden haben:

1. Ich hatte Verlaeufe IM TEXT gebaut (background-clip mit durchsichtiger
   Schrift). Sah gut aus, und der Kontrasttest meldete 1,05:1 -- zu Recht.
   Durchsichtige Schrift haengt an einer einzigen Technik; faellt sie aus
   (Kontrastmodus, Druck, aeltere Browser), ist der Text UNSICHTBAR statt
   nur anders gefaerbt. Das ist kein Schoenheitsfehler, das ist ein
   Ausfall. Jetzt feste Farbe mit einem Hauch Leuchten.

2. Auf dem Handy stand der Abmelden-Knopf 9 px aus dem Bild. Die Suche
   nach der Ursache ging zuerst in die Irre -- der Test nannte das
   Wasserzeichen, das aber von seiner Kachel sauber abgeschnitten wird
   und nur seine Masse meldet. Gemessen war es die Marke: 209 px + 139 px
   rechte Gruppe passten nicht in 390 px. Auf dem Handy bleibt jetzt nur
   der Kopf stehen; der Markenzug steht zwei Zeilen tiefer ohnehin als
   Ueberschrift. Fuer Vorleseprogramme bleibt er im Dokument.

Und einmal habe ich mir beim Ersetzen eines CSS-Blocks das halbe
Stylesheet geloescht (die Kachel-Regeln lagen zwischen den beiden
Suchmarken). Aufgefallen sofort am Bildschirmfoto, zurueckgeholt aus Git,
danach zeilengenau ersetzt.

118 Pruefungen, alle gruen. Der Kontrast wird weiterhin an echten
Bildpunkten gemessen, jetzt an bis zu 35 Stellen je Seite.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-01 05:45:59 +02:00

262 lines
10 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;
}
function kachel(zahl, name, { trendEl = null, warn = false } = {}) {
const k = el('div', 'kachel');
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;
}
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) }));
k1.append(kachel(d.aufgaben.angelegt, 'neu angelegt',
{ trendEl: trend(d.aufgaben.angelegt, d.aufgaben.angelegt_davor) }));
k1.append(kachel(d.termine.gewesen, 'Termine gewesen'));
k1.append(kachel(d.dateien.freigegeben, 'Dateien freigegeben'));
ziel.append(block('Was wurde erledigt?', null, k1));
/* Was blockiert? */
const k2 = el('div', 'kacheln');
k2.append(kachel(d.aufgaben.offen, 'Aufgaben offen'));
k2.append(kachel(d.aufgaben.ueberfaellig, 'überfällig', { warn: d.aufgaben.ueberfaellig > 0 }));
const dringend = Object.values(d.bereiche).reduce((s, b) => s + b.dringend, 0);
k2.append(kachel(dringend, 'dringende Punkte', { warn: dringend > 0 }));
k2.append(kachel(d.dateien.offen_review, 'Dateien im 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)`);
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.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'));
for (const [b, w] of Object.entries(d.bereiche)) {
if (w.offen) k4.append(kachel(w.offen, BEREICHSNAME[b] + ': offen',
{ warn: w.dringend > 0 }));
}
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();
})();
})();