fix: Fokusprobleme behoben und separate CGI-Requests beim Speichern eingeführt

- 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

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");

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<number | "">(
+    kueLimit1[slot] ?? ""
+  );
+  const [localDelay1, setLocalDelay1] = useState<number | "">(
+    kueDelay1[slot] ?? ""
+  );
+  const [localLimit2Low, setLocalLimit2Low] = useState<number | "">(
+    kueLimit2Low[slot] ?? ""
+  );
+  const [localLoopInterval, setLocalLoopInterval] = useState<number | "">(
+    kueLoopInterval[slot] ?? ""
+  );
+  const [localMemoryInterval, setLocalMemoryInterval] = useState<number | "">(
+    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({
         <input
           type="text"
           className="w-full border rounded p-1 text-sm"
-          value={kueID[slot] || ""}
-          onChange={(e) => {
-            const newIds = [...kueID];
-            newIds[slot] = e.target.value;
-            dispatch(setKueData({ kueID: newIds }));
-          }}
+          value={localName}
+          onChange={(e) => setLocalName(e.target.value)}
+          onBlur={updateRedux}
         />
       </div>
 
@@ -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}
                 />
               </td>
               <td className="border p-2 text-center">
@@ -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}
                 />
               </td>
             </tr>
@@ -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}
                 />
               </td>
               <td className="border p-2 text-center">
@@ -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}
                 />
               </td>
             </tr>
@@ -204,14 +256,11 @@ export default function KueEinstellung({
           <label className="font-bold block mb-1">Speicherintervall</label>
           <select
             className="w-full border rounded p-1 text-sm"
-            value={memoryInterval[slot] ?? ""}
+            value={localMemoryInterval}
             onChange={(e) =>
-              updateArray(
-                "memoryInterval",
-                memoryInterval,
-                parseInt(e.target.value, 10)
-              )
+              setLocalMemoryInterval(parseInt(e.target.value, 10))
             }
+            onBlur={updateRedux}
           >
             {memoryIntervalOptions.map((opt) => (
               <option key={opt.value} value={opt.value}>