Digitale Ausgänge von window laden, stae und Bezeichnung

pages/einausgaenge.tsx

@@ -1,30 +1,63 @@
-"use client"; // pages/einausgaenge.tsx
-import React, { useState } from "react";
+"use client";
+import React, { useState, useEffect } from "react";
 import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
 import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
-import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputData";
 import InputModal from "../components/main/einausgaenge/modals/InputModal";
 import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
+import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputData";
 
 function EinAusgaenge() {
-  // 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 },
-  ]);
+  // Zustand für digitale Ausgänge
+  const [digitalOutputs, setDigitalOutputs] = useState([]);
+  const [isLoadingOutputs, setIsLoadingOutputs] = useState(true);
 
-  // Modal-Zustände
+  // Zustand für Modale
   const [selectedInput, setSelectedInput] = useState(null);
   const [selectedOutput, setSelectedOutput] = useState(null);
   const [isInputModalOpen, setIsInputModalOpen] = useState(false);
   const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
 
-  // Daten laden
-  const { mockData, isLoading } = useDigitalInputData();
+  // Laden der digitalen Eingänge
+  const { mockData, isLoading: isLoadingInputs } = useDigitalInputData();
 
-  // Funktionen zum Umschalten von Ausgängen
+  // Laden der digitalen Ausgänge
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "/CPLmockData/SERVICE/da.js";
+    script.async = true;
+
+    script.onload = () => {
+      const da = window.win_da_state;
+      const bezeichnungen = window.win_da_bezeichnung;
+      console.log("da : ", da);
+      console.log("bezeichnungen : ", bezeichnungen);
+
+      if (da && bezeichnungen) {
+        const outputs = da.map((status, index) => ({
+          id: index + 1,
+          description: bezeichnungen[index] || `Ausgang${index + 1}`,
+          toggle: status === 1,
+        }));
+        setDigitalOutputs(outputs);
+      } else {
+        console.error("Daten konnten nicht geladen werden.");
+      }
+      setIsLoadingOutputs(false);
+    };
+
+    script.onerror = () => {
+      console.error("Fehler beim Laden der da.js-Datei.");
+      setIsLoadingOutputs(false);
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  // Funktion zum Umschalten des Ausgangs
   const toggleSwitch = (id) => {
     setDigitalOutputs((prevOutputs) =>
       prevOutputs.map((output) =>
@@ -33,21 +66,22 @@ function EinAusgaenge() {
     );
   };
 
-  // Modal-Funktionen für Eingänge
+  // Funktionen zum Öffnen und Schließen der Modale
   const openInputModal = (input) => {
     setSelectedInput(input);
     setIsInputModalOpen(true);
   };
+
   const closeInputModal = () => {
     setSelectedInput(null);
     setIsInputModalOpen(false);
   };
 
-  // Modal-Funktionen für Ausgänge
   const openOutputModal = (output) => {
     setSelectedOutput(output);
     setIsOutputModalOpen(true);
   };
+
   const closeOutputModal = () => {
     setSelectedOutput(null);
     setIsOutputModalOpen(false);
@@ -75,26 +109,27 @@ function EinAusgaenge() {
           openInputModal={openInputModal}
         />
         {/* Digitale Ausgänge */}
-        <DigitalOutputs
-          digitalOutputs={digitalOutputs}
-          openOutputModal={openOutputModal}
-          toggleSwitch={toggleSwitch}
-        />
+        {!isLoadingOutputs && (
+          <DigitalOutputs
+            digitalOutputs={digitalOutputs}
+            openOutputModal={openOutputModal}
+            toggleSwitch={toggleSwitch}
+          />
+        )}
       </div>
 
       {/* Eingangs-Modal */}
-      <InputModal
-        selectedInput={selectedInput}
-        closeInputModal={closeInputModal}
-        isOpen={isInputModalOpen}
-      />
+      {isInputModalOpen && selectedInput && (
+        <InputModal selectedInput={selectedInput} onClose={closeInputModal} />
+      )}
 
       {/* Ausgangs-Modal */}
-      <OutputModal
-        selectedOutput={selectedOutput}
-        closeOutputModal={closeOutputModal}
-        isOpen={isOutputModalOpen}
-      />
+      {isOutputModalOpen && selectedOutput && (
+        <OutputModal
+          selectedOutput={selectedOutput}
+          onClose={closeOutputModal}
+        />
+      )}
     </div>
   );
 }