# ⚡ 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 18, 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ätenamen
- 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)

### 🔦 **/einausgaenge**

- Digitale Eingänge (1–32) mit Live-Status
- Digitale Ausgänge (1–4) mit Schaltfunktion

### 📉 **/analogeEingaenge**

- Tabellenübersicht über analoge Werte
- Live-Trend-Diagramm für Messdaten

### 📜 **/meldungen**

- Gesamte Historie aller Systemmeldungen
- Farbcodierung je nach Gewichtung (Info, Warnung, Alarm)

### ⚙️ **/einstellungen**

- Systemkonfiguration
- OPC UA Benutzerverwaltung, Verschlüsselung, Nodeset-Verwaltung

### 🔌 **/system**

- Live-Anzeige von:
  - +5V, +15V, -15V, -98V Spannungen
  - CPU- und ADC-Temperaturen
- Verlaufskurven über Zeit (Chart.js)

---

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

---

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

| Slice               | Zweck                                                         |
| :------------------ | :------------------------------------------------------------ |
| systemVoltTempSlice | Verwaltung von Spannungs-/Temperaturdaten & Historie          |
| tdrChartSlice       | Verwaltung der TDR-Messkurven                                 |
| loopChartSlice      | Verwaltung Schleifen-/Isolationsmessung                       |
| weitere Slices      | für digitale Eingänge, analoge Eingänge, Systemmeldungen etc. |

### Thunks

- `fetchSystemVoltTempThunk.ts`
- `fetchDigitalOutputsThunk.ts`
- `fetchAnalogeEingaengeThunk.ts`

---

## 📊 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](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.