CPLv4.0/README.md

⚡ 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

🔌 /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
• Live-Trend-Diagramm (Chart.js) der aktuellen Werte

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

🔌 /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.

---

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