KueModal.jsx lesen von Redux store

components/modales/KueModal.jsx

@@ -1,64 +1,70 @@
 "use client"; // components/modales/KueModal.jsx
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
-  const [ids, setIds] = useState(Array(32).fill("---")); // IDs für jedes Modul
+  const [ids, setIds] = useState(Array(32).fill("---"));
   const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
   const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
     Array(32).fill(10.0)
-  ); // Default 10.0 MOhm
+  );
-  const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0)); // Default Verzögerung 1 Sekunde
+  const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
   const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
     Array(32).fill(0.1)
-  ); // kOhm
+  );
   const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
     Array(32).fill(1.0)
-  ); // kOhm
+  );
   const [schleifenintervall, setSchleifenintervall] = useState(
     Array(32).fill(24)
-  ); // Default 24 Stunden
+  );
-  // Originalwerte speichern
-  const [originalValues, setOriginalValues] = useState({});
-  useEffect(() => {
-    const initialValues = {
-      ids: [...ids],
-      bezeichnungen: [...bezeichnungen],
-      isolationsgrenzwerte: [...isolationsgrenzwerte],
-      verzoegerung: [...verzoegerung],
-      untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
-      obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
-      schleifenintervall: [...schleifenintervall],
-    };
-    setOriginalValues(initialValues);
-  }, [showModal]);
 
+  const [originalValues, setOriginalValues] = useState({});
+
+  // Werte aus dem Redux-Store abrufen
+  const {
+    kueID,
+    kueLimit1,
+    kueDelay1,
+    kueLimit2Low,
+    kueLimit2High,
+    kueLoopInterval,
+  } = useSelector((state) => state.variables);
+
+  // Initiale Werte festlegen, wenn das Modal geöffnet wird
   useEffect(() => {
-    // Initialisierung mit Werten aus dem globalen `window`-Objekt
+    if (showModal) {
-    //ID statt Name
+      setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids);
-    if (window.kueID && Array.isArray(window.kueID)) {
+      setBezeichnungen(
-      setIds(window.kueID.map((id) => id.trim() || "---"));
+        kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen
+      );
+      setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
+      setVerzoegerung(kueDelay1 || verzoegerung);
+      setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
+      setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
+      setSchleifenintervall(kueLoopInterval || schleifenintervall);
+
+      setOriginalValues({
+        ids: [...ids],
+        bezeichnungen: [...bezeichnungen],
+        isolationsgrenzwerte: [...isolationsgrenzwerte],
+        verzoegerung: [...verzoegerung],
+        untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
+        obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
+        schleifenintervall: [...schleifenintervall],
+      });
     }
-    if (window.kueID && Array.isArray(window.kueID)) {
+  }, [
-      setBezeichnungen(window.kueID.map((name) => name.trim() || "---"));
+    showModal,
-    }
+    kueID,
-    if (window.kueLimit1 && Array.isArray(window.kueLimit1)) {
+    kueLimit1,
-      setIsolationsgrenzwerte(window.kueLimit1);
+    kueDelay1,
-    }
+    kueLimit2Low,
-    if (window.kueDelay1 && Array.isArray(window.kueDelay1)) {
+    kueLimit2High,
-      setVerzoegerung(window.kueDelay1);
+    kueLoopInterval,
-    }
+  ]);
-    if (window.kueLimit2Low && Array.isArray(window.kueLimit2Low)) {
-      setUntereSchleifenGrenzwerte(window.kueLimit2Low);
-    }
-    if (window.kueLimit2High && Array.isArray(window.kueLimit2High)) {
-      setObereSchleifenGrenzwerte(window.kueLimit2High);
-    }
-    if (window.kueLoopInterval && Array.isArray(window.kueLoopInterval)) {
-      setSchleifenintervall(window.kueLoopInterval);
-    }
-  }, []);
 
   // Funktionen zur Änderung der Werte
   const handleChange = (setter, e, slot) => {
@@ -71,17 +77,9 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   };
 
   const handleSave = () => {
-    // Validierung: Der obere Grenzwert darf nicht kleiner als der untere sein
-    /*     if (obereSchleifenGrenzwerte[slot] < untereSchleifenGrenzwerte[slot]) { wird nicht mehr benötigt
-      alert(
-        `Der obere Schleifengrenzwert (${obereSchleifenGrenzwerte[slot]} kOhm) darf nicht kleiner als der untere Grenzwert (${untereSchleifenGrenzwerte[slot]} kOhm) sein!`
-      );
-      return; // Speichern verhindern
-    }
- */
     const changes = {};
 
-    // Vergleich mit den Originalwerten, um Änderungen zu erkennen
+    // Überprüfen, ob Änderungen gegenüber den Originalwerten vorliegen
     if (ids[slot] !== originalValues.ids[slot]) {
       changes.KID = ids[slot];
     }
@@ -112,10 +110,8 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
       changes.KRI = schleifenintervall[slot];
     }
 
-    // Falls Änderungen vorhanden sind, die fetch-Requests auslösen
     if (Object.keys(changes).length > 0) {
       let url = `/cpl?/CPL/SERVICE/kueDetail.HTML&slot=${slot}`;
-
       Object.keys(changes).forEach((paramKey) => {
         url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
       });
@@ -124,7 +120,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         .then((response) => {
           if (response.ok) {
             alert("Daten erfolgreich gespeichert!");
-            onModulNameChange(ids[slot]); // Weitergabe der Änderung
+            onModulNameChange(ids[slot]);
           } else {
             alert("Fehler beim Speichern der Daten!");
           }
@@ -137,7 +133,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
       alert("Keine Änderungen vorgenommen.");
     }
 
-    // Schließe das Modal nach dem Speichern
     onClose();
   };
 
@@ -183,7 +178,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         },
       }}
     >
-      {/* Modal Header */}
       <div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
         <h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
         <button
@@ -202,20 +196,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         </button>
       </div>
 
-      {/* ID und Modulname anzeigen */}
       <div className="p-2 mb-4 text-black">
-        {/* 
-           <div className="mb-2">
-          <label className="font-bold">ID:</label>
-          <input
-            type="text"
-            className="border rounded p-1 w-full text-sm"
-            value={ids[slot]}
-            onChange={(e) => handleChange(setIds, e, slot)}
-          />
-        </div>
-        */}
-
         <div className="mb-2 ">
           <label className="font-bold ">Kabelbezeichnung:</label>
           <input
@@ -227,7 +208,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         </div>
       </div>
 
-      {/* Modal Body */}
       <div className="p-2 text-black">
         <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
         <table className="w-full text-left border-collapse mb-4">
@@ -248,7 +228,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
                   type="number"
                   className="w-[6rem] border rounded p-1 text-sm"
                   value={isolationsgrenzwerte[slot]}
-                  step="0.1" // Schrittgröße für Nachkommastellen
+                  step="0.1"
                   onChange={(e) =>
                     handleChange(setIsolationsgrenzwerte, e, slot)
                   }
@@ -259,7 +239,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
                   type="number"
                   className="w-[6rem] border rounded p-1 text-sm"
                   value={verzoegerung[slot]}
-                  step="0.1" // Schrittgröße für Nachkommastellen
+                  step="0.1"
                   onChange={(e) => handleChange(setVerzoegerung, e, slot)}
                 />
               </td>
@@ -274,7 +254,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
               <th className="p-2 border text-sm text-center">
                 Grenzwert (kOhm)
               </th>
-
               <th className="p-2 border text-sm text-center">
                 Schleifenintervall (h)
               </th>
@@ -287,19 +266,18 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
                   type="number"
                   className="w-[6rem] border rounded p-1 text-sm"
                   value={untereSchleifenGrenzwerte[slot]}
-                  step="0.1" // Schrittgröße für Nachkommastellen
+                  step="0.1"
                   onChange={(e) =>
                     handleChange(setUntereSchleifenGrenzwerte, e, slot)
                   }
                 />
               </td>
-
               <td className="p-2 border text-center">
                 <input
                   type="number"
                   className="w-[6rem] border rounded p-1 text-sm"
                   value={schleifenintervall[slot]}
-                  step="1" // Schrittgröße für ganze Stunden (kein Nachkomma)
+                  step="1"
                   onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
                 />
               </td>
@@ -308,7 +286,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         </table>
       </div>
 
-      {/* Display Einschalten Button */}
       <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
         <button
           onClick={handleDisplayEinschalten}