265 lines
8.3 KiB
TypeScript
265 lines
8.3 KiB
TypeScript
"use client";
|
|
type TdrData = {
|
|
daempfung: string;
|
|
geschwindigkeit: string;
|
|
trigger: string;
|
|
};
|
|
|
|
declare global {
|
|
interface Window {
|
|
__tdrCache?: Record<string, { data: TdrData; tdrActive: boolean }>;
|
|
}
|
|
}
|
|
|
|
import React, { useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../../../redux/store";
|
|
|
|
import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";
|
|
|
|
interface Props {
|
|
slot: number;
|
|
onClose?: () => void; // ← NEU
|
|
}
|
|
|
|
export default function TdrEinstellung({ slot, onClose }: Props) {
|
|
const { isAdminLoggedIn } = useAdminAuth(true);
|
|
const tdrSlice = useSelector((state: RootState) => state.kueDataSlice);
|
|
|
|
const cacheKey = `slot_${slot}`;
|
|
if (typeof window !== "undefined") {
|
|
window.__tdrCache = window.__tdrCache || {};
|
|
}
|
|
const cachedTdr =
|
|
typeof window !== "undefined"
|
|
? window.__tdrCache?.[cacheKey] ?? null
|
|
: null;
|
|
|
|
const [tdrData, setTdrData] = useState(
|
|
() =>
|
|
cachedTdr?.data || {
|
|
daempfung: tdrSlice.tdrAtten?.[slot]?.toString() ?? "",
|
|
geschwindigkeit: tdrSlice.tdrSpeed?.[slot]?.toString() ?? "",
|
|
trigger: tdrSlice.tdrTrigger?.[slot]?.toString() ?? "",
|
|
}
|
|
);
|
|
|
|
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;
|
|
|
|
if (!daempfung.trim() || !geschwindigkeit.trim() || !trigger.trim()) {
|
|
alert("Bitte alle Felder ausfüllen.");
|
|
return;
|
|
}
|
|
|
|
const isDev = window.location.hostname === "localhost";
|
|
|
|
if (isDev) {
|
|
const updates = [
|
|
{ key: "win_tdrAtten", slot, value: daempfung.trim() },
|
|
{ key: "win_tdrSpeed", slot, value: geschwindigkeit.trim() },
|
|
{ key: "win_tdrTrigger", slot, value: trigger.trim() },
|
|
];
|
|
|
|
fetch("/api/cpl/updateTdrSettingsDataAPIHandler", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ updates }),
|
|
})
|
|
.then((res) => res.json())
|
|
.then(() => {
|
|
alert("TDR-Werte erfolgreich gespeichert.");
|
|
if (typeof onClose === "function") onClose(); // ← MODAL SCHLIESSEN
|
|
})
|
|
.catch((err) => {
|
|
console.error("Fehler beim Speichern:", err);
|
|
alert("Speichern fehlgeschlagen.");
|
|
});
|
|
} else {
|
|
// Originaler Webservice-Teil...
|
|
const base = `${window.location.origin}/CPL?/kabelueberwachung.html`;
|
|
|
|
const urls = [
|
|
`${base}&KTD${slot}=${daempfung.trim()}`,
|
|
`${base}&KTS${slot}=${geschwindigkeit.trim()}`,
|
|
`${base}&KTE${slot}=${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.");
|
|
if (typeof onClose === "function") onClose(); // ← MODAL SCHLIESSEN
|
|
})
|
|
.catch((err) => {
|
|
console.error("Fehler beim Senden:", err);
|
|
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}`;
|
|
|
|
const reloadAfterConfirm = () => {
|
|
const msg = newState
|
|
? "✅ TDR wurde aktiviert."
|
|
: "⚠️ TDR wurde deaktiviert.";
|
|
alert(msg);
|
|
location.reload();
|
|
};
|
|
|
|
if (isDev) {
|
|
const updates = [{ key: "win_tdrActive", slot, value: newState ? 1 : 0 }];
|
|
|
|
fetch("/api/cpl/updateTdrSettingsDataAPIHandler", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ updates }),
|
|
})
|
|
.then((res) => res.json())
|
|
.then(() => {
|
|
console.log("TDR-Aktiv-Status gespeichert.");
|
|
reloadAfterConfirm();
|
|
})
|
|
.catch((err) => {
|
|
console.error("Fehler beim Speichern von TDR aktiv:", err);
|
|
});
|
|
} else {
|
|
const url = `${window.location.origin}/CPL?/kabelueberwachung.html&${slotParam}`;
|
|
fetch(url)
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error("TDR-Befehl fehlgeschlagen");
|
|
console.log("TDR aktiviert/deaktiviert:", res.status);
|
|
reloadAfterConfirm();
|
|
})
|
|
.catch((err) => {
|
|
console.error("Fehler beim TDR-Befehl:", err);
|
|
alert("Fehler beim Umschalten der TDR-Funktion.");
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-4 text-sm">
|
|
{/* TDR-Funktion */}
|
|
{isAdminLoggedIn && (
|
|
<div className="mb-4 mt-4 grid grid-cols-3 items-center gap-2 w-full">
|
|
<span className="text-sm font-medium">TDR-Funktion:</span>
|
|
<div className="col-span-2 flex items-center gap-4">
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={tdrActive}
|
|
onClick={handleTdrToggle}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
|
tdrActive ? "bg-littwin-blue" : "bg-gray-300"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
|
|
tdrActive ? "translate-x-6" : "translate-x-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
<span className="text-sm text-gray-600">
|
|
{tdrActive ? "aktiviert" : "deaktiviert"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 mb-4">
|
|
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
|
<label className="">TDR Dämpfung:</label>
|
|
<div className="relative w-36">
|
|
<input
|
|
type="number"
|
|
className="border rounded px-2 py-1 pr-20 w-full text-right"
|
|
value={tdrData.daempfung}
|
|
onChange={(e) => {
|
|
const updated = { ...tdrData, daempfung: e.target.value };
|
|
setTdrData(updated);
|
|
updateCache(updated);
|
|
}}
|
|
/>
|
|
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
|
dB
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
|
<label className="">Geschwindigkeit:</label>
|
|
<div className="relative w-36">
|
|
<input
|
|
type="number"
|
|
className="border rounded px-2 py-1 pr-20 w-full text-right"
|
|
value={tdrData.geschwindigkeit}
|
|
onChange={(e) => {
|
|
const updated = { ...tdrData, geschwindigkeit: e.target.value };
|
|
setTdrData(updated);
|
|
updateCache(updated);
|
|
}}
|
|
/>
|
|
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
|
m/µs
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
|
<label className="">Trigger:</label>
|
|
<input
|
|
type="number"
|
|
className="w-24 border rounded p-1 mr-2 text-right"
|
|
value={tdrData.trigger}
|
|
onChange={(e) => {
|
|
const updated = { ...tdrData, trigger: e.target.value };
|
|
setTdrData(updated);
|
|
updateCache(updated);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-36">
|
|
<div className="flex justify-end gap-2 p-3 rounded ">
|
|
<button
|
|
onClick={handleSave}
|
|
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|