Gestern Mittag gemessen: 39 `newContext`-Aufrufe nehmen ihre Breite
aus einer Variablen und setzen kein `hasTouch`. Ohne das meldet der
Browser `pointer: fine`, und KEINE Regel aus `@media (pointer:
coarse)` greift — dort stehen im ganzen Haus die 44-Pixel-
Beruehrziele, die ausgeblendeten Tastenkuerzel und die
eingeklappte Reiterleiste.
Was das anrichtet, war an pruef-breiten zu sehen: drei Befunde auf
320, 390 und 430 Pixeln, die mit dem Finger allesamt verschwanden —
Messfehler, keine Fehler.
37 DAVON HABEN IHN JETZT. Nur `hasTouch`, nicht `isMobile`: Gefragt
ist genau die eine Sache, um die es geht. `isMobile` waere eine
zweite Aenderung in derselben Zeile, und wenn danach etwas anders
aussieht, wuesste niemand, welche von beiden es war.
ZWEI BLEIBEN STEHEN, beide in pruef-grosscheck.mjs. Die Aenderung
dort waere ein Zweizeiler; sie zu pruefen hiesse, 206 Seiten ueber
vier Rollen laufen zu lassen, und das braucht Filipes Zusage. Eine
Aenderung, die ich nicht pruefen darf, liefere ich nicht aus.
Grundlinie in pruef-fingermass steht deshalb auf 2.
JEDE EINZELN NACHGELAUFEN — 37 Laeufe:
34 gruen, darunter pruef-handy 186, pruef-material 159,
pruef-start-ansicht 160, pruef-kalender 141, pruef-erwaehnung 129,
pruef-bewerbung-aufgaben 163, pruef-neue-seiten 109
3 mit Befunden, ALLE DREI VORBESTEHEND (Gegenprobe: alter Stand
derselben Datei, gleicher Lauf, gleiche Zahl):
pruef-browser 3 (WebKit startet auf diesem Rechner nicht)
pruef-chat-anhaenge 2
pruef-crew-wand-bild 3
EINE ZEITBOMBE GEFUNDEN UND ENTSCHAERFT
pruef-dabei-optik meldete „Haekchen: 0 -> 0" — aber nur, wenn vier
andere Pruefungen gleichzeitig liefen. Allein: „0 -> 1", gruen.
Dort stand `waitForTimeout(250)` mit der Begruendung „250 ms sind
reichlich ueber den 160" (der Dauer der Blende). Auf einem Rechner,
auf dem nebenher vier Browser messen, sind sie es nicht. Die
Pruefung war damit gruen, solange nichts anderes lief, und rot im
Gesamtlauf — also genau dann, wenn niemand sie einzeln nachstellen
kann.
Eine Wartezeit ist eine Annahme ueber den Rechner. Gewartet wird
jetzt auf das, worauf es ankommt: dass das Haekchen da ist. Laeuft
die Frist ab, faellt die Pruefung mit dem ECHTEN Wert um und nicht
mit einem Messfehler. Gegenprobe: unter derselben vierfachen Last,
die sie vorher rot gemacht hat, jetzt gruen.
UND DIE GRUNDLINIE WIEDER STRENG. Ich hatte sie kurz auf
„hoechstens" gestellt — damit haette ein Rueckgang stillschweigend
Platz fuer die naechste Suende gedeckt. Genau davor warnt der Kopf
derselben Datei bei der anderen Grundlinie, und ich habe es eine
Stunde spaeter selbst falsch gemacht.
Co-Authored-By: Claude Opus 5 <[email protected]>
217 lines
10 KiB
JavaScript
217 lines
10 KiB
JavaScript
/* =====================================================================
|
||
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();
|
||
});
|
||
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 --------- */
|
||
await anfrage(`/workspace/api/support/${dran}/rueckmeldung`, "POST",
|
||
{ geht: false, text: "Der Knopf ja – aber jetzt springt die Seite nach oben." }, kModi);
|
||
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);
|
||
|
||
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);
|
||
}
|