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>
+  );
+}

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.50";
+const webVersion = "1.6.51";
 export default webVersion;

hooks/useLoadDigitalOutputs.ts

@@ -0,0 +1,17 @@
+// hokks/useLoadDigitalOutputs.ts
+import { useEffect, useState } from "react";
+
+export function useLoadDigitalOutputs() {
+  const [digitalOutputs, setDigitalOutputs] = useState([]);
+
+  useEffect(() => {
+    fetch("/CPLmockData/digitaleausgaengeMockData.json")
+      .then((response) => response.json())
+      .then((data) => setDigitalOutputs(data))
+      .catch((error) =>
+        console.error("Fehler beim Laden der digitalen Ausgänge:", error)
+      );
+  }, []);
+
+  return { digitalOutputs, setDigitalOutputs };
+}

hooks/useLoadScript.ts

@@ -0,0 +1,52 @@
+// hooks/useLoadScript.ts:
+import { useEffect, useState } from "react";
+
+export function useLoadScript() {
+  const [mockData, setMockData] = useState();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const isDevelopment = process.env.NODE_ENV === "development";
+    const script = document.createElement("script");
+
+    script.src = isDevelopment
+      ? "/CPLmockData/SERVICE/de.js"
+      : "/CPL/SERVICE/de.js";
+    script.async = true;
+
+    script.onload = () => {
+      try {
+        if (
+          typeof win_de !== "undefined" &&
+          typeof win_counter !== "undefined" &&
+          typeof win_flutter !== "undefined"
+        ) {
+          setMockData({
+            win_de,
+            win_counter,
+            win_flutter,
+          });
+        } else {
+          console.error("Mock-Daten konnten nicht geladen werden.");
+        }
+      } catch (error) {
+        console.error("Fehler beim Zugriff auf die globalen Daten:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    script.onerror = () => {
+      console.error("Fehler beim Laden der Skript-Datei:", script.src);
+      setIsLoading(false);
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return { mockData, isLoading };
+}

pages/einausgaenge.tsx

@@ -1,6 +1,7 @@
 "use client"; // Falls notwendig
 import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
+import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
 
 function EinAusgaenge() {
   const [mockData, setMockData] = useState({
@@ -166,57 +167,11 @@ function EinAusgaenge() {
         </div>
 
         {/* Digitale Ausgänge */}
-        <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]">
+        <DigitalOutputs
-          <h2 className="text-md font-bold mb-4 flex items-center">
+          digitalOutputs={digitalOutputs}
-            <Icon icon="mdi:output" className="text-blue-500 mr-2 text-2xl" />
+          openOutputModal={openOutputModal}
-            Digitale Ausgänge
+          toggleSwitch={toggleSwitch}
-          </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">
-                    <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]"
-                      }`}
-                      title={`Schalter ${
-                        output.toggle ? "EIN" : "AUS"
-                      } schalten`}
-                    />
-                  </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>
       </div>
 
       {/* Modal für Eingänge */}

public/CPLmockData/digitaleausgaengeMockData.json

@@ -0,0 +1,6 @@
+[
+  { "id": 1, "description": "Ausgang1", "toggle": true },
+  { "id": 2, "description": "Ausgang2", "toggle": false },
+  { "id": 3, "description": "Ausgang3", "toggle": true },
+  { "id": 4, "description": "Ausgang4", "toggle": false }
+]