docs: Diagramme für historische analoge Eingänge hinzugefügt
- Ablaufdiagramm analogInputsHistoryFlow.md erstellt - Redux-Datenfluss analogInputsHistoryReduxFlow.md dokumentiert - Sequenzdiagramm analogInputsHistorySequence.md erstellt - Mermaid-Syntax verwendet für einheitliche Entwicklerdokumentation
This commit is contained in:
21
CHANGELOG.md
21
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
|
## [1.6.194] – 2025-03-31
|
||||||
|
|
||||||
### Hinzugefügt
|
### Hinzugefügt
|
||||||
|
|||||||
@@ -92,7 +92,7 @@ function Header() {
|
|||||||
top-[50%] flex flex-col justify-center space-y-1"
|
top-[50%] flex flex-col justify-center space-y-1"
|
||||||
>
|
>
|
||||||
<h2 className="text-lg sm:text-sm md:text-base lg:text-lg xl:text-xl font-bold">
|
<h2 className="text-lg sm:text-sm md:text-base lg:text-lg xl:text-xl font-bold">
|
||||||
Stationsname
|
Meldestation
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600 text-base sm:text-sm md:text-base lg:text-lg xl:text-xl">
|
<p className="text-gray-600 text-base sm:text-sm md:text-base lg:text-lg xl:text-xl">
|
||||||
{deviceName}
|
{deviceName}
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
Reference in New Issue
Block a user