72 lines
1.8 KiB
Markdown
72 lines
1.8 KiB
Markdown
# 📊 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)
|
||
|
||
```txt
|
||
/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)
|
||
|
||
```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
|