124 lines
4.6 KiB
TypeScript
124 lines
4.6 KiB
TypeScript
"use client"; // components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
|
||
import React, { useEffect, useState } from "react";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import { RootState, AppDispatch } from "../../../redux/store";
|
||
import { fetchAnalogeEingaengeThunk } from "../../../redux/thunks/fetchAnalogeEingaengeThunk";
|
||
|
||
export default function AnalogeEingaengeTable() {
|
||
const dispatch = useDispatch<AppDispatch>();
|
||
|
||
useEffect(() => {
|
||
dispatch(fetchAnalogeEingaengeThunk()); // ✅ Holt die API-Daten nur im Client
|
||
}, [dispatch]);
|
||
|
||
const analogeEingaenge = useSelector(
|
||
(state: RootState) => state.analogeEingaenge
|
||
);
|
||
|
||
const [selectedEingang, setSelectedEingang] = useState(null);
|
||
|
||
const openSettingsModal = (eingang: any) => {
|
||
setSelectedEingang(eingang);
|
||
};
|
||
|
||
const closeSettingsModal = () => {
|
||
setSelectedEingang(null);
|
||
};
|
||
|
||
return (
|
||
<div className="w-full">
|
||
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full border-collapse border border-gray-300 text-sm md:text-base">
|
||
<thead>
|
||
<tr className="bg-gray-100 text-gray-700">
|
||
<th className="border p-1 text-left">Eingang</th>
|
||
<th className="border p-3 text-left">Wert</th>
|
||
<th className="border p-3 text-left">Bezeichnung</th>
|
||
<th className="border p-3 text-center">uW</th>
|
||
<th className="border p-3 text-center">uG</th>
|
||
<th className="border p-3 text-center">oW</th>
|
||
<th className="border p-3 text-center">oG</th>
|
||
<th className="border p-3 text-center">Einstellung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{Object.values(analogeEingaenge).map((eingang, index) => (
|
||
<tr
|
||
key={index}
|
||
className="text-gray-700 hover:bg-gray-50 transition"
|
||
>
|
||
<td className="border p-3">{eingang.id ?? "-"}</td>
|
||
<td className="border p-3">{eingang.value ?? "-"}</td>
|
||
<td className="border p-3">{eingang.name || "----"}</td>
|
||
<td className="border p-3 text-center">
|
||
{eingang.uW ? "🟢" : "⚪"}
|
||
</td>
|
||
<td className="border p-3 text-center">
|
||
{eingang.uG ? "🟢" : "⚪"}
|
||
</td>
|
||
<td className="border p-3 text-center">
|
||
{eingang.oW ? "🟠" : "⚪"}
|
||
</td>
|
||
<td className="border p-3 text-center">
|
||
{eingang.oG ? "🟢" : "⚪"}
|
||
</td>
|
||
<td className="border p-3 text-center">
|
||
<button
|
||
onClick={() => openSettingsModal(eingang)}
|
||
className="bg-blue-500 text-white text-xs px-2 py-1 rounded hover:bg-blue-600 transition"
|
||
>
|
||
⚙️
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modal */}
|
||
{selectedEingang && (
|
||
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||
<div className="bg-white p-6 rounded-lg shadow-lg w-3/4 max-w-3xl">
|
||
<div className="flex justify-between items-center border-b pb-2">
|
||
<h2 className="text-lg font-bold text-gray-700">
|
||
Analoge Eingänge Einstellungen
|
||
</h2>
|
||
<button onClick={closeSettingsModal} className="text-gray-500">
|
||
❌
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-4">
|
||
<label className="block text-sm text-gray-700">Eingang:</label>
|
||
<input
|
||
type="text"
|
||
className="w-full border px-2 py-1 rounded"
|
||
value={selectedEingang.id}
|
||
readOnly
|
||
/>
|
||
|
||
<label className="block text-sm text-gray-700 mt-2">
|
||
Bezeichnung:
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="w-full border px-2 py-1 rounded"
|
||
defaultValue={selectedEingang.name}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end mt-4">
|
||
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
|
||
💾 Speichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|