dogfather-universe/server/pruef-tagesblick.mjs

/* 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");

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");
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");

  /* EIN Rahmen um beides -- nicht zwei Kacheln nebeneinander. */
  const rahmen = await seite.$eval("#dran-block", (e) => {
    const s = getComputedStyle(e);
    return { breite: s.borderTopWidth, radius: s.borderTopLeftRadius, anzeige: s.display };
  });
  ok(rahmen.anzeige === "grid" && parseFloat(rahmen.breite) >= 1
    && parseFloat(rahmen.radius) > 4,
    `ein Rahmen um beides (${rahmen.anzeige}, ${rahmen.breite}, Radius ${rahmen.radius})`);

  /* 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. Der Rand
     folgt darunter, aber nur an einem Termin, der nachweislich noch
     nicht vorbei ist. */
  const toene = await seite.$$eval(".tagesliste__punkt", (punkte) => punkte.map((p) => ({
    art: p.dataset.art,
    ton: getComputedStyle(p).getPropertyValue("--ton").trim().toLowerCase(),
    vorbei: p.dataset.vorbei === "ja",
    rand: getComputedStyle(p.querySelector(".tagesliste__marke")).borderTopColor,
  })));

  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 der Rand 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.rand.replace(/\s/g, "") === `rgb(${r},${g},${b})`,
      `der Ring des nächsten Termins (${offen.art}) trägt sie sichtbar: ${offen.rand}`);
  } else {
    melde(`  --     kein ausstehender Termin zur Zeit des Laufs — der Ring `
      + `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) {
    ok(vorbei.rand.replace(/\s/g, "") !== `rgb(80,167,82)`.replace(/\s/g, "")
      || vorbei.art !== "review",
      `ein vorbeigezogener Termin ist gedämpft (Ring ${vorbei.rand} statt der Artfarbe)`);
  }

  /* 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);