From d0568dc576c1abf155f41da4cf15efd67f1c83a6 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 22 Apr 2025 09:19:51 +0200
Subject: [PATCH] =?UTF-8?q?Neue=20Men=C3=BC=20Eintr=C3=A4ge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/navigation/Navigation.tsx          | 14 ++--
 docsForDev/Scrum.md                           | 58 +++++++++++++++
 next.config.mjs                               |  2 +-
 pages/_app.tsx                                |  2 +-
 pages/{einausgaenge.tsx => digitalInputs.tsx} |  0
 pages/digitalOutputs.tsx                      | 73 +++++++++++++++++++
 6 files changed, 141 insertions(+), 8 deletions(-)
 create mode 100644 docsForDev/Scrum.md
 rename pages/{einausgaenge.tsx => digitalInputs.tsx} (100%)
 create mode 100644 pages/digitalOutputs.tsx

diff --git a/components/navigation/Navigation.tsx b/components/navigation/Navigation.tsx
index ad366f9..b53128b 100644
--- a/components/navigation/Navigation.tsx
+++ b/components/navigation/Navigation.tsx
@@ -23,11 +23,13 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
 
   const menuItems = [
     { name: "Übersicht", path: "/dashboard" },
-    { name: "Kabelüberwachung", path: "/kabelueberwachung" },
-    { name: "Ein- und Ausgänge", path: "/einausgaenge" },
-    { name: "Analoge Eingänge", path: "/analogeEingaenge" },
-    { name: "Meldungen", path: "/meldungen" },
-    { name: "Einstellungen", path: "/einstellungen" },
+    { name: "Kabelüberwachung ", path: "/kabelueberwachung" },
+    { name: "Meldungseingänge ", path: "/digitalInputs" }, //vorher Digitale Ein -und Ausgänge
+    { name: "Schaltausgänge ", path: "/digitalOutputs" }, //vorher Digitale Ein -und Ausgänge
+    { name: "Messwertüberwachung  ", path: "/analogeEingaenge" }, //vorher Analoge Eingänge
+    { name: "Berichte ", path: "/meldungen" },
+    { name: "System ", path: "/meldungen" },
+    { name: "Einstellungen ", path: "/einstellungen" },
     //{ name: "Zutriffskontrolle", path: "/zutrittskontrolle" },
 
     // Weitere Menüpunkte hier
@@ -35,7 +37,7 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
 
   return (
     <aside>
-      <nav className="w-48 h-full flex-shrink-0 mt-16">
+      <nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}>
         {menuItems.map((item) => (
           <Link href={formatPath(item.path)} key={item.name}>
             <div
diff --git a/docsForDev/Scrum.md b/docsForDev/Scrum.md
new file mode 100644
index 0000000..c25c2f0
--- /dev/null
+++ b/docsForDev/Scrum.md
@@ -0,0 +1,58 @@
+## 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 DE’s 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)
diff --git a/next.config.mjs b/next.config.mjs
index 3e26a6e..846ebe0 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true, // Aktiviert Strict Mode zur Identifizierung potenzieller Probleme in der Anwendung
-  // output: "export", // Stellt sicher, dass Next.js eine statische Version der Website generiert (SSG)
+  //output: "export", // Stellt sicher, dass Next.js eine statische Version der Website generiert (SSG)
   trailingSlash: false, // Fügt einen Schrägstrich am Ende der URLs hinzu (nützlich für statische Verzeichnisse)
   images: {
     unoptimized: true, // Verzichtet auf Next.js' Bildoptimierung (nützlich für statische Exporte)
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 70d1430..eb999b9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -55,7 +55,7 @@ function AppContent({ Component, pageProps }: AppProps) {
     <div className="flex flex-col h-screen overflow-hidden">
       <Header />
       <div className="flex flex-grow w-full">
-        <Navigation className="w-1/5" />
+        <Navigation className="w-56" />
         <main className="w-full flex-grow">
           {sessionExpired && (
             <div className="bg-red-500 text-white p-4 text-center">
diff --git a/pages/einausgaenge.tsx b/pages/digitalInputs.tsx
similarity index 100%
rename from pages/einausgaenge.tsx
rename to pages/digitalInputs.tsx
diff --git a/pages/digitalOutputs.tsx b/pages/digitalOutputs.tsx
new file mode 100644
index 0000000..34ab8e3
--- /dev/null
+++ b/pages/digitalOutputs.tsx
@@ -0,0 +1,73 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../redux/store";
+
+import InputModal from "../components/main/einausgaenge/modals/InputModal";
+import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
+
+import { fetchDigitaleEingaengeThunk } from "../redux/thunks/fetchDigitaleEingaengeThunk";
+import { fetchDigitalOutputsThunk } from "../redux/thunks/fetchDigitalOutputsThunk";
+
+import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
+import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
+
+const EinAusgaenge: React.FC = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const digitalInputs = useSelector(
+    (state: RootState) => state.digitalInputsSlice.inputs
+  );
+  const digitalOutputs = useSelector(
+    (state: RootState) => state.digitalOutputsSlice.outputs
+  );
+
+  const [selectedInput, setSelectedInput] = useState(null);
+  const [selectedOutput, setSelectedOutput] = useState(null);
+  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
+  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
+
+  useEffect(() => {
+    dispatch(fetchDigitaleEingaengeThunk());
+    dispatch(fetchDigitalOutputsThunk());
+
+    const interval = setInterval(() => {
+      dispatch(fetchDigitaleEingaengeThunk());
+      dispatch(fetchDigitalOutputsThunk());
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, [dispatch]);
+
+  const openInputModal = (input: any) => {
+    setSelectedInput(input);
+    setIsInputModalOpen(true);
+  };
+
+  const closeInputModal = () => {
+    setSelectedInput(null);
+    setIsInputModalOpen(false);
+  };
+
+  const openOutputModal = (output: any) => {
+    setSelectedOutput(output);
+    setIsOutputModalOpen(true);
+  };
+
+  const closeOutputModal = () => {
+    setSelectedOutput(null);
+    setIsOutputModalOpen(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
+      <h1 className="text-base font-semibold mb-2">Ein- und Ausgänge</h1>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 items-start ">
+        {/* Digitale Ausgänge nicht Erforderlich*/}
+        {<DigitalOutputs openOutputModal={openOutputModal} />}
+      </div>
+    </div>
+  );
+};
+
+export default EinAusgaenge;