diff --git a/db/watcher-settings.json b/db/watcher-settings.json index cd7ab86..3e5e78a 100644 --- a/db/watcher-settings.json +++ b/db/watcher-settings.json @@ -1,5 +1,8 @@ { "inputDir": "\\\\adewbgsvpas03\\Wincarat\\dfue\\LAB\\DELFOR\\ZF", "outputDir": "\\\\adewbgsvpas03\\Wincarat\\dfue\\LAB", - "mode": "auto" + "invrptOutputDir": "\\\\adewbgsvpas03\\Wincarat\\dfue\\EDL", + "mode": "auto", + "werksInputDir": "\\\\edisrv\\EDI\\IN", + "werksOutputDir": "\\\\adewbgsvpas03\\Wincarat\\dfue\\LAB" } \ No newline at end of file diff --git a/index.html b/index.html index e5a9d3a..445d0a9 100644 --- a/index.html +++ b/index.html @@ -276,340 +276,336 @@ + + + +
-

- - Ankommende Dateien (Folder Watch) -

-

Überwacht einen Netzwerkordner auf neue Dateien, - konvertiert sie automatisch und schreibt die Ergebnisse in den Output-Ordner.

- -
-

- - VDA 711 ID-Umschlüsselung -

-

- Weisen Sie extrahierten IDs (Datenempfänger) eine eigene Kundennummer für den VDA 711 Header zu. -

+ +
-
-
- - - + +
-
- - - - - -
-
-
- - Input-Ordner -
-
- - -
-
- -
-
- - Output-Ordner -
-
- - -
-
- -
-
- - Output-Ordner (INVRPT → VDA 4913) -
-
- - -
-
-
- - -
-
- - Gestoppt -
-
- - - - -
-
+ + - -
-

- - Ausgehende Dateien (Folder Watch) -

-

- Überwacht einen Netzwerkordner auf ausgehende Dateien, konvertiert sie automatisch und schreibt die Ergebnisse in den Output-Ordner. -

+ +
-
-
-
- - Input-Ordner (Ausgehend) + +
+
+
+

Eingehende Dateien (Folder Watch)

+

Überwacht einen Netzwerkordner auf neue Dateien, konvertiert sie automatisch und schreibt die Ergebnisse in den Output-Ordner.

+
-
- - + + + +
+
+ + +
+
+
+ + Input-Ordner +
+
+ + +
+
+
+
+ + Output-Ordner +
+
+ + +
+
+
+
+ + Output (INVRPT → VDA 4913) +
+
+ + +
+
+
+ + +
+
+ +
+

VDA 711 ID-Umschlüsselung

+

Extrahierten IDs (Datenempfänger) eine eigene Kundennummer zuweisen.

+
+
+
+ + + +
+
+ + + + + + + + + +
Extrahierte ID (Alt)Eigene ID (Neu)Aktion
+
+
+
+ + + + + + + + + + + + -
-
- - Output-Ordner (Ausgehend) -
-
- - +
+
Noch keine Aktivitäten.
-
-
-
- - Gestoppt -
-
- - - - -
-
-
- - -
-

- - Werksnummer Umbenennung -

-

- Überwacht VDA-Dateien (RA_VDA*) und benennt sie basierend auf der Werksnummer in Satzart 512 um - (100 → LEIFERS, 280 → PITESTI). -

- -
-
-
- - Input-Ordner (Werksnummer) -
-
- - -
-
-
-
- - Output-Ordner (Werksnummer) -
-
- - -
-
-
- -
-
- - Gestoppt -
-
- - - - -
-
-
- - -
-
-

- - Kundennummern-Zuordnung -

-
-

Weisen Sie Kundennummern automatisch einer - Konvertierung zu.

- -
-
- - - -
- -
- - - - - - - - - - - -
KundennummerKonvertierungs-ModusAktion
-
-
-
- - -
-
-

Konvertierungs-Log

- -
-
-
Noch keine Aktivitäten.
-
-
+
+
+ + diff --git a/js/app.js b/js/app.js index 9dca250..af797b1 100644 --- a/js/app.js +++ b/js/app.js @@ -159,6 +159,10 @@ class App { }); document.getElementById('pageConverter').style.display = page === 'converter' ? '' : 'none'; document.getElementById('pageSettings').style.display = page === 'settings' ? '' : 'none'; + + if (page === 'settings') { + this.switchSettingsSection('inbound'); + } const pageViewer = document.getElementById('pageViewer'); if (pageViewer) pageViewer.style.display = page === 'viewer' ? '' : 'none'; @@ -177,7 +181,19 @@ class App { if (window.lucide) try { lucide.createIcons(); } catch (e) { } } + // ─── Settings Sidebar Navigation ───────────────────────────── + switchSettingsSection(section) { + document.querySelectorAll('.settings-nav-btn').forEach(btn => { + btn.classList.toggle('active', btn.dataset.section === section); + }); + document.querySelectorAll('.settings-section').forEach(el => { + el.style.display = el.id === `settingsSection-${section}` ? '' : 'none'; + }); + if (window.lucide) try { lucide.createIcons(); } catch (e) { } + } + // ─── Config ────────────────────────────────────────────────────── + async loadConfigFromStorage() { let stored = null; diff --git a/styles.css b/styles.css index 5669e7c..b9d5456 100644 --- a/styles.css +++ b/styles.css @@ -450,7 +450,181 @@ pre { transform: none; } -/* ═══ Settings Page ═══ */ +/* ═══ Settings Page – Sidebar Layout ═══ */ +.settings-layout { + display: grid; + grid-template-columns: 200px 1fr; + gap: 24px; + align-items: start; +} + +.settings-sidebar { + background: rgba(0, 0, 0, 0.25); + border: 1px solid var(--glass-border); + border-radius: 16px; + padding: 12px; + position: sticky; + top: 20px; +} + +.settings-sidebar-header { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px 14px; + font-weight: 700; + font-size: 0.9rem; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.06em; + border-bottom: 1px solid var(--glass-border); + margin-bottom: 8px; +} + +.settings-sidebar-header i { + color: var(--primary); + width: 16px; + height: 16px; +} + +.settings-nav-btn { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 11px 14px; + border: none; + background: transparent; + color: var(--text-dim); + font-weight: 600; + font-size: 0.88rem; + border-radius: 10px; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + text-align: left; +} + +.settings-nav-btn i { + width: 16px; + height: 16px; + flex-shrink: 0; + transition: color 0.2s; +} + +.settings-nav-btn:hover { + background: rgba(255, 255, 255, 0.06); + color: var(--text); +} + +.settings-nav-btn.active { + background: rgba(99, 102, 241, 0.15); + color: var(--text); + border-left: 3px solid var(--primary); + padding-left: 11px; +} + +.settings-nav-btn.active i { + color: var(--primary); +} + +.settings-content { + min-width: 0; +} + +.settings-section { + animation: fadeIn 0.2s ease-out; +} + +.settings-section-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid var(--glass-border); +} + +.settings-section-header h2 { + font-size: 1.4rem; + font-weight: 700; + margin-bottom: 6px; +} + +.settings-section-sub { + font-size: 0.9rem; + font-weight: 400; + color: var(--text-dim); +} + +/* ═══ Watcher Banner ═══ */ +.watcher-banner { + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(0, 0, 0, 0.25); + border: 1px solid var(--glass-border); + border-radius: 14px; + padding: 14px 20px; + margin-bottom: 20px; + transition: border-color 0.3s, background 0.3s; +} + +.watcher-banner.running { + background: rgba(34, 197, 94, 0.06); + border-color: rgba(34, 197, 94, 0.35); +} + +.watcher-banner.paused { + background: rgba(234, 179, 8, 0.06); + border-color: rgba(234, 179, 8, 0.35); +} + +.watcher-banner-left { + display: flex; + align-items: center; + gap: 12px; + font-weight: 600; + font-size: 1rem; +} + +/* ═══ Section Panel (sub-card) ═══ */ +.section-panel { + background: rgba(0, 0, 0, 0.2); + border: 1px solid var(--glass-border); + border-radius: 14px; + padding: 20px; +} + +.section-panel-header { + display: flex; + align-items: flex-start; + gap: 14px; + margin-bottom: 4px; +} + +.section-panel-header > i { + color: var(--primary); + margin-top: 4px; + flex-shrink: 0; + width: 18px; + height: 18px; +} + +.section-panel-header h3 { + font-size: 1rem; + font-weight: 700; + margin-bottom: 4px; +} + +/* ═══ 3-column folder grid ═══ */ +.settings-grid-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + margin-bottom: 20px; +} + +/* ═══ Settings Title (legacy – kept for History page) ═══ */ .settings-title { display: flex; align-items: center;