Digitale Eingänge kommen von Mock oder echte Daten je nach dem Umgebung (Produktion/echte oder Entwicklung/Mock)

pages/einausgaenge.js

@@ -1,15 +1,29 @@
-"use client"; // pages/einausgaenge.js
+"use client"; // Falls notwendig
 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_de: Array(32).fill(0),
     win_counter: Array(32).fill(0),
     win_flutter: Array(32).fill(0),
   });
   const [isLoading, setIsLoading] = useState(true);
 
+  // Digitale Ausgänge (Hooks müssen immer initialisiert werden)
+  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 },
+  ]);
+
+  // Modal-Zustände
+  const [selectedInput, setSelectedInput] = useState(null);
+  const [selectedOutput, setSelectedOutput] = useState(null);
+  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
+  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
+
   useEffect(() => {
     const isDevelopment = process.env.NODE_ENV === "development";
     const script = document.createElement("script");
@@ -21,7 +35,6 @@ function EinAusgaenge() {
 
     script.onload = () => {
       try {
-        // Sicherstellen, dass die globalen Variablen verfügbar sind
         if (
           typeof win_de !== "undefined" &&
           typeof win_counter !== "undefined" &&
@@ -54,24 +67,6 @@ function EinAusgaenge() {
     };
   }, []);
 
-  // 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) =>
@@ -80,11 +75,6 @@ function EinAusgaenge() {
     );
   };
 
-  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);
@@ -105,12 +95,16 @@ function EinAusgaenge() {
     setIsOutputModalOpen(false);
   };
 
-  // Warten auf Daten
+  const digitalInputs = mockData.win_de.map((status, index) => ({
-  if (isLoading) {
+    id: index + 1,
-    return <div>Daten werden geladen...</div>;
+    status: status === 1 ? "active" : "inactive",
-  }
+    description: `DE${index + 1}`,
+    isInverted: false,
+  }));
+
+  const inputsGroup1 = digitalInputs.slice(0, 16);
+  const inputsGroup2 = digitalInputs.slice(16);
 
-  //--------------------------------------------
   return (
     <div className="p-4">
       <h1 className="text-lg font-semibold mb-4">Ein- und Ausgänge</h1>
@@ -170,57 +164,59 @@ function EinAusgaenge() {
             ))}
           </div>
         </div>
-      </div>
 
-      {/* Digitale Ausgänge */}
+        {/* Digitale Ausgänge */}
-      <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]">
+        <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">
+          <h2 className="text-md font-bold mb-4 flex items-center">
-          <Icon icon="mdi:output" className="text-blue-500 mr-2 text-2xl" />
+            <Icon icon="mdi:output" className="text-blue-500 mr-2 text-2xl" />
-          Digitale Ausgänge
+            Digitale Ausgänge
-        </h2>
+          </h2>
-        <table className="w-full text-sm border-collapse bg-white rounded-lg">
+          <table className="w-full text-sm border-collapse bg-white rounded-lg">
-          <thead className="bg-gray-100 border-b">
+            <thead className="bg-gray-100 border-b">
-            <tr>
+              <tr>
-              <th className="px-2 py-1 text-left">Ausgang</th>
+                <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">Bezeichnung</th>
-              <th className="px-2 py-1 text-left">Schalter</th>
+                <th className="px-2 py-1 text-left">Schalter</th>
-              <th className="px-2 py-1 text-left">Aktion</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>
-            ))}
+            </thead>
-          </tbody>
+            <tbody>
-        </table>
+              {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 */}
@@ -237,10 +233,6 @@ function EinAusgaenge() {
             <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"
@@ -250,6 +242,7 @@ function EinAusgaenge() {
           </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">