Florian WildeandClaude Opus 5
791523027f
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>
117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
/**
|
|
* 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);
|
|
});
|