From f3fda3c67f631609c48d37ed719efe26d263fb31 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 29 Apr 2025 12:05:33 +0200 Subject: [PATCH] =?UTF-8?q?docs:=20Diagramme=20f=C3=BCr=20historische=20an?= =?UTF-8?q?aloge=20Eing=C3=A4nge=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ablaufdiagramm analogInputsHistoryFlow.md erstellt - Redux-Datenfluss analogInputsHistoryReduxFlow.md dokumentiert - Sequenzdiagramm analogInputsHistorySequence.md erstellt - Mermaid-Syntax verwendet für einheitliche Entwicklerdokumentation --- CHANGELOG.md | 21 ++++++++++ components/header/Header.tsx | 2 +- .../analogInputsHistoryFlow.md | 37 ++++++++++++++++++ .../analogInputsHistoryReduxFlow.md | 39 +++++++++++++++++++ .../analogInputsHistorySequence.md | 39 +++++++++++++++++++ 5 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 docsForDev/analogInputsHistoryDataChart/analogInputsHistoryFlow.md create mode 100644 docsForDev/analogInputsHistoryDataChart/analogInputsHistoryReduxFlow.md create mode 100644 docsForDev/analogInputsHistoryDataChart/analogInputsHistorySequence.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 7beccae..e305f0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,27 @@ Alle Änderungen und Versionen des CPLv4.0 Frontends chronologisch dokumentiert. --- +## [1.6.308] – 2025-04-29 + +### Fix + +- Anzeige der KÜ705-FO Modulversionen korrigiert (z.B. 4.20 statt 4.2) +- Korrekte Formatierung in der Hook `useKueVersion` implementiert + +--- + +## [1.6.307] – 2025-04-28 + +### Hinzugefügt + +- Chart.js-basierte Visualisierung für alle 8 analogen Eingänge +- Historische Messwerte der letzten 24 Stunden werden dargestellt +- Nutzer kann Linien für einzelne Eingänge über die Legende ein- und ausblenden +- Mock-Daten werden in der Entwicklungsumgebung automatisch über API-Handler geladen (`/api/cpl/fetchAnalogInputsHistory`) +- Nutzung von Redux-Slice `analogInputsHistory` für zentrales Datenmanagement + +--- + ## [1.6.194] – 2025-03-31 ### Hinzugefügt diff --git a/components/header/Header.tsx b/components/header/Header.tsx index 6464812..3fc497c 100644 --- a/components/header/Header.tsx +++ b/components/header/Header.tsx @@ -92,7 +92,7 @@ function Header() { top-[50%] flex flex-col justify-center space-y-1" >

- Stationsname + Meldestation

{deviceName} diff --git a/docsForDev/analogInputsHistoryDataChart/analogInputsHistoryFlow.md b/docsForDev/analogInputsHistoryDataChart/analogInputsHistoryFlow.md new file mode 100644 index 0000000..3c19e93 --- /dev/null +++ b/docsForDev/analogInputsHistoryDataChart/analogInputsHistoryFlow.md @@ -0,0 +1,37 @@ +# analogInputsHistoryFlow.md + +## Ablaufdiagramm: Historische Daten der analogen Eingänge in Chart.js + +```mermaid +flowchart TD + +User["User öffnet Seite /analogeEingaenge"] --> ReduxDispatch["Thunk ausgelöst: fetchAnalogInputsHistoryThunk"] + +ReduxDispatch --> Entwicklung["Entwicklungsumgebung"] +ReduxDispatch --> Produktion["Produktivumgebung"] + +Entwicklung --> ApiHandler["/api/cpl/fetchAnalogInputsHistory"] +Produktion --> CPLWebserver["CPL: /CPL?Service/empty.acp&DIA0"] + +ApiHandler --> MockData["Mockdaten analogInput1 bis 8"] +CPLWebserver --> LiveData["Live-Messdaten AE1 bis AE8"] + +MockData --> ReduxStore["Slice speichert Daten"] +LiveData --> ReduxStore["Slice speichert Daten"] + +ReduxStore --> Chart["Chart.js zeigt 8 Linien"] +Chart --> UserAction["Legende: Eingänge ein-/ausblenden"] +``` + +--- + +## Erklärung: + +- In der Entwicklungsumgebung werden die Daten aus Mock-Dateien geladen. +- In der Produktion werden die realen Daten vom CPL-Webserver über CGI-Endpoints geladen. +- Chart.js zeigt alle 8 analogen Eingänge gleichzeitig an, Nutzer kann über die Legende steuern. + +--- + +**Stand:** 29.04.2025 +**Projekt:** CPLv4.0 Weboberfläche diff --git a/docsForDev/analogInputsHistoryDataChart/analogInputsHistoryReduxFlow.md b/docsForDev/analogInputsHistoryDataChart/analogInputsHistoryReduxFlow.md new file mode 100644 index 0000000..c90f8f9 --- /dev/null +++ b/docsForDev/analogInputsHistoryDataChart/analogInputsHistoryReduxFlow.md @@ -0,0 +1,39 @@ +# analogInputsHistoryReduxFlow.md + +## Flussdiagramm: Redux-Datenfluss der historischen analogen Eingänge + +```mermaid +flowchart TD + +Component["React-Komponente: AnalogInputsChart"] --> DispatchThunk["dispatch → fetchAnalogInputsHistoryThunk"] +DispatchThunk --> ThunkLogik["Thunk-Logik"] +ThunkLogik --> fetchService["fetchAnalogInputsHistoryService"] + +fetchService -->|DEV| APIHandler["/api/cpl/fetchAnalogInputsHistory"] +fetchService -->|PROD| CPLWebserver["CPL: DIA0-Endpunkt"] + +APIHandler --> DatenMock["Mockdaten geladen"] +CPLWebserver --> DatenLive["Live-Daten geladen"] + +DatenMock --> Fulfilled["fulfilled → Redux aktualisieren"] +DatenLive --> Fulfilled["fulfilled → Redux aktualisieren"] + +Fulfilled --> Slice["analogInputsHistorySlice speichert"] +Slice --> Update["Chart.js aktualisiert sich"] + + +``` + +--- + +## Erklärung: + +- Die Komponente dispatcht den Thunk beim Laden. +- Der Service entscheidet, ob Mock-Daten oder Live-Daten geholt werden. +- Das Redux-Slice speichert die Daten zentral im State. +- Sobald die Daten da sind, aktualisiert sich das Chart automatisch. + +--- + +**Stand:** 29.04.2025 +**Projekt:** CPLv4.0 Weboberfläche diff --git a/docsForDev/analogInputsHistoryDataChart/analogInputsHistorySequence.md b/docsForDev/analogInputsHistoryDataChart/analogInputsHistorySequence.md new file mode 100644 index 0000000..485bbd7 --- /dev/null +++ b/docsForDev/analogInputsHistoryDataChart/analogInputsHistorySequence.md @@ -0,0 +1,39 @@ +# analogInputsHistorySequence.md + +## Sequenzdiagramm: Historische analoge Eingänge laden und darstellen + +```mermaid +sequenceDiagram + +User->>+ReactComponent: Seite "/analogeEingaenge" wird geladen +ReactComponent->>+ReduxDispatch: dispatch(fetchAnalogInputsHistoryThunk()) +ReduxDispatch->>+Thunk: fetchAnalogInputsHistoryThunk +Thunk->>+Service: fetchAnalogInputsHistoryService + +alt Entwicklungsumgebung +Service->>+APIHandler: /api/cpl/fetchAnalogInputsHistory +APIHandler-->>Service: JSON-Mock-Daten +else Produktionsumgebung +Service->>+CPLWebserver: /CPL?Service/empty.acp&DIA0 +CPLWebserver-->>Service: JSON-Live-Daten +end + +Service-->>Thunk: Ergebnis-Daten +Thunk-->>ReduxStore: fulfilled action (analogInputsHistorySlice) +ReduxStore-->>ReactComponent: neue State-Daten verfügbar +ReactComponent-->>Chart.js: aktualisierte Daten zeichnen +Chart.js-->>User: Anzeige von 8 Eingängen, einzeln ein-/ausblendbar +``` + +--- + +## Erklärung: + +- Unterschiedliche Datenquellen je nach Umgebung (DEV oder PROD) +- Redux verwaltet den Zwischenstand über Slice + Thunk +- UI aktualisiert sich automatisch nach erfolgreichem Laden + +--- + +**Stand:** 29.04.2025 +**Projekt:** CPLv4.0 Weboberfläche