128 lines
4.1 KiB
TypeScript
128 lines
4.1 KiB
TypeScript
"use client";
|
||
// /components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
|
||
|
||
import React, { useState } from "react";
|
||
import { useSelector } from "react-redux";
|
||
import { RootState } from "../../../../../redux/store";
|
||
|
||
interface Props {
|
||
slot: number;
|
||
}
|
||
|
||
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 handleSave = () => {
|
||
const { daempfung, geschwindigkeit, trigger } = tdrData;
|
||
if (!daempfung.trim() || !geschwindigkeit.trim() || !trigger.trim()) {
|
||
alert("Bitte alle Felder ausfüllen.");
|
||
return;
|
||
}
|
||
|
||
const url = `/CPL?KTT${slot}=0&V=${daempfung.trim()}&P=${geschwindigkeit.trim()}&T=${trigger.trim()}`;
|
||
alert(`Sende: ${url}`);
|
||
window.location.href = url;
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4 text-sm laptop:text-base">
|
||
<h2 className="text-base laptop:text-lg font-semibold">
|
||
TDR-Einstellung – Steckplatz {slot + 1}
|
||
</h2>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-sm font-medium">TDR-Funktion:</span>
|
||
<button
|
||
type="button"
|
||
role="switch"
|
||
aria-checked={tdrActive}
|
||
onClick={() => setTdrActive(!tdrActive)}
|
||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||
tdrActive ? "bg-green-500" : "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 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">
|
||
<input
|
||
type="number"
|
||
value={tdrData.daempfung}
|
||
onChange={(e) =>
|
||
setTdrData({ ...tdrData, daempfung: e.target.value })
|
||
}
|
||
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">
|
||
dB
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Geschwindigkeit */}
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">
|
||
Geschwindigkeit
|
||
</label>
|
||
<div className="relative">
|
||
<input
|
||
type="number"
|
||
value={tdrData.geschwindigkeit}
|
||
onChange={(e) =>
|
||
setTdrData({ ...tdrData, geschwindigkeit: e.target.value })
|
||
}
|
||
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">
|
||
m/µs
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Trigger */}
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">Trigger</label>
|
||
<input
|
||
type="number"
|
||
value={tdrData.trigger}
|
||
onChange={(e) =>
|
||
setTdrData({ ...tdrData, trigger: e.target.value })
|
||
}
|
||
className="border px-2 py-1 rounded w-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-4 flex justify-end">
|
||
<button
|
||
onClick={handleSave}
|
||
className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-700"
|
||
>
|
||
💾 Einstellungen senden
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|