134 lines
4.0 KiB
TypeScript
134 lines
4.0 KiB
TypeScript
"use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
|
||
import React, { useEffect, useState } from "react";
|
||
|
||
interface Props {
|
||
selectedInput: any;
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export default function AnalogInputsSettingsModal({
|
||
selectedInput,
|
||
isOpen,
|
||
onClose,
|
||
}: Props) {
|
||
const [name, setName] = useState("");
|
||
const [offset, setOffset] = useState(0);
|
||
const [factor, setFactor] = useState(1);
|
||
const [loggerInterval, setLoggerInterval] = useState(10);
|
||
const [isSaving, setIsSaving] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (selectedInput && isOpen) {
|
||
setName(selectedInput.name || "");
|
||
setOffset(selectedInput.offset || 0);
|
||
setFactor(selectedInput.factor || 1);
|
||
setLoggerInterval(selectedInput.loggerInterval || 10);
|
||
}
|
||
}, [selectedInput, isOpen]);
|
||
|
||
if (!isOpen || !selectedInput) return null;
|
||
|
||
const handleSave = async () => {
|
||
setIsSaving(true);
|
||
try {
|
||
await fetch("/api/cpl/updateAnalogInputsSettingsAPIHandler", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
updates: [
|
||
{
|
||
key: "win_analogInputsNames",
|
||
index: selectedInput.id - 1,
|
||
value: name,
|
||
},
|
||
{
|
||
key: "win_analogInputsOffset",
|
||
index: selectedInput.id - 1,
|
||
value: parseFloat(offset.toString()),
|
||
},
|
||
{
|
||
key: "win_analogInputsFactor",
|
||
index: selectedInput.id - 1,
|
||
value: parseFloat(factor.toString()),
|
||
},
|
||
{
|
||
key: "win_analogInputsloggerIntervall",
|
||
index: selectedInput.id - 1,
|
||
value: parseInt(loggerInterval.toString()),
|
||
},
|
||
],
|
||
}),
|
||
});
|
||
alert("Einstellungen gespeichert.");
|
||
onClose();
|
||
location.reload();
|
||
} catch (err) {
|
||
alert("Fehler beim Speichern der Einstellungen.");
|
||
console.error(err);
|
||
} finally {
|
||
setIsSaving(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
||
<div className="bg-white rounded shadow p-6 w-full max-w-md">
|
||
<h2 className="text-lg font-semibold mb-4">
|
||
Eingang {selectedInput.id} – Einstellungen
|
||
</h2>
|
||
|
||
<label className="block mb-2 text-sm font-medium">Bezeichnung</label>
|
||
<input
|
||
type="text"
|
||
className="w-full border rounded px-3 py-1 mb-4"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
/>
|
||
|
||
<label className="block mb-2 text-sm font-medium">Offset</label>
|
||
<input
|
||
type="number"
|
||
className="w-full border rounded px-3 py-1 mb-4"
|
||
value={offset}
|
||
onChange={(e) => setOffset(parseFloat(e.target.value))}
|
||
/>
|
||
|
||
<label className="block mb-2 text-sm font-medium">Faktor</label>
|
||
<input
|
||
type="number"
|
||
className="w-full border rounded px-3 py-1 mb-4"
|
||
value={factor}
|
||
onChange={(e) => setFactor(parseFloat(e.target.value))}
|
||
/>
|
||
|
||
<label className="block mb-2 text-sm font-medium">
|
||
Loggerintervall (s)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
className="w-full border rounded px-3 py-1 mb-4"
|
||
value={loggerInterval}
|
||
onChange={(e) => setLoggerInterval(parseInt(e.target.value))}
|
||
/>
|
||
|
||
<div className="flex justify-end gap-2">
|
||
<button
|
||
onClick={onClose}
|
||
className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
<button
|
||
onClick={handleSave}
|
||
disabled={isSaving}
|
||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||
>
|
||
{isSaving ? "Speichern..." : "Speichern"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|