Digitale Ausgänge ausgelagert von Ein- und Asgänge

components/main/einausgaenge/DigitalInputs.tsx

@@ -0,0 +1,46 @@
+// components/main/einausgaenge/DigitalInputs.tsx
+import React from "react";
+import { Icon } from "@iconify/react";
+
+export default function DigitalInputs({ digitalInputs, openInputModal }) {
+  return (
+    <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-3/5 flex-grow flex flex-col">
+      <h2 className="text-md font-bold mb-4 flex items-center">
+        <Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" />
+        Digitale Eingänge
+      </h2>
+      <table className="w-full text-sm border-collapse bg-white rounded-lg">
+        <thead className="bg-gray-100 border-b">
+          <tr>
+            <th className="px-2 py-1 text-left">Eingang</th>
+            <th className="px-2 py-1 text-left">Zustand</th>
+            <th className="px-2 py-1 text-left">Bezeichnung</th>
+            <th className="px-2 py-1 text-left">Aktion</th>
+          </tr>
+        </thead>
+        <tbody>
+          {digitalInputs.map((input) => (
+            <tr key={input.id} className="border-b">
+              <td className="flex items-center p-2">
+                <Icon
+                  icon="mdi:input"
+                  className="text-black-500 mr-2 text-xl"
+                />
+                {input.id}
+              </td>
+              <td className="p-2">{input.status === "active" ? "●" : "⨉"}</td>
+              <td className="p-2">{input.description}</td>
+              <td className="p-2">
+                <Icon
+                  icon="mdi:settings"
+                  className="text-gray-400 text-lg cursor-pointer"
+                  onClick={() => openInputModal(input)}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

components/main/einausgaenge/DigitalOutputs.tsx

@@ -0,0 +1,64 @@
+// components/main/einausgaenge/DigitalOutputs.tsx
+import React from "react";
+import { Icon } from "@iconify/react";
+
+export default function DigitalOutputs({
+  digitalOutputs,
+  openOutputModal,
+  toggleSwitch,
+}) {
+  return (
+    <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]">
+      <h2 className="text-md font-bold mb-4 flex items-center">
+        <Icon icon="mdi:output" className="text-blue-500 mr-2 text-2xl" />
+        Digitale Ausgänge
+      </h2>
+      <table className="w-full text-sm border-collapse bg-white rounded-lg">
+        <thead className="bg-gray-100 border-b">
+          <tr>
+            <th className="px-2 py-1 text-left">Ausgang</th>
+            <th className="px-2 py-1 text-left">Bezeichnung</th>
+            <th className="px-2 py-1 text-left">Schalter</th>
+            <th className="px-2 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-2 py-1">
+                <Icon
+                  icon="mdi:output"
+                  className="text-black-500 mr-2 text-xl"
+                />
+                {output.id}
+              </td>
+              <td className="px-2 py-1">{output.description}</td>
+              <td className="px-2 py-1">
+                <span
+                  title={`Schalter ${output.toggle ? "EIN" : "AUS"} schalten`}
+                >
+                  <Icon
+                    icon="ion:switch"
+                    onClick={() => toggleSwitch(output.id)}
+                    className={`cursor-pointer text-2xl transform ${
+                      output.toggle
+                        ? "text-blue-500 scale-x-100"
+                        : "text-gray-500 scale-x-[-1]"
+                    }`}
+                  />
+                </span>
+              </td>
+              <td className="px-2 py-1">
+                <Icon
+                  icon="mdi:settings"
+                  className="text-gray-400 text-lg cursor-pointer"
+                  onClick={() => openOutputModal(output)}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

components/modals/InputModal.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function InputModal({ isOpen, input, closeModal }) {
+  if (!isOpen || !input) return null;
+
+  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/3">
+        <h2 className="text-lg font-bold mb-4">
+          Details für Eingang {input.id}
+        </h2>
+        <p>
+          <strong>Status:</strong>{" "}
+          {input.status === "active" ? "Aktiv" : "Inaktiv"}
+        </p>
+        <p>
+          <strong>Beschreibung:</strong> {input.description}
+        </p>
+        <button
+          onClick={closeModal}
+          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+        >
+          Schließen
+        </button>
+      </div>
+    </div>
+  );
+}

components/modals/OutputModal.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function OutputModal({ isOpen, output, closeModal }) {
+  if (!isOpen || !output) return null;
+
+  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/3">
+        <h2 className="text-lg font-bold mb-4">
+          Details für Ausgang {output.id}
+        </h2>
+        <p>
+          <strong>Bezeichnung:</strong> {output.description}
+        </p>
+        <p>
+          <strong>Status:</strong>{" "}
+          {output.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
+        </p>
+        <button
+          onClick={closeModal}
+          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+        >
+          Schließen
+        </button>
+      </div>
+    </div>
+  );
+}