analoge eingänge

2025-06-19 12:27:00 +02:00
parent 887e7b4992
commit 3a829f2298
28 changed files with 285 additions and 248 deletions
--- a/components/main/analogInputs/AnalogInputsTable.tsx
+++ b/components/main/analogInputs/AnalogInputsTable.tsx
@@ -0,0 +1,111 @@
+"use client"; // /components/main/analogInputs/AnalogInputsTable.tsx
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState, AppDispatch } from "@/redux/store";
+import { fetchAnalogInputsThunk } from "@/redux/thunks/fetchAnalogInputsThunk";
+import { Icon } from "@iconify/react";
+import settingsIcon from "@iconify/icons-mdi/settings";
+import waveformIcon from "@iconify/icons-mdi/waveform";
+
+export default function AnalogInputsTable({
+  setSelectedId,
+  setSelectedInput,
+  setIsSettingsModalOpen,
+}: {
+  setSelectedId: (id: number) => void;
+  setSelectedInput: (input: any) => void;
+  setIsSettingsModalOpen: (open: boolean) => void;
+}) {
+  const dispatch = useDispatch<AppDispatch>();
+  const [activeId, setActiveId] = React.useState<number | null>(null);
+
+  useEffect(() => {
+    dispatch(fetchAnalogInputsThunk());
+  }, [dispatch]);
+
+  const analogInputs = useSelector(
+    (state: RootState) => state.analogeInputsSlice
+  );
+
+  const handleSelect = (id: number) => {
+    setSelectedId(id);
+    setActiveId(id);
+  };
+
+  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">
+            <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?.id !== null && e?.id !== undefined)
+              .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!)}
+                  >
+                    <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!)}
+                  >
+                    {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.name || "----"}
+                  </td>
+
+                  <td className="border p-2 text-center">
+                    <button
+                      onClick={() => {
+                        handleSelect(e.id!);
+                        setSelectedInput(e);
+                        setIsSettingsModalOpen(true);
+                      }}
+                      className="text-gray-400 hover:text-gray-500"
+                    >
+                      <Icon icon={settingsIcon} className="text-xl" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}