diff --git a/README.md b/README.md index 4d8dcb2..ad38dd5 100644 --- a/README.md +++ b/README.md @@ -1,102 +1,157 @@ # ⚡ 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. +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. --- -## 🧭 Seitenübersicht +## 📘 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** -- Zeigt den Namen der Station / des Geräts (CPL) -- Abmelden-Button für Admins +- Anzeigen von CPL-Gerätenamen +- Abmelden-Button (Admin-Logout) ### 🔹 **Footer** -- Firmenname, Telefonnummer, E-Mail -- PDF-Handbücher (Anleitung) als Slider mit Download-Funktion +- Firmenname, Supportdaten +- PDF-Slider für Anleitungen (Handbücher) ---- +### 📈 **/dashboard** -### 🖥️ **/dashboard** – Übersicht - -- Letzten 20 Meldungen aus dem System +- Letzte 20 Systemmeldungen - 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 +- Modulstatus-Anzeige (Baugruppenträger) +- Netzwerkdaten (IP, Subnetz, Gateway, OPC UA Status) ---- +### 🛋️ **/kabelueberwachung** -### 📡 **/kabelueberwachung** – Kabelüberwachung +- Visualisierung aller Slots (1-32) in 4 Baugruppenträgern +- Schleifen- und Isolationsmessung +- TDR-Messung & Referenzkurvenvergleich +- Alarme pro Slot (z.B. Erdschluss, Aderbruch) -- 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 Eingänge (1–32) mit Live-Status +- Digitale Ausgänge (1–4) mit Schaltfunktion -### 🔌 **/einausgaenge** – Digitale Ein- und Ausgänge +### 📉 **/analogeEingaenge** -- Digitale Eingänge (1–32) mit Statusanzeige -- Digitale Ausgänge (1–4) mit Umschaltfunktion (Toggle) -- Modale für Beschreibung und Konfiguration +- Tabellenübersicht über analoge Werte +- Live-Trend-Diagramm für Messdaten ---- +### 📜 **/meldungen** -### 🌡️ **/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) - ---- +- Gesamte Historie aller Systemmeldungen +- Farbcodierung je nach Gewichtung (Info, Warnung, Alarm) ### ⚙️ **/einstellungen** -- Allgemeine Systemeinstellungen -- OPC UA Konfiguration - - Benutzer, Verschlüsselung, Clients - - Verbindung & Nodeset-Verwaltung +- 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) --- -## 🔧 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 +## 🔧 Installation & Lokale Entwicklung ```bash +# Repository klonen git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend -cd cplv4-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 per FTP auf das CPL-Gerät kopieren -Ziel: B → WEBS Verzeichnis +# 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.