diff --git a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx index e8db7ae..ee00036 100644 --- a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx +++ b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx @@ -1,28 +1,16 @@ -"use client"; +"use client"; // KueEinstellung.tsx – komplett angepasst mit window.__kueCache zum Schutz vor Remount-Reset import { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import type { RootState } from "../../../../../redux/store"; import { setKueData } from "../../../../../redux/slices/kueDataSlice"; -import handleSave, { OriginalValues } from "../handlers/handleSave"; import handleDisplayEinschalten from "../handlers/handleDisplayEinschalten"; import firmwareUpdate from "../handlers/firmwareUpdate"; import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth"; -declare global { - interface Window { - win_kueID?: string[]; - win_kueLimit1?: number[]; - win_kueDelay1?: number[]; - win_kueLimit2Low?: number[]; - win_kueLimit2High?: number[]; - win_kueLoopInterval?: number[]; - win_memoryInterval?: number[]; - } -} - interface Props { slot: number; + showModal: boolean; onClose?: () => void; onModulNameChange?: (id: string) => void; } @@ -41,8 +29,8 @@ const memoryIntervalOptions = [ export default function KueEinstellung({ slot, + showModal, onClose = () => {}, - onModulNameChange = () => {}, }: Props) { const dispatch = useDispatch(); const { @@ -50,123 +38,75 @@ export default function KueEinstellung({ kueLimit1, kueDelay1, kueLimit2Low, - kueLimit2High, kueLoopInterval, memoryInterval, } = useSelector((state: RootState) => state.kueDataSlice); const { isAdminLoggedIn } = useAdminAuth(true); - // Lokale States - const [localName, setLocalName] = useState(kueID[slot] || ""); - const [localLimit1, setLocalLimit1] = useState( - kueLimit1[slot] ?? "" - ); - const [localDelay1, setLocalDelay1] = useState( - kueDelay1[slot] ?? "" - ); - const [localLimit2Low, setLocalLimit2Low] = useState( - kueLimit2Low[slot] ?? "" - ); - const [localLoopInterval, setLocalLoopInterval] = useState( - kueLoopInterval[slot] ?? "" - ); - const [localMemoryInterval, setLocalMemoryInterval] = useState( - memoryInterval[slot] ?? "" - ); + const formCacheKey = `slot_${slot}`; + if (typeof window !== "undefined") { + window.__kueCache = window.__kueCache || {}; + } - /* -fix: Eingabefelder beim Öffnen des KUE-Modal initialisieren und gegen Redux-Updates schützen + const cached = + typeof window !== "undefined" ? window.__kueCache?.[formCacheKey] : null; -- Lokale States beim ersten Öffnen des Modals gesetzt -- Redux-Änderungen während der Bearbeitung blockiert, um Fokusverlust zu verhindern -- Benutzerfreundlichkeit bei der Bearbeitung von Kabelüberwachungen verbessert - - */ - //---------------------------------------------------------------- - const [initialized, setInitialized] = useState(false); - const [editMode, setEditMode] = useState(false); - useEffect(() => { - setEditMode(true); - return () => { - setEditMode(false); + const [formData, setFormData] = useState(() => { + if (cached) return cached; + return { + name: kueID[slot] || "", + limit1: kueLimit1[slot]?.toString() ?? "", + delay1: kueDelay1[slot]?.toString() ?? "", + limit2Low: kueLimit2Low[slot]?.toString() ?? "", + loopInterval: kueLoopInterval[slot]?.toString() ?? "", + memoryInterval: memoryInterval[slot]?.toString() ?? "", }; - }, []); + }); - useEffect(() => { - if (!initialized && editMode) { - setLocalName(kueID[slot] || ""); - setLocalLimit1(kueLimit1[slot] ?? ""); - setLocalDelay1(kueDelay1[slot] ?? ""); - setLocalLimit2Low(kueLimit2Low[slot] ?? ""); - setLocalLoopInterval(kueLoopInterval[slot] ?? ""); - setLocalMemoryInterval(memoryInterval[slot] ?? ""); - setInitialized(true); + const handleChange = (key: keyof typeof formData, value: string) => { + const updated = { ...formData, [key]: value }; + setFormData(updated); + if (typeof window !== "undefined") { + window.__kueCache[formCacheKey] = updated; } - }, [initialized, slot, editMode]); - - //---------------------------------------------------------------- - const handleSaveWrapper = () => { - setEditMode(false); // <--- Editmode deaktivieren - onClose(); // <--- Modal direkt schließen - const originalValues: OriginalValues = { - kueID: [...(window.win_kueID ?? [])], - isolationsgrenzwerte: [...(window.win_kueLimit1 ?? [])], - verzoegerung: [...(window.win_kueDelay1 ?? [])], - untereSchleifenGrenzwerte: [...(window.win_kueLimit2Low ?? [])], - obereSchleifenGrenzwerte: [...(window.win_kueLimit2High ?? [])], - schleifenintervall: [...(window.win_kueLoopInterval ?? [])], - speicherintervall: [...(window.win_memoryInterval ?? [])], - }; - - handleSave({ - ids: [...kueID], - isolationsgrenzwerte: [...kueLimit1], - verzoegerung: [...kueDelay1], - untereSchleifenGrenzwerte: [...kueLimit2Low], - obereSchleifenGrenzwerte: [...kueLimit2High], - schleifenintervall: [...kueLoopInterval], - speicherintervall: [...memoryInterval], - originalValues, - slot, - dispatch, - onModulNameChange, - onClose, - }); }; - const updateRedux = () => { - if (!editMode) return; + const handleSaveWrapper = () => { + const updatedKueID = [...kueID]; + updatedKueID[slot] = formData.name; + + const updatedLimit1 = [...kueLimit1]; + updatedLimit1[slot] = Number(formData.limit1); + + const updatedDelay1 = [...kueDelay1]; + updatedDelay1[slot] = Number(formData.delay1); + + const updatedLimit2Low = [...kueLimit2Low]; + updatedLimit2Low[slot] = Number(formData.limit2Low); + + const updatedLoopInterval = [...kueLoopInterval]; + updatedLoopInterval[slot] = Number(formData.loopInterval); + + const updatedMemoryInterval = [...memoryInterval]; + updatedMemoryInterval[slot] = Number(formData.memoryInterval); + dispatch( setKueData({ - kueID: [...kueID.slice(0, slot), localName, ...kueID.slice(slot + 1)], - kueLimit1: [ - ...kueLimit1.slice(0, slot), - Number(localLimit1), - ...kueLimit1.slice(slot + 1), - ], - kueDelay1: [ - ...kueDelay1.slice(0, slot), - Number(localDelay1), - ...kueDelay1.slice(slot + 1), - ], - kueLimit2Low: [ - ...kueLimit2Low.slice(0, slot), - Number(localLimit2Low), - ...kueLimit2Low.slice(slot + 1), - ], - kueLoopInterval: [ - ...kueLoopInterval.slice(0, slot), - Number(localLoopInterval), - ...kueLoopInterval.slice(slot + 1), - ], - memoryInterval: [ - ...memoryInterval.slice(0, slot), - Number(localMemoryInterval), - ...memoryInterval.slice(slot + 1), - ], + kueID: updatedKueID, + kueLimit1: updatedLimit1, + kueDelay1: updatedDelay1, + kueLimit2Low: updatedLimit2Low, + kueLoopInterval: updatedLoopInterval, + memoryInterval: updatedMemoryInterval, }) ); + + if (typeof window !== "undefined") { + delete window.__kueCache[formCacheKey]; + } + + onClose(); }; return ( @@ -176,9 +116,8 @@ fix: Eingabefelder beim Öffnen des KUE-Modal initialisieren und gegen Redux-Upd setLocalName(e.target.value)} - onBlur={updateRedux} + value={formData.name} + onChange={(e) => handleChange("name", e.target.value)} /> @@ -198,13 +137,8 @@ fix: Eingabefelder beim Öffnen des KUE-Modal initialisieren und gegen Redux-Upd type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={localLimit1} - onChange={(e) => - setLocalLimit1( - e.target.value ? parseFloat(e.target.value) : "" - ) - } - onBlur={updateRedux} + value={formData.limit1} + onChange={(e) => handleChange("limit1", e.target.value)} /> @@ -212,13 +146,8 @@ fix: Eingabefelder beim Öffnen des KUE-Modal initialisieren und gegen Redux-Upd type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={localDelay1} - onChange={(e) => - setLocalDelay1( - e.target.value ? parseFloat(e.target.value) : "" - ) - } - onBlur={updateRedux} + value={formData.delay1} + onChange={(e) => handleChange("delay1", e.target.value)} /> @@ -242,13 +171,8 @@ fix: Eingabefelder beim Öffnen des KUE-Modal initialisieren und gegen Redux-Upd type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={localLimit2Low} - onChange={(e) => - setLocalLimit2Low( - e.target.value ? parseFloat(e.target.value) : "" - ) - } - onBlur={updateRedux} + value={formData.limit2Low} + onChange={(e) => handleChange("limit2Low", e.target.value)} /> @@ -256,13 +180,8 @@ fix: Eingabefelder beim Öffnen des KUE-Modal initialisieren und gegen Redux-Upd type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={localLoopInterval} - onChange={(e) => - setLocalLoopInterval( - e.target.value ? parseFloat(e.target.value) : "" - ) - } - onBlur={updateRedux} + value={formData.loopInterval} + onChange={(e) => handleChange("loopInterval", e.target.value)} /> @@ -273,11 +192,8 @@ fix: Eingabefelder beim Öffnen des KUE-Modal initialisieren und gegen Redux-Upd