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
2025-04-17 08:19:33 +02:00
parent 28775ab63c
commit f2360149c3
6 changed files with 121 additions and 116 deletions
--- a/apiMockData/SERVICE/kabelueberwachungMockData.js
+++ b/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
--- a/apiMockData/SERVICE/kueDataMockData.js
+++ b/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];
--- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
@@ -200,12 +200,16 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
              </button>
            </div>
            {}
-            <KueModal
-              showModal={showModal}
-              onClose={closeModal}
-              slot={slotIndex}
-              onModulNameChange={setCurrentModulName}
-            />
+            {showModal && (
+              <KueModal
+                key={`${slotIndex}-${Date.now()}`} // ← immer neuer Schlüssel → erzwingt Remount
+                showModal={showModal}
+                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]">
--- a/components/main/kabelueberwachung/kue705FO/KueModal.tsx
+++ b/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
-  const {
+  useEffect(() => {
+    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,
-      verzoegerung,
-      untereSchleifenGrenzwerte,
-      obereSchleifenGrenzwerte,
-      schleifenintervall,
+      isolationsgrenzwerte: [...kueLimit1],
+      verzoegerung: [...kueDelay1],
+      untereSchleifenGrenzwerte: [...kueLimit2Low],
+      obereSchleifenGrenzwerte: [...kueLimit2High],
+      schleifenintervall: [...kueLoopInterval],
      originalValues,
      slot,
      dispatch,
@@ -80,50 +103,21 @@ function KueModal({
    });
  };

-  const handleDisplayEinschaltenWrapper = () => {
-    handleDisplayEinschalten(slot); // Übergebe den Slot als Parameter
+  // Korrekte updateArray Methode ohne Thunk
+  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({
-        kueID: [...ids],
-        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]);
+  const handleDisplayEinschaltenWrapper = () => {
+    handleDisplayEinschalten(slot);
+  };

-  //------------------------------------------------------------------------------------------------------------
  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={{
-            position: "absolute",
-            top: "10px",
-            right: "20px",
-            background: "transparent",
-            border: "none",
-            cursor: "pointer",
-            fontSize: "24px",
-          }}
+          className="absolute top-2 right-4 text-white text-xl"
        >
          <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>
-          <input
-            type="text"
-            className="border rounded p-1 w-full text-sm"
-            value={ids[slot]}
-            onChange={(e) => handleChange(setIds, e, slot)}
-          />
-        </div>
+        <label className="font-bold">Kabelbezeichnung:</label>
+        <input
+          type="text"
+          className="border rounded p-1 w-full text-sm"
+          value={kueID[slot] || ""}
+          onChange={(e) => {
+            const newIds = [...kueID];
+            newIds[slot] = e.target.value;
+            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]}
-                  step="1"
-                  onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
+                  value={kueLoopInterval[slot] ?? ""}
+                  onChange={(e) =>
+                    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)}
--- a/config/webVersion.ts
+++ b/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;
--- a/redux/slices/kueDataSlice.ts
+++ b/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({