diff --git a/rippy-windows/src/fenster/App.tsx b/rippy-windows/src/fenster/App.tsx index aa8f399..f736079 100644 --- a/rippy-windows/src/fenster/App.tsx +++ b/rippy-windows/src/fenster/App.tsx @@ -1,9 +1,9 @@ -// W-0-Statusbild: zeigt, dass die drei Prozesse stehen und miteinander -// reden. Die echte Oberfläche (Dashboard, Bibliothek, Einstellungen) ist -// Etappe W-5 — hier geht es nur darum, das Gerüst SICHTBAR zu beweisen. +// Statusbild W-0/W-1: die drei Prozesse plus die echten Laufwerke aus der +// Disc-Wache. Die große Oberfläche (Dashboard, Bibliothek, Einstellungen) +// ist Etappe W-5 — hier wird das Gerüst SICHTBAR bewiesen. import { useEffect, useState } from 'react' -import type { HauptStatus } from '../gemeinsam/nachrichten' -import { aufVerbindung, verbindungStarten, type Verbindung } from './kernverbindung' +import type { GeraeteInfo, HauptStatus } from '../gemeinsam/nachrichten' +import { aufVerbindung, auswerfen, verbindungStarten, type Verbindung } from './kernverbindung' function istHauptStatus(wert: unknown): wert is HauptStatus { return ( @@ -13,6 +13,18 @@ function istHauptStatus(wert: unknown): wert is HauptStatus { ) } +function gb(bytes: number): string { + return `${(bytes / 1e9).toFixed(2).replace('.', ',')} GB` +} + +const TYP_NAMEN: Record = { + cd: 'Audio-CD', + dvd: 'DVD', + bluray: 'Blu-ray', + uhd: '4K-UHD', + unknown: 'unbekannt', +} + interface KachelProps { titel: string zustand: 'ok' | 'fehler' | 'wartet' @@ -39,12 +51,52 @@ function Kachel({ titel, zustand, zeilen }: KachelProps) { ) } +function LaufwerkKachel({ geraet }: { geraet: GeraeteInfo }) { + const zustand = geraet.status === 'ready' ? 'ok' : geraet.status === 'empty' ? 'wartet' : 'fehler' + const punktFarbe = + zustand === 'ok' ? 'bg-emerald-400' : zustand === 'fehler' ? 'bg-red-400' : 'bg-slate-500' + return ( +
+
+
+ +

{geraet.name}

+
+ +
+
+

{geraet.modell.length > 0 ? geraet.modell : 'Modell unbekannt'}

+ {geraet.status === 'ready' && ( +

+ {TYP_NAMEN[geraet.typ]} + {geraet.groesseBytes > 0 ? ` · ${gb(geraet.groesseBytes)}` : ''} +

+ )} + {geraet.status === 'empty' &&

keine Disc eingelegt

} + {geraet.status === 'unknown' &&

{geraet.grund}

} + {geraet.status !== 'unknown' && geraet.grund.length > 0 && ( +

{geraet.grund}

+ )} +
+
+ ) +} + export default function App() { const [haupt, setHaupt] = useState(null) const [verbindung, setVerbindung] = useState({ verbunden: false, kern: null, pongLatenzMs: null, + laufwerke: [], + meldungen: [], }) useEffect(() => { @@ -63,52 +115,91 @@ export default function App() {

Rippy

- v{haupt?.version ?? '…'} · Etappe W-0 — Gerüst + v{haupt?.version ?? '…'} · Etappe W-1 — Laufwerk

- Drei Prozesse, eine Datenbank, eine Leine — das Fundament für Rippy v5. + Drei Prozesse, eine Datenbank, eine Leine — und die Disc-Wache läuft.

-
- - - - +
+
+

+ Laufwerke +

+ {verbindung.laufwerke.length === 0 ? ( +

+ {verbindung.verbunden ? 'Kein optisches Laufwerk gefunden.' : 'Warte auf den Kern …'} +

+ ) : ( +
+ {verbindung.laufwerke.map((geraet) => ( + + ))} +
+ )} +
+ +
+

+ Gerüst +

+
+ + + + +
+
+ + {verbindung.meldungen.length > 0 && ( +
+

+ Ereignisse +

+
+ {verbindung.meldungen.map((zeile, i) => ( +

+ {zeile} +

+ ))} +
+
+ )}