fix: TDR-Switch übernimmt jetzt Zustand aus Redux und sendet aktivierten Status an Backend

- Zustand bei Modalöffnung synchronisiert
- CGI-Aufruf im Hintergrund
- UX konsistent beim Öffnen, Schließen und erneuten Öffnen
This commit is contained in:
ISA
2025-04-30 14:52:14 +02:00
parent c3b06e972a
commit f59fd0d773

View File

@@ -1,7 +1,6 @@
"use client"; "use client";
// /components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
import React, { useState } from "react"; import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../../../../redux/store"; import { RootState } from "../../../../../redux/store";
@@ -12,14 +11,18 @@ interface Props {
export default function TdrEinstellung({ slot }: Props) { export default function TdrEinstellung({ slot }: Props) {
const tdrSlice = useSelector((state: RootState) => state.kueDataSlice); const tdrSlice = useSelector((state: RootState) => state.kueDataSlice);
// Lokaler Zustand, initialisiert aus Redux
const [tdrData, setTdrData] = useState({ const [tdrData, setTdrData] = useState({
daempfung: tdrSlice.tdrAtten?.[slot]?.toString() ?? "", daempfung: tdrSlice.tdrAtten?.[slot]?.toString() ?? "",
geschwindigkeit: tdrSlice.tdrSpeed?.[slot]?.toString() ?? "", geschwindigkeit: tdrSlice.tdrSpeed?.[slot]?.toString() ?? "",
trigger: tdrSlice.tdrTrigger?.[slot]?.toString() ?? "", trigger: tdrSlice.tdrTrigger?.[slot]?.toString() ?? "",
}); });
const [tdrActive, setTdrActive] = useState(false); // Kann später aus Redux kommen const [tdrActive, setTdrActive] = useState(false);
// Zustand beim Öffnen aus Redux übernehmen
useEffect(() => {
setTdrActive(tdrSlice.tdrActive?.[slot] === 1);
}, [slot, tdrSlice.tdrActive]);
const handleSave = () => { const handleSave = () => {
const { daempfung, geschwindigkeit, trigger } = tdrData; const { daempfung, geschwindigkeit, trigger } = tdrData;
@@ -28,9 +31,47 @@ export default function TdrEinstellung({ slot }: Props) {
return; return;
} }
const url = `/CPL?KTT${slot}=0&V=${daempfung.trim()}&P=${geschwindigkeit.trim()}&T=${trigger.trim()}`; const base = `${window.location.origin}/CPL?/kabelueberwachung.html`;
alert(`Sende: ${url}`);
window.location.href = url; const urls = [
`${base}&KTD${slot}=${tdrData.daempfung.trim()}`,
`${base}&KTS${slot}=${tdrData.geschwindigkeit.trim()}`,
`${base}&KTE${slot}=${tdrData.trigger.trim()}`,
];
Promise.all(
urls.map((url) =>
fetch(url).then((res) => {
if (!res.ok) throw new Error(`Fehler bei ${url}`);
return res.text();
})
)
)
.then(() => {
alert("TDR-Einstellungen erfolgreich gesendet.");
})
.catch((err) => {
console.error("Fehler beim Senden:", err);
alert("Fehler beim Senden der TDR-Einstellungen.");
});
};
const handleTdrToggle = () => {
const newState = !tdrActive;
setTdrActive(newState);
const url = `${
window.location.origin
}/CPL?/kabelueberwachung.html&KTX${slot}=${newState ? 1 : 0}`;
fetch(url)
.then((res) => {
if (!res.ok) throw new Error("TDR-Befehl fehlgeschlagen");
console.log("TDR aktiviert/deaktiviert:", res.status);
})
.catch((err) => {
console.error("Fehler beim TDR-Befehl:", err);
alert("Fehler beim Umschalten der TDR-Funktion.");
});
}; };
return ( return (
@@ -45,7 +86,7 @@ export default function TdrEinstellung({ slot }: Props) {
type="button" type="button"
role="switch" role="switch"
aria-checked={tdrActive} aria-checked={tdrActive}
onClick={() => setTdrActive(!tdrActive)} onClick={handleTdrToggle}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
tdrActive ? "bg-green-500" : "bg-gray-300" tdrActive ? "bg-green-500" : "bg-gray-300"
}`} }`}
@@ -62,7 +103,6 @@ export default function TdrEinstellung({ slot }: Props) {
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* TDR Dämpfung */}
<div> <div>
<label className="block text-sm font-medium mb-1">TDR Dämpfung</label> <label className="block text-sm font-medium mb-1">TDR Dämpfung</label>
<div className="relative"> <div className="relative">
@@ -80,7 +120,6 @@ export default function TdrEinstellung({ slot }: Props) {
</div> </div>
</div> </div>
{/* Geschwindigkeit */}
<div> <div>
<label className="block text-sm font-medium mb-1"> <label className="block text-sm font-medium mb-1">
Geschwindigkeit Geschwindigkeit
@@ -100,7 +139,6 @@ export default function TdrEinstellung({ slot }: Props) {
</div> </div>
</div> </div>
{/* Trigger */}
<div> <div>
<label className="block text-sm font-medium mb-1">Trigger</label> <label className="block text-sm font-medium mb-1">Trigger</label>
<input <input