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
This commit is contained in:
Ismail Ali
2025-04-28 21:20:57 +02:00
parent 79a535feae
commit 265f9c7923
3 changed files with 110 additions and 61 deletions

View File

@@ -120,21 +120,21 @@ const handleSave = async ({
} }
if (isProd) { 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 { try {
const response = await fetch(url); for (const [key, value] of Object.entries(changesForFile)) {
if (!response.ok) { const singleParam = `${key}${slot}=${encodeURIComponent(value)}`;
alert("❌ Fehler beim Senden an die CPL-Hardware"); const url = `/CPL?/kabelueberwachung.html&${singleParam}`;
return;
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) { } catch (error) {
console.error("❌ Netzwerkfehler beim CPL-Aufruf:", error); console.error("❌ Netzwerkfehler beim CPL-Aufruf:", error);
alert("❌ Netzwerkfehler beim Senden an die CPL-Hardware"); alert("❌ Netzwerkfehler beim Senden an die CPL-Hardware");

View File

@@ -1,5 +1,14 @@
"use client"; "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 { declare global {
interface Window { interface Window {
win_kueID?: string[]; 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 { interface Props {
slot: number; slot: number;
onClose?: () => void; onClose?: () => void;
@@ -56,6 +57,41 @@ export default function KueEinstellung({
const { isAdminLoggedIn } = useAdminAuth(true); 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 handleSaveWrapper = () => {
const originalValues: OriginalValues = { const originalValues: OriginalValues = {
kueID: [...(window.win_kueID ?? [])], kueID: [...(window.win_kueID ?? [])],
@@ -83,14 +119,37 @@ export default function KueEinstellung({
}); });
}; };
const updateArray = ( const updateRedux = () => {
key: keyof RootState["kueDataSlice"], dispatch(
array: number[], setKueData({
value: number kueID: [...kueID.slice(0, slot), localName, ...kueID.slice(slot + 1)],
) => { kueLimit1: [
const updated = [...array]; ...kueLimit1.slice(0, slot),
updated[slot] = value; Number(localLimit1),
dispatch(setKueData({ [key]: updated })); ...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 ( return (
@@ -100,12 +159,9 @@ export default function KueEinstellung({
<input <input
type="text" type="text"
className="w-full border rounded p-1 text-sm" className="w-full border rounded p-1 text-sm"
value={kueID[slot] || ""} value={localName}
onChange={(e) => { onChange={(e) => setLocalName(e.target.value)}
const newIds = [...kueID]; onBlur={updateRedux}
newIds[slot] = e.target.value;
dispatch(setKueData({ kueID: newIds }));
}}
/> />
</div> </div>
@@ -125,14 +181,13 @@ export default function KueEinstellung({
type="number" type="number"
step="0.1" step="0.1"
className="w-[6rem] border rounded p-1" className="w-[6rem] border rounded p-1"
value={kueLimit1[slot] ?? ""} value={localLimit1}
onChange={(e) => onChange={(e) =>
updateArray( setLocalLimit1(
"kueLimit1", e.target.value ? parseFloat(e.target.value) : ""
kueLimit1,
parseFloat(e.target.value)
) )
} }
onBlur={updateRedux}
/> />
</td> </td>
<td className="border p-2 text-center"> <td className="border p-2 text-center">
@@ -140,14 +195,13 @@ export default function KueEinstellung({
type="number" type="number"
step="0.1" step="0.1"
className="w-[6rem] border rounded p-1" className="w-[6rem] border rounded p-1"
value={kueDelay1[slot] ?? ""} value={localDelay1}
onChange={(e) => onChange={(e) =>
updateArray( setLocalDelay1(
"kueDelay1", e.target.value ? parseFloat(e.target.value) : ""
kueDelay1,
parseFloat(e.target.value)
) )
} }
onBlur={updateRedux}
/> />
</td> </td>
</tr> </tr>
@@ -171,14 +225,13 @@ export default function KueEinstellung({
type="number" type="number"
step="0.1" step="0.1"
className="w-[6rem] border rounded p-1" className="w-[6rem] border rounded p-1"
value={kueLimit2Low[slot] ?? ""} value={localLimit2Low}
onChange={(e) => onChange={(e) =>
updateArray( setLocalLimit2Low(
"kueLimit2Low", e.target.value ? parseFloat(e.target.value) : ""
kueLimit2Low,
parseFloat(e.target.value)
) )
} }
onBlur={updateRedux}
/> />
</td> </td>
<td className="border p-2 text-center"> <td className="border p-2 text-center">
@@ -186,14 +239,13 @@ export default function KueEinstellung({
type="number" type="number"
step="0.1" step="0.1"
className="w-[6rem] border rounded p-1" className="w-[6rem] border rounded p-1"
value={kueLoopInterval[slot] ?? ""} value={localLoopInterval}
onChange={(e) => onChange={(e) =>
updateArray( setLocalLoopInterval(
"kueLoopInterval", e.target.value ? parseFloat(e.target.value) : ""
kueLoopInterval,
parseFloat(e.target.value)
) )
} }
onBlur={updateRedux}
/> />
</td> </td>
</tr> </tr>
@@ -204,14 +256,11 @@ export default function KueEinstellung({
<label className="font-bold block mb-1">Speicherintervall</label> <label className="font-bold block mb-1">Speicherintervall</label>
<select <select
className="w-full border rounded p-1 text-sm" className="w-full border rounded p-1 text-sm"
value={memoryInterval[slot] ?? ""} value={localMemoryInterval}
onChange={(e) => onChange={(e) =>
updateArray( setLocalMemoryInterval(parseInt(e.target.value, 10))
"memoryInterval",
memoryInterval,
parseInt(e.target.value, 10)
)
} }
onBlur={updateRedux}
> >
{memoryIntervalOptions.map((opt) => ( {memoryIntervalOptions.map((opt) => (
<option key={opt.value} value={opt.value}> <option key={opt.value} value={opt.value}>

View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/ */
const webVersion = "1.6.293"; const webVersion = "1.6.294";
export default webVersion; export default webVersion;