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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user