Nice Work

docs/gui-control-panel.md

@@ -1,56 +1,57 @@
 # GUI Control Panel
 
 ## Zweck
-Nutzung des GUI Control Panels zur Steuerung und Beobachtung der virtuellen Box.
+Nutzung des Frontend Control Panels zur Steuerung und Beobachtung der Boxen ueber das Backend.
 
 ## Voraussetzungen
-- Box laeuft auf `http://127.0.0.1:8000`
-- GUI gestartet (`npm run dev` oder `./dev.sh`)
- - Bei gepaarter Box: `VITE_BOX_API_TOKEN` gesetzt
+- Backend laeuft auf `http://127.0.0.1:5001`
+- Frontend gestartet (`cd gui/frontend && npm run dev` oder `./dev.sh`)
+- Box laeuft und meldet sich per Announce beim Backend
 
 ## Schritt-fuer-Schritt
 1) GUI oeffnen:
 ```
 http://127.0.0.1:5174
 ```
-2) Buttons klicken, Status beobachten.
+2) In "Neue Boxen" die Box auswaehlen und "Pairen" klicken.
+3) In "Gepairte Boxen" eine Box anklicken.
+4) Status und Commands nutzen.
 
 ## Controls (im GUI vorhanden)
-- Play / Pause
-- Next
-- Prev
-- Vol +
-- Vol -
-- NFC UID_1 ON
-- NFC UID_1 OFF
-- Refresh Status
+- Pairen (Button in "Neue Boxen")
+- Statusanzeige (automatisch)
+- Play/Pause, Next, Prev, Vol +/-, Stop
+- NFC on/off (UID eingeben)
+- Unpair (Button in "Gepairte Boxen")
+- Medienkatalog (Explorer-Ansicht, nur Lesen)
+- Neuer Tag erkannt (Panel) mit ID-Zuweisung und Zuordnung
+- Tags werden nur nach NFC-Erkennung erstellt und zugeordnet.
 
-## Controls (nur API)
+## Controls (nur Backend/API)
 - WiFi add/reset
 - Spotify set/clear
 
-Beispiel via API:
+Beispiel via Backend-API (weitergeleitet an die Box):
 ```
-
-## Auth-Token fuer GUI
-- Nach Pairing: Token ueber Server-API oder Server-GUI ermitteln.\n- GUI mit Token starten:\n```\nVITE_BOX_API_TOKEN=<api_token> npm run dev\n```
-curl -X POST http://127.0.0.1:8000/command \
+curl -X POST http://127.0.0.1:5001/api/boxes/<box_id>/command \
   -H "Content-Type: application/json" \
   -d '{"command":"wifi_add_profile","payload":{"ssid":"HomeWiFi","password":"secret","priority":10}}'
 ```
 
 ## Erwartete Ergebnisse
 - Nach jedem Klick wird der Status innerhalb von 1s aktualisiert.
-- `last_error` wird angezeigt, wenn gesetzt.
+- Fehler werden im GUI angezeigt.
 
 ## Checkliste
-- ✅ GUI laedt und zeigt API-URL
-- ✅ Status aktualisiert sich automatisch
-- ✅ Buttons aendern `/status`
+- ✅ GUI laedt und zeigt Backend-URL
+- ✅ Neue Boxen erscheinen unter "Neue Boxen"
+- ✅ Pairing verschiebt die Box in die gepaarte Liste
+- ✅ Buttons aendern den `/status`
 
 ## Troubleshooting
 - GUI zeigt "Failed to fetch":
-  - `VITE_BOX_API_URL` pruefen.
-  - Box API muss laufen.
+  - Backend erreichbar? `http://127.0.0.1:5001/api/boxes`
+  - Browser-Konsole pruefen.
 - Buttons ohne Wirkung:
-  - API-Command-Namen in `docs/api.md` pruefen.
+  - Box gepairt?
+  - Backend-Logs pruefen.