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:
@@ -1,7 +1,6 @@
|
||||
"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 { RootState } from "../../../../../redux/store";
|
||||
|
||||
@@ -12,14 +11,18 @@ interface Props {
|
||||
export default function TdrEinstellung({ slot }: Props) {
|
||||
const tdrSlice = useSelector((state: RootState) => state.kueDataSlice);
|
||||
|
||||
// Lokaler Zustand, initialisiert aus Redux
|
||||
const [tdrData, setTdrData] = useState({
|
||||
daempfung: tdrSlice.tdrAtten?.[slot]?.toString() ?? "",
|
||||
geschwindigkeit: tdrSlice.tdrSpeed?.[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 { daempfung, geschwindigkeit, trigger } = tdrData;
|
||||
@@ -28,9 +31,47 @@ export default function TdrEinstellung({ slot }: Props) {
|
||||
return;
|
||||
}
|
||||
|
||||
const url = `/CPL?KTT${slot}=0&V=${daempfung.trim()}&P=${geschwindigkeit.trim()}&T=${trigger.trim()}`;
|
||||
alert(`Sende: ${url}`);
|
||||
window.location.href = url;
|
||||
const base = `${window.location.origin}/CPL?/kabelueberwachung.html`;
|
||||
|
||||
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 (
|
||||
@@ -45,7 +86,7 @@ export default function TdrEinstellung({ slot }: Props) {
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={tdrActive}
|
||||
onClick={() => setTdrActive(!tdrActive)}
|
||||
onClick={handleTdrToggle}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||||
tdrActive ? "bg-green-500" : "bg-gray-300"
|
||||
}`}
|
||||
@@ -62,7 +103,6 @@ export default function TdrEinstellung({ slot }: Props) {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* TDR Dämpfung */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">TDR Dämpfung</label>
|
||||
<div className="relative">
|
||||
@@ -80,7 +120,6 @@ export default function TdrEinstellung({ slot }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Geschwindigkeit */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Geschwindigkeit
|
||||
@@ -100,7 +139,6 @@ export default function TdrEinstellung({ slot }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trigger */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Trigger</label>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user