# ROADMAP — appRobotFileservice Web-UI (Datei-Browser)

## Ziel

Einfache Web-Oberfläche direkt auf Port 2100, die GCode-Programme verwaltet.
Kein Framework, kein Build-Schritt — reines HTML/CSS/JS, serviert als static files.

---

## Phase 1 — Datei-Browser (aktuell implementiert)

**Dateien:** `public/index.html`, `public/index.css`

### Funktionen

| Feature | Status | Endpunkt |
|---|---|---|
| Programm-Liste laden | ✅ | `GET /api/programs` |
| Aktives Programm anzeigen (Zeilenliste in Grad) | ✅ | `GET /api/active` |
| Programm als aktiv setzen (FLoad) | ✅ | `PUT /api/active` |
| Programm löschen | ✅ | `DELETE /api/programs/:id` |
| Stepping: First / Prev / Next / Last | ✅ | `POST /api/active/first|prev|next|last` |
| Programm leeren (FClear) | ✅ | `POST /api/active/clear` |
| Cursor in Tabelle hervorheben + auto-scrollen | ✅ | — |
| Auto-Refresh (5 s Polling) | ✅ | — |
| Collapse-Karten (wie appRobotHoming) | ✅ | — |

### Was Phase 1 noch fehlt

- **Download `.gcode`** — Endpunkt `GET /api/programs/:id/download` muss im Server
  hinzugefügt werden (liefert die rohe Datei mit `Content-Disposition: attachment`).
- **Upload `.gcode`** — Datei vom Desktop in den Service laden (Phase 2).
- **Umbenennen** — `PUT /api/programs/:id` mit neuem `name`.

---

## Phase 2 — Datei-Verwaltung

### Download-Endpunkt (kleines Backend-Feature für Phase 1.5)

```
GET /api/programs/:id/download
→ Content-Type: text/plain
→ Content-Disposition: attachment; filename="<id>.gcode"
→ Body: rohe .gcode-Datei
```

Implementierung: 1 Route in `src/routes/programs.js` + `store.gcodePath(id)`.

### Upload

```
POST /api/programs/upload
Body: multipart/form-data  { file: <gcode-Datei> }
→ speichert unter slugify(filename) in GCodeFiles/
```

Im Frontend: `<input type="file" accept=".gcode,.ngc">` + `FormData` fetch.

### Umbenennen / Metadaten bearbeiten

`PUT /api/programs/:id` ist bereits vorhanden — nur das Frontend-Formular fehlt.
Inline-Eingabefeld in der Programm-Zeile, Enter → PUT.

---

## Phase 3 — Verzeichnis-Navigation

Aktuell: alles flach im `GCodeFiles/`-Ordner.
Später: Unterordner für Projekte (z. B. `GCodeFiles/greifen/`, `GCodeFiles/ablegen/`).

### Backend

Neue Konfiguration: `storageDir` bleibt Wurzel; zusätzlicher optionaler `subDir`-Parameter.

```
GET /api/programs?dir=greifen        → listet GCodeFiles/greifen/
PUT /api/active { id, dir }          → lädt GCodeFiles/<dir>/<id>.gcode
POST /api/dirs { name }              → legt Unterordner an
DELETE /api/dirs/:name               → löscht (leer) Unterordner
```

Wichtig: Pfad-Traversal verhindern — `assertValidId` auf jede Pfad-Komponente anwenden.

### Frontend

Breadcrumb-Leiste oberhalb der Programmliste:
```
GCodeFiles/ > greifen/ > [zurück]
```

Doppelklick auf Ordner-Zeile → navigiert hinein.  
Klick auf Breadcrumb-Segment → navigiert zurück.

---

## Phase 4 — Live-Updates (WebSocket oder SSE)

Aktuell: Polling alle 5 s.  
Besser: Server-Sent Events (SSE) oder WebSocket, damit die UI sofort
reagiert wenn der Driver per FPoint einen neuen Punkt schreibt.

### Option A — Server-Sent Events (einfach, read-only)

```
GET /api/events
→ text/event-stream
→ event: active-changed\ndata: <ActiveState-JSON>\n\n
```

Der Fileservice emittiert nach jedem `_persist()` ein SSE-Event.
Frontend: `new EventSource('/api/events')` statt `setInterval`.

### Option B — WebSocket (bidirektional, für spätere Steuerung)

Erlaubt auch WS-basierte FCode-Befehle direkt von der Web-UI.
Aufwändiger, aber konsistent mit dem Driver-Pattern.

**Empfehlung für Phase 4:** SSE — eine Zeile Mehraufwand gegenüber Polling,
kein zusätzliches Protokoll.

---

## Phase 5 — Inline-Editor

Einzelne Zeilen direkt im Browser bearbeiten.

```
PUT /api/active/lines/:index  { line: "G90 G1 x0 y300 z0 a90.00 …" }
DELETE /api/active/lines/:index
POST /api/active/lines        { line, atIndex }
```

Alle drei Endpunkte sind bereits im Backend implementiert.  
Frontend: Klick auf Tabellenzeile → `<input>` erscheint inline; Escape abbricht, Enter speichert.

---

## Datei-Übersicht (nach Phase 1)

```
appRobotFileservice/
  public/
    index.html       HTML-Struktur + JavaScript (inline)
    index.css        Design-System (identisch mit appRobotHoming/styles.css)
  doc/
    fileBrowser_ROADMAP.md   diese Datei
  src/
    server.js        +express.static('public/')
    routes/
      programs.js    TODO Phase 2: /download-Endpunkt
      active.js      komplett
```