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>
2026-09-03 18:35:48 +02:00
parent d8d692098d
commit 791523027f
126 changed files with 7787 additions and 40 deletions
@@ -0,0 +1,120 @@
+"use client";
+
+import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { geraetEinrichten, geraeteangaben, geraetVergessen } from "@/lib/kiosk/geraet";
+
+/**
+ * Einrichtung des Terminals.
+ *
+ * Einmal je Tablet: Gerätegeheimnis und Kurzname der Wehr. Beides steht in der
+ * `.env` des Servers (`KIOSK_DEVICE_SECRET`) beziehungsweise in den Stammdaten
+ * der Wehr.
+ *
+ * Damit das nicht abgetippt werden muss, nimmt die Seite beides auch aus der
+ * Adresse entgegen:
+ *
+ *   /kiosk/einrichten?wehr=ff-musterhausen&schluessel=…
+ *
+ * Der Administrator schickt sich diesen Link einmal selbst — etwa als QR-Code
+ * vom eigenen Rechner — und ruft ihn am Tablet auf.
+ */
+export function EinrichtenFormular() {
+  const router = useRouter();
+  const parameter = useSearchParams();
+
+  const [schluessel, setSchluessel] = React.useState("");
+  const [wehr, setWehr] = React.useState("");
+  const [bestehend, setBestehend] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const vorhanden = geraeteangaben();
+    if (vorhanden) setBestehend(vorhanden.organisationSlug);
+
+    const ausAdresse = parameter.get("schluessel");
+    const wehrAusAdresse = parameter.get("wehr");
+    if (ausAdresse) setSchluessel(ausAdresse);
+    if (wehrAusAdresse) setWehr(wehrAusAdresse);
+  }, [parameter]);
+
+  return (
+    <div className="mx-auto max-w-xl space-y-6 p-6">
+      <div>
+        <h1 className="text-3xl font-semibold tracking-tight">Terminal einrichten</h1>
+        <p className="mt-2 text-lg text-[var(--muted-foreground)]">
+          Einmal je Tablet. Danach meldet sich jeder mit Ausweis, QR-Code oder PIN an.
+        </p>
+      </div>
+
+      {bestehend && (
+        <div className="rounded-lg border border-[var(--border)] p-4">
+          <p className="text-lg">
+            Dieses Tablet ist bereits für <strong>{bestehend}</strong> eingerichtet.
+          </p>
+          <Button
+            variant="outline"
+            className="mt-3 h-14 text-lg"
+            onClick={() => {
+              geraetVergessen();
+              setBestehend(null);
+            }}
+          >
+            Einrichtung löschen
+          </Button>
+        </div>
+      )}
+
+      <form
+        className="space-y-4"
+        onSubmit={(ereignis) => {
+          ereignis.preventDefault();
+          geraetEinrichten({
+            geraeteSchluessel: schluessel.trim(),
+            organisationSlug: wehr.trim(),
+          });
+          router.push("/kiosk");
+          router.refresh();
+        }}
+      >
+        <div className="space-y-2">
+          <Label htmlFor="wehr" className="text-lg">
+            Kurzname der Wehr
+          </Label>
+          <Input
+            id="wehr"
+            className="h-16 text-xl"
+            value={wehr}
+            onChange={(ereignis) => setWehr(ereignis.target.value)}
+            placeholder="ff-musterhausen"
+            required
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="schluessel" className="text-lg">
+            Gerätegeheimnis
+          </Label>
+          <Input
+            id="schluessel"
+            type="password"
+            className="h-16 text-xl"
+            value={schluessel}
+            onChange={(ereignis) => setSchluessel(ereignis.target.value)}
+            required
+          />
+          <p className="text-[var(--muted-foreground)]">
+            Steht als <code>KIOSK_DEVICE_SECRET</code> in der <code>.env</code> des Servers. Es
+            bleibt auf diesem Tablet und geht nur beim Anmelden mit.
+          </p>
+        </div>
+
+        <Button type="submit" className="h-16 w-full text-lg">
+          Terminal einrichten
+        </Button>
+      </form>
+    </div>
+  );
+}