Code funktioniert,aber style soll geändert werden für einausgaenge.js

pages/einausgaenge copy.js

@@ -0,0 +1,280 @@
+"use client"; // pages/einausgaenge.js
+import React, { useState, useEffect } from "react";
+import { Icon } from "@iconify/react";
+
+function EinAusgaenge() {
+  const [mockData, setMockData] = useState({
+    win_de: Array(32).fill(0), // Fallback-Daten für die Initialisierung
+    win_counter: Array(32).fill(0),
+    win_flutter: Array(32).fill(0),
+  });
+  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 {
+        // Sicherstellen, dass die globalen Variablen verfügbar sind
+        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);
+    };
+  }, []);
+
+  // Hook-Anzahl konstant halten
+  const digitalInputs = mockData.win_de.map((status, index) => ({
+    id: index + 1,
+    status: status === 1 ? "active" : "inactive",
+    description: `DE${index + 1}`,
+    isInverted: false,
+  }));
+
+  const inputsGroup1 = digitalInputs.slice(0, 16);
+  const inputsGroup2 = digitalInputs.slice(16);
+
+  const [digitalOutputs, setDigitalOutputs] = useState([
+    { id: 1, description: "Ausgang1", toggle: true },
+    { id: 2, description: "Ausgang2", toggle: false },
+    { id: 3, description: "Ausgang3", toggle: true },
+    { id: 4, description: "Ausgang4", toggle: false },
+  ]);
+
+  const toggleSwitch = (id) => {
+    setDigitalOutputs((prevOutputs) =>
+      prevOutputs.map((output) =>
+        output.id === id ? { ...output, toggle: !output.toggle } : output
+      )
+    );
+  };
+
+  const [selectedInput, setSelectedInput] = useState(null);
+  const [selectedOutput, setSelectedOutput] = useState(null);
+  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
+  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
+
+  const openInputModal = (input) => {
+    setSelectedInput(input);
+    setIsInputModalOpen(true);
+  };
+
+  const closeInputModal = () => {
+    setSelectedInput(null);
+    setIsInputModalOpen(false);
+  };
+
+  const openOutputModal = (output) => {
+    setSelectedOutput(output);
+    setIsOutputModalOpen(true);
+  };
+
+  const closeOutputModal = () => {
+    setSelectedOutput(null);
+    setIsOutputModalOpen(false);
+  };
+
+  // Warten auf Daten
+  if (isLoading) {
+    return <div>Daten werden geladen...</div>;
+  }
+
+  //--------------------------------------------
+  return (
+    <div className="p-4">
+      <h1 className="text-lg font-semibold mb-4">Ein- und Ausgänge</h1>
+      <div className="flex gap-4">
+        {/* Digitale Eingänge */}
+        <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>
+          <div className="grid grid-cols-2 gap-4">
+            {[inputsGroup1, inputsGroup2].map((group, index) => (
+              <div key={index} className="flex-grow">
+                <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>
+                    {group.map((input) => (
+                      <tr key={input.id} className="border-b">
+                        <td className="flex items-center p-2 xl:py-0 2xl:p-1">
+                          <Icon
+                            icon="mdi:input"
+                            className="text-black-500 mr-2 text-xl"
+                          />
+                          {input.id}
+                        </td>
+                        <td className="p-2 xl:py-0">
+                          <span
+                            className={
+                              input.status === "active"
+                                ? "text-green-500"
+                                : "text-red-500"
+                            }
+                          >
+                            {input.status === "active" ? "●" : "⨉"}
+                          </span>
+                        </td>
+                        <td className="p-2 xl:py-0">{input.description}</td>
+                        <td className="p-2 xl:py-0">
+                          <Icon
+                            icon="mdi:settings"
+                            className="text-gray-400 text-lg cursor-pointer"
+                            onClick={() => openInputModal(input)}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Digitale Ausgänge */}
+      <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">
+                  <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>
+
+      {/* Modal für Eingänge */}
+      {isInputModalOpen && (
+        <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 {selectedInput.id}
+            </h2>
+            <p>
+              <strong>Status:</strong>{" "}
+              {selectedInput.status === "active" ? "Aktiv" : "Inaktiv"}
+            </p>
+            <p>
+              <strong>Beschreibung:</strong> {selectedInput.description}
+            </p>
+            <p>
+              <strong>Invertiert:</strong>{" "}
+              {selectedInput.isInverted ? "Ja" : "Nein"}
+            </p>
+            <button
+              onClick={closeInputModal}
+              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+            >
+              Schließen
+            </button>
+          </div>
+        </div>
+      )}
+      {/* Modal für Ausgänge */}
+      {isOutputModalOpen && (
+        <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 {selectedOutput.id}
+            </h2>
+            <p>
+              <strong>Bezeichnung:</strong> {selectedOutput.description}
+            </p>
+            <p>
+              <strong>Status:</strong>{" "}
+              {selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
+            </p>
+            <button
+              onClick={closeOutputModal}
+              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+            >
+              Schließen
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default EinAusgaenge;

pages/einausgaenge.js

@@ -1,53 +1,77 @@
-"use client"; // Falls notwendig
-import React, { useState } from "react";
+"use client"; // pages/einausgaenge.js
+import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
 
 function EinAusgaenge() {
-  const digitalInputs = [
-    { id: 1, status: "active", description: "100V-Ausfall", isInverted: true },
-    { id: 2, status: "inactive", description: "DE2", isInverted: false },
-    { id: 3, status: "active", description: "DE3", isInverted: false },
-    { id: 4, status: "inactive", description: "DE4", isInverted: false },
-    { id: 5, status: "active", description: "DE5", isInverted: false },
-    { id: 6, status: "inactive", description: "DE6", isInverted: false },
-    { id: 7, status: "active", description: "DE7", isInverted: false },
-    { id: 8, status: "inactive", description: "DE8", isInverted: false },
-    { id: 9, status: "active", description: "DE9", isInverted: false },
-    { id: 10, status: "inactive", description: "DE10", isInverted: false },
-    { id: 11, status: "active", description: "DE11", isInverted: false },
-    { id: 12, status: "inactive", description: "DE12", isInverted: false },
-    { id: 13, status: "active", description: "DE13", isInverted: false },
-    { id: 14, status: "inactive", description: "DE14", isInverted: false },
-    { id: 15, status: "active", description: "DE15", isInverted: false },
-    { id: 16, status: "inactive", description: "DE16", isInverted: false },
-    { id: 17, status: "active", description: "DE17", isInverted: false },
-    { id: 18, status: "inactive", description: "DE18", isInverted: false },
-    { id: 19, status: "active", description: "DE19", isInverted: false },
-    { id: 20, status: "inactive", description: "DE20", isInverted: false },
-    { id: 21, status: "active", description: "DE21", isInverted: false },
-    { id: 22, status: "inactive", description: "DE22", isInverted: false },
-    { id: 23, status: "active", description: "DE23", isInverted: false },
-    { id: 24, status: "inactive", description: "DE24", isInverted: false },
-    { id: 25, status: "active", description: "DE25", isInverted: false },
-    { id: 26, status: "inactive", description: "DE26", isInverted: false },
-    { id: 27, status: "active", description: "DE27", isInverted: false },
-    { id: 28, status: "inactive", description: "DE28", isInverted: false },
-    { id: 29, status: "active", description: "DE29", isInverted: false },
-    { id: 30, status: "inactive", description: "DE30", isInverted: false },
-    { id: 31, status: "active", description: "DE31", isInverted: false },
-    { id: 32, status: "inactive", description: "DE32", isInverted: false },
-  ];
+  const [mockData, setMockData] = useState({
+    win_de: Array(32).fill(0), // Fallback-Daten für die Initialisierung
+    win_counter: Array(32).fill(0),
+    win_flutter: Array(32).fill(0),
+  });
+  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 {
+        // Sicherstellen, dass die globalen Variablen verfügbar sind
+        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);
+    };
+  }, []);
+
+  // Hook-Anzahl konstant halten
+  const digitalInputs = mockData.win_de.map((status, index) => ({
+    id: index + 1,
+    status: status === 1 ? "active" : "inactive",
+    description: `DE${index + 1}`,
+    isInverted: false,
+  }));
 
-  // Aufteilen der Eingänge in zwei Gruppen
   const inputsGroup1 = digitalInputs.slice(0, 16);
   const inputsGroup2 = digitalInputs.slice(16);
-  //-----------------------------------------
+
   const [digitalOutputs, setDigitalOutputs] = useState([
     { id: 1, description: "Ausgang1", toggle: true },
     { id: 2, description: "Ausgang2", toggle: false },
     { id: 3, description: "Ausgang3", toggle: true },
     { id: 4, description: "Ausgang4", toggle: false },
   ]);
+
   const toggleSwitch = (id) => {
     setDigitalOutputs((prevOutputs) =>
       prevOutputs.map((output) =>
@@ -55,7 +79,7 @@ function EinAusgaenge() {
       )
     );
   };
-  //--------------------------------------------
+
   const [selectedInput, setSelectedInput] = useState(null);
   const [selectedOutput, setSelectedOutput] = useState(null);
   const [isInputModalOpen, setIsInputModalOpen] = useState(false);
@@ -80,6 +104,12 @@ function EinAusgaenge() {
     setSelectedOutput(null);
     setIsOutputModalOpen(false);
   };
+
+  // Warten auf Daten
+  if (isLoading) {
+    return <div>Daten werden geladen...</div>;
+  }
+
   //--------------------------------------------
   return (
     <div className="p-4">
@@ -114,28 +144,16 @@ function EinAusgaenge() {
                           {input.id}
                         </td>
                         <td className="p-2 xl:py-0">
-                          <div className="flex items-center">
-                            {/* Status-Icon */}
-                            <span
-                              className={
-                                input.status === "active"
-                                  ? "text-green-500"
-                                  : "text-red-500"
-                              }
-                            >
-                              {input.status === "active" ? "●" : "⨉"}
-                            </span>
-                            {/* Swap-Icon wird angezeigt, wenn invertiert */}
-                            {input.isInverted && (
-                              <Icon
-                                icon="mdi:swap-vertical"
-                                className="text-red-500 ml-2 text-xl cursor-pointer"
-                                title="Invertiert"
-                              />
-                            )}
-                          </div>
+                          <span
+                            className={
+                              input.status === "active"
+                                ? "text-green-500"
+                                : "text-red-500"
+                            }
+                          >
+                            {input.status === "active" ? "●" : "⨉"}
+                          </span>
                         </td>
-
                         <td className="p-2 xl:py-0">{input.description}</td>
                         <td className="p-2 xl:py-0">
                           <Icon
@@ -152,60 +170,59 @@ function EinAusgaenge() {
             ))}
           </div>
         </div>
-
-        {/* Digitale Ausgänge */}
-        <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">
-                    <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>
+
+      {/* Digitale Ausgänge */}
+      <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">
+                  <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>
+
       {/* Modal für Eingänge */}
       {isInputModalOpen && (
         <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">

public/CPLmockData/SERVICE/de.js

@@ -1,5 +1,5 @@
 var win_de = [
-  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 0, 0, 0, 0, 0,
 ];
 var win_counter = [