fix: Redux-Update in KueModal ohne Thunks und mit direkter State-Synchronisierung

- Lokale Zustände durch direkten Zugriff auf Redux-Arrays ersetzt
- updateArray-Funktion korrigiert: kein Thunk mehr, stattdessen direkte Übergabe des aktuellen Arrays
- Fehler bei Typkonflikt in dispatch() behoben
- Eingaben schreiben nun sofort in den Store → Änderungen werden korrekt erkannt und gespeichert

apiMockData/SERVICE/kabelueberwachungMockData.js

@@ -46,7 +46,7 @@ var win_kueIso = [
   10.5, 10.0, 200.0, 200.0, 200.0, 200.0,
 ];
 //Grenzwert (MOhm) für Isolationswiderstand
-var win_kueLimit1 = [ "8.9", 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0,  ];
+var win_kueLimit1 = [ 8.9, "9.9", 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0, 10.0,  ];
 
 /*
 Verzögerung/Filterzeit 420 Sekunden Standardeinstellung

apiMockData/SERVICE/kueDataMockData.js

@@ -1,7 +0,0 @@
-window.win_kueID = ["FTZ_2","B23","Kabel 3","Kabel 4","Kabel 5","Kabel 6","FTZ4562","Kabel 8","12344","Kabel 10","Kabel 11","Kabel 12","Kabel 13","Kabel 14","Kabel 15","H56-77","Kabel 17","Kabel 18","Kabel 19","Kabel 20","Kabel 21","Kabel 22","Kabel 23","Kabel 24","Kabel 25","Kabel 26","Kabel 27","Kabel 28","Kabel 29","Kabel 30","Kabel 31","Kabel 32"];
-window.win_kuePSTmMinus96V = ["FTZ_2","B23","Kabel 3","Kabel 4","Kabel 5","Kabel 6","FTZ4562","Kabel 8","12344","Kabel 10","Kabel 11","Kabel 12","Kabel 13","Kabel 14","Kabel 15","H56-77","Kabel 17","Kabel 18","Kabel 19","Kabel 20","Kabel 21","Kabel 22","Kabel 23","Kabel 24","Kabel 25","Kabel 26","Kabel 27","Kabel 28","Kabel 29","Kabel 30","Kabel 31","Kabel 32"];
-window.win_kueLimit1 = ["8.8",10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10];
-window.win_kueDelay1 = [10,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420,420];
-window.win_kueLimit2Low = [0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1];
-window.win_kueLimit2High = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
-window.win_kueLoopInterval = [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6];

components/main/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -200,12 +200,16 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
               </button>
             </div>
             {}
-            <KueModal
+            {showModal && (
-              showModal={showModal}
+              <KueModal
-              onClose={closeModal}
+                key={`${slotIndex}-${Date.now()}`} // ← immer neuer Schlüssel → erzwingt Remount
-              slot={slotIndex}
+                showModal={showModal}
-              onModulNameChange={setCurrentModulName}
+                onClose={closeModal}
-            />
+                slot={slotIndex}
+                onModulNameChange={setCurrentModulName}
+              />
+            )}
+
             <div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
               <div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
                 <div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">

components/main/kabelueberwachung/kue705FO/KueModal.tsx

@@ -1,14 +1,15 @@
 "use client"; // components/modales/KueModal.jsx
 import ReactModal from "react-modal";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import type { RootState } from "../../../../redux/store";
+import "bootstrap-icons/font/bootstrap-icons.css";
 import handleSave, { OriginalValues } from "./handlers/handleSave";
 import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
-import handleChange from "./handlers/handleChange";
 import firmwareUpdate from "./handlers/firmwareUpdate";
 import decodeToken from "../../../../utils/decodeToken";
-// Props-Typen definieren
+import { setKueData } from "../../../../redux/slices/kueDataSlice";
+
 interface KueModalProps {
   showModal: boolean;
   onClose: () => void;
@@ -22,26 +23,22 @@ function KueModal({
   slot,
   onModulNameChange,
 }: KueModalProps): JSX.Element {
+  const dispatch = useDispatch();
   const isAdminLoggedIn = useSelector(
     (state: any) => state.authSlice.isAdminLoggedIn
   );
   const [isAdmin, setIsAdmin] = useState(false);
-  const dispatch = useDispatch();
+
-  const [ids, setIds] = useState(Array(32).fill(""));
+  const {
+    kueID,
+    kueLimit1,
+    kueDelay1,
+    kueLimit2Low,
+    kueLimit2High,
+    kueLoopInterval,
+  } = useSelector((state: RootState) => state.kueDataSlice);
+
   const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill(""));
-  const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
-    Array(32).fill(10.0)
-  );
-  const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
-  const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
-    Array(32).fill(0.1)
-  );
-  const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
-    Array(32).fill(1.0)
-  );
-  const [schleifenintervall, setSchleifenintervall] = useState(
-    Array(32).fill(24)
-  );
 
   const [originalValues, setOriginalValues] = useState<OriginalValues>({
     kueID: Array(32).fill(""),
@@ -53,25 +50,51 @@ function KueModal({
     schleifenintervall: Array(32).fill(24),
   });
 
-  // Werte aus dem Redux-Store abrufen
+  useEffect(() => {
-  const {
+    if (showModal) {
+      setBezeichnungen(
+        kueID
+          ? kueID.map((name: string) => name.trim() || "---")
+          : bezeichnungen
+      );
+
+      setOriginalValues({
+        kueID: [...kueID],
+        kueBezeichnungen: [...bezeichnungen],
+        isolationsgrenzwerte: [...kueLimit1],
+        verzoegerung: [...kueDelay1],
+        untereSchleifenGrenzwerte: [...kueLimit2Low],
+        obereSchleifenGrenzwerte: [...kueLimit2High],
+        schleifenintervall: [...kueLoopInterval],
+      });
+    }
+  }, [
+    showModal,
     kueID,
     kueLimit1,
     kueDelay1,
     kueLimit2Low,
     kueLimit2High,
     kueLoopInterval,
-  } = useSelector((state: any) => state.kueDataSlice);
+  ]);
+
+  useEffect(() => {
+    const token = sessionStorage.getItem("token");
+    if (token) {
+      const decoded = decodeToken(token);
+      setIsAdmin(decoded?.role?.toLowerCase() === "admin");
+    }
+  }, [showModal]);
 
   const handleSaveWrapper = () => {
     handleSave({
-      ids,
+      ids: [...kueID],
       bezeichnungen,
-      isolationsgrenzwerte,
+      isolationsgrenzwerte: [...kueLimit1],
-      verzoegerung,
+      verzoegerung: [...kueDelay1],
-      untereSchleifenGrenzwerte,
+      untereSchleifenGrenzwerte: [...kueLimit2Low],
-      obereSchleifenGrenzwerte,
+      obereSchleifenGrenzwerte: [...kueLimit2High],
-      schleifenintervall,
+      schleifenintervall: [...kueLoopInterval],
       originalValues,
       slot,
       dispatch,
@@ -80,50 +103,21 @@ function KueModal({
     });
   };
 
-  const handleDisplayEinschaltenWrapper = () => {
+  // Korrekte updateArray Methode ohne Thunk
-    handleDisplayEinschalten(slot); // Übergebe den Slot als Parameter
+  const updateArray = (
+    key: keyof RootState["kueDataSlice"],
+    array: number[],
+    value: number
+  ) => {
+    const updatedArray = [...array];
+    updatedArray[slot] = value;
+    dispatch(setKueData({ [key]: updatedArray }));
   };
-  //------------------------------------------------------------------------------------------------------------
-  // Initiale Werte festlegen, nur einmal beim Öffnen des Modals
-  useEffect(() => {
-    if (showModal) {
-      setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
-      setBezeichnungen(
-        kueID
-          ? kueID.map((name: string) => name.trim() || "---")
-          : bezeichnungen
-      );
-      setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
-      setVerzoegerung(kueDelay1 || verzoegerung);
-      setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
-      setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
-      setSchleifenintervall(kueLoopInterval || schleifenintervall);
 
-      setOriginalValues({
+  const handleDisplayEinschaltenWrapper = () => {
-        kueID: [...ids],
+    handleDisplayEinschalten(slot);
-        kueBezeichnungen: [...bezeichnungen],
+  };
-        isolationsgrenzwerte: [...isolationsgrenzwerte],
-        verzoegerung: [...verzoegerung],
-        untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
-        obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
-        schleifenintervall: [...schleifenintervall],
-      });
-    }
-  }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
-  //------------------------------------------------------------------------------------------------------------
-  useEffect(() => {
-    const token = sessionStorage.getItem("token");
-    if (token) {
-      const decoded = decodeToken(token);
-      if (decoded && decoded.role.toLowerCase() === "admin") {
-        setIsAdmin(true);
-      } else {
-        setIsAdmin(false);
-      }
-    }
-  }, [showModal]);
 
-  //------------------------------------------------------------------------------------------------------------
   return (
     <ReactModal
       isOpen={showModal}
@@ -139,7 +133,6 @@ function KueModal({
           left: "50%",
           right: "auto",
           bottom: "auto",
-          marginRight: "-50%",
           transform: "translate(-50%, -50%)",
           width: "90%",
           maxWidth: "800px",
@@ -153,30 +146,24 @@ function KueModal({
         <h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
         <button
           onClick={onClose}
-          style={{
+          className="absolute top-2 right-4 text-white text-xl"
-            position: "absolute",
-            top: "10px",
-            right: "20px",
-            background: "transparent",
-            border: "none",
-            cursor: "pointer",
-            fontSize: "24px",
-          }}
         >
           <i className="bi bi-x-circle-fill"></i>
         </button>
       </div>
 
       <div className="p-2 mb-4 text-black">
-        <div className="mb-2 ">
+        <label className="font-bold">Kabelbezeichnung:</label>
-          <label className="font-bold ">Kabelbezeichnung:</label>
+        <input
-          <input
+          type="text"
-            type="text"
+          className="border rounded p-1 w-full text-sm"
-            className="border rounded p-1 w-full text-sm"
+          value={kueID[slot] || ""}
-            value={ids[slot]}
+          onChange={(e) => {
-            onChange={(e) => handleChange(setIds, e, slot)}
+            const newIds = [...kueID];
-          />
+            newIds[slot] = e.target.value;
-        </div>
+            dispatch(setKueData({ kueID: newIds }));
+          }}
+        />
       </div>
 
       <div className="p-2 text-black">
@@ -197,21 +184,31 @@ function KueModal({
               <td className="p-2 border text-center">
                 <input
                   type="number"
-                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={isolationsgrenzwerte[slot]}
                   step="0.1"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={kueLimit1[slot] ?? ""}
                   onChange={(e) =>
-                    handleChange(setIsolationsgrenzwerte, e, slot)
+                    updateArray(
+                      "kueLimit1",
+                      kueLimit1,
+                      parseFloat(e.target.value)
+                    )
                   }
                 />
               </td>
               <td className="p-2 border text-center">
                 <input
                   type="number"
-                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={verzoegerung[slot]}
                   step="0.1"
-                  onChange={(e) => handleChange(setVerzoegerung, e, slot)}
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={kueDelay1[slot] ?? ""}
+                  onChange={(e) =>
+                    updateArray(
+                      "kueDelay1",
+                      kueDelay1,
+                      parseFloat(e.target.value)
+                    )
+                  }
                 />
               </td>
             </tr>
@@ -235,21 +232,31 @@ function KueModal({
               <td className="p-2 border text-center">
                 <input
                   type="number"
-                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={untereSchleifenGrenzwerte[slot]}
                   step="0.1"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={kueLimit2Low[slot] ?? ""}
                   onChange={(e) =>
-                    handleChange(setUntereSchleifenGrenzwerte, e, slot)
+                    updateArray(
+                      "kueLimit2Low",
+                      kueLimit2Low,
+                      parseFloat(e.target.value)
+                    )
                   }
                 />
               </td>
               <td className="p-2 border text-center">
                 <input
                   type="number"
+                  step="0.1"
                   className="w-[6rem] border rounded p-1 text-sm"
-                  value={schleifenintervall[slot]}
+                  value={kueLoopInterval[slot] ?? ""}
-                  step="1"
+                  onChange={(e) =>
-                  onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
+                    updateArray(
+                      "kueLoopInterval",
+                      kueLoopInterval,
+                      parseFloat(e.target.value)
+                    )
+                  }
                 />
               </td>
             </tr>
@@ -258,7 +265,6 @@ function KueModal({
       </div>
 
       <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
-        {/* Bedingte Anzeige der Firmware-Update-Schaltfläche */}
         {isAdminLoggedIn && (
           <button
             onClick={() => firmwareUpdate(slot)}

config/webVersion.ts

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

redux/slices/kueDataSlice.ts

@@ -39,6 +39,7 @@ interface KueDataState {
   tdrActive: number[];
   tdrLast: string[];
   tdrOverflow: number[];
+  kueLimit2High: number[];
 }
 
 const initialState: KueDataState = {
@@ -79,6 +80,7 @@ const initialState: KueDataState = {
   tdrActive: [],
   tdrLast: [],
   tdrOverflow: [],
+  kueLimit2High: [],
 };
 
 const kueDataSlice = createSlice({