133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { RootState } from "../../../../redux/store";
|
|
import {
|
|
updateInvertierung,
|
|
updateName,
|
|
} from "../../../../redux/slices/digitalInputsSlice";
|
|
|
|
export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
|
const [invertiert, setInvertiert] = useState(false);
|
|
const [name, setName] = useState("");
|
|
const dispatch = useDispatch();
|
|
|
|
const reduxInput = useSelector((state: RootState) =>
|
|
state.digitalInputsSlice.inputs.find(
|
|
(input) => input.id === Number(selectedInput?.id)
|
|
)
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (reduxInput) {
|
|
setInvertiert(reduxInput.invertierung);
|
|
setName(reduxInput.name || "");
|
|
}
|
|
}, [reduxInput]);
|
|
|
|
if (!isOpen || !selectedInput || !reduxInput) return null;
|
|
|
|
const handleInvertierungToggle = () => {
|
|
const neueInvertierung = !invertiert;
|
|
dispatch(
|
|
updateInvertierung({ id: reduxInput.id, invertierung: neueInvertierung })
|
|
);
|
|
setInvertiert(neueInvertierung);
|
|
};
|
|
|
|
const handleNameSpeichern = () => {
|
|
dispatch(updateName({ id: reduxInput.id, name }));
|
|
};
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
|
|
<div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
|
|
<h2 className="text-xl font-semibold text-blue-500 mb-4 border-b pb-2">
|
|
Parameter für Eingang {selectedInput.id}
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
|
<div>
|
|
<strong>Status:</strong>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xl font-semibold col-span-1">
|
|
{reduxInput.status ? (
|
|
<>
|
|
<span className="w-4 h-4 bg-red-500 rounded-full inline-block"></span>
|
|
<span className="text-red-600">Inaktiv</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="w-4 h-4 bg-green-500 rounded-full inline-block"></span>
|
|
<span className="text-green-600">Aktiv</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<strong>Name:</strong>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="border border-gray-300 rounded px-2 py-1 w-full"
|
|
maxLength={32}
|
|
/>
|
|
<button
|
|
onClick={handleNameSpeichern}
|
|
className="px-2 py-1 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 col-span-2">
|
|
<strong>Invertierung:</strong>
|
|
<span>{invertiert ? "Ein" : "Aus"}</span>
|
|
<button
|
|
onClick={handleInvertierungToggle}
|
|
className="ml-auto px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
|
|
>
|
|
Umschalten
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<strong>Zählerstand:</strong>
|
|
</div>
|
|
<div>{reduxInput.counter}</div>
|
|
|
|
<div>
|
|
<strong>Filterzeit:</strong>
|
|
</div>
|
|
<div>{reduxInput.filterzeit} ms</div>
|
|
|
|
<div>
|
|
<strong>Gewichtung:</strong>
|
|
</div>
|
|
<div>{reduxInput.gewichtung}</div>
|
|
|
|
<div>
|
|
<strong>Zähler aktiv:</strong>
|
|
</div>
|
|
<div>{reduxInput.zaehlerAktiv ? "Ja" : "Nein"}</div>
|
|
|
|
<div>
|
|
<strong>Eingang offline:</strong>
|
|
</div>
|
|
<div>{reduxInput.eingangOffline ? "Offline" : "Online"}</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={closeInputModal}
|
|
className="mt-6 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition"
|
|
>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|