feat: gleichzeitige Aktualisierung von TDR-Werten über optimierten API-Handler

- API `/updateTdrSettingsDataAPIHandler` überarbeitet, um mehrere Werte in einem POST zu empfangen
- TDR-Dämpfung, Geschwindigkeit und Trigger werden nun in einem Schritt verarbeitet
- atomare Dateibearbeitung mit Bereinigung fehlerhafter Endzeilen (z. B. „12h)“)
- UI-Komponente `TdrEinstellung.tsx` angepasst auf POST mit Updates-Array
This commit is contained in:
Ismail Ali
2025-05-01 14:10:53 +02:00
parent 823d12fcea
commit cee2780583
4 changed files with 155 additions and 88 deletions

View File

@@ -11,18 +11,36 @@ interface Props {
export default function TdrEinstellung({ slot }: Props) {
const tdrSlice = useSelector((state: RootState) => state.kueDataSlice);
const [tdrData, setTdrData] = useState({
daempfung: tdrSlice.tdrAtten?.[slot]?.toString() ?? "",
geschwindigkeit: tdrSlice.tdrSpeed?.[slot]?.toString() ?? "",
trigger: tdrSlice.tdrTrigger?.[slot]?.toString() ?? "",
});
const cacheKey = `slot_${slot}`;
if (typeof window !== "undefined") {
window.__tdrCache = window.__tdrCache || {};
}
const cachedTdr =
typeof window !== "undefined" ? window.__tdrCache[cacheKey] : null;
const [tdrActive, setTdrActive] = useState(false);
const [tdrData, setTdrData] = useState(
() =>
cachedTdr?.data || {
daempfung: tdrSlice.tdrAtten?.[slot]?.toString() ?? "",
geschwindigkeit: tdrSlice.tdrSpeed?.[slot]?.toString() ?? "",
trigger: tdrSlice.tdrTrigger?.[slot]?.toString() ?? "",
}
);
// Zustand beim Öffnen aus Redux übernehmen
useEffect(() => {
setTdrActive(tdrSlice.tdrActive?.[slot] === 1);
}, [slot, tdrSlice.tdrActive]);
const [tdrActive, setTdrActive] = useState(
() => cachedTdr?.tdrActive ?? tdrSlice.tdrActive?.[slot] === 1
);
// Updates in Redux nicht mehr automatisch übernehmen, solange Fenster offen
const updateCache = (data: typeof tdrData, active = tdrActive) => {
if (typeof window !== "undefined") {
window.__tdrCache[cacheKey] = {
data,
tdrActive: active,
};
}
};
const handleSave = () => {
const { daempfung, geschwindigkeit, trigger } = tdrData;
@@ -35,28 +53,24 @@ export default function TdrEinstellung({ slot }: Props) {
const isDev = window.location.hostname === "localhost";
if (isDev) {
const requests = [
{ key: "win_tdrAtten", value: daempfung.trim() },
{ key: "win_tdrSpeed", value: geschwindigkeit.trim() },
{ key: "win_tdrTrigger", value: trigger.trim() },
const updates = [
{ key: "win_tdrAtten", slot, value: daempfung.trim() },
{ key: "win_tdrSpeed", slot, value: geschwindigkeit.trim() },
{ key: "win_tdrTrigger", slot, value: trigger.trim() },
];
Promise.all(
requests.map(({ key, value }) =>
fetch(
`/api/cpl/updateTdrSettingsDataAPIHandler?key=${key}&slot=${slot}&value=${value}`
).then((res) => {
if (!res.ok) throw new Error(`Fehler bei ${key}`);
return res.json();
})
)
)
fetch("/api/cpl/updateTdrSettingsDataAPIHandler", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ updates }),
})
.then((res) => res.json())
.then(() => {
alert("TDR-Mockdaten erfolgreich gespeichert.");
alert("TDR-Werte erfolgreich gespeichert.");
})
.catch((err) => {
console.error("Fehler beim Speichern der Mockdaten:", err);
alert("Fehler beim Speichern der TDR-Einstellungen.");
console.error("Fehler beim Speichern:", err);
alert("Speichern fehlgeschlagen.");
});
} else {
const base = `${window.location.origin}/CPL?/kabelueberwachung.html`;
@@ -83,11 +97,14 @@ export default function TdrEinstellung({ slot }: Props) {
alert("Fehler beim Senden der TDR-Einstellungen.");
});
}
updateCache(tdrData, tdrActive);
};
const handleTdrToggle = () => {
const newState = !tdrActive;
setTdrActive(newState);
updateCache(tdrData, newState);
const isDev = window.location.hostname === "localhost";
const slotParam = `KTX${slot}=${newState ? 1 : 0}`;
@@ -154,9 +171,11 @@ export default function TdrEinstellung({ slot }: Props) {
<input
type="number"
value={tdrData.daempfung}
onChange={(e) =>
setTdrData({ ...tdrData, daempfung: e.target.value })
}
onChange={(e) => {
const updated = { ...tdrData, daempfung: e.target.value };
setTdrData(updated);
updateCache(updated);
}}
className="border px-2 py-1 rounded w-full pr-10"
/>
<span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-500">
@@ -173,9 +192,11 @@ export default function TdrEinstellung({ slot }: Props) {
<input
type="number"
value={tdrData.geschwindigkeit}
onChange={(e) =>
setTdrData({ ...tdrData, geschwindigkeit: e.target.value })
}
onChange={(e) => {
const updated = { ...tdrData, geschwindigkeit: e.target.value };
setTdrData(updated);
updateCache(updated);
}}
className="border px-2 py-1 rounded w-full pr-14"
/>
<span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-500">
@@ -189,9 +210,11 @@ export default function TdrEinstellung({ slot }: Props) {
<input
type="number"
value={tdrData.trigger}
onChange={(e) =>
setTdrData({ ...tdrData, trigger: e.target.value })
}
onChange={(e) => {
const updated = { ...tdrData, trigger: e.target.value };
setTdrData(updated);
updateCache(updated);
}}
className="border px-2 py-1 rounded w-full"
/>
</div>