⚡ 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ä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):

{ "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.js gespeichert

• 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/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

📜 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.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

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