102 lines
4.6 KiB
Markdown
102 lines
4.6 KiB
Markdown
# 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
|