Filipe: "DU HAST WIEDER EINE KLEINE AENDERUNG UEBERALL GEMACHT ANSTATT
EINE RIESEN AENDERUNG." Er hatte recht, und der Grund war jedes Mal
derselbe: Ich habe das MATERIAL getauscht (Mattglas, Leuchtschiene,
Verlauf) und die FORM gelassen. Ein abgerundetes Rechteck bleibt ein
abgerundetes Rechteck -- und die Silhouette ist das Einzige, was man aus
fuenf Metern erkennt.
Jetzt ist die Form eine andere: abgeschnittene Ecke oben links
(clip-path, echte Silhouette), ein Kantenlicht in der Kategoriefarbe
darauf, Eckwinkel unten rechts, ein feines Raster statt Koernung.
35 Bauteile auf allen 18 Seiten, in einer eigenen Datei (module.css).
DREI DINGE, DIE DABEI SCHIEFGINGEN UND JETZT ABGESICHERT SIND
1. Die Regeln standen in :where() -- Spezifitaet null, also gewann jede
aeltere .kachel::before-Regel. Jetzt :is().
2. module.css stand an DRITTER Stelle im Ladeweg. Auf Calls,
Automationen, Bereich und Dateien hat sie damit gar nichts bewirkt:
Die Seitendateien setzen dort selbst border-radius und box-shadow und
kommen spaeter. Genau das ergab wieder "ueberall ein bisschen". Sie
wird jetzt als LETZTE geladen, geprueft auf allen 18 Seiten.
3. Die Klassenliste steht siebenmal in der Datei (CSS kennt keine
Variable fuer Selektoren). Eine vergessene Kopie faellt niemandem
auf -- pruef-css-klassen vergleicht sie deshalb alle, mit Gegenprobe.
DER KALENDER: NUR NOCH, WAS EINEN ANGEHT
Filipe: "calls oder termine soll jeder nur sehen die er selber macht
oder jeden betrifft." Das gilt auch fuer DogFather, und das ist die
eigentliche Aenderung -- er bekam bisher 1=1. "Jeden betrifft" heisst:
ohne Gegenueber und ohne Teilnehmerliste. Wer niemanden eintraegt, meint
alle. Die Rollenfrage entfaellt im Kalender damit vollstaendig.
SECHS PRUEFUNGEN, DIE EINE WELT GEMESSEN HABEN, DIE ES NICHT MEHR GIBT
Alle sechs wurden auf die neue Regel umgeschrieben, keine geloescht --
loeschen haette die Zahl gesenkt und den neuen Weg ungeprueft gelassen:
ics, serien, sicht, spicy, teilnehmer, tagesblick, team.
UND VIER ECHTE FUNDE, DIE DABEI HERAUSFIELEN
* pruef-workspace-seiten war seit dem Bildumbau von heute Frueh auf
ALLEN 32 Seiten rot: Sie verlangte noch das eine Motiv. Die neue
Bedingung ist schaerfer als beide alten -- das geladene Bild muss zu
dem Merkmal passen, das die Seite selbst traegt. Und die Meldung sagt
jetzt, WELCHE Bedingung gefallen ist.
* pruef-leistung-optik hat sich selbst ausgesperrt (meldete sich als
Manager an, der die Zahlen seit Filipes Anweisung nicht mehr sehen
darf) und stuerzte danach ab: 2 Pruefungen statt 56. Der Absturz hat
verdeckt, dass sie sieben Fingerziele als "zu klein" meldete -- es
waren die unsichtbaren Knoepfe der zugeklappten Woche, 0x0.
* personen.html beim Manager: Der Erklaersatz ("Codes, Sperren und das
Protokoll bleiben bei DogFather") kam nie an -- das Element gab es
nicht, und das && davor hat den Fehlgriff verschluckt. Die Liste stand
ausserdem dauerhaft auf aria-busy="true": fuer einen Screenreader lud
die Seite fuer immer.
* pruef-schranke hielt personen.html noch fuer DogFather-only. Die Seite
wechselt jetzt die Erwartung, statt aus der Pruefung zu verschwinden:
Seite auf fuer die Leitung, Verwaltungsdaten dahinter weiterhin zu.
Die Anmeldeseite wurde nicht angefasst (nur ihr Versionsstempel).
Co-Authored-By: Claude Opus 5 <[email protected]>
452 lines
21 KiB
JavaScript
452 lines
21 KiB
JavaScript
/* DER TAGESBLICK — die geteilte Kachel auf der Startseite.
|
||
|
||
Wunsch Filipe, 05.09.2026: *"eine ganze kachel wo links die sachen
|
||
sind die du da schon siehst und rechts in der kachel die termine vom
|
||
tag. in der mitte gesplittet. mach das richtig geil und hochwertig."*
|
||
|
||
GEMESSEN WIRD AN DEN ECHTEN PIXELN, nicht am Stylesheet. Ein Wert,
|
||
der im CSS steht, kann von einer anderen Regel überschrieben sein --
|
||
was zählt, ist, was am Ende auf dem Schirm ankommt. Diese Lehre kam
|
||
am selben Tag von der Teilnehmerwahl, wo vierzig grüne Prüfungen
|
||
nicht gemerkt hatten, dass die Namen aneinanderkleben.
|
||
|
||
DIE VIER FRAGEN, die den Wunsch ausmachen:
|
||
1. Ist es EINE Kachel (ein Rahmen), nicht zwei nebeneinander?
|
||
2. Liegen die Hälften wirklich NEBENeinander, gleich breit?
|
||
3. Sitzt der Trenner in der MITTE?
|
||
4. Stehen rechts die Termine von HEUTE -- und nur die?
|
||
|
||
Dazu die Fälle, die im Betrieb auftreten und leicht vergessen werden:
|
||
keine Termine, keine Hinweise, beides leer, und das Handy.
|
||
|
||
GEGENPROBEN durchgehend. */
|
||
|
||
import { mkdtempSync, rmSync, appendFileSync } from "node:fs";
|
||
import { tmpdir } from "node:os";
|
||
import { join } from "node:path";
|
||
|
||
const ordner = mkdtempSync(join(tmpdir(), "ws-tagesblick-"));
|
||
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
|
||
|
||
import { notbremse } from "./helfer-notbremse.mjs";
|
||
const { portMussFreiSein } = await import("./helfer-port.mjs");
|
||
await portMussFreiSein(4303, "die Tagesblickpruefung");
|
||
|
||
process.env.PORT = "4303";
|
||
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 }); };
|
||
await import("./index.js");
|
||
/* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort
|
||
zwei Auffangnetze ein, die einen Absturz nur protokollieren --
|
||
richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese
|
||
Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der
|
||
Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */
|
||
notbremse(480_000, "pruef-tagesblick");
|
||
await new Promise((r) => setTimeout(r, 900));
|
||
const BASIS = "http://127.0.0.1:4303";
|
||
|
||
const PROTOKOLL = join(process.cwd(), "pruef-tagesblick-lauf.txt");
|
||
try { rmSync(PROTOKOLL, { force: true }); } catch { /* gab es noch nicht */ }
|
||
const melde = (z) => {
|
||
console.log(z);
|
||
try { appendFileSync(PROTOKOLL, z + "\n"); } catch { /* Zugabe */ }
|
||
};
|
||
let fehler = 0;
|
||
const ok = (b, t) => { melde((b ? " ok " : " FEHL ") + t); if (!b) fehler++; };
|
||
|
||
/* ---- Bestand ------------------------------------------------------------ */
|
||
const { DatabaseSync } = await import("node:sqlite");
|
||
const { scryptSync, randomBytes } = await import("node:crypto");
|
||
await fetch(BASIS + "/workspace/api/anmelden", {
|
||
method: "POST", headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
|
||
for (let i = 0; i < 60; i++) {
|
||
try {
|
||
const p = new DatabaseSync(process.env.WORKSPACE_DB);
|
||
try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
|
||
} catch { await new Promise((r) => setTimeout(r, 250)); }
|
||
}
|
||
const d = new DatabaseSync(process.env.WORKSPACE_DB);
|
||
const jetztIso = new Date().toISOString();
|
||
function anlegen(name, rolle, code) {
|
||
const salt = randomBytes(16).toString("hex");
|
||
const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
|
||
d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
|
||
.run(name, rolle, hash, salt, 32768, jetztIso);
|
||
return d.prepare("SELECT last_insert_rowid() AS id").get().id;
|
||
}
|
||
const idDogi = anlegen("Filipe", "admin", "CODE-DOGI-0001");
|
||
const idScout = anlegen("Patrick", "scout", "CODE-SCOU-0001");
|
||
const idLuna = anlegen("Luna", "creator", "CODE-CREA-0001");
|
||
d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idLuna, idScout, jetztIso);
|
||
|
||
/* ORTSZEIT, nicht UTC. Die Anwendung rechnet den Tag lokal -- ein mit
|
||
toISOString() gebildetes Datum wäre abends um zehn schon der nächste
|
||
Tag, und die Prüfung suchte Termine, die sie selbst auf morgen gelegt
|
||
hat. Genau diese Verwechslung steht als Warnung in start.js. */
|
||
const n = new Date();
|
||
const HEUTE = `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, "0")}`
|
||
+ `-${String(n.getDate()).padStart(2, "0")}`;
|
||
const MORGEN = (() => {
|
||
const m = new Date(n.getTime() + 86400000);
|
||
return `${m.getFullYear()}-${String(m.getMonth() + 1).padStart(2, "0")}`
|
||
+ `-${String(m.getDate()).padStart(2, "0")}`;
|
||
})();
|
||
|
||
function termin(titel, tag, zeit, art = "call", dauer = 30) {
|
||
d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, creator_id,
|
||
teilnehmer_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?)`)
|
||
.run(titel, art, `${tag}T${zeit}`, dauer, idLuna, idLuna, jetztIso, idDogi);
|
||
}
|
||
/* Drei heute, einer morgen. Der von morgen ist der eigentliche Prüfstein:
|
||
Er darf NICHT auftauchen -- und ohne ihn würde man nie merken, wenn
|
||
die Abgrenzung fehlt. */
|
||
termin("Früh-Call mit Luna", HEUTE, "07:30", "call", 30);
|
||
termin("Content-Review", HEUTE, "14:00", "review", 60);
|
||
termin("Abstimmung Technik", HEUTE, "23:30", "termin", 45);
|
||
termin("Das ist morgen", MORGEN, "09:00", "call", 30);
|
||
|
||
/* Etwas für die linke Hälfte -- ein Termin heute erzeugt ohnehin einen
|
||
Hinweis, aber eine überfällige Aufgabe ist der deutlichere Fall. */
|
||
d.prepare(`INSERT INTO aufgaben (titel, status, prioritaet, frist, creator_id,
|
||
verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,'hoch',?,?,?,?,?)`)
|
||
.run("Längst fällig", "offen", "2020-01-01", idLuna, idLuna, jetztIso, idDogi);
|
||
d.close();
|
||
|
||
const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
|
||
const browser = await pw.chromium.launch();
|
||
|
||
async function alsRolle(rolle, code, breite = 1280) {
|
||
const ctx = await browser.newContext({ viewport: { width: breite, height: 1000 } });
|
||
const seite = await ctx.newPage();
|
||
await seite.goto(BASIS + "/workspace/", { waitUntil: "networkidle" });
|
||
await seite.click(`.rolle[data-rolle="${rolle}"]`);
|
||
await seite.fill("#code", code);
|
||
await seite.click("button[type=submit]");
|
||
await seite.waitForURL("**/start.html", { timeout: 25000 });
|
||
await seite.waitForTimeout(1200);
|
||
return { ctx, seite };
|
||
}
|
||
|
||
/* =======================================================================
|
||
1. Eine Kachel, in der Mitte geteilt
|
||
======================================================================= */
|
||
melde("\n=== Eine Kachel, mittig geteilt ===");
|
||
{
|
||
const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");
|
||
|
||
const da = await seite.isVisible("#dran-block");
|
||
ok(da, da ? "die Kachel ist da" : "die Kachel fehlt");
|
||
|
||
/* EINE Umrandung um beides -- nicht zwei Kacheln nebeneinander.
|
||
|
||
WIE DIESE UMRANDUNG AUSSIEHT, HAT SICH AM 07.09.2026 GEÄNDERT.
|
||
Vorher: ein `border` mit Radius. Jetzt: eine Silhouette mit
|
||
abgeschnittener Ecke (`clip-path`) und ein Kantenlicht auf
|
||
`::before`. Hier stand deshalb eine Bedingung, die zwangsläufig
|
||
rot wurde, ohne dass an der Kachel etwas fehlte -- gemessen wurde
|
||
eine Bauweise, die es nicht mehr gibt.
|
||
|
||
Die Aussage bleibt dieselbe und wird jetzt an der neuen Bauweise
|
||
gemessen: ein Kasten, eine Silhouette, ein Licht darauf. */
|
||
const rahmen = await seite.$eval("#dran-block", (e) => {
|
||
const s = getComputedStyle(e);
|
||
const v = getComputedStyle(e, "::before");
|
||
return {
|
||
anzeige: s.display,
|
||
silhouette: s.clipPath,
|
||
radius: s.borderTopLeftRadius,
|
||
lichtDa: v.content !== "none" && v.position === "absolute",
|
||
};
|
||
});
|
||
ok(rahmen.anzeige === "grid"
|
||
&& /polygon/.test(rahmen.silhouette)
|
||
&& parseFloat(rahmen.radius) === 0
|
||
&& rahmen.lichtDa,
|
||
`eine Silhouette um beides (${rahmen.anzeige}, ${rahmen.silhouette.slice(0, 24)}…, `
|
||
+ `Radius ${rahmen.radius}, Kantenlicht ${rahmen.lichtDa ? "da" : "fehlt"})`);
|
||
|
||
/* NEBENEINANDER und gleich breit -- das ist der Kern des Wunsches. */
|
||
const seiten = await seite.evaluate(() => {
|
||
const l = document.querySelector("#dran-seite").getBoundingClientRect();
|
||
const r = document.querySelector("#heute-seite").getBoundingClientRect();
|
||
return {
|
||
linksOben: Math.round(l.top), rechtsOben: Math.round(r.top),
|
||
linksBreit: Math.round(l.width), rechtsBreit: Math.round(r.width),
|
||
linksRechterRand: Math.round(l.right), rechtsLinkerRand: Math.round(r.left),
|
||
};
|
||
});
|
||
ok(Math.abs(seiten.linksOben - seiten.rechtsOben) <= 2,
|
||
`beide Hälften stehen nebeneinander (oben ${seiten.linksOben} / ${seiten.rechtsOben})`);
|
||
/* "In der Mitte gesplittet": höchstens 2 px Unterschied. */
|
||
const unterschied = Math.abs(seiten.linksBreit - seiten.rechtsBreit);
|
||
ok(unterschied <= 2,
|
||
`gleich breit: ${seiten.linksBreit} px und ${seiten.rechtsBreit} px (${unterschied} px Unterschied)`);
|
||
|
||
/* Der Trenner sitzt dazwischen, nicht irgendwo. */
|
||
const trenner = await seite.evaluate(() => {
|
||
const e = document.querySelector("#heute-seite");
|
||
const s = getComputedStyle(e, "::before");
|
||
return { inhalt: s.content, breite: s.width, hintergrund: s.backgroundImage.slice(0, 30) };
|
||
});
|
||
ok(trenner.inhalt !== "none" && trenner.hintergrund.includes("gradient"),
|
||
`der Trenner ist da und läuft aus (${trenner.hintergrund}…)`);
|
||
|
||
await ctx.close();
|
||
}
|
||
|
||
/* =======================================================================
|
||
2. Rechts: die Termine von HEUTE
|
||
======================================================================= */
|
||
melde("\n=== Die Termine des Tages ===");
|
||
{
|
||
const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");
|
||
|
||
const zeilen = await seite.$$eval(".tagesliste__punkt", (p) => p.map((x) => ({
|
||
zeit: x.querySelector(".tagesliste__stunde")?.textContent,
|
||
titel: x.querySelector(".tagesliste__titel")?.textContent,
|
||
art: x.dataset.art,
|
||
naechster: x.dataset.naechster === "ja",
|
||
vorbei: x.dataset.vorbei === "ja",
|
||
})));
|
||
|
||
/* DIE ANZAHL GEHÖRT IN DIE BEDINGUNG: Bei null Zeilen liefe jede
|
||
folgende Messung über eine leere Menge und meldete grün. */
|
||
ok(zeilen.length === 3, `${zeilen.length} Termine (erwartet 3 von heute)`);
|
||
ok(!zeilen.some((z) => /morgen/i.test(z.titel || "")),
|
||
`der Termin von morgen steht NICHT dabei: ${zeilen.map((z) => z.titel).join(" | ")}`);
|
||
|
||
/* Aufsteigend nach Uhrzeit -- eine Tagesliste in falscher Reihenfolge
|
||
ist schlimmer als keine. */
|
||
const zeiten = zeilen.map((z) => z.zeit);
|
||
ok(JSON.stringify(zeiten) === JSON.stringify([...zeiten].sort()),
|
||
`nach Uhrzeit sortiert: ${zeiten.join(" → ")}`);
|
||
|
||
ok(zeilen[0]?.zeit === "07:30" && zeilen[1]?.zeit === "14:00",
|
||
`die Uhrzeiten stimmen (${zeiten.join(", ")}) — keine Zeitzonen-Verschiebung`);
|
||
|
||
/* Die Art trägt ihre Farbe, dieselbe wie im Kalender. */
|
||
const arten = zeilen.map((z) => z.art);
|
||
ok(arten.includes("call") && arten.includes("review") && arten.includes("termin"),
|
||
`die Arten kommen durch: ${arten.join(", ")}`);
|
||
|
||
/* DIE FARBZUORDNUNG, zeitunabhängig gemessen.
|
||
|
||
Der erste Entwurf las den RAND der Review-Marke und erwartete
|
||
Grün. Er bekam Grau -- und das war völlig richtig: Der Termin
|
||
stand auf 14:00, der Prüflauf war um 19:31, also ist er vorbei
|
||
und wird absichtlich gedämpft. Die Regel
|
||
`[data-vorbei="ja"] .tagesliste__marke { border-color: … }` hat
|
||
genau das getan, wofür sie da ist.
|
||
|
||
Eine Prüfung, deren Ergebnis von der Uhrzeit des Laufs abhängt,
|
||
ist keine Prüfung -- sie ist morgens grün und abends rot, und
|
||
irgendwann glaubt ihr niemand mehr. Deshalb wird hier --ton
|
||
gelesen: die Zuordnung Art → Farbe, die immer gilt. Die sichtbare
|
||
Kante folgt darunter, aber nur an einem Termin, der nachweislich
|
||
noch nicht vorbei ist. */
|
||
const toene = await seite.$$eval(".tagesliste__punkt", (punkte) => punkte.map((p) => {
|
||
const vorbei = p.dataset.vorbei === "ja";
|
||
/* DIE DÄMPFUNG WIRD FÜR DIE MESSUNG KURZ ABGESCHALTET.
|
||
|
||
Ein vorbeigezogener Termin setzt --ton bewusst auf Grau. Wer
|
||
die Zuordnung Art → Farbe an ihm misst, misst die Dämpfung und
|
||
nennt sie einen Fehler -- genau das ist im ersten Entwurf
|
||
passiert ("falsche Farbe: call=#75859a").
|
||
|
||
Statt nur die ausstehenden zu messen (dann hinge das Ergebnis
|
||
wieder an der Uhrzeit des Laufs, und abends bliebe fast nichts
|
||
übrig) wird das Merkmal hier kurz entfernt, gemessen und sofort
|
||
zurückgesetzt. Damit ist die Zuordnung für JEDEN Termin geprüft,
|
||
unabhängig davon, wann jemand den Lauf startet. */
|
||
if (vorbei) delete p.dataset.vorbei;
|
||
const ton = getComputedStyle(p).getPropertyValue("--ton").trim().toLowerCase();
|
||
if (vorbei) p.dataset.vorbei = "ja";
|
||
|
||
return {
|
||
art: p.dataset.art,
|
||
ton,
|
||
vorbei,
|
||
/* Die farbige Kante links ist seit dem Umbau auf Karten
|
||
(05.09.2026) ein ::before -- vorher war es der Ring einer
|
||
Marke. Gemessen wird ihr Hintergrund, dort steckt die Farbe. */
|
||
kante: getComputedStyle(p, "::before").backgroundImage,
|
||
/* Und der Dauerbalken: Seine Füllung sagt, wie lang der Termin
|
||
ist. Ein Balken, der bei jeder Dauer gleich aussieht, wäre
|
||
Deko -- und Deko, die aussieht wie eine Angabe, führt in die
|
||
Irre. */
|
||
laenge: getComputedStyle(p.querySelector(".tagesliste__balken") || p)
|
||
.getPropertyValue("--laenge").trim(),
|
||
/* Der gedämpfte Ton, separat: So lässt sich beides beweisen --
|
||
die richtige Zuordnung UND dass die Dämpfung greift. */
|
||
tonGedaempft: getComputedStyle(p).getPropertyValue("--ton").trim().toLowerCase(),
|
||
};
|
||
}));
|
||
|
||
const SOLL = { call: "#3fbdf5", termin: "#8a76ff", review: "#50a752", frist: "#d17717" };
|
||
const falsch = toene.filter((t) => SOLL[t.art] && t.ton !== SOLL[t.art]);
|
||
ok(falsch.length === 0 && toene.length === 3,
|
||
falsch.length
|
||
? `falsche Farbe: ${falsch.map((t) => `${t.art}=${t.ton}`).join(", ")}`
|
||
: `alle ${toene.length} Termine tragen die Kalenderfarbe ihrer Art `
|
||
+ `(${toene.map((t) => `${t.art} ${t.ton}`).join(", ")})`);
|
||
|
||
/* Und die Kante nimmt sie auch wirklich an -- gemessen an einem
|
||
Termin, der noch aussteht. Gibt es keinen (ein Lauf kurz vor
|
||
Mitternacht), wird das gesagt statt behauptet: der dritte Ausgang. */
|
||
const offen = toene.find((t) => !t.vorbei);
|
||
if (offen) {
|
||
const soll = SOLL[offen.art];
|
||
const r = parseInt(soll.slice(1, 3), 16), g = parseInt(soll.slice(3, 5), 16), b = parseInt(soll.slice(5, 7), 16);
|
||
ok(offen.kante.replace(/\s/g, "").includes(`rgb(${r},${g},${b})`),
|
||
`die Kante des nächsten Termins (${offen.art}) trägt die Farbe sichtbar`);
|
||
} else {
|
||
melde(` -- kein ausstehender Termin zur Zeit des Laufs — die Kante `
|
||
+ `wurde nicht am Bild geprüft (die Zuordnung darüber schon)`);
|
||
}
|
||
|
||
/* GEGENPROBE zur Dämpfung: Ein vorbeigezogener Termin MUSS anders
|
||
aussehen. Ohne diesen Nachweis wäre "vorbei tritt zurück" nur
|
||
eine Behauptung im Stylesheet. */
|
||
const vorbei = toene.find((t) => t.vorbei);
|
||
if (vorbei) {
|
||
/* Beides zusammen ist der Beweis: Die Zuordnung stimmt (ton), UND
|
||
die Dämpfung überschreibt sie (tonGedaempft). Nur eines von
|
||
beidem zu messen liesse offen, ob die Dämpfung überhaupt wirkt
|
||
oder ob die Farbe von vornherein fehlte. */
|
||
ok(vorbei.tonGedaempft === "#75859a" && vorbei.ton !== "#75859a",
|
||
`vorbei wird gedämpft: ${vorbei.art} trägt ${vorbei.ton}, `
|
||
+ `angezeigt wird ${vorbei.tonGedaempft}`);
|
||
}
|
||
|
||
/* DER DAUERBALKEN muss die Dauer WIRKLICH abbilden. Ein Balken, der
|
||
bei 30 und bei 60 Minuten gleich aussieht, ist Deko -- und Deko,
|
||
die aussieht wie eine Angabe, ist schlimmer als keine. */
|
||
const laengen = toene.map((t) => t.laenge).filter(Boolean);
|
||
ok(laengen.length === 3 && new Set(laengen).size >= 2,
|
||
laengen.length !== 3
|
||
? `nur ${laengen.length} von 3 Terminen haben einen Dauerbalken`
|
||
: `die Balken unterscheiden sich nach Dauer: ${laengen.join(", ")}`);
|
||
|
||
/* Und die JETZT-Marke steht genau am nächsten Termin -- nicht an
|
||
allen, nicht an keinem. */
|
||
const jetztMarken = await seite.$$eval(".tagesliste__jetzt",
|
||
(m) => m.filter((x) => getComputedStyle(x).display !== "none").length);
|
||
ok(jetztMarken === 1, `die Marke "Jetzt" steht ${jetztMarken}× (erwartet genau 1×)`);
|
||
|
||
/* GENAU EINER ist "als Nächstes dran" -- nicht null, nicht zwei. */
|
||
const naechste = zeilen.filter((z) => z.naechster).length;
|
||
ok(naechste === 1, `genau ${naechste} Termin ist als Nächstes hervorgehoben`);
|
||
|
||
/* Der um 23:30 kann nicht vorbei sein, der um 07:30 (meist) schon.
|
||
Geprüft wird die Regel, nicht die Uhrzeit des Prüflaufs: Was als
|
||
Nächstes dran ist, darf nie zugleich "vorbei" sein. */
|
||
ok(!zeilen.some((z) => z.naechster && z.vorbei),
|
||
"kein Termin ist gleichzeitig 'als Nächstes' und 'vorbei'");
|
||
|
||
await ctx.close();
|
||
}
|
||
|
||
/* =======================================================================
|
||
3. Die leeren Fälle
|
||
======================================================================= */
|
||
melde("\n=== Wenn eine Hälfte nichts zu zeigen hat ===");
|
||
{
|
||
/* Ein Creator ohne Termine und ohne offene Punkte: Die Kachel darf
|
||
dann nicht als leerer Rahmen dastehen. */
|
||
const { ctx, seite } = await alsRolle("creator", "CODE-CREA-0001");
|
||
const sichtbar = await seite.isVisible("#dran-block");
|
||
const zeilen = (await seite.$$(".tagesliste__punkt")).length;
|
||
const hinweise = (await seite.$$(".dran__punkt")).length;
|
||
|
||
if (zeilen === 0 && hinweise === 0) {
|
||
ok(!sichtbar, "beide Hälften leer → die Kachel bleibt ganz weg");
|
||
} else {
|
||
/* Hat er etwas, muss die Kachel stehen -- und die leere Hälfte
|
||
einen Satz tragen statt einer Lücke. */
|
||
ok(sichtbar, `er hat ${hinweise} Hinweise und ${zeilen} Termine → Kachel ist da`);
|
||
if (!zeilen) {
|
||
const satz = await seite.isVisible("#heute-leer");
|
||
ok(satz, "die leere Terminseite sagt 'Heute steht nichts an'");
|
||
}
|
||
if (!hinweise) {
|
||
const satz = await seite.isVisible("#dran-leer");
|
||
ok(satz, "die leere Hinweisseite sagt, dass nichts offen ist");
|
||
}
|
||
}
|
||
await ctx.close();
|
||
}
|
||
|
||
/* =======================================================================
|
||
4. Am Handy: untereinander
|
||
======================================================================= */
|
||
melde("\n=== Am Handy (390 px) ===");
|
||
{
|
||
const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001", 390);
|
||
|
||
const lage = await seite.evaluate(() => {
|
||
const l = document.querySelector("#dran-seite").getBoundingClientRect();
|
||
const r = document.querySelector("#heute-seite").getBoundingClientRect();
|
||
return { linksUnten: Math.round(l.bottom), rechtsOben: Math.round(r.top) };
|
||
});
|
||
ok(lage.rechtsOben >= lage.linksUnten - 2,
|
||
`untereinander statt nebeneinander (links endet ${lage.linksUnten}, rechts beginnt ${lage.rechtsOben})`);
|
||
|
||
const ueber = await seite.evaluate(() =>
|
||
Math.round(document.documentElement.scrollWidth - document.documentElement.clientWidth));
|
||
ok(ueber <= 0, `nichts steht seitlich über (${ueber} px)`);
|
||
|
||
/* Ein langer Titel darf die Kachel nicht sprengen -- deshalb die
|
||
Ellipsis. Geprüft am gerechneten Stil, nicht an der CSS-Datei. */
|
||
const schnitt = await seite.$eval(".tagesliste__titel",
|
||
(e) => getComputedStyle(e).textOverflow);
|
||
ok(schnitt === "ellipsis", `lange Titel werden abgeschnitten (${schnitt})`);
|
||
|
||
await ctx.close();
|
||
}
|
||
|
||
/* =======================================================================
|
||
GEGENPROBE — misst die Prüfung überhaupt etwas?
|
||
======================================================================= */
|
||
melde("\n=== Gegenprobe ===");
|
||
{
|
||
const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");
|
||
|
||
/* 1. Trifft der Selektor wirklich? */
|
||
const vorher = (await seite.$$(".tagesliste__punkt")).length;
|
||
await seite.evaluate(() => {
|
||
for (const p of document.querySelectorAll(".tagesliste__punkt")) p.remove();
|
||
});
|
||
const nachher = (await seite.$$(".tagesliste__punkt")).length;
|
||
ok(vorher === 3 && nachher === 0,
|
||
`der Selektor trifft (${vorher} gefunden, nach dem Entfernen ${nachher})`);
|
||
|
||
/* 2. Erkennt die Breitenmessung eine UNgleiche Teilung? Ohne diesen
|
||
Nachweis wäre "gleich breit" oben nur eine Behauptung. */
|
||
await seite.reload({ waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(900);
|
||
await seite.addStyleTag({ content:
|
||
"#dran-block { grid-template-columns: 3fr 1px 1fr !important; }" });
|
||
await seite.waitForTimeout(150);
|
||
const schief = await seite.evaluate(() => {
|
||
const l = document.querySelector("#dran-seite").getBoundingClientRect();
|
||
const r = document.querySelector("#heute-seite").getBoundingClientRect();
|
||
return Math.abs(Math.round(l.width) - Math.round(r.width));
|
||
});
|
||
ok(schief > 2,
|
||
`mit absichtlich schiefer Teilung misst die Prüfung ${schief} px Unterschied `
|
||
+ `— sie erkennt eine ungleiche Kachel also`);
|
||
|
||
await ctx.close();
|
||
}
|
||
|
||
await browser.close();
|
||
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
|
||
|
||
melde(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`);
|
||
process.exit(fehler ? 1 : 0);
|