Terminal im Geraetehaus mit Offline-Betrieb ergaenzen

Phase 4: eine eigene Oberflaeche unter /kiosk fuer das Wandtablet in der
Fahrzeughalle — mit Handschuhen bedienbar und arbeitsfaehig, wenn das Netz
weg ist.

Datenmodell: Fahrt, Anwesenheit, Waescheabgabe, Inventurgang,
Inventurposten, KioskVorgang und SyncKonflikt. Die Kennung eines Vorgangs
erzeugt der Browser beim Einreihen und ist damit der Idempotenzschluessel;
kommt derselbe Vorgang nach abgebrochener Uebertragung erneut an, erkennt
ihn der Server wieder. Die Datenbank setzt vier Regeln selbst durch und
verweigert UPDATE und DELETE auf kiosk_vorgang.

Offline: von Hand geschriebener Service Worker, Warteschlange in der
IndexedDB (Dexie), Fotos als Blob daneben, sichtbarer Zustand als Leiste
ueber allem. Was sich beim Nachtragen nicht anwenden laesst, landet als
Konflikt unter /terminal statt verworfen zu werden.

Dazu: Anmeldung per Ausweis, PIN oder signierter QR-Marke vom Handy,
Hallenmonitor mit optionalen DWD-Warnungen, Installation als App.

Behoben: die Warteschlange zog ihren Wiederholungstakt bei jedem Rendern
neu auf und haette einen liegen gebliebenen Vorgang nie ein zweites Mal
geschickt. Gefunden vom Offline-E2E-Test.

31 neue Tests (20 Unit, 11 gegen eine echte Datenbank, 9 E2E je Browser).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

scripts/icons.ts

@@ -0,0 +1,116 @@
+/**
+ * Erzeugt die Symbole für das Web-App-Manifest.
+ *
+ * Warum ein Skript und keine gezeichneten Dateien: die Symbole sollen aus
+ * derselben Quelle stammen wie das Zeichen in der Seitenleiste, und sie sollen
+ * sich ändern lassen, ohne dass jemand ein Grafikprogramm öffnen muss.
+ *
+ * Gezeichnet wird die Flamme als SVG auf farbigem Grund, aufgenommen wird mit
+ * demselben Chromium, das ohnehin für die Tests da ist.
+ *
+ *   npm run icons
+ *
+ * Die Ergebnisse liegen in public/icons und werden mit eingecheckt — ein Build
+ * soll keinen Browser brauchen.
+ */
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { chromium } from "@playwright/test";
+
+const ZIEL = path.join(process.cwd(), "public", "icons");
+
+/** Die Flamme aus lucide-react, als eigenständiges SVG. */
+const FLAMME = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+     stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
+</svg>`;
+
+interface Symbolvorlage {
+  datei: string;
+  groesse: number;
+  /** Sicherheitsabstand für maskierbare Symbole (Android schneidet rund zu). */
+  rand: number;
+  hintergrund: string;
+  farbe: string;
+  eckenRadius: string;
+}
+
+const SYMBOLE: Symbolvorlage[] = [
+  {
+    datei: "florian-192.png",
+    groesse: 192,
+    rand: 22,
+    hintergrund: "#b91c1c",
+    farbe: "#ffffff",
+    eckenRadius: "22%",
+  },
+  {
+    datei: "florian-512.png",
+    groesse: 512,
+    rand: 60,
+    hintergrund: "#b91c1c",
+    farbe: "#ffffff",
+    eckenRadius: "22%",
+  },
+  {
+    // Maskierbar: mehr Rand, voller Grund bis zum Rand — Android schneidet
+    // daraus je nach Gerät einen Kreis oder ein Rechteck.
+    datei: "florian-maskable.png",
+    groesse: 512,
+    rand: 110,
+    hintergrund: "#b91c1c",
+    farbe: "#ffffff",
+    eckenRadius: "0",
+  },
+];
+
+function seite(vorlage: Symbolvorlage): string {
+  return `<!doctype html>
+<html><head><meta charset="utf-8"><style>
+  html, body { margin: 0; padding: 0; }
+  .grund {
+    width: ${vorlage.groesse}px;
+    height: ${vorlage.groesse}px;
+    background: ${vorlage.hintergrund};
+    border-radius: ${vorlage.eckenRadius};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${vorlage.farbe};
+  }
+  svg {
+    width: ${vorlage.groesse - vorlage.rand * 2}px;
+    height: ${vorlage.groesse - vorlage.rand * 2}px;
+  }
+</style></head>
+<body><div class="grund">${FLAMME}</div></body></html>`;
+}
+
+async function main(): Promise<void> {
+  await mkdir(ZIEL, { recursive: true });
+
+  const browser = await chromium.launch();
+
+  for (const vorlage of SYMBOLE) {
+    const seiteImBrowser = await browser.newPage({
+      viewport: { width: vorlage.groesse, height: vorlage.groesse },
+      deviceScaleFactor: 1,
+    });
+
+    await seiteImBrowser.setContent(seite(vorlage));
+    const ziel = path.join(ZIEL, vorlage.datei);
+    await seiteImBrowser.locator(".grund").screenshot({ path: ziel, omitBackground: false });
+    await seiteImBrowser.close();
+
+    console.info(`[icons] ${vorlage.datei} (${vorlage.groesse}px) -> ${ziel}`);
+  }
+
+  await browser.close();
+  console.info("[icons] Fertig.");
+}
+
+main().catch((fehler) => {
+  console.error("[icons] Abbruch:", fehler);
+  process.exit(1);
+});

scripts/screenshots.ts

@@ -15,7 +15,7 @@
 import "dotenv/config";
 import { mkdir } from "node:fs/promises";
 import path from "node:path";
-import { chromium, type Page } from "@playwright/test";
+import { chromium, type Browser, type Page } from "@playwright/test";
 
 const BASIS = process.env.E2E_BASIS_URL ?? "http://localhost:3100";
 const ZIEL = path.join(process.cwd(), "docs", "screenshots");
@@ -138,6 +138,38 @@ const AUFNAHMEN: Aufnahme[] = [
     beschreibung: "Übungen mit Thema und Teilnehmerzahl",
     angemeldet: true,
   },
+
+  // Phase 4 — Terminal im Gerätehaus
+  {
+    name: "25-kiosk-kacheln",
+    pfad: "/kiosk",
+    beschreibung: "Kachelschirm des Terminals",
+    angemeldet: true,
+  },
+  {
+    name: "26-kiosk-mangel",
+    pfad: "/kiosk/mangel",
+    beschreibung: "Mangel melden in drei Schritten",
+    angemeldet: true,
+  },
+  {
+    name: "27-kiosk-monitor",
+    pfad: "/kiosk/monitor",
+    beschreibung: "Hallenmonitor im Vollbild",
+    angemeldet: true,
+  },
+  {
+    name: "28-terminal-uebersicht",
+    pfad: "/terminal",
+    beschreibung: "Was am Terminal zusammenkommt — Sicht der Verwaltung",
+    angemeldet: true,
+  },
+  {
+    name: "29-anmeldemarke",
+    pfad: "/anmeldemarke",
+    beschreibung: "Anmeldemarke fürs Handy",
+    angemeldet: true,
+  },
 ];
 
 /**
@@ -276,10 +308,61 @@ async function portalAufnehmen(seite: Page, darstellung: string): Promise<void>
   }
 }
 
+/**
+ * Der Anmeldeschirm des Terminals.
+ *
+ * Braucht das Gegenteil aller anderen Aufnahmen: **keine** Sitzung, dafür ein
+ * eingerichtetes Gerät. Beides zusammen gibt es nur in einem eigenen Kontext,
+ * in dem vor dem ersten Aufruf die Geräteangaben im localStorage stehen.
+ */
+async function kioskAnmeldungAufnehmen(
+  browser: Browser,
+  darstellung: "light" | "dark",
+): Promise<void> {
+  const kontext = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    deviceScaleFactor: 2,
+    locale: "de-DE",
+    timezoneId: "Europe/Berlin",
+    colorScheme: darstellung,
+  });
+
+  try {
+    await kontext.addInitScript(
+      (angaben: { schluessel: string; wehr: string }) => {
+        // Dieselben Schlüssel wie in lib/kiosk/geraet.ts.
+        window.localStorage.setItem("florian.kiosk.geraeteschluessel", angaben.schluessel);
+        window.localStorage.setItem("florian.kiosk.wehr", angaben.wehr);
+      },
+      {
+        schluessel: process.env.KIOSK_DEVICE_SECRET ?? "bitte_aendern_kiosk_geheimnis",
+        wehr: "ff-musterhausen",
+      },
+    );
+
+    const seite = await kontext.newPage();
+    await seite.goto(`${BASIS}/kiosk`, { waitUntil: "networkidle" });
+    await fertigGeladen(seite);
+
+    const datei = path.join(ZIEL, `30-kiosk-anmeldung-${darstellung}.png`);
+    await seite.screenshot({ path: datei, fullPage: true });
+    console.info(`[screenshots] Anmeldung am Terminal (${darstellung}) -> ${datei}`);
+  } catch (fehler) {
+    console.warn("[screenshots] Anmeldeschirm des Terminals fehlgeschlagen:", fehler);
+  } finally {
+    await kontext.close();
+  }
+}
+
 async function main(): Promise<void> {
   await mkdir(ZIEL, { recursive: true });
 
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({
+    // Der Mangel-Wizard startet die Kamera von selbst. Ohne Gerät stünde dort
+    // eine Fehlermeldung; mit dem Testbild von Chromium zeigt das Bild, was am
+    // Tablet zu sehen ist.
+    args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream"],
+  });
 
   for (const darstellung of ["light", "dark"] as const) {
     const kontext = await browser.newContext({
@@ -344,6 +427,9 @@ async function main(): Promise<void> {
     await portalAufnehmen(seite, darstellung);
 
     await kontext.close();
+
+    // Eigener Kontext, weil dieser hier angemeldet ist.
+    await kioskAnmeldungAufnehmen(browser, darstellung);
   }
 
   await browser.close();