refactor: rename einausgange to digitalOtputs and digitalInputs

2025-06-27 07:10:34 +02:00
parent b9651a53a9
commit c558b9b826
16 changed files with 36 additions and 69 deletions
--- a/components/main/digitalOutputs/DigitalOutputsWidget.tsx
+++ b/components/main/digitalOutputs/DigitalOutputsWidget.tsx
@@ -0,0 +1,105 @@
+"use client";
+// /components/main/digitalOutputs/DigitalOutputsWidget.tsx
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState, AppDispatch } from "../../../redux/store";
+import { Icon } from "@iconify/react";
+import settingsIcon from "@iconify/icons-mdi/settings";
+import outputIcon from "@iconify/icons-mdi/output";
+import switchIcon from "@iconify/icons-ion/switch";
+import { setDigitalOutputs } from "@/redux/slices/digitalOutputsSlice";
+import type { DigitalOutput } from "@/types/digitalOutput";
+
+export interface DigitalOutputsWidgetProps {
+  openOutputModal: (output: DigitalOutput) => void;
+}
+
+export default function DigitalOutputsWidget({
+  openOutputModal,
+}: DigitalOutputsWidgetProps) {
+  const dispatch = useDispatch<AppDispatch>();
+  const digitalOutputs = useSelector(
+    (state: RootState) => state.digitalOutputsSlice.outputs
+  );
+  const isCPL = process.env.NEXT_PUBLIC_NODE_ENV === "production";
+
+  const handleToggle = async (id: number) => {
+    const updatedOutputs = digitalOutputs.map((output) =>
+      output.id === id ? { ...output, status: !output.status } : output
+    );
+
+    dispatch(setDigitalOutputs(updatedOutputs));
+
+    try {
+      if (isCPL) {
+        window.location.href = `/CPL?digitalOutputs.html&DAS0${id}=${
+          updatedOutputs[id - 1].status ? 1 : 0
+        }`;
+      } else {
+        await fetch("/api/cpl/updateDigitalOutputsHandler", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ outputs: updatedOutputs }),
+        });
+      }
+
+      console.log("✅ Ausgang aktualisiert:", id);
+    } catch (error) {
+      console.error("❌ Fehler beim Schreiben:", error);
+    }
+  };
+
+  return (
+    <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
+      <h2 className="laptop:text-sm  md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
+        <Icon
+          icon={outputIcon}
+          className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl"
+        />
+        Schaltausgänge
+      </h2>
+      <table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse bg-white rounded-lg">
+        <thead className="bg-gray-100 border-b">
+          <tr>
+            <th className="px-1 py-1 text-left">Ausgang</th>
+            <th className="px-1 py-1 text-left">Bezeichnung</th>
+            <th className="px-1 py-1 text-left">Schalter</th>
+            <th className="px-1 py-1 text-left">Aktion</th>
+          </tr>
+        </thead>
+        <tbody>
+          {digitalOutputs.map((output) => (
+            <tr key={output.id} className="border-b">
+              <td className="flex items-center px-1 py-1">
+                <Icon
+                  icon={outputIcon}
+                  className="text-gray-600 mr-1 text-base"
+                />
+                {output.id}
+              </td>
+              <td className="px-1 py-1">{output.label}</td>
+              <td className="px-1 py-1">
+                <Icon
+                  icon={switchIcon}
+                  className={`cursor-pointer text-base transition ${
+                    output.status
+                      ? "text-littwin-blue"
+                      : "text-gray-500 scale-x-[-1]"
+                  }`}
+                  onClick={() => handleToggle(output.id)}
+                />
+              </td>
+              <td className="px-1 py-1">
+                <Icon
+                  icon={settingsIcon}
+                  className="text-gray-400 text-base cursor-pointer"
+                  onClick={() => openOutputModal(output)}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}