vda-to-edifact-converter/docs/implementation_plan.md

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

• 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

• 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

• 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

• Renderer-seitiger Code der per ipcRenderer mit dem Main-Prozess kommuniziert
• Stellt Watcher-Status und Konvertierungs-Log in der UI dar

[NEW] preload.js

• Electron Preload-Script: sichere Brücke zwischen Main/Renderer Prozess via contextBridge

[NEW] package.json

• Electron + chokidar als Dependencies
• Start-Script: electron .

---

Styling

[MODIFY] 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