diff --git a/apiMockData/SERVICE/kabelueberwachungMockData.js b/apiMockData/SERVICE/kabelueberwachungMockData.js index 718d446..ea36be3 100644 --- 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 diff --git a/apiMockData/SERVICE/kueDataMockData.js b/apiMockData/SERVICE/kueDataMockData.js deleted file mode 100644 index 2bb39f7..0000000 --- a/apiMockData/SERVICE/kueDataMockData.js +++ /dev/null @@ -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]; diff --git a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx index ad5d60b..ed6fbe9 100644 --- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx +++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx @@ -200,12 +200,16 @@ const Kue705FO: React.FC = ({ {} - + {showModal && ( + + )} +
diff --git a/components/main/kabelueberwachung/kue705FO/KueModal.tsx b/components/main/kabelueberwachung/kue705FO/KueModal.tsx index e6989ea..ab80c6e 100644 --- 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({ 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 ( KUE Einstellung - Slot {slot + 1}
-
- - handleChange(setIds, e, slot)} - /> -
+ + { + const newIds = [...kueID]; + newIds[slot] = e.target.value; + dispatch(setKueData({ kueID: newIds })); + }} + />
@@ -197,21 +184,31 @@ function KueModal({ - handleChange(setIsolationsgrenzwerte, e, slot) + updateArray( + "kueLimit1", + kueLimit1, + parseFloat(e.target.value) + ) } /> 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) + ) + } /> @@ -235,21 +232,31 @@ function KueModal({ - handleChange(setUntereSchleifenGrenzwerte, e, slot) + updateArray( + "kueLimit2Low", + kueLimit2Low, + parseFloat(e.target.value) + ) } /> handleChange(setSchleifenintervall, e, slot)} + value={kueLoopInterval[slot] ?? ""} + onChange={(e) => + updateArray( + "kueLoopInterval", + kueLoopInterval, + parseFloat(e.target.value) + ) + } /> @@ -258,7 +265,6 @@ function KueModal({
- {/* Bedingte Anzeige der Firmware-Update-Schaltfläche */} {isAdminLoggedIn && (