⚡ 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

📡 /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)

---

🔧 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
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	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