From 265f9c7923bef0d51b3467b70429e644a10d4aca Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Mon, 28 Apr 2025 21:20:57 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Fokusprobleme=20behoben=20und=20separate?= =?UTF-8?q?=20CGI-Requests=20beim=20Speichern=20eingef=C3=BChrt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Lokale useState-Variablen für alle Eingabefelder in KueEinstellung.tsx eingeführt - Fokusverlust beim Tippen verhindert, Redux-Update erfolgt erst bei onBlur - handleSave.ts angepasst: Jede Änderung wird einzeln als CGI-Request gesendet - Fehlerhafte Namensspeicherung ("Test;KL_0=13") korrigiert - Zuverlässigkeit der Bedienung und Speicherung auf CPL-Webserver verbessert --- .../kue705FO/handlers/handleSave.ts | 24 +-- .../kue705FO/modals/KueEinstellung.tsx | 145 ++++++++++++------ config/webVersion.ts | 2 +- 3 files changed, 110 insertions(+), 61 deletions(-) diff --git a/components/main/kabelueberwachung/kue705FO/handlers/handleSave.ts b/components/main/kabelueberwachung/kue705FO/handlers/handleSave.ts index 5a29ea6..67c7416 100644 --- a/components/main/kabelueberwachung/kue705FO/handlers/handleSave.ts +++ b/components/main/kabelueberwachung/kue705FO/handlers/handleSave.ts @@ -120,21 +120,21 @@ const handleSave = async ({ } if (isProd) { - const cgiParams = Object.entries(changesForFile) - .map(([key, value]) => `${key}${slot}=${encodeURIComponent(value)}`) - .join(";"); - const url = `/CPL?/kabelueberwachung.html&${cgiParams}`; - - console.log("📡 Sende an CPL (CGI) →", url); - try { - const response = await fetch(url); - if (!response.ok) { - alert("❌ Fehler beim Senden an die CPL-Hardware"); - return; + for (const [key, value] of Object.entries(changesForFile)) { + const singleParam = `${key}${slot}=${encodeURIComponent(value)}`; + const url = `/CPL?/kabelueberwachung.html&${singleParam}`; + + console.log("📡 Sende an CPL (CGI) →", url); + + const response = await fetch(url); + if (!response.ok) { + alert(`❌ Fehler beim Senden an die CPL-Hardware: ${key}`); + return; + } } - alert("✅ Daten erfolgreich an die CPL-Hardware gesendet!"); + alert("✅ Alle Daten erfolgreich an die CPL-Hardware gesendet!"); } catch (error) { console.error("❌ Netzwerkfehler beim CPL-Aufruf:", error); alert("❌ Netzwerkfehler beim Senden an die CPL-Hardware"); diff --git a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx index 3928c06..8106c74 100644 --- a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx +++ b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx @@ -1,5 +1,14 @@ "use client"; +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[]; @@ -12,14 +21,6 @@ declare global { } } -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"; - interface Props { slot: number; onClose?: () => void; @@ -56,6 +57,41 @@ export default function KueEinstellung({ 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] ?? "" + ); + + useEffect(() => { + setLocalName(kueID[slot] || ""); + setLocalLimit1(kueLimit1[slot] ?? ""); + setLocalDelay1(kueDelay1[slot] ?? ""); + setLocalLimit2Low(kueLimit2Low[slot] ?? ""); + setLocalLoopInterval(kueLoopInterval[slot] ?? ""); + setLocalMemoryInterval(memoryInterval[slot] ?? ""); + }, [ + kueID, + kueLimit1, + kueDelay1, + kueLimit2Low, + kueLoopInterval, + memoryInterval, + slot, + ]); + const handleSaveWrapper = () => { const originalValues: OriginalValues = { kueID: [...(window.win_kueID ?? [])], @@ -83,14 +119,37 @@ export default function KueEinstellung({ }); }; - const updateArray = ( - key: keyof RootState["kueDataSlice"], - array: number[], - value: number - ) => { - const updated = [...array]; - updated[slot] = value; - dispatch(setKueData({ [key]: updated })); + const updateRedux = () => { + 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), + ], + }) + ); }; return ( @@ -100,12 +159,9 @@ export default function KueEinstellung({ { - const newIds = [...kueID]; - newIds[slot] = e.target.value; - dispatch(setKueData({ kueID: newIds })); - }} + value={localName} + onChange={(e) => setLocalName(e.target.value)} + onBlur={updateRedux} /> @@ -125,14 +181,13 @@ export default function KueEinstellung({ type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={kueLimit1[slot] ?? ""} + value={localLimit1} onChange={(e) => - updateArray( - "kueLimit1", - kueLimit1, - parseFloat(e.target.value) + setLocalLimit1( + e.target.value ? parseFloat(e.target.value) : "" ) } + onBlur={updateRedux} /> @@ -140,14 +195,13 @@ export default function KueEinstellung({ type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={kueDelay1[slot] ?? ""} + value={localDelay1} onChange={(e) => - updateArray( - "kueDelay1", - kueDelay1, - parseFloat(e.target.value) + setLocalDelay1( + e.target.value ? parseFloat(e.target.value) : "" ) } + onBlur={updateRedux} /> @@ -171,14 +225,13 @@ export default function KueEinstellung({ type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={kueLimit2Low[slot] ?? ""} + value={localLimit2Low} onChange={(e) => - updateArray( - "kueLimit2Low", - kueLimit2Low, - parseFloat(e.target.value) + setLocalLimit2Low( + e.target.value ? parseFloat(e.target.value) : "" ) } + onBlur={updateRedux} /> @@ -186,14 +239,13 @@ export default function KueEinstellung({ type="number" step="0.1" className="w-[6rem] border rounded p-1" - value={kueLoopInterval[slot] ?? ""} + value={localLoopInterval} onChange={(e) => - updateArray( - "kueLoopInterval", - kueLoopInterval, - parseFloat(e.target.value) + setLocalLoopInterval( + e.target.value ? parseFloat(e.target.value) : "" ) } + onBlur={updateRedux} /> @@ -204,14 +256,11 @@ export default function KueEinstellung({