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,7 +164,6 @@ function EinAusgaenge() {
             ))}
           </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]">
@@ -207,7 +200,9 @@ function EinAusgaenge() {
                           ? "text-blue-500 scale-x-100"
                           : "text-gray-500 scale-x-[-1]"
                       }`}
-                    title={`Schalter ${output.toggle ? "EIN" : "AUS"} schalten`}
+                      title={`Schalter ${
+                        output.toggle ? "EIN" : "AUS"
+                      } schalten`}
                     />
                   </td>
                   <td className="px-2 py-1">
@@ -222,6 +217,7 @@ function EinAusgaenge() {
             </tbody>
           </table>
         </div>
+      </div>
 
       {/* Modal für Eingänge */}
       {isInputModalOpen && (
@@ -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">