Summary
Die bestehende React-Anwendung wird ohne Protokoll- oder Backendänderungen in zustandsführende Hooks und klar abgegrenzte UI-Komponenten zerlegt. Die zentrale Ansicht wird als responsiver, visuell erkennbarer Schreibtisch umgesetzt, auf dem alle registrierten Devices stehen und auswählbar sind. Annahme: „später miteinander kommunizieren“ bedeutet, dass mehrere Devices bereits gemeinsam sichtbar und auswählbar sind; echte Device-zu-Device-Logik ist nicht Teil dieses Tickets.
Changes
- web-simulator: App auf Komposition und gemeinsamen Zustand reduzieren; Device-Auswahl, Registrierung, MQTT-Simulation und Aktivitäten an Hooks beziehungsweise Komponenten verdrahten.
- web-simulator: Bestehende Geräteabfrage, Polling, MQTT-Verbindung, Command-Acknowledgements, Registrierung und Interaktionsversand unverändert in einen zentralen Hook extrahieren, damit MQTT weiterhin nur einmal verbunden wird.
- web-simulator: Gemeinsam verwendete Connection-/Activity-Typen und Zeit-/Fehlerformatierung aus app.tsx auslagern.
- web-simulator: Header, Inventar, Schreibtisch, Device-Darstellung, Telemetrie/Interaktionen, Aktivitätsliste und Registrierungsdialog als kleine, über Props gesteuerte Komponenten umsetzen. Der Schreibtisch zeigt alle Devices gleichzeitig; Auswahl im Inventar oder auf dem Tisch aktualisiert Details und Interaktionsziel.
- web-simulator: Workspace und mittlere Ansicht als responsive Schreibtischszene mit Tischplatte, Hintergrund und mehreren Device-Plätzen gestalten; Auswahl, Leerzustand, Details sowie mobile und Reduced-Motion-Darstellung beibehalten beziehungsweise anpassen.
Tests
-
nx affected -t lint- passed -
nx affected -t test- passed -
nx affected -t build- passed
AI Review
Approved: yes
Work Item
#4 (closed) - react anwendung
Closes #4 (closed)