⚡ 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)
📈 Übersicht/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:
-Detailübersicht – KUE Einstellung
-
Kabelbezeichnung
Eingabefeld für den Namen des überwachten Kabels (z. B. „Kabel1“) -
Isolationsmessung
-
Grenzwert (MOhm): Schwellenwert, ab dem ein Isolationsalarm ausgelöst wird
-
Verzögerung (sek): Wartezeit in Sekunden vor Auslösen des Alarms
-
Schleifenmessung
-
Grenzwert (kOhm): Widerstandswert, ab dem eine Schleifenfehlermeldung ausgelöst wird
-
Schleifenintervall (h): Zeitintervall für automatische Schleifenmessung
-
Speicherintervall
-
Auswahlfeld zur Festlegung, in welchem Intervall Messwerte gespeichert werden (z. B. 5 Minuten)
-
Buttons
-
Display einschalten: Aktiviert die lokale Anzeige am Slot
-
Speichern: Sendet die Einstellungen über die API und schließt das Modal bei Erfolg
-TDR Einstellung: Dämpfung, Geschwindigkeit, Triggerwerte, Aktivierung/Deaktivierung der TDR-Funktion
-
Beim Umschalten der TDR-Funktion (Ein/Aus) wird eine Bestätigung angezeigt.
-
Nach Klick auf „OK“ wird die Seite automatisch neu geladen, da der neue TDR-Status aktuell nicht sofort im UI aktualisiert wird.
-
Nur eingeloggte Admins können die TDR-Funktion aktivieren oder deaktivieren.
-
Der Schalter wird im UI ausgeblendet, wenn kein Admin-Login erfolgt ist.
Hinweis: Diese Lösung wurde aus Zeitgründen gewählt (Deadline), um eine stabile Anzeige sicherzustellen. Eine spätere Optimierung über Redux- und React-State-Handling ist vorgesehen.
-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ämpfungwin_tdrSpeed– TDR-Geschwindigkeitwin_tdrTrigger– Trigger-Schwellewin_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):
{ "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 } ]
}
📡 Meldungseingänge / digitale Eingä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.
🔌 Schaltausgänge / digitale Ausgänge
- Digitale Ausgänge (1–4) mit Schaltfunktion
📉 Messwerteingänge / analogeEingaenge
-
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:
-
Beim Klick auf einen Eingang in der Tabelle wird nur dessen Verlaufskurve angezeigt
-
Der Verlauf bezieht sich auf die letzten 24 Stunden, dargestellt mit deutscher Zeitachse
-
In der Produktionsumgebung (CPL) werden die Einstellungen per CGI-Aufruf direkt an das Gerät gesendet: z. B.
/CPL?/Service/ae.ACP&ACN1=AE22&ACO1=0.1&ACF1=1.0&ACL1=30 -
In der Entwicklungsumgebung erfolgt die Speicherung weiterhin lokal über die zentrale API
-
Das System erkennt automatisch, welche Umgebung aktiv ist (localhost vs. echte IP)
-
Bearbeitbare Felder im Modal: Name, Offset, Faktor, Loggerintervall
-
Änderungen werden in der Entwicklungsumgebung direkt in
/apiMockData/SERVICE/analogeEingaengeMockData.jsgespeichert -
Speicherung erfolgt einzeilig im Format
var xyz = [1, 2, 3];, Kommentare im File bleiben erhalten -
Nach dem Speichern wird die Seite automatisch neu geladen
-
Entwicklung mit Mock-Daten:
- In der Entwicklungsumgebung werden Mock-Daten über den API-Handler
/api/cpl/fetchAnalogInputsHistorygeladen - In der Produktion wird direkt auf die Live-Daten der CPL-Webschnittstelle (DIA0) zugegriffen
- In der Entwicklungsumgebung werden Mock-Daten über den API-Handler
-
Einheitlicher Zugriff auf analoge Messdaten über Redux-Slice
analogInputsHistory -
Fehlerbehandlung und Ladeanzeigen für bessere Benutzerführung
📜 Berichte / Meldungen
- Gesamte Historie aller Systemmeldungen
- Farbcodierung je nach Gewichtung (Info, Warnung, Alarm)
- Datumsauswahl (von/bis) zur Berichtsfilterung
- Pagination zur Navigation durch Berichte
🔌 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
⚙️ Einstellungen
- 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.
🔧 Installation & Lokale Entwicklung
# 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.jsgespeichert. - 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
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 |
|---|---|
getSystemVoltTempThunk |
Lade Systemspannungen und Temperaturen |
getDigitalOutputsThunk |
Lade Status der digitalen Ausgänge |
getDigitalInputsThunk |
Lade Status der digitalen Eingänge |
fetchAnalogeEingaengeThunk |
Lade analoge Eingänge |
fetchTDRChartDataThunk |
Lade TDR-Messkurve für einen Slot |
fetchTDRReferenceChartThunk |
Lade TDR-Referenzkurve |
getLoopChartDataThunk |
Lade Schleifen- und Isolationsmesswerte |
getLast20MessagesThunk |
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 |
getSystemSettingsThunk |
Lade Systemeinstellungen |
getOpcUaSettingsThunk |
Lade OPC UA Einstellungen und Benutzer |
📊 Entwicklerdokumentation
Diagramme unter /docsForDev/Diagramme/systemVoltTemp/:
| Diagramm | Beschreibung |
|---|---|
| systemVoltTempFlow.md | Flowchart: Seiten-Ablauf |
| systemVoltTempReduxFlow.md | Redux-Datenfluss |
| systemVoltTempSequence.md | Sequenzdiagramm: Datenfluss im Zeitverlauf |
Angezeigt mit Mermaid.js.
💬 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:
/components/main/settingsPageComponents/config/users.ts
Beispiel für die Benutzerstruktur:
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:
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