docsForDev update

This commit is contained in:
Ismail Ali
2025-04-27 22:16:19 +02:00
parent f5eee22312
commit 7dcb2eb819
5 changed files with 65 additions and 189 deletions

View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.285";
const webVersion = "1.6.286";
export default webVersion;

View File

@@ -1,12 +0,0 @@
## Entscheidung: Digitale Ausgänge (da.js)
**Datum:** 03.04.2025
**Gesprächspartner:** Kai
**Inhalt:**
Digitale Ausgänge (da.js) sind aktuell **nicht erforderlich**. Diese Funktion wird in einer späteren Version umgesetzt, weil sie derzeit nicht im Fokus der Deadline steht.
**Notiz für spätere Version:**
Digitale Ausgänge können über eine spätere Erweiterung integriert werden, z.B. nach Version 1.0.0.
---

View File

@@ -1,102 +1,75 @@
# CPLv4.0 Frontend für das Kabelüberwachungssystem
# 📚 Entwicklerdokumentation für CPLv4.0 Frontend
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.
Willkommen zur technischen Dokumentation des CPLv4.0 Frontends.
Dieses Verzeichnis enthält alle Details zur Architektur, zu den Datenflüssen, zum Redux-Management und zu den verwendeten APIs.
---
## 🧭 Seitenübersicht
## 📆 Übersicht
### 🔹 **Header**
Dieses Dokument erklärt die technische Struktur und den Ablauf des Projekts für Entwickler. Es dient als Einstiegspunkt für die detaillierte Dokumentation in den jeweiligen Unterordnern.
- 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
- **Architektur**: Aufbau des Systems und der Hauptkomponenten
- **Datenflüsse**: Flowcharts und Sequenzdiagramme wichtiger Abläufe
- **Redux**: State-Management über Slices und Thunks
- **APIs**: Beschreibung der genutzten API-Endpunkte
- **Deployment**: Schritte für Build und Veröffentlichung auf CPL
- **Glossar**: Erklärung wichtiger technischer Begriffe
---
### 🖥️ **/dashboard** Übersicht
## 📂 Verzeichnisstruktur
- 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 132) 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 (132) mit Statusanzeige
- Digitale Ausgänge (14) 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
```plaintext
/docsForDev/
├── Architektur/
│ ├── ArchitekturUebersicht.md
└── KomponentenDiagramm.md
├── Datenflüsse/
├── SystemVoltTempFlow.md
├── TDRSequenz.md
└── MeldungenFlow.md
├── Redux/
│ ├── ReduxStateUebersicht.md
│ └── WichtigeThunks.md
├── APIs/
│ ├── SystemAPI.md
│ └── KabelueberwachungAPI.md
├── Deployment/
└── DeploymentCPL.md
├── Glossar/
└── Begriffe.md
└── README.md # Diese Datei
```
---
## 🔧 Inhalte
- **Technische Zusammenhänge** zwischen Frontend, Backend und Embedded-System
- **Redux-Slices** und **Thunks** im Detail beschrieben
- **Flowcharts und Sequenzdiagramme** zur Veranschaulichung der Abläufe
- **API-Dokumentation** für Datenabrufe und Systembefehle
- **Mock-Daten-Strategie** für Entwicklung ohne Hardware
- **Deployment-Anleitung** für CPL ("out"-Verzeichnis Upload)
---
## 💬 Hinweise für Entwickler
- Neue Redux-Slices oder Thunks bitte hier in den passenden Dateien dokumentieren.
- Anpassungen an Komponenten oder APIs sollten mit neuen Diagrammen oder Updates versehen werden.
- Mock-Daten sollten beschrieben werden, wenn neue Felder hinzukommen.
- Deployment-Anweisungen aktualisieren, falls sich der Ablauf ändert.
---
## 📣 Ziel
Eine klare, aktuelle und wartbare technische Dokumentation für das gesamte CPLv4.0 Frontend Projekt, die sowohl neue als auch bestehende Entwickler effektiv unterstützt.
---
## 👨‍💼 Kontakt
Bei Fragen oder Unklarheiten zur Dokumentation bitte an das CPLv4.0 Entwicklungsteam wenden.

View File

@@ -1,58 +0,0 @@
## 22.04.2025
_Test CPL Webseiten V4 am 04.04.2025_
Fehler:
- Meldungsseite benutzt noch falsche Funktion zur Darstellung der Meldungen.
- KÜ: Button Messkurve ist abhängig von der Anzeige. Darstellung noch ein wenig verwirrend. Evtl. so besser:
- !image-20250404-105234.png|width=143,height=205,alt="image-20250404-105234.png"!
** Beim ersten Aufruf des Messwertfenster den Isolationswiderstand 30 Tage Stündliche Werte anzeigen.
** Beim ersten Aufruf einer Messkurve einer Kü wird +keine+ Kurve angezeigt (Ismail bekannt)
** KÜ-Einstellungen: Speichern danach Meldefenster „Daten wurden gespeichert“ muss meinetwegen nicht eingeblendet werden.
** Bei einem Schleifenfehler evtl. die Schleifenfehlermeldung unten beim Messwert anzeigen? Wenn z.B. Isolationsfehler und Schleifenfehler geleichzeitig anliegt wird nur der Isolationsfehler im schwarzen Feld angezeigt.
** Auf kleinen Bildschirmen kann der BGT nicht nach links und rechts gescrollt werden.
** Kurvenfenster hat eine relative große Minimalgröße. Es ist eine statische Größe. Dynamisch?
\*\* Nodeset-Name kann auf Startseite unten rechts gelöscht werden
-
- Offene Aufgaben:
** Kabelstrecken und Kabelknotenpunkte Anzeige deren Namen und Länge auf KÜ-Seite
** Meldungsliste Startseite mit neuer Funktion (fester Zeitraum). Inkl. Prio (Gewichtung) und Quellenangabe.
** Digitale Eingänge: Einstellungen der DEs fehlt noch
** Auswahl “Einstellungen” im linken Hauptmenü geht noch nicht.
-
- Spätere Aufgaben:
** Analoge Eingänge
** Meldungen auf der Kü-, bzw. DE-Seite
> ## CPLV4: Webserver erstellen / Stufe 2
>
> Schlüssel: ENTW-109
> URL: https://littwinsystemtechnik.atlassian.net/browse/ENTW-109
> Projekt: Entwicklung
> Vorgangstyp: LS-UA-Entwicklung
> Autor: Jörg Littwin
>
> Zugewiesene Person: ISA
> Anhänge: image-20250404-105234.png
>
> Benötigte Zeit: 330,75h
>
> Responsive Webdesign [Ismail]
> Anzeigen von Messreihen [Ismail] > _Anmerkung Kai am 13. Februar 2025 (Besprechung mit JOL):_ > _(Funktionen in_ {color:#ff5630}_Rot_{color} _müssen noch von Kai programmiert werden, noch nicht bearbeiten!)_
> Aus dem ersten Auftrag Webserver DB fehlen noch einige Punkte sowie weitere, in der Entwicklung aufgetretene Webseiten:
>
> - (/) Detailseite KÜ: Verlaufskurve Isolationsmesskurve und Schleifenwiderstand. Es soll der Zeitraum konfigurierbar sein. Wir haben drei unterschiedliche Darstellungen:
> ** 1.) 15 Minuten-Messwert mit Min- und Maxkurve (bei bis zu 14 Tagen)
> ** 2.) Stundendurchschnittswert mit Min- und Maxkurve (bei bis zu 100 Tagen)
> \*\* 3.) Tagesdurchschnittswert mit Min- und Maxkurve (bei mehr als 100 Tagen)
> - (/) Detailseite KÜ: TDR Funktionen inkl. Auswahl verfügbarer Messkurven (z.B. letzten 6 Monate oder Zeitauswahl). Es soll eine Referenzkurve zusätzlich mit angezeigt werden. {color:#ff5630}Diese Referenzkurve ist noch in Arbeit {color}
> - Detailseite KÜ: Anzeige/Konfiguration von 10 Knotenpunkte (ID) und 10 Teilstrecken (ID und Länge) als Liste auf der Detailseite
> - Detailseite KÜ: Möglichkeit zum Update der Firmware Modul KÜ
> - (/) Detailseite KÜ: Einstellung Loggerinterval
> - (/) Meldungen: bisher letzten 20 Meldungen, Hier einen beliebiger Zeitraum zur Auswahl erstellen. ({color:#ff5630}Kai muss noch Anpassungen machen, Text{color})
> - 🔨 Detailseite DE (Zustand, Invertierung, Name, Filterzeit) {color:#ff5630}(Daten noch nicht verfügbar){color}
> - Detailseite AE ({color:#ff5630}Offset, Faktor{color}, Messwert, {color:#ff5630}Name, Loggerintervall, {color}Messkurve beliebiger Zeitraum, Min/Max/AVG wie bei KÜ) {color:#ff991f}Prio 2{color}
> - Detailseite System (Anzeige Spannungen 5V / +15V / -+15V / -98V / CPU- und ADC-Temperaturen ) mit Messkurve wie Kü{color:#ff991f} Prio 2{color}
> - (/) Allgemein (Name Standort, {color:#ff5630}Werkseinstellungen{color}, Datenbank leeren)

View File

@@ -1,27 +0,0 @@
<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>