Readme.md erstellt

docs/Diagramme/Redux-Aktivitaetsdiagramm.wsd

@@ -0,0 +1,30 @@
+digraph AktivitaetsDiagramm {
+    rankdir=TB;
+
+    start [shape=point];
+    stop [shape=doublecircle, label="Ende"];
+
+    subgraph cluster_0 {
+        label="Redux Prozess";
+        style=dashed;
+
+        Start [shape=ellipse, label="Modul auswählen"];
+        DatenAbrufen [shape=box, label="Daten abrufen"];
+        ThunkDispatch [shape=box, label="Thunk dispatchen"];
+        ServiceAnfrage [shape=box, label="Service anfragen"];
+        AntwortRedux [shape=box, label="Antwort von Redux"];
+        ReduxSpeichern [shape=box, label="Redux speichert Daten"];
+        StateUpdate [shape=box, label="Redux State aktualisieren"];
+        UIRender [shape=box, label="UI rendert neue Daten"];
+    }
+    
+    start -> Start;
+    Start -> DatenAbrufen;
+    DatenAbrufen -> ThunkDispatch;
+    ThunkDispatch -> ServiceAnfrage;
+    ServiceAnfrage -> AntwortRedux;
+    AntwortRedux -> ReduxSpeichern;
+    ReduxSpeichern -> StateUpdate;
+    StateUpdate -> UIRender;
+    UIRender -> stop;
+}

docs/Diagramme/Redux-Prozessdiagramm.dot

@@ -0,0 +1,25 @@
+digraph UseCaseDiagram {
+    rankdir=LR;
+    User [shape=ellipse, label="User"];
+    
+    subgraph cluster_0 {
+        label="Redux Toolkit";
+        style=dashed;
+        
+        UC1 [label="Modul auswählen", shape=box];
+        UC2 [label="Daten abrufen", shape=box];
+        UC3 [label="Thunk verarbeitet Anfrage", shape=box];
+        UC4 [label="Service ruft Daten ab", shape=box];
+        UC5 [label="Redux speichert Daten", shape=box];
+        UC6 [label="UI rendert mit neuen Daten", shape=box];
+    }
+
+    User -> UC1 [label="Wählt Modul aus"];
+    User -> UC2 [label="Lädt Daten"];
+
+    UC2 -> UC3 [label="Thunk dispatchen"];
+    UC3 -> UC4 [label="Service anfragen"];
+    UC4 -> UC5 [label="Antwort an Redux"];
+    UC5 -> UC6 [label="Redux State aktualisieren"];
+    UC6 -> User [label="UI aktualisiert sich"];
+}

docs/Diagramme/Redux-Sequenzdiagramm.dot

@@ -0,0 +1,19 @@
+digraph ReduxSequenzDiagramm {
+    rankdir=LR;
+    
+    # Definiere die Akteure und Komponenten
+    User [shape=ellipse, label="User"];
+    UI [shape=box, label="UI"];
+    ReduxStore [shape=box, label="Redux Store"];
+    Thunk [shape=box, label="Thunk Middleware"];
+    Service [shape=box, label="Service API"];
+    
+    # Nachrichtenfluss (Sequenzdiagramm-Stil)
+    User -> UI [label="Wählt Modul aus"];
+    UI -> ReduxStore [label="Lädt Daten"];
+    ReduxStore -> Thunk [label="Dispatch Thunk"];
+    Thunk -> Service [label="API Request"];
+    Service -> Thunk [label="API Response"];
+    Thunk -> ReduxStore [label="Update State"];
+    ReduxStore -> UI [label="State-Update, Re-Render"];
+}

docs/Diagramme/tdrAbhaengigkeit.dot

@@ -0,0 +1,8 @@
+digraph TDRGraph {
+  Slot -> TDM [label="lädt TDM-Liste"];
+  TDM -> TDR [label="liefert ID → TDR"];
+  TDR -> "TDR Chart" [label="Daten für Chart"];
+  Referenzkurve -> "TDR Chart" [label="wird überlagert"];
+  TDR -> Referenzkurve [label="kann gesetzt werden"];
+  Slot -> Referenzkurve [label="Slot-gebunden"];
+}

docs/Diagramme/tdr_redux_diagram.dot

@@ -0,0 +1,20 @@
+digraph TDRReduxStructure {
+  rankdir=LR;
+  node [shape=record, fontname=Helvetica];
+
+  SlotData [label="{ SlotData | + slotIndex: number\\l+ tdrList: TDRMeasurement[]\\l }"];
+  TDRMeasurement [label="{ TDRMeasurement | + id: number\\l+ t: string\\l+ d: number\\l+ p: number\\l+ s: number\\l+ a: number\\l }"];
+  TDMChartSlice [label="{ tdmChartSlice (Redux) | + data: SlotData[]\\l }"];
+  TDRChartSlice [label="{ tdrChartDataByIdSlice (Redux) | + data: Record<id, TDRChartPoint[]>\\l }"];
+  fetchAllTDMData [label="fetchAllTDMData.ts", shape=note];
+  fetchTDRChartThunk [label="fetchTDRChartDataByIdThunk.ts", shape=note];
+  fetchTDRChartService [label="fetchTDRChartDataById.ts", shape=note];
+  kabelueberwachung [label="kabelueberwachung.tsx", shape=note];
+
+  SlotData -> TDRMeasurement [arrowhead="open", label="has many"];
+  fetchAllTDMData -> TDMChartSlice;
+  fetchTDRChartThunk -> TDRChartSlice;
+  fetchTDRChartThunk -> fetchTDRChartService;
+  kabelueberwachung -> fetchAllTDMData;
+  kabelueberwachung -> fetchTDRChartThunk;
+}

docs/README.md

@@ -0,0 +1,102 @@
+# ⚡ CPLv4.0 – Frontend für das Kabelüberwachungssystem
+
+Das Frontend von CPLv4.0 stellt verschiedene Systeminformationen, Messdaten und Konfigurationen übersichtlich dar.
+Die Benutzeroberfläche ist intuitiv und modular aufgebaut und bietet Zugriff auf digitale sowie analoge Ein-/Ausgänge, TDR-Messungen, Referenzkurven, Systemmeldungen und Einstellungen.
+
+---
+
+## 🧭 Seitenübersicht
+
+### 🔹 **Header**
+
+- Zeigt den Namen der Station / des Geräts (CPL)
+- Abmelden-Button für Admins
+
+### 🔹 **Footer**
+
+- Firmenname, Telefonnummer, E-Mail
+- PDF-Handbücher (Anleitung) als Slider mit Download-Funktion
+
+---
+
+### 🖥️ **/dashboard** – Übersicht
+
+- Letzten 20 Meldungen aus dem System
+- Versionsinformationen (Frontend, Backend)
+- Baugruppenträger mit Modulnamen und Statusanzeige (grün = OK, rot = Fehler)
+- Netzwerk-Informationen:
+  - IP-Adresse
+  - Subnetzmaske
+  - Gateway
+  - OPC UA Status (in Betrieb oder offline)
+  - OPC UA Nodeset Name
+
+---
+
+### 📡 **/kabelueberwachung** – Kabelüberwachung
+
+- Visualisierung der Slots (KUE 1–32) in 4 Racks
+- Darstellung von:
+  - Isolationswiderstand
+  - Schleifenwiderstand
+  - TDR-Messkurven und Vergleich mit Referenzkurve
+  - Alarme (z. B. Erdschluss, Aderbruch)
+- Einstellung pro Slot (via Zahnrad → Modal)
+
+---
+
+### 🔌 **/einausgaenge** – Digitale Ein- und Ausgänge
+
+- Digitale Eingänge (1–32) mit Statusanzeige
+- Digitale Ausgänge (1–4) mit Umschaltfunktion (Toggle)
+- Modale für Beschreibung und Konfiguration
+
+---
+
+### 🌡️ **/analogeEingaenge**
+
+- Tabelle mit analogen Eingangswerten (z. B. Temperatur, Spannung)
+- Diagramm zur Visualisierung von Verlauf / Trends
+
+---
+
+### 📝 **/meldungen**
+
+- Gesamte Meldungshistorie
+- Anzeige von Statusfarbe, Zeit, Gewichtung, Nachricht, Quelle
+- Pagination (10 Meldungen pro Seite)
+
+---
+
+### ⚙️ **/einstellungen**
+
+- Allgemeine Systemeinstellungen
+- OPC UA Konfiguration
+  - Benutzer, Verschlüsselung, Clients
+  - Verbindung & Nodeset-Verwaltung
+
+---
+
+## 🔧 Technologien
+
+- **Next.js** (Pages Router)
+- **React** (mit funktionalen Komponenten & Hooks)
+- **Tailwind CSS** für responsives UI-Design
+- **Redux Toolkit** zur Zustandverwaltung
+- **Mockdaten** im Verzeichnis `public/CPLmockData/`
+- **Iconify Icons** & **Bootstrap Icons** für UI-Darstellung
+
+---
+
+## 🔧 Installation auf dem CPLv4.0
+
+```bash
+git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend
+cd cplv4-frontend
+npm install
+npm run build
+
+Danach:
+Inhalt des out-Verzeichnisses per FTP auf das CPL-Gerät kopieren
+Ziel: B → WEBS Verzeichnis
+```

docs/draw.io/test.drawio

@@ -0,0 +1,27 @@
+<mxfile host="65bd71144e">
+    <diagram id="95LLT6B1yb-ZXk_jyexu" name="Page-1">
+        <mxGraphModel dx="1732" dy="894" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="2" value="&lt;div style=&quot;color: rgb(204, 204, 204); background-color: rgb(31, 31, 31); font-family: Consolas, &amp;quot;Courier New&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;&quot;&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;handleSetReference&lt;/span&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+                    <mxGeometry x="50" y="160" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="" style="endArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="2" edge="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="400" y="480" as="sourcePoint"/>
+                        <mxPoint x="310" y="190" as="targetPoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="6" value="fetch" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" parent="3" vertex="1" connectable="0">
+                    <mxGeometry x="0.3333" y="-2" relative="1" as="geometry">
+                        <mxPoint x="-20" y="-22" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="7" value="&lt;h6 style=&quot;font-family: Consolas, &amp;quot;Courier New&amp;quot;, monospace; line-height: 19px; white-space: pre;&quot;&gt;&lt;font style=&quot;color: rgb(0, 0, 0); background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); font-size: 10px;&quot;&gt;fetchReferenceCurveBySlotThunk&lt;/font&gt;&lt;/h6&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="310" y="152.5" width="190" height="75" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>