CPLv4.0/docs/diagrams/analog-inputs-flow.md

📊 Architektur: Analoge Eingänge – Datenfluss & Struktur

Diese Datei beschreibt den Datenfluss und die Trennung der Verantwortlichkeiten beim Laden der analogen Eingänge aus JavaScript-Mockdateien im Entwicklungsmodus (NEXT_PUBLIC_NODE_ENV=development).

---

🎯 Ziel

• Mockdaten in .js-Format (wie vom echten Gerät geliefert)
• Konvertierung in valide JSON-Objekte
• Einheitlicher Zugriff über fetch im Service
• Redux/Komponenten bleiben unabhängig von der Datenquelle

---

📌 Verzeichnisstruktur (Beispiel)

/mocks/device-cgi-simulator/SERVICE/analogInputsMockData.js
/pages/api/cpl/getAnalogInputsHandler.ts
/services/fetchAnalogInputsService.ts
/redux/thunks/getAnalogInputsThunk.ts
/components/AnalogInputsDisplay.tsx

---

📐 UML-Diagramm (Mermaid)

flowchart TD

subgraph Quelle
  A1[analogInputsMockData.js – JS-Format mit window-Variablen]
end

subgraph API
  B1[getAnalogInputsHandler.ts]
  A1 --> B1
end

subgraph Client
  C1[fetchAnalogInputsService.ts]
  D1[getAnalogInputsThunk.ts]
  E1[React-Komponente: AnalogInputsDisplay]
end

B1 --> C1
C1 --> D1
D1 --> E1

---

🧠 Beschreibung

• JS-Datei enthält var win_analogInputsValues = [...] usw.
• API-Handler (getAnalogInputsHandler.ts) importiert die Variablen und wandelt sie in eine JSON-Struktur um
• Service (fetchAnalogInputsService.ts) nutzt fetch("/api/cpl/getAnalogInputsHandler") und gibt JSON zurück
• Thunk (getAnalogInputsThunk.ts) ruft den Service auf und übergibt die Daten an Redux
• Komponente (AnalogInputsDisplay.tsx) nutzt useSelector zum Anzeigen

---

✅ Vorteile

• 🔄 Austauschbare Datenquelle (js, json, CGI, DB)
• 🧼 Saubere Trennung von Technik (API) und Fachlogik (Service/Redux)
• 🔍 Leicht testbar, lokal entwickelbar