Files
dogfather-universe/server/mess-support-runde.mjs
T
DogFatherGitandClaude Opus 5 ae5b467e9a Der Supportverlauf: eine Zeitachse, eine Farbe je Runde
Filipe: „ich will diese komplette seite vom support viel
uebersichtlicher, profissioneller, jede runde soll auch immer eine
spezielle farbe haben und anders aufgestellt aufgeteilt sein damit
man einen viel besseren und krasseren ueberblick hat."

WAS VORHER DASTAND -- an einem Bild mit zwei Runden nachgesehen,
bevor eine Zeile angefasst wurde: vier Textzeilen untereinander,
alle in derselben Farbe. „RUNDE 1", Antwort, „Ging noch nicht · …",
„RUNDE 2". Bei fuenf Runden muss man die Runden ZAEHLEN, statt sie
zu sehen -- und wer spricht, stand nur als kleiner Name daneben.

VIER TEILE SIND NEU

 1. EINE LEISTE OBEN. Ein Punkt je Runde, in ihrer Farbe, mit ihrer
    Nummer -- und der Rand sagt, wie sie ausgegangen ist. Damit ist
    „wie oft ging es schon hin und her?" eine Frage des Hinsehens.
    Erst ab zwei Runden: bei einer waere sie ein Punkt neben nichts.

 2. EINE ZEITACHSE statt einer Liste. Jede Runde haengt mit einem
    Punkt an einer Linie in IHRER Farbe. Die Linie ist ein Rand an
    der Runde selbst, nicht am Behaelter -- so traegt jede ihr
    eigenes Stueck Achse.

 3. ZWEI SPRECHRICHTUNGEN je Runde, als getrennte Kaesten:
    „GEANTWORTET" in der Rundenfarbe, darunter „GING NOCH NICHT"
    (Bernstein) oder „GEHT WIEDER" (gruen) oder „WARTET AUF
    ANTWORT". Vorher standen beide Saetze als Absaetze untereinander
    und sahen gleich aus; man musste lesen, um zu wissen, von wem
    sie sind. Jetzt sagt es die Form.

 4. DIE LETZTEN ZWEI OFFEN, aeltere hinter „3 fruehere Runden
    zeigen". Die Leiste sagt ohnehin, wie viele es gab; im Wortlaut
    braucht es nicht alle. Zwei und nicht eine: Die letzte sagt, wo
    es steht, die vorletzte, woran es davor lag.

DIE FARBE WIRD GERECHNET, NICHT GEPFLEGT

`rundenTon(nr)` gibt 200 + ((nr-1) mod 4) * 32 Grad. Eine Liste mit
fuenf Farben waere die naheliegende Loesung und die falsche: Runde
sechs bekaeme keine. Diese Sorte Liste hat im Haus schon dreimal
etwas gekostet.

DER BEREICH IST ENG UND ABSICHTLICH: 200 bis 296 Grad, Blau ueber
Indigo nach Violett -- die Palette der Seite (babyblau mit lila) und
der Bereich, in dem KEINE Farbe nach „gut" oder „schlecht" aussieht.
Gruen und Bernstein sind fuer den AUSGANG reserviert; waere eine
Rundenfarbe rot, stuenden zwei Aussagen in einer Farbe.

AUGENSCHONEND: 52 % Saettigung, 64 % Helligkeit -- fuer alle Toene
gleich, und nur im CSS. Sonst waere Runde drei blasser als Runde
eins, und augenschonend ist das Gegenteil von zufaellig. Kein Neon,
kein Gluehen. Die Farbe ordnet Zeilen zu; sie schreit nicht.

UND DIE FARBE ALLEIN TRAEGT NICHTS: Die Nummer steht daneben, der
Ausgang in Worten. Fuer Vorleseprogramme gibt es statt elf Punkten
einen Satz.

EIN FUND UNTERWEGS: DIE MESSUNG MASS SEIT ZWEI TAGEN NICHTS

`mess-support-runde.mjs` schickte die Rueckmeldung noch als JSON.
Am 02.10. ist die Route auf den Kopf-Weg umgestellt worden
(`x-geht`, `x-text`); seither antwortete sie mit 400. Gemerkt hat es
niemand, weil diese Datei Bilder macht und keine Rueckgabewerte
prueft: Auf dem Bild stand danach EINE Runde statt vier, und das
sieht aus wie ein Ergebnis. Aufgefallen ist es erst, als die Bilder
vier Rundenfarben zeigen sollten.

Eine Messung, die nach einem Umbau stillschweigend etwas anderes
misst, ist schlimmer als keine -- man glaubt ihr. Sie meldet den
Fehlschlag jetzt mit Code und Text.

GEPRUEFT -- pruef-support-bilder 39 -> 52 ok

    die Leiste zeigt jede Runde (5 Punkte) · mit ihrer Nummer
    die ersten vier Runden haben vier verschiedene Farben (4)
    und die fuenfte faengt die Reihe wieder von vorn an
    Gegenprobe: sie sind nicht alle gleich (4 Farben)
    auch die Rundennummern tragen ihre Farbe (2 von 2)
    offen stehen die letzten zwei Runden (2)
    und die aelteren sind einen Griff entfernt
    jede Runde zeigt beide Seiten
    aufgeklappt stehen alle da (5) · und wieder zu
    auf 390 px ragt nichts heraus (0 px)
    bei einer einzigen Runde gibt es keine Leiste (0)

Die Gegenprobe „sie sind nicht alle gleich" ist die wichtigste:
Waere `--ton` nicht angekommen, waeren alle Punkte grau -- und „vier
Punkte" waere gruen gewesen, ohne dass eine Farbe zu sehen ist.
Gemessen wird die ANGEZEIGTE Farbe, nicht die Zahl im Attribut.

Dazu gruen: pruef-support 104 · pruef-css-klassen · pruef-zeichen 7 ·
pruef-fingermass 5.

Eine Schriftgroesse musste nachgebessert werden: .7rem sind 11,2 px,
und unter 11,5 px faengt im Haus die Grenze an, ab der man
zusammenkneift.

NUR DAS AGENTURHAUS: Die Supportseite liegt unter `/workspace`.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-03 11:54:46 +02:00

274 lines
12 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.
/* =====================================================================
WIE DER SUPPORT JETZT AUSSIEHT UND SICH ANFUEHLT (25.09.2026)
Filipe, zwei Wuensche an einem Abend:
„ich will dass die leute die mir was geschickt haben im support,
auch meine notiz bekommen wenn ich fertig bin ... und erst wenn
es funktioniert gedrueckt wird, will ich dass alles richtig
fertig ist."
„ich will dass du bitte diese kachel viel geiler viel
profissioneller machst, die soll koomplett anders aussehen und
strukturiert sein ... die hauptfarbe der kachel soll auch
babyblau sein mit bissl lila."
SIE PRUEFT NICHTS und meldet keinen Fehlschlag -- sie macht Bilder,
auf denen man nachsehen kann. Deshalb `mess-` und nicht `pruef-`.
Gemessen wird die Wahrheit in `pruef-support.mjs` (58 Pruefungen);
hier geht es um das, was man nur SIEHT.
VIER BILDER, weil die Sache vier Seiten hat:
1. Die Leitung sieht die Meldung und ihren Knopf.
2. Der Melder sieht die Notiz und seine zwei Knoepfe -- der Kern
des ganzen Umbaus.
3. Derselbe Blick auf dem Handy, 412 px. Das ist die Breite, auf
der die Modis tatsaechlich arbeiten.
4. Nach zwei Runden: der Verlauf mit beiden Urteilen. Genau der
Fall, den Filipe gemeint hat („manchmal ... nicht sofort
perfekt").
EIGENE WEGWERF-DATENBANK in einem `mktemp`-Ordner: Es entstehen
echte Meldungen. In einem laufenden System waeren das Testdaten,
und die sind verboten.
Aufrufen mit: node server/mess-support-runde.mjs
===================================================================== */
import { mkdtempSync, rmSync, readFileSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { execFileSync } from "node:child_process";
import { request as httpAnfrage } from "node:http";
import { createServer as httpsServer } from "node:https";
import { eigenerPort } from "./helfer-port.mjs";
const PORT = await eigenerPort(import.meta);
const HP = await eigenerPort(import.meta, "mess-support-runde (HTTPS)", 1);
const CREW = "crew.dogfather-universe.com";
const ordner = mkdtempSync(join(tmpdir(), "ws-supportrunde-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) {
return ec.call(this, n, w, { ...(o || {}), secure: false });
};
import { notbremse } from "./helfer-notbremse.mjs";
import { zertifikatBauen } from "./helfer-openssl.mjs";
await import("./index.js");
notbremse(240_000, "mess-support-runde");
await new Promise((r) => setTimeout(r, 900));
process.on("uncaughtException", (f) => { console.error("ABSTURZ:", f); process.exit(7); });
process.on("unhandledRejection", (f) => { console.error("ABSTURZ (Versprechen):", f); process.exit(7); });
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes, createHmac } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const sch = randomBytes(32).toString("hex");
d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)"
+ " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING")
.run("code_kennung_schluessel", sch, jetzt);
const anlegen = (name, rolle, code) => {
const s = randomBytes(16).toString("hex");
const h = scryptSync(code, s, 64,
{ N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
return d.prepare("INSERT INTO personen"
+ " (name, rolle, code_hash, code_salt, code_n, code_kennung, aktiv, erstellt)"
+ " VALUES (?,?,?,?,?,?,1,?) RETURNING id")
.get(name, rolle, h, s, 32768,
createHmac("sha256", sch).update(code).digest("hex"), jetzt).id;
};
anlegen("Filipe", "admin", "CODE-DOGI-0001");
const idHand = anlegen("Rechte Hand", "hand", "CODE-HAND-0001");
const idModi = anlegen("Miss", "modi", "CODE-MODI-0001");
const idM2 = anlegen("Marina", "modi", "CODE-MODI-0002");
/* `von_name` GEHOERT DAZU -- die echte Melderoute schreibt ihn mit.
Ohne ihn saehe die Leitung „Liegt beim Melder" statt „Liegt bei
Miss", und das Bild zeigte einen Fall, den es im Betrieb nicht
gibt. Eine Messung mit zu wenig Daten misst die falsche Seite. */
const meldung = (person, name, text, seite, stand) => d.prepare(`INSERT INTO support_meldungen
(person_id, von_name, von_rolle, text, seite, stand, erstellt, geaendert)
VALUES (?,?,?,?,?,?,?,?) RETURNING id`)
.get(person, name, "modi", text, seite, stand, jetzt, jetzt).id;
const offen = meldung(idM2, "Marina",
"Der Kalender springt beim Wischen manchmal zwei Monate weiter.",
"/workspace/kalender.html", "neu");
const dran = meldung(idModi, "Miss",
"Ich konnte da wieder nicht zurück gehen, musste die App schließen "
+ "damit ich wieder auf die Hauptseite kam.",
"/workspace/support.html", "in_arbeit");
d.close();
const anfrage = (pfad, art, koerper, keks) => new Promise((fertig, schief) => {
const a = httpAnfrage({
host: "127.0.0.1", port: PORT, path: pfad, method: art,
headers: {
Host: CREW, "Content-Type": "application/json",
...(keks ? { Cookie: keks } : {}),
},
}, (r) => {
let t = ""; r.on("data", (x) => { t += x; });
r.on("end", () => fertig({ code: r.statusCode, kopf: r.headers, text: t }));
});
a.on("error", schief);
if (koerper) a.write(JSON.stringify(koerper));
a.end();
});
/** Eine Rueckmeldung des Melders -- UEBER DEN KOPF, nicht als JSON.
*
* ==== DIESE MESSUNG HAT ZWEI TAGE LANG NICHTS GEMESSEN ===========
*
* Am 02.10.2026 ist `/rueckmeldung` auf den Weg umgestellt worden,
* den auch das Melden nimmt: Urteil und Text reisen im KOPF
* (`x-geht`, `x-text`, prozentkodiert), der Rumpf ist fuer die
* Bilder da. Diese Datei schickte weiter JSON -- der Server fand
* also kein Urteil und keinen Text und antwortete mit 400.
*
* GEMERKT HAT ES NIEMAND, weil die Messung keine Rueckgabewerte
* prueft: Sie macht Bilder. Auf dem Bild stand danach eine Runde
* statt vier, und das sieht aus wie ein Ergebnis. Aufgefallen ist
* es erst, als die Bilder vier Rundenfarben zeigen sollten.
*
* Eine Messung, die nach einem Umbau stillschweigend etwas anderes
* misst, ist schlimmer als keine -- man glaubt ihr. */
const rueckmelden = (id, geht, satz, keks) => new Promise((fertig, schief) => {
const a = httpAnfrage({
host: "127.0.0.1", port: PORT, path: `/workspace/api/support/${id}/rueckmeldung`,
method: "POST",
headers: {
Host: CREW, Cookie: keks,
"Content-Type": "application/octet-stream",
"x-geht": geht ? "ja" : "nein",
"x-text": encodeURIComponent(satz || ""),
},
}, (r) => {
let t = ""; r.on("data", (x) => { t += x; });
r.on("end", () => fertig({ code: r.statusCode, text: t }));
});
a.on("error", schief);
a.end();
});
const anmelden = async (rolle, code) => {
const an = await anfrage("/workspace/api/anmelden", "POST", { rolle, code });
if (an.code !== 200) { console.log(`ABBRUCH: Anmeldung ${rolle} ${an.code}`); process.exit(2); }
return (an.kopf["set-cookie"] || []).map((x) => x.split(";")[0]).join("; ");
};
const kHand = await anmelden("hand", "CODE-HAND-0001");
const kModi = await anmelden("modi", "CODE-MODI-0001");
/* --- Runde 1: die Leitung sagt „behoben" ---------------------------- */
await anfrage(`/workspace/api/support/${dran}`, "PATCH",
{ stand: "erledigt", antwort: "Der Zurück-Knopf ist wieder da – "
+ "er war hinter der Kopfleiste verschwunden." }, kHand);
const schl = join(ordner, "b.key"), zert = join(ordner, "b.crt");
zertifikatBauen(schl, zert, CREW);
const vorbau = httpsServer({ key: readFileSync(schl), cert: readFileSync(zert) },
(von, nach) => {
const w = httpAnfrage({
host: "127.0.0.1", port: PORT, path: von.url, method: von.method,
headers: { ...von.headers, host: `${CREW}:${HP}` },
}, (a) => { nach.writeHead(a.statusCode || 502, a.headers); a.pipe(nach); });
von.pipe(w);
});
await new Promise((r) => vorbau.listen(HP, "127.0.0.1", r));
const pw = await import(
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await pw.chromium.launch({
args: [`--host-resolver-rules=MAP ${CREW} 127.0.0.1`, "--ignore-certificate-errors"],
});
async function blicken(name, keks, breite, hoehe) {
const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe }, hasTouch: breite <= 860 });
await kontext.addCookies(keks.split("; ").map((k) => {
const [n, ...r] = k.split("=");
return { name: n, value: r.join("="), domain: CREW, path: "/" };
}));
const seite = await kontext.newPage();
const konsole = [];
seite.on("console", (e) => {
if (e.type() === "error" && !/favicon|ERR_CERT|net::ERR/i.test(e.text())) {
konsole.push(e.text().slice(0, 140));
}
});
await seite.goto(`https://${CREW}:${HP}/workspace/support.html`, { waitUntil: "networkidle" });
await seite.waitForTimeout(1400);
const blick = await seite.evaluate(() => {
const karten = [...document.querySelectorAll(".s-karte")];
const knopf = (k) => [...k.querySelectorAll(".s-karte__tun button")]
.map((b) => b.textContent.trim()).join(" | ");
return {
karten: karten.length,
staende: karten.map((k) => k.querySelector(".s-karte__stand")?.textContent.trim())
.join(" / "),
knoepfe: karten.map(knopf).filter(Boolean).join(" // ") || "-",
/* Der Hinweis „wer ist dran" wird MITGEMESSEN -- er ist einmal
stumm ausgefallen (before() auf einem heimatlosen Element),
und im Bild sah das aus wie Absicht. */
wartet: [...document.querySelectorAll(".s-karte__wartet")]
.map((w) => w.textContent.trim()).join(" | ") || "-",
runden: document.querySelectorAll(".s-runde").length,
urteile: [...document.querySelectorAll(".s-runde__urteil")]
.map((u) => u.dataset.urteil).join(", ") || "-",
akzent: getComputedStyle(document.querySelector(".inhalt")).getPropertyValue("--akzent").trim(),
felder: document.querySelectorAll(".s-bilanz__feld").length,
};
});
console.log(`\n=== ${name} (${breite} x ${hoehe}) ===`);
for (const [k, v] of Object.entries(blick)) console.log(` ${k.padEnd(10)} ${v}`);
if (konsole.length) console.log(" FEHLER IN DER KONSOLE:", konsole);
const datei = `server/mess-support-${name}.png`;
await seite.screenshot({ path: datei, fullPage: false }).catch(() => {});
console.log(` Bild: ${datei}`);
await kontext.close();
}
try {
await blicken("leitung-pc", kHand, 1280, 1000);
await blicken("melder-pc", kModi, 1280, 1000);
await blicken("melder-handy", kModi, 412, 915);
/* --- Runde 2: „noch nicht", dann behoben, dann bestaetigt --------- */
const r2 = await rueckmelden(dran, false,
"Der Knopf ja – aber jetzt springt die Seite nach oben.", kModi);
if (r2.code !== 200) console.log(` !! Rueckmeldung ging nicht: ${r2.code} ${r2.text}`);
await anfrage(`/workspace/api/support/${dran}`, "PATCH",
{ stand: "erledigt", antwort: "Das Springen kam vom Nachladen. Ist raus." }, kHand);
await blicken("melder-runde2", kModi, 1280, 1000);
/* ==== VIER RUNDEN -- WEIL ES VIER FARBEN SIND (03.10.2026) =======
Filipe: „jede runde soll auch immer eine spezielle farbe haben …
damit man einen viel besseren und krasseren ueberblick hat."
Mit zwei Runden sieht man zwei Toene und kann nicht sagen, ob es
eine Reihe ist. Vier ist die Zahl, nach der sich die Farben
wiederholen (siehe `rundenTon` in support.js) -- also genau die
Zahl, bei der man die Regel sieht statt sie zu glauben. */
for (const [wort, satz] of [
["Jetzt laedt die Liste nicht mehr nach.", "Und jetzt ist der Knopf doppelt."],
["Der doppelte Knopf ist raus.", "Jetzt stimmt die Reihenfolge nicht."],
]) {
const rr = await rueckmelden(dran, false, satz, kModi);
if (rr.code !== 200) console.log(` !! Rueckmeldung ging nicht: ${rr.code} ${rr.text}`);
await anfrage(`/workspace/api/support/${dran}`, "PATCH",
{ stand: "erledigt", antwort: wort }, kHand);
}
await blicken("melder-vierrunden", kModi, 1280, 1100);
await blicken("melder-vierrunden-handy", kModi, 412, 915);
console.log(`\n(Die offene Meldung #${offen} bleibt unangetastet stehen –`
+ " so sieht man beide Sorten nebeneinander.)");
} finally {
await browser.close();
vorbau.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(0);
}