113 lines
4.3 KiB
TypeScript
113 lines
4.3 KiB
TypeScript
"use client"; // /components/main/analogInputs/AnalogInputsTable.tsx
|
|
import type { AnalogInput } from "@/types/analogInput";
|
|
import React, { useEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { RootState, AppDispatch } from "@/redux/store";
|
|
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
|
|
import { Icon } from "@iconify/react";
|
|
import settingsIcon from "@iconify/icons-mdi/settings";
|
|
import waveformIcon from "@iconify/icons-mdi/waveform";
|
|
import { setSelectedAnalogInput } from "@/redux/slices/analogInputs/selectedAnalogInputSlice";
|
|
import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
|
|
import { setSelectedId } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
|
|
|
|
export default function AnalogInputsTable() {
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
|
|
const [activeId, setActiveId] = React.useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
dispatch(getAnalogInputsThunk());
|
|
}, [dispatch]);
|
|
|
|
const analogInputs = useSelector(
|
|
(state: RootState) => state.analogInputs ?? []
|
|
);
|
|
|
|
const handleSelect = (id: number, input: AnalogInput) => {
|
|
dispatch(setIsSettingsModalOpen(true));
|
|
dispatch(setSelectedId(id));
|
|
setActiveId(id);
|
|
dispatch(setSelectedAnalogInput(input));
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1">
|
|
<h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
|
|
<Icon
|
|
icon={waveformIcon}
|
|
className="text-littwin-blue mr-2 text-2xl laptop:text-lg xl:text-xl 2xl:text-2xl border-2 border-littwin-blue rounded-md"
|
|
/>
|
|
Messwerteingänge
|
|
</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse">
|
|
<thead className="bg-gray-100 border-b items-center ">
|
|
<tr>
|
|
<th className="border p-1 text-left">Eingang</th>
|
|
<th className="border p-1 text-left">Messwert</th>
|
|
<th className="border p-1 text-left">Einheit</th>
|
|
<th className="border p-1 text-left">Bezeichnung</th>
|
|
<th className="border p-1 text-left">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{Object.values(analogInputs)
|
|
.filter(
|
|
(e) =>
|
|
e && typeof e.id === "number" && typeof e.label === "string"
|
|
)
|
|
.slice(0, 8)
|
|
.map((e, index) => (
|
|
<tr
|
|
key={index}
|
|
className={`transition cursor-pointer ${
|
|
e.id === activeId ? "bg-blue-100" : "hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
<td
|
|
className="border p-2"
|
|
onClick={() => handleSelect(e.id!, e)}
|
|
>
|
|
<div className="flex items-center gap-1 ">
|
|
<Icon
|
|
icon={waveformIcon}
|
|
className="text-gray-600 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
|
|
/>
|
|
{e.id ?? "-"}
|
|
</div>
|
|
</td>
|
|
<td
|
|
className="border p-2 text-right"
|
|
onClick={() => handleSelect(e.id!, e)}
|
|
>
|
|
{typeof e.value === "number" ? e.value.toFixed(2) : "-"}
|
|
</td>
|
|
|
|
<td className="border p-2">{e.unit || "-"}</td>
|
|
<td
|
|
className="border p-2"
|
|
onClick={() => handleSelect(e.id!, e)}
|
|
>
|
|
{e.label || "----"}
|
|
</td>
|
|
|
|
<td className="border p-2 text-center">
|
|
<button
|
|
onClick={() => {
|
|
handleSelect(e.id!, e);
|
|
}}
|
|
className="text-gray-400 hover:text-gray-500"
|
|
>
|
|
<Icon icon={settingsIcon} className="text-xl" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|