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>
This commit is contained in:
Florian Wilde
co-authored by
Claude Opus 5
Claude Opus 5
parent
d8d692098d
commit
791523027f
@@ -0,0 +1,15 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { aktuelleSitzung } from "@/lib/auth";
|
||||
import { hatRecht } from "@/lib/authz";
|
||||
import { env } from "@/lib/env";
|
||||
import { FahrtWizard } from "@/app/kiosk/fahrt/wizard";
|
||||
|
||||
export const metadata = { title: "Fahrtenbuch" };
|
||||
|
||||
export default async function FahrtSeite() {
|
||||
const sitzung = await aktuelleSitzung();
|
||||
if (!sitzung) redirect("/kiosk");
|
||||
if (!hatRecht(sitzung, "fahrtenbuch.fuehren")) redirect("/kiosk");
|
||||
|
||||
return <FahrtWizard abmeldenNachSekunden={env.KIOSK_IDLE_TIMEOUT} />;
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { FahrtZweck } from "@prisma/client";
|
||||
import { trpc } from "@/lib/trpc/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Erledigt, GrosseAuswahl, KioskRahmen, WirdGeladen } from "@/components/kiosk/rahmen";
|
||||
import { useWarteschlange } from "@/components/kiosk/warteschlange";
|
||||
import { alsDatumZeit } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Das Fahrtenbuch am Terminal.
|
||||
*
|
||||
* Zwei Zustände, kein Formular: Wer nicht unterwegs ist, beginnt eine Fahrt.
|
||||
* Wer unterwegs ist, beendet sie. Der Kilometerstand ist vorbelegt mit dem,
|
||||
* was am Fahrzeug steht — meist stimmt er, und wenn nicht, wird er überschrieben.
|
||||
*
|
||||
* Warum das überhaupt am Terminal steht: das Fahrtenbuch wird sonst auf einem
|
||||
* Zettel im Handschuhfach geführt, und der ist nach einem halben Jahr weg.
|
||||
*/
|
||||
|
||||
const ZWECK: Array<{ wert: FahrtZweck; titel: string; hinweis: string }> = [
|
||||
{ wert: FahrtZweck.EINSATZ, titel: "Einsatz", hinweis: "alarmiert" },
|
||||
{ wert: FahrtZweck.UEBUNG, titel: "Übung", hinweis: "Übungsdienst" },
|
||||
{ wert: FahrtZweck.AUSBILDUNG, titel: "Ausbildung", hinweis: "Lehrgang, Schulung" },
|
||||
{ wert: FahrtZweck.WERKSTATT, titel: "Werkstatt", hinweis: "Wartung, TÜV" },
|
||||
{ wert: FahrtZweck.BESCHAFFUNG, titel: "Beschaffung", hinweis: "Material holen" },
|
||||
{ wert: FahrtZweck.SONSTIGES, titel: "Sonstiges", hinweis: "Probefahrt, Überführung" },
|
||||
];
|
||||
|
||||
export function FahrtWizard({ abmeldenNachSekunden }: { abmeldenNachSekunden: number }) {
|
||||
const { erfassen } = useWarteschlange();
|
||||
const paket = trpc.kiosk.stammdatenpaket.useQuery(undefined, { retry: false });
|
||||
const stand = trpc.kiosk.eigenerStand.useQuery(undefined, { retry: false });
|
||||
|
||||
const [fahrzeugId, setFahrzeugId] = React.useState<string | null>(null);
|
||||
const [kilometer, setKilometer] = React.useState("");
|
||||
const [ziel, setZiel] = React.useState("");
|
||||
const [tankmenge, setTankmenge] = React.useState("");
|
||||
const [fertig, setFertig] = React.useState<string | null>(null);
|
||||
|
||||
const offeneFahrt = stand.data?.fahrt ?? null;
|
||||
const fahrzeuge = paket.data?.fahrzeuge ?? [];
|
||||
const gewaehlt = fahrzeuge.find((fahrzeug) => fahrzeug.id === fahrzeugId);
|
||||
|
||||
// Kilometerstand vorbelegen, sobald ein Fahrzeug gewählt ist.
|
||||
React.useEffect(() => {
|
||||
if (gewaehlt?.kilometerstand && !kilometer) setKilometer(String(gewaehlt.kilometerstand));
|
||||
}, [gewaehlt, kilometer]);
|
||||
|
||||
async function beginnen(zweck: FahrtZweck) {
|
||||
if (!fahrzeugId || !kilometer) return;
|
||||
|
||||
await erfassen(
|
||||
{
|
||||
art: "FAHRT_BEGINNEN",
|
||||
daten: {
|
||||
fahrzeugId,
|
||||
kilometerAbfahrt: Number(kilometer),
|
||||
zweck,
|
||||
ziel: ziel.trim() || null,
|
||||
},
|
||||
},
|
||||
`Fahrt begonnen (${gewaehlt?.funkrufname ?? "Fahrzeug"})`,
|
||||
);
|
||||
|
||||
setFertig("Gute Fahrt. Die Fahrt ist eingetragen.");
|
||||
}
|
||||
|
||||
async function beenden() {
|
||||
if (!offeneFahrt || !kilometer) return;
|
||||
|
||||
await erfassen(
|
||||
{
|
||||
art: "FAHRT_BEENDEN",
|
||||
daten: {
|
||||
fahrtId: offeneFahrt.id,
|
||||
kilometerRueckkehr: Number(kilometer),
|
||||
tankmenge: tankmenge ? Number(tankmenge) : null,
|
||||
},
|
||||
},
|
||||
`Fahrt beendet (${offeneFahrt.fahrzeug.funkrufname})`,
|
||||
);
|
||||
|
||||
setFertig("Fahrt beendet. Kilometerstand übernommen.");
|
||||
}
|
||||
|
||||
// Bei einer offenen Fahrt ist der Kilometerstand der bei Abfahrt — als
|
||||
// Anhaltspunkt, nicht als Vorgabe.
|
||||
React.useEffect(() => {
|
||||
if (offeneFahrt && !kilometer) setKilometer(String(offeneFahrt.kilometerAbfahrt));
|
||||
}, [offeneFahrt, kilometer]);
|
||||
|
||||
if (fertig) {
|
||||
return (
|
||||
<KioskRahmen titel="Fahrtenbuch" abmeldenNachSekunden={abmeldenNachSekunden}>
|
||||
<Erledigt text={fertig} />
|
||||
</KioskRahmen>
|
||||
);
|
||||
}
|
||||
|
||||
// Solange unbekannt ist, ob ein Fahrzeug unterwegs ist, wird nichts
|
||||
// angeboten: sonst tauscht die Oberfläche gleich nach dem Öffnen zwischen
|
||||
// „Fahrt beginnen" und „Fahrt beenden".
|
||||
if (stand.data === undefined) {
|
||||
return (
|
||||
<KioskRahmen titel="Fahrtenbuch" abmeldenNachSekunden={abmeldenNachSekunden}>
|
||||
<WirdGeladen />
|
||||
</KioskRahmen>
|
||||
);
|
||||
}
|
||||
|
||||
if (offeneFahrt) {
|
||||
return (
|
||||
<KioskRahmen
|
||||
titel="Fahrt beenden"
|
||||
hinweis={`${offeneFahrt.fahrzeug.funkrufname} · unterwegs seit ${alsDatumZeit(offeneFahrt.abfahrtUm)}`}
|
||||
abmeldenNachSekunden={abmeldenNachSekunden}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="kmzurueck" className="text-lg">
|
||||
Kilometerstand bei Rückkehr
|
||||
</Label>
|
||||
<Input
|
||||
id="kmzurueck"
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
className="h-20 text-3xl"
|
||||
value={kilometer}
|
||||
onChange={(ereignis) => setKilometer(ereignis.target.value)}
|
||||
/>
|
||||
<p className="text-[var(--muted-foreground)]">
|
||||
Bei Abfahrt: {offeneFahrt.kilometerAbfahrt} km
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tank" className="text-lg">
|
||||
Getankt (Liter, falls unterwegs getankt wurde)
|
||||
</Label>
|
||||
<Input
|
||||
id="tank"
|
||||
type="number"
|
||||
inputMode="decimal"
|
||||
step="0.01"
|
||||
className="h-16 text-2xl"
|
||||
value={tankmenge}
|
||||
onChange={(ereignis) => setTankmenge(ereignis.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="h-24 w-full text-2xl"
|
||||
disabled={!kilometer || Number(kilometer) < offeneFahrt.kilometerAbfahrt}
|
||||
onClick={() => void beenden()}
|
||||
>
|
||||
Fahrt beenden
|
||||
</Button>
|
||||
|
||||
{kilometer && Number(kilometer) < offeneFahrt.kilometerAbfahrt && (
|
||||
<p className="text-center text-[var(--gesperrt)]">
|
||||
Der Stand kann nicht kleiner sein als bei der Abfahrt.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</KioskRahmen>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<KioskRahmen
|
||||
titel="Fahrt beginnen"
|
||||
hinweis="Fahrzeug, Kilometerstand, Zweck"
|
||||
abmeldenNachSekunden={abmeldenNachSekunden}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-xl font-medium">Welches Fahrzeug?</h2>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{fahrzeuge.map((fahrzeug) => (
|
||||
<GrosseAuswahl
|
||||
key={fahrzeug.id}
|
||||
titel={fahrzeug.funkrufname}
|
||||
hinweis={fahrzeug.dinTyp ?? fahrzeug.bezeichnung}
|
||||
gewaehlt={fahrzeugId === fahrzeug.id}
|
||||
onClick={() => {
|
||||
setFahrzeugId(fahrzeug.id);
|
||||
setKilometer(fahrzeug.kilometerstand ? String(fahrzeug.kilometerstand) : "");
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{fahrzeuge.length === 0 && (
|
||||
<p className="text-[var(--muted-foreground)]">
|
||||
Keine Fahrzeuge im Zwischenspeicher. Einmal mit Netz öffnen, danach steht die Liste
|
||||
auch offline.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{fahrzeugId && (
|
||||
<>
|
||||
<section className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="km" className="text-lg">
|
||||
Kilometerstand bei Abfahrt
|
||||
</Label>
|
||||
<Input
|
||||
id="km"
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
className="h-20 text-3xl"
|
||||
value={kilometer}
|
||||
onChange={(ereignis) => setKilometer(ereignis.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="ziel" className="text-lg">
|
||||
Ziel (kann leer bleiben)
|
||||
</Label>
|
||||
<Input
|
||||
id="ziel"
|
||||
className="h-16 text-xl"
|
||||
value={ziel}
|
||||
onChange={(ereignis) => setZiel(ereignis.target.value)}
|
||||
placeholder="Werkstatt Musterhausen"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-xl font-medium">Wozu?</h2>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{ZWECK.map((eintrag) => (
|
||||
<GrosseAuswahl
|
||||
key={eintrag.wert}
|
||||
titel={eintrag.titel}
|
||||
hinweis={eintrag.hinweis}
|
||||
onClick={() => void beginnen(eintrag.wert)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{!kilometer && (
|
||||
<p className="text-[var(--muted-foreground)]">
|
||||
Der Kilometerstand fehlt noch.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</KioskRahmen>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user