Erster Commit

docs/implementation_plan.md

@@ -0,0 +1,101 @@
+# ERP EDI Bridge – Erweiterung: IFM-Flows & Ordnerüberwachung
+
+Erweiterung der bestehenden Browser-App um:
+1. **IFM-spezifische Converter** in der UI verfügbar machen (Inbound: IFM DELFOR → VDA 4905, Outbound: VDA 4913 → IFM DESADV / DELVRY03)
+2. **Settings-Seite** mit Input-/Output-Ordner Konfiguration
+3. **Ordnerüberwachung** (Folder Watch) mit Pause/Resume
+
+## User Review Required
+
+> [!IMPORTANT]
+> **Architektur-Entscheidung: Ordnerüberwachung**
+> 
+> Die aktuelle App läuft als reine HTML/JS-Datei im Browser. Ein echter File-System-Watcher (der einen Netzwerkordner auf neue Dateien überwacht und automatisch konvertiert) ist im Browser **nicht** möglich.
+> 
+> **Vorgeschlagene Lösung:** Umstellung auf eine **Electron**-App. Damit kann die App:
+> - Netzwerkordner per `fs.watch()` / `chokidar` überwachen
+> - Dateien automatisch lesen und konvertieren
+> - Ergebnisse direkt ins Dateisystem schreiben
+> 
+> Die bestehende HTML/CSS/JS-Architektur bleibt dabei größtenteils erhalten – Electron wrapped sie nur.
+> 
+> **Alternative:** Falls kein Electron gewünscht, könnte man einen **kleinen Node.js-Hintergrundprozess** implementieren, der separat gestartet wird. Die Browser-UI würde dann über WebSocket mit dem Watcher kommunizieren.
+> 
+> **Welche Variante bevorzugen Sie?**
+
+> [!WARNING]
+> Die Datei `vda4913-to-delvry03.js.js` hat einen doppelten `.js.js` Dateinamen – soll das korrigiert werden?
+
+## Proposed Changes
+
+### Navigation & Seitenstruktur
+
+Die Single-Page-App bekommt eine einfache Tab-Navigation am oberen Rand:
+- **Converter** (bestehende Hauptseite)
+- **Settings** (neue Seite für Ordnerkonfiguration & Watcher-Status)
+
+#### [MODIFY] [index.html](file:///c:/Users/Zed/vda-to-edifact-converter/index.html)
+- Navigation-Tabs hinzufügen (`<nav>` mit Converter / Settings)
+- Mode-Toggle erweitern: 4 Modi statt 2
+  - VDA 4913 → Bosch DESADV (Outbound)
+  - VDA 4913 → IFM DESADV (Outbound)
+  - Bosch DELFOR → VDA 4905 (Inbound)
+  - IFM DELFOR → VDA 4905 (Inbound)
+- Settings-Seite HTML hinzufügen (Input-Ordner, Output-Ordner, Watcher-Buttons, Log-Bereich)
+- Script-Tags für neue Module ergänzen
+
+---
+
+### Converter-Erweiterung
+
+#### [MODIFY] [app.js](file:///c:/Users/Zed/vda-to-edifact-converter/js/app.js)
+- `setMode()` erweitern für 4 Modi: `outbound-bosch`, `outbound-ifm`, `inbound-bosch`, `inbound-ifm`
+- `processInbound()` erweitern: Bei IFM-Mode den `DelforToVDA4905Converter` nutzen statt den generischen Parser
+- `processOutbound()` bleibt für Bosch; neuer Flow für IFM Outbound (→ DELVRY03/DESADV)
+- `generateOutput()` erweitern für IFM-Outbound
+- Automatische Dateierkennung anpassen (IFM DELFOR erkennen vs. Bosch DELFOR)
+
+---
+
+### Ordnerüberwachung (Electron-Variante)
+
+#### [NEW] [main.js](file:///c:/Users/Zed/vda-to-edifact-converter/main.js)
+- Electron Main-Prozess: Fenster erstellen, IPC-Handler registrieren
+- `fs.watch()` oder `chokidar`-basierter Folder-Watcher
+- IPC-Channels: `select-folder`, `start-watcher`, `stop-watcher`, `watcher-status`, `file-converted`
+
+#### [NEW] [js/watcher-bridge.js](file:///c:/Users/Zed/vda-to-edifact-converter/js/watcher-bridge.js)
+- Renderer-seitiger Code der per `ipcRenderer` mit dem Main-Prozess kommuniziert
+- Stellt Watcher-Status und Konvertierungs-Log in der UI dar
+
+#### [NEW] [preload.js](file:///c:/Users/Zed/vda-to-edifact-converter/preload.js)
+- Electron Preload-Script: sichere Brücke zwischen Main/Renderer Prozess via `contextBridge`
+
+#### [NEW] [package.json](file:///c:/Users/Zed/vda-to-edifact-converter/package.json)
+- Electron + chokidar als Dependencies
+- Start-Script: `electron .`
+
+---
+
+### Styling
+
+#### [MODIFY] [styles.css](file:///c:/Users/Zed/vda-to-edifact-converter/styles.css)
+- Styles für Tab-Navigation
+- Styles für Settings-Seite (Ordner-Inputs, Watcher-Status-Anzeige, Log-Container)
+- Styles für 4-Spalten Mode-Toggle (responsive)
+- Watcher-Status Badge (Aktiv/Pausiert/Gestoppt)
+
+---
+
+## Verification Plan
+
+### Manuelle Tests (im Browser / Electron)
+
+1. **Tab-Navigation**: Converter ↔ Settings wechseln – beide Seiten korrekt angezeigt
+2. **Mode-Toggle**: Alle 4 Modi nacheinander auswählen
+3. **Bosch Outbound**: VDA 4913 Datei hochladen → DESADV generieren (Bestandsverhalten, Regression)
+4. **IFM Inbound**: IFM DELFOR Datei hochladen → VDA 4905 erzeugen (mit `ifm_delfor-vda4905.js`)
+5. **IFM Outbound**: VDA 4913 Datei hochladen → IFM DELVRY03 erzeugen
+6. **Settings**: Input/Output-Ordner eingeben, Watcher starten/pausieren
+7. **Watcher**: Datei in Input-Ordner legen → automatische Konvertierung → Ergebnis im Output-Ordner prüfen
+8. **Pause/Resume**: Watcher pausieren → Datei einlegen → keine Konvertierung → Resume → Konvertierung findet statt