395 lines
16 KiB
Markdown
395 lines
16 KiB
Markdown
# ⚡ CPLv4.0 – Frontend für das Kabelüberwachungssystem
|
||
|
||
Das CPLv4.0 Frontend stellt eine moderne, übersichtliche Weboberfläche für die Anzeige und Steuerung von Systemdaten bereit.
|
||
Die Benutzeroberfläche ist modular aufgebaut und ermöglicht Zugriff auf digitale und analoge Ein-/Ausgänge, TDR-Messungen, Referenzkurven, Systemmeldungen, Einstellungen und Systemspannungen.
|
||
|
||
---
|
||
|
||
## 📘 Projektübersicht
|
||
|
||
| Bereich | Beschreibung |
|
||
| :--------------- | :-------------------------------------------------- |
|
||
| Framework | Next.js (Pages Router) |
|
||
| UI | React, Tailwind CSS, Iconify Icons, Bootstrap Icons |
|
||
| State Management | Redux Toolkit (Slices, Thunks) |
|
||
| Diagramme | Chart.js (für Messkurven) |
|
||
| Dokumentation | Mermaid.js Diagramme in `/docsForDev/` |
|
||
| Mock-Daten | über `/apiMockData/SERVICE/` und über API-Handler |
|
||
|
||
---
|
||
|
||
## 📊 Seitenübersicht
|
||
|
||
### 🔹 **Header**
|
||
|
||
- Anzeigen von CPL-Gerätname
|
||
- Abmelden-Button (Admin-Logout)
|
||
|
||
### 🔹 **Footer**
|
||
|
||
- Firmenname, Supportdaten
|
||
- PDF-Slider für Anleitungen (Handbücher)
|
||
|
||
### 📈 **/dashboard**
|
||
|
||
- Letzte 20 Systemmeldungen
|
||
- Versionsinformationen (Frontend, Backend)
|
||
- Modulstatus-Anzeige (Baugruppenträger)
|
||
- Netzwerkdaten (IP, Subnetz, Gateway, OPC UA Status)
|
||
|
||
### 🛋️ **/kabelueberwachung**
|
||
|
||
- Visualisierung aller Slots (1-32) in 4 Baugruppenträgern
|
||
- Schleifen- und Isolationsmessung
|
||
- TDR-Messung & Referenzkurvenvergleich
|
||
- Alarme pro Slot (z.B. Erdschluss, Aderbruch)
|
||
- **Modale Einstellungen pro Slot:**
|
||
- **KUE Einstellung:** Kabelbezeichnung, Isolationsgrenzwerte, Schleifengrenzwerte, Speicherintervall
|
||
- **TDR Einstellung:** Dämpfung, Geschwindigkeit, Triggerwerte, Aktivierung/Deaktivierung der TDR-Funktion
|
||
- **Knotenpunkte:** Anzeige von Knotenpunkten, Verbindungen und Leitungslängen
|
||
📐 Entwicklungsdetails – TDR-Einstellungen (Mock-Modus)
|
||
Im Entwicklungsmodus (localhost) unterstützt das TDR-Einstellungsmodal folgende Funktionen vollständig über lokale Mock-Daten:
|
||
|
||
Änderungen an folgenden TDR-Werten werden direkt in
|
||
/apiMockData/SERVICE/kabelueberwachungMockData.js gespeichert:
|
||
|
||
win_tdrAtten – TDR-Dämpfung
|
||
|
||
win_tdrSpeed – TDR-Geschwindigkeit
|
||
|
||
win_tdrTrigger – Trigger-Schwelle
|
||
|
||
win_tdrActive – Aktivierungsstatus
|
||
|
||
Die Speicherung erfolgt über die zentrale API:
|
||
|
||
```POST
|
||
/api/cpl/updateTdrSettingsDataAPIHandler
|
||
```
|
||
|
||
Werte werden im UI nicht mehr vom Redux-State überschrieben, solange das Modal geöffnet ist (lokaler Cache).
|
||
|
||
Nach erfolgreicher Speicherung schließt sich das Modal automatisch – für bessere Nutzerführung im Test.
|
||
|
||
Die API bereinigt automatisch fehlerhafte Endzeilen wie n (12h) oder und stellt sicher, dass alle TDR-Arrays genau 32 Werte enthalten.
|
||
|
||
Beispielaufruf im DEV-Modus (über UI gesteuert, nicht manuell notwendig):
|
||
|
||
```JSON
|
||
{ "updates": [
|
||
{ "key": "win_tdrAtten", "slot": 0, "value": 11 },
|
||
{ "key": "win_tdrSpeed", "slot": 0, "value": 110 },
|
||
{ "key": "win_tdrTrigger","slot": 0, "value": 101 },
|
||
{ "key": "win_tdrActive", "slot": 0, "value": 1 } ]
|
||
}
|
||
```
|
||
|
||
### 📡 **/digitalInputs** – Meldungseingänge
|
||
|
||
- Digitale Eingänge (1–32) mit Live-Statusanzeige
|
||
- **Modale Einstellungen pro Eingang:**
|
||
- Name ändern
|
||
- Invertierung aktivieren/deaktivieren
|
||
- Filterzeit setzen
|
||
- Gewichtung anpassen
|
||
- Zähler aktivieren/deaktivieren
|
||
- Speicherung über CGI-Interface oder lokale API
|
||
Echtzeit-Rückmeldung nach Speichern:
|
||
Änderungen in den KUE-Einstellungen (Bezeichnung, Grenzwerte, Intervalle) werden direkt im UI angezeigt – ohne Neuladen oder Navigation. Die Eingabewerte werden lokal aktualisiert, nachdem die Daten erfolgreich an das CPL gesendet wurden.
|
||
|
||
### 🔌 **/digitalOutputs** – Schaltausgänge
|
||
|
||
- Digitale Ausgänge (1–4) mit Schaltfunktion (Toggle)
|
||
|
||
### 📉 **/analogeEingaenge** – Messwertüberwachung
|
||
|
||
- Tabellenübersicht über alle analogen Eingänge (z.B. Temperatur, Spannung)
|
||
- **Modale Einstellungen pro analogen Eingang:**
|
||
- Name anzeigen
|
||
- Einheit anzeigen
|
||
- Faktor und Offset anzeigen
|
||
- Gewichtung und Loggerintervall anzeigen
|
||
- Neue Chart.js Visualisierung:
|
||
- Verlauf aller 8 analogen Eingänge gleichzeitig anzeigen
|
||
- Nutzer kann Eingänge einzeln über Legende ein-/ausblenden
|
||
- Historische Messwerte der letzten 24 Stunden dargestellt (Zeitskala auf der X-Achse)
|
||
- Entwicklung mit Mock-Daten:
|
||
- In der Entwicklungsumgebung werden Mock-Daten über den API-Handler `/api/cpl/fetchAnalogInputsHistory` geladen
|
||
- In der Produktion wird direkt auf die Live-Daten der CPL-Webschnittstelle (DIA0) zugegriffen
|
||
- Einheitlicher Zugriff auf analoge Messdaten über Redux-Slice `analogInputsHistory`
|
||
- Fehlerbehandlung und Ladeanzeigen für bessere Benutzerführung
|
||
|
||
### 📜 **/meldungen** – Berichte
|
||
|
||
- Gesamte Historie aller Systemmeldungen
|
||
- Farbcodierung je nach Gewichtung (Info, Warnung, Alarm)
|
||
- Datumsauswahl (von/bis) zur Berichtsfilterung
|
||
- Pagination zur Navigation durch Berichte
|
||
|
||
### ⚙️ **/einstellungen** – Systemeinstellungen
|
||
|
||
- **Allgemeine Einstellungen:**
|
||
- Geräte-Name ändern
|
||
- IP-Adresse, Subnetzmaske und Gateway konfigurieren
|
||
- Systemzeit übernehmen
|
||
- Admin-Login und Logout (Sicherheitsfunktionen)
|
||
- **OPCUA-Einstellungen:**
|
||
- OPCUA-Server aktivieren/deaktivieren
|
||
- Nodeset-Namen ändern
|
||
- Benutzerverwaltung für den OPCUA-Server (Benutzer hinzufügen/löschen)
|
||
- **Datenbank-Einstellungen:**
|
||
- Gesamte Datenbank löschen
|
||
- Konfiguration löschen
|
||
- Systemmeldungen löschen
|
||
- Logger-Daten (Messwerte) löschen
|
||
- **NTP-Einstellungen:**
|
||
- Konfiguration von bis zu 3 NTP-Servern
|
||
- Zeitzone einstellen
|
||
- Aktivierung/Deaktivierung der NTP-Synchronisation
|
||
- **Benutzerverwaltung:**
|
||
- Admin kann sich anmelden z.B. für KÜs Firmware Update (Login Admin-Bereich)
|
||
- Hier kommen später noch mehr Funktionen rein.
|
||
|
||
### 🔌 **/system**
|
||
|
||
- Live-Anzeige von:
|
||
- +5V, +15V, -15V, -98V Spannungen
|
||
- CPU- und ADC-Temperaturen
|
||
- Verlaufskurven über Zeit (Chart.js)
|
||
- Spannungen und Temperaturen werden jetzt in zwei separaten Charts nebeneinander dargestellt
|
||
- Spannungswerte (+5V, +15V, -15V, -98V) werden mit zwei Nachkommastellen angezeigt
|
||
|
||
---
|
||
|
||
## 🔧 Installation & Lokale Entwicklung
|
||
|
||
```bash
|
||
# Repository klonen
|
||
git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend
|
||
cd CPL_V4_Frontend
|
||
|
||
# Abhängigkeiten installieren
|
||
npm install
|
||
|
||
# Entwicklungsserver starten
|
||
npm run dev
|
||
|
||
# öffnen unter:
|
||
http://localhost:3000
|
||
|
||
# ---
|
||
# Wichtig:
|
||
# Am Ende immer ein Build erzeugen, damit das statische Verzeichnis /out erstellt wird
|
||
npm run build
|
||
|
||
# Das Verzeichnis /out wird erzeugt.
|
||
# Dieses /out muss per FTP auf das CPL-Gerät (z.B. B:/WEBS/) hochgeladen werden.
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 Entwicklung ohne CPL-Hardware
|
||
|
||
In der Entwicklungsumgebung können KUE-Einstellungen ohne echtes Embedded-System getestet werden.
|
||
Dazu wird eine lokale Mock-API verwendet:
|
||
|
||
- **API-Endpunkt:** `/api/cpl/updateKueSettingsDataAPIHandler`
|
||
- Änderungen werden direkt in der Datei
|
||
`/apiMockData/SERVICE/kabelueberwachungMockData.js` gespeichert.
|
||
- Alle Werte – inkl. Strings – werden korrekt im JS-Format (mit Anführungszeichen) gesetzt.
|
||
- Die API simuliert die Verarbeitung auf dem CPL-Gerät und ermöglicht:
|
||
- Eingabe und Speicherung von Bezeichnung, Grenzwerten, Speicherintervallen usw.
|
||
- Anzeige der aktuellen Werte im UI direkt nach dem Speichern
|
||
- Dadurch ist vollständiges Frontend-Testing **ohne CPL-Hardware** möglich.
|
||
|
||
> Beispielaufruf:
|
||
> `http://localhost:3000/api/cpl/updateKueSettingsDataAPIHandler?key=win_kueID&slot=0&value="Test123"`
|
||
|
||
---
|
||
|
||
## 🧩 Admin-Funktionen
|
||
|
||
- Firmware-Update pro Slot
|
||
|
||
---
|
||
|
||
## 🚨 Deployment auf CPL-Gerät
|
||
|
||
```bash
|
||
npm run build
|
||
|
||
# Danach Inhalt des /out Verzeichnisses über FTP hochladen
|
||
# Zielordner: B:/WEBS/ auf dem CPL Embedded-System
|
||
```
|
||
|
||
---
|
||
|
||
## 📅 Redux-Management
|
||
|
||
### Slices (State Management)
|
||
|
||
| Slice Name | Zweck |
|
||
| :--------------------------------- | :---------------------------------------------------- |
|
||
| `authSlice` | Authentifizierung und Admin-Login Status |
|
||
| `kueChartModeSlice` | Modusumschaltung der KUE-Diagramme |
|
||
| `webVersionSlice` | Anzeige der Web-Frontend Version |
|
||
| `kabelueberwachungChartSlice` | Visualisierung der Baugruppenträger/Slots |
|
||
| `last20MessagesSlice` | Verwaltung der letzten 20 Systemmeldungen |
|
||
| `systemSettingsSlice` | Verwaltung der Systemeinstellungen |
|
||
| `opcuaSettingsSlice` | Verwaltung von OPC UA Server und Benutzer |
|
||
| `digitalOutputsSlice` | Verwaltung der digitalen Ausgänge |
|
||
| `digitalInputsSlice` | Verwaltung der digitalen Eingänge |
|
||
| `analogeEingaengeSlice` | Verwaltung der analogen Eingänge |
|
||
| `brushSlice` | Zoom- und Bereichsauswahl in Charts |
|
||
| `tdrChartSlice` | Verwaltung der TDR-Messkurven |
|
||
| `tdrReferenceChartSlice` | Verwaltung der TDR-Referenzkurven |
|
||
| `loopChartSlice` | Verwaltung der Schleifen-/Isolationsmessung |
|
||
| `tdmChartSlice` | Verwaltung von TDM (Multiple TDR) Messungen |
|
||
| `tdrDataByIdSlice` | Verwaltung von TDR-Daten über ID |
|
||
| `kueDataSlice` | Verwaltung der KUE Slots und Module |
|
||
| `selectedChartDataSlice` | Verwaltung selektierter Chart-Daten |
|
||
| `tdmSingleChartSlice` | Verwaltung einzelner TDM-Messungen |
|
||
| `tdrReferenceChartDataBySlotSlice` | Verwaltung von Referenzdaten pro Slot |
|
||
| `loopChartTypeSlice` | Verwaltung der aktuellen Messart (Schleife/Isolation) |
|
||
| `systemVoltTempSlice` | Verwaltung der Systemspannungen und Temperaturen |
|
||
|
||
---
|
||
|
||
### Thunks (Asynchrone API-Abfragen)
|
||
|
||
| Thunk Name | Zweck |
|
||
| :-------------------------------------- | :-------------------------------------- |
|
||
| `fetchSystemVoltTempThunk` | Lade Systemspannungen und Temperaturen |
|
||
| `fetchDigitalOutputsThunk` | Lade Status der digitalen Ausgänge |
|
||
| `fetchDigitalInputsThunk` | Lade Status der digitalen Eingänge |
|
||
| `fetchAnalogeEingaengeThunk` | Lade analoge Eingänge |
|
||
| `fetchTDRChartDataThunk` | Lade TDR-Messkurve für einen Slot |
|
||
| `fetchTDRReferenceChartThunk` | Lade TDR-Referenzkurve |
|
||
| `fetchLoopChartDataThunk` | Lade Schleifen- und Isolationsmesswerte |
|
||
| `fetchLast20MessagesThunk` | Lade letzte 20 Systemmeldungen |
|
||
| `fetchKabelueberwachungChartThunk` | Lade Visualisierungsdaten der Slots |
|
||
| `fetchTDMChartThunk` | Lade TDM (Multiple TDR) Messungen |
|
||
| `fetchTDRDataByIdThunk` | Lade TDR-Daten anhand einer ID |
|
||
| `fetchTdmSingleChartThunk` | Lade Einzel-TDM-Messung |
|
||
| `fetchSelectedChartDataThunk` | Lade selektierte Diagrammdaten |
|
||
| `fetchTDRReferenceChartDataBySlotThunk` | Lade Referenzkurven pro Slot |
|
||
| `fetchSystemSettingsThunk` | Lade Systemeinstellungen |
|
||
| `fetchOpcuaSettingsThunk` | Lade OPC UA Einstellungen und Benutzer |
|
||
|
||
---
|
||
|
||
## 📊 Entwicklerdokumentation
|
||
|
||
**Diagramme unter `/docsForDev/Diagramme/systemVoltTemp/`**:
|
||
|
||
| Diagramm | Beschreibung |
|
||
| :--------------------------------------------------------------------------------------------- | :----------------------------------------- |
|
||
| [systemVoltTempFlow.md](./docsForDev/Diagramme/systemVoltTemp/systemVoltTempFlow.md) | Flowchart: Seiten-Ablauf |
|
||
| [systemVoltTempReduxFlow.md](./docsForDev/Diagramme/systemVoltTemp/systemVoltTempReduxFlow.md) | Redux-Datenfluss |
|
||
| [systemVoltTempSequence.md](./docsForDev/Diagramme/systemVoltTemp/systemVoltTempSequence.md) | Sequenzdiagramm: Datenfluss im Zeitverlauf |
|
||
|
||
Angezeigt mit [Mermaid.js](https://mermaid-js.github.io/).
|
||
|
||
---
|
||
|
||
## 💬 Besonderheiten
|
||
|
||
- **Mock-Datenunterstützung** für lokale Entwicklung ohne echtes CPL-Gerät
|
||
- **Echtzeitupdates** alle 5 Sekunden für alle Systemdaten
|
||
- **Skalierbare Architektur** dank Redux und modularer Komponentenstruktur
|
||
- **Responsives Design** optimiert für Desktop und Tablet
|
||
|
||
---
|
||
|
||
## 📢 Zukünftige Verbesserungen
|
||
|
||
- Vollständige TypeScript-Unterstützung
|
||
- WebSocket-Anbindung für noch schnellere Live-Daten
|
||
- Verbesserte Fehlerbehandlung (UI/UX Optimierungen)
|
||
- Optimierung der Build-Größe und Ladezeiten
|
||
|
||
---
|
||
|
||
## 👋 Kontakt für Fragen
|
||
|
||
Bei Fragen oder Problemen bitte an das CPLv4.0 Entwicklungsteam wenden.
|
||
|
||
# 🔐 Benutzerverwaltung und Sicherheit
|
||
|
||
## Backend TLS-Authentifizierung
|
||
|
||
- **TLS-Authentifizierung** erfolgt über das Backend (Embedded-System, CPL).
|
||
- Wird genutzt für HTTPS-Verbindungen und verschlüsselte OPC UA-Kommunikation.
|
||
- TLS-Benutzername und Passwort werden **nicht** vom Frontend verwaltet.
|
||
- Diese Login-Daten dienen **nur der sicheren Netzwerkverbindung** (z.B. HTTPS, Zertifikate).
|
||
|
||
## Frontend-Admin-Login (eigene Benutzerverwaltung)
|
||
|
||
- Das **Frontend** besitzt eine eigene **Benutzerverwaltung** für erweiterte Funktionen.
|
||
- Beispiele für geschützte Funktionen:
|
||
- Firmware-Update der Kabelüberwachungsmodule
|
||
- Erweiterte Systemeinstellungen
|
||
|
||
### Benutzerstruktur
|
||
|
||
Benutzer werden definiert unter:
|
||
|
||
```text
|
||
/components/main/settingsPageComponents/config/users.ts
|
||
```
|
||
|
||
Beispiel für die Benutzerstruktur:
|
||
|
||
```ts
|
||
const USERS = {
|
||
AdminUser: {
|
||
username: "admin",
|
||
password: "$2a$10$xpq/.tcOJN/LXfzdCcCVrenlBh2nRlM1R1ISY7dd1q2qGWC9Fyd2G", // bcrypt Hash von "admin"
|
||
role: "Admin",
|
||
},
|
||
};
|
||
|
||
export default USERS;
|
||
```
|
||
|
||
### Sicherheit
|
||
|
||
- **Passwörter sind verschlüsselt** mit `bcryptjs`.
|
||
- Klartext-Passwörter werden **niemals** im Quellcode gespeichert.
|
||
|
||
### Rollenbeschreibung
|
||
|
||
| Benutzerrolle | Beschreibung |
|
||
| :------------------- | :-------------------------------------------------------------- |
|
||
| TLS-User (Backend) | Anmeldung für sichere HTTPS-Verbindung, keine Frontend-Funktion |
|
||
| AdminUser (Frontend) | Darf Firmware-Updates durchführen, Konfiguration ändern |
|
||
|
||
### Anleitung für Entwickler: Passwort-Hash erzeugen
|
||
|
||
Um ein neues Passwort zu erstellen, benutze folgendes Script:
|
||
|
||
```ts
|
||
import bcrypt from "bcryptjs";
|
||
|
||
const hash = bcrypt.hashSync("meinNeuesPasswort", 10);
|
||
console.log(hash); // Kopieren und in users.ts einfügen
|
||
```
|
||
|
||
**Hinweis:** Stelle sicher, dass das neue Passwort korrekt gehasht ist, bevor es ins Repository hochgeladen wird.
|
||
|
||
---
|
||
|
||
## Zusammenfassung
|
||
|
||
| Thema | Hinweis |
|
||
| :--------------------- | :-------------------------------------------------------- |
|
||
| TLS-Login (Backend) | Nur für Netzwerkverschlüsselung |
|
||
| Admin-Login (Frontend) | Schutz für kritische Funktionen |
|
||
| Passwort-Handling | Immer bcrypt verwenden |
|
||
| Benutzerdatei | `/components/main/settingsPageComponents/config/users.ts` |
|
||
|
||
---
|
||
|
||
**Stand:** 28. April 2025
|
||
**Projekt:** CPLv4.0 Weboberfläche
|