dogfather-universe/server/mess-manager-ziele.mjs

/* =====================================================================
   WIE DIE MANAGER-ZIELE AUSSEHEN (02.10.2026)

   SIE PRUEFT NICHTS und meldet keinen Fehlschlag -- sie macht Bilder,
   auf denen man nachsehen kann, und misst drei Dinge, die man auf
   einem Bild schlecht sieht: waagerechtes Schieben, Beruehrziele unter
   44 px und Ueberdeckungen.

   Deshalb `mess-` und nicht `pruef-`.

   ZWEI BREITEN, und die kleinere ist die wichtigere: 412 px ist die
   haeufigste Android-Breite. Am 06.09.2026 hat genau diese Breite im
   Creator Workspace eine Ueberdeckung aufgedeckt, bei der ein Knopf
   ueber einem anderen lag -- auf dem Computer war nichts zu sehen.

   EIGENE WEGWERF-DATENBANK in einem mktemp-Ordner. In einem laufenden
   System waeren das Testdaten, und die sind verboten.

   Aufrufen mit:  node server/mess-manager-ziele.mjs
   ===================================================================== */
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { request as httpAnfrage } from "node:http";

import { eigenerPort } from "./helfer-port.mjs";
const PORT = await eigenerPort(import.meta, "mess-manager-ziele");
const ordner = mkdtempSync(join(tmpdir(), "ws-mz-bild-"));
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";
await import("./index.js");
notbremse(240_000, "mess-manager-ziele");
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); });

/* ---------- Leute und ein paar echte Eintraege ----------------------- */
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 alt = new Date(Date.now() - 365 * 86400_000).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"), alt).id;
};
anlegen("Filipe", "admin", "CODE-DOGI-0001");
const idScout = anlegen("Kevin", "scout", "CODE-KEVIN-0001");
anlegen("Patrick", "manager", "CODE-PAT-000001");
anlegen("Sandra", "scout", "CODE-SAND-00001");
anlegen("Spicy Media", "spicy", "CODE-SPICY-0001");

const { monatJetzt, tagBerlin } = await import("./workspace-manager-ziele.js");
const MONAT = monatJetzt();
const HEUTE = tagBerlin();

/* DER LAUFENDE MONAT MUSS DER DATENBANK GESAGT WERDEN, bevor hier von
   Hand eingetragen wird. `mz_lage` steht nach dem Anlegen auf
   '0000-00', und die Trigger lehnen dann JEDEN Eintrag ab -- auch den
   fuer den aktuellen Monat. Das ist richtig so (zu, solange niemand
   gesagt hat, welcher Monat laeuft) und hat diesen Lauf beim ersten
   Mal abgebrochen. Im Betrieb setzt es jede Anfrage selbst. */
d.prepare("UPDATE mz_lage SET monat = ? WHERE eins = 1").run(MONAT);

/* EIN GEMISCHTER STAND -- genau darum geht es beim Ansehen: eine
   erfuellte Zeile, eine halbe, eine leere. Stuende alles auf null,
   sieht man die Ampel gar nicht. */
const setz = d.prepare(`INSERT INTO mz_eintrag
  (person_id, aufgabe, monat, datum, name, name_klein, link, link_klein, art, notiz, erstellt)
  VALUES (?,?,?,?,?,?,?,?,?,?,?)`);
setz.run(idScout, "creator", MONAT, HEUTE, "@lunatanzt", "lunatanzt", null, null, null,
  "über Discord gefunden, sehr aktiv", jetzt);
setz.run(idScout, "creator", MONAT, HEUTE, "@marakocht", "marakocht", null, null, null, null, jetzt);
setz.run(idScout, "meeting", MONAT, HEUTE, null, null, null, null, null, "Wochenrunde", jetzt);
setz.run(idScout, "werbung", MONAT, HEUTE, null, null,
  "https://www.tiktok.com/@dogfather/video/7312", "tiktok.com/@dogfather/video/7312",
  "agentur", null, jetzt);
/* EINE UEBERFAELLIGE AUFGABE -- nicht fuer diese Seite, sondern fuer
   die KACHELWAND davor.

   Seit dem 02.10.2026 traegt eine Kachel, an der eine Warnung haengt,
   einen farbigen Saum (Vorlage, Punkt 05: „farbiger Rand + Badge").
   Ohne irgendeine Warnung im Bestand waere auf dem Bild der
   Startseite nichts davon zu sehen -- und „kein Saum" sieht genauso
   aus wie „Saum kaputt". Eine ueberfaellige Aufgabe ist die
   einfachste Warnung, die sich herstellen laesst, und sie beweist
   den Saum fuer JEDE Kachel, nicht nur fuer eine. */
d.prepare(`INSERT INTO aufgaben (titel, status, prioritaet, verantwortlich_id, frist, erstellt, erstellt_von)
           VALUES (?,?,?,?,?,?,?)`)
  .run("Laengst faellig (nur fuer das Bild)", "offen", "hoch", idScout,
    "2026-09-01", jetzt, idScout);

/* Ein uebergebener Lead, der noch nicht eingetragen ist -- damit der
   Vorschlagskasten auf dem Bild zu sehen ist. */
d.prepare(`INSERT INTO leads (name, handle, status, scout_id, erstellt, erstellt_von, uebergeben_am)
           VALUES (?,?,?,?,?,?,?)`)
  .run("Nina B.", "@ninab", "uebergeben", idScout, jetzt, idScout, `${HEUTE}T09:00:00Z`);
d.close();

/* ---------- Anmelden -------------------------------------------------- */
const anfrage = (pfad, art, koerper) => new Promise((fertig, schief) => {
  const a = httpAnfrage({
    host: "127.0.0.1", port: PORT, path: pfad, method: art,
    headers: { "Content-Type": "application/json", Origin: `http://127.0.0.1:${PORT}` },
  }, (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();
});

async function keksFuer(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 keksScout = await keksFuer("scout", "CODE-KEVIN-0001");
const keksDogi = await keksFuer("admin", "CODE-DOGI-0001");

/* ---------- Bilder ---------------------------------------------------- */
const pw = await import(
  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await pw.chromium.launch();

/** Was man auf einem Bild schlecht sieht. */
const nachmessen = () => ({
  /* Waagerechtes Schieben ist im Haus ausdruecklich unerwuenscht.
     Zwei Pixel Toleranz fuer Rundungen. */
  schiebtQuer: document.documentElement.scrollWidth > window.innerWidth + 2,
  breite: window.innerWidth,
  /* Jedes Beruehrziel. 44 px ist die Hausgroesse (`--feld-ziel`). */
  zuKlein: [...document.querySelectorAll("button, a[href], input, select")]
    .filter((e) => {
      const k = e.getBoundingClientRect();
      return k.width > 0 && k.height > 0 && k.height < 40;
    })
    .map((e) => `${e.tagName.toLowerCase()}.${e.className || "-"}: ${Math.round(e.getBoundingClientRect().height)}px`),
  /* Ueberdeckungen zwischen den Knoepfen der Kopfzeile einer Aufgabe. */
  zeilen: [...document.querySelectorAll(".mz-zeile")].map((z) => ({
    aufgabe: z.dataset.aufgabe,
    stufe: z.dataset.stufe,
    zahl: z.querySelector(".mz-zeile__zahl")?.textContent,
    satz: z.querySelector(".mz-zeile__lage")?.textContent,
  })),
  ring: document.getElementById("ring-zahl")?.textContent
    + " " + document.getElementById("ring-von")?.textContent,
  kopf: document.getElementById("kopf-stand")?.textContent,
  rest: document.getElementById("kopf-rest")?.textContent,
  vorschlaege: document.querySelectorAll(".mz-vorschlag__knopf").length,
});

async function bild(name, keks, breite, hoehe, vorher) {
  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: "127.0.0.1", path: "/" };
  }));
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (e) => {
    if (e.type() === "error" && !/favicon|net::ERR/i.test(e.text())) konsole.push(e.text().slice(0, 160));
  });
  seite.on("pageerror", (e) => konsole.push("Absturz: " + e.message));

  await seite.goto(`http://127.0.0.1:${PORT}/workspace/manager-ziele.html`,
    { waitUntil: "networkidle" });
  await seite.waitForTimeout(1200);
  if (vorher) await vorher(seite);
  await seite.waitForTimeout(500);

  const blick = await seite.evaluate(nachmessen);
  await seite.screenshot({ path: `bild-manager-ziele-${name}.png`, fullPage: true });

  console.log(`\n--- ${name} (${breite}px) ---`);
  console.log(`  Ring:        ${blick.ring}`);
  console.log(`  Kopf:        ${blick.kopf}`);
  console.log(`  Rest:        ${blick.rest}`);
  for (const z of blick.zeilen) {
    console.log(`  ${String(z.aufgabe).padEnd(9)} ${String(z.zahl).padEnd(6)} ${String(z.stufe).padEnd(8)} ${z.satz}`);
  }
  console.log(`  Vorschlaege: ${blick.vorschlaege}`);
  console.log(`  Quer schieben: ${blick.schiebtQuer ? "JA — Befund!" : "nein"}`);
  console.log(`  Zu kleine Ziele: ${blick.zuKlein.length ? blick.zuKlein.join(", ") : "keine"}`);
  if (konsole.length) console.log(`  KONSOLE: ${konsole.join(" | ")}`);
  await kontext.close();
  return blick;
}

/* Die vier Aufgabenzeilen einmal aufklappen, damit die Eintraege und
   der Vorschlagskasten auf dem Bild stehen. */
const aufklappen = async (seite) => {
  for (const kopf of await seite.$$(".mz-zeile__kopf")) {
    await kopf.click();
    await seite.waitForTimeout(250);
  }
};

const handy = await bild("scout-handy", keksScout, 412, 915, aufklappen);
const computer = await bild("scout-computer", keksScout, 1280, 1100, aufklappen);
await bild("dogfather-team", keksDogi, 1280, 1200, null);
await bild("dogfather-handy", keksDogi, 412, 915, null);

/* Und das Formular, denn dort wird wirklich getippt. */
await bild("formular-handy", keksScout, 412, 915, async (seite) => {
  const knopf = await seite.$(".mz-zeile__fuss .knopf");
  if (knopf) { await knopf.click(); await seite.waitForTimeout(400); }
});

/* ---------- EIN KLICK, UND ES STEHT DRIN ----------------------------
   Der Kern von Filipes Wunsch („so wenig wie moeglich zu tippen").
   Gemessen wird nicht, ob der Knopf da ist, sondern ob danach eine
   andere Zahl dasteht -- und ob „Rueckgaengig" sie zurueckholt. */
{
  const kontext = await browser.newContext({ viewport: { width: 412, height: 915 }, hasTouch: true });
  await kontext.addCookies(keksScout.split("; ").map((k) => {
    const [n, ...r] = k.split("=");
    return { name: n, value: r.join("="), domain: "127.0.0.1", path: "/" };
  }));
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("pageerror", (e) => konsole.push("Absturz: " + e.message));
  seite.on("console", (e) => {
    if (e.type() === "error" && !/favicon|net::ERR/i.test(e.text())) konsole.push(e.text().slice(0, 160));
  });
  await seite.goto(`http://127.0.0.1:${PORT}/workspace/manager-ziele.html`, { waitUntil: "networkidle" });
  await seite.waitForTimeout(1200);

  const zahlVon = (schluessel) => seite.evaluate((k) => document
    .querySelector(`.mz-zeile[data-aufgabe="${k}"] .mz-zeile__zahl`)?.textContent, schluessel);

  const vorher = await zahlVon("schulung");
  await seite.click('.mz-zeile[data-aufgabe="schulung"] .mz-schnell .knopf');
  await seite.waitForTimeout(900);
  const nachher = await zahlVon("schulung");
  const meldung = await seite.evaluate(() =>
    document.querySelector(".mz-gelungen")?.textContent || "-");
  await seite.screenshot({ path: "bild-manager-ziele-einklick.png" });

  /* Und zurueck. */
  const zurueckDa = await seite.$(".mz-gelungen__zurueck");
  if (zurueckDa) { await zurueckDa.click(); await seite.waitForTimeout(900); }
  const zurueckZahl = await zahlVon("schulung");

  console.log("");
  console.log("--- Ein Klick, ein Eintrag (412px) ---");
  console.log(`  vorher:        ${vorher}`);
  console.log(`  nach EINEM Klick: ${nachher}  ${nachher !== vorher ? "" : "— KEINE Aenderung, Befund!"}`);
  console.log(`  Meldung:       ${meldung}`);
  console.log(`  nach Rueckgaengig: ${zurueckZahl}  ${zurueckZahl === vorher ? "(wieder wie vorher)" : "— NICHT zurueck, Befund!"}`);
  if (konsole.length) console.log(`  KONSOLE: ${konsole.join(" | ")}`);
  await kontext.close();
}

/* ---------- Und die Kachelwand davor --------------------------------
   Gemessen wird nicht, wie es aussieht, sondern WAS wirklich gesetzt
   ist: das Merkmal am Element und der Schatten, den der Browser
   daraus errechnet. Ein Bild allein kann einen Saum von einem Pixel
   nicht beweisen. */
{
  const kontext = await browser.newContext({ viewport: { width: 412, height: 915 }, hasTouch: true });
  await kontext.addCookies(keksScout.split("; ").map((k) => {
    const [n, ...r] = k.split("=");
    return { name: n, value: r.join("="), domain: "127.0.0.1", path: "/" };
  }));
  const seite = await kontext.newPage();
  await seite.goto(`http://127.0.0.1:${PORT}/workspace/start.html`, { waitUntil: "networkidle" });
  await seite.waitForTimeout(1800);
  const wand = await seite.evaluate(() => {
    const meine = [...document.querySelectorAll('.kachel')]
      .find((k) => (k.querySelector('.kachel__link')?.getAttribute('href') || '')
        .startsWith('manager-ziele.html'));
    const gewarnt = [...document.querySelectorAll('.kachel[data-warn="ja"]')];
    return {
      kachelDa: !!meine,
      name: meine?.querySelector('.kachel__name')?.textContent || '-',
      zahl: meine?.querySelector('.kachel__zahl')?.textContent || '-',
      gewarnte: gewarnt.length,
      saum: gewarnt[0] ? getComputedStyle(gewarnt[0]).boxShadow.slice(0, 60) : '-',
      /* GEGENPROBE: Eine Kachel OHNE Warnung darf den Saum nicht haben.
         Sonst waere „alle haben ihn" dasselbe wie „keiner hat ihn". */
      ohneWarnung: [...document.querySelectorAll('.kachel:not([data-warn])')].length,
    };
  });
  /* ZU DER KACHEL HIN, UM DIE ES GEHT. Ein Bild vom Seitenanfang
     zeigte beim ersten Lauf den Begruessungsblock -- richtig
     aufgenommen und ohne jeden Nutzen. */
  const gewarnteKachel = await seite.$('.kachel[data-warn="ja"]');
  if (gewarnteKachel) await gewarnteKachel.scrollIntoViewIfNeeded();
  await seite.waitForTimeout(400);
  await seite.screenshot({ path: "bild-manager-ziele-wand.png", fullPage: false });
  console.log("\n--- Die Kachelwand (412px) ---");
  console.log(`  Kachel da:        ${wand.kachelDa ? "ja" : "NEIN — Befund!"} (${wand.name})`);
  console.log(`  Abzeichen:        ${wand.zahl}`);
  console.log(`  Kacheln mit Saum: ${wand.gewarnte}`);
  console.log(`  ohne Saum:        ${wand.ohneWarnung}`);
  console.log(`  Schatten:         ${wand.saum}`);
  await kontext.close();
}

await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }

const befunde = [handy, computer].filter((b) => b.schiebtQuer || b.zuKlein.length);
console.log(befunde.length
  ? `\n${befunde.length} Breite(n) mit Befund — siehe oben.`
  : "\nKein waagerechtes Schieben, kein zu kleines Beruehrziel.");
process.exit(0);