Digitale Ausgänge von window laden, stae und Bezeichnung

config/webVersion.ts

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

hooks/useLoadDigitalOutputs.ts

@@ -1,17 +0,0 @@
-// 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 };
-}

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 */}
+        {!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 */}
+      {isOutputModalOpen && selectedOutput && (
         <OutputModal
           selectedOutput={selectedOutput}
-        closeOutputModal={closeOutputModal}
-        isOpen={isOutputModalOpen}
+          onClose={closeOutputModal}
         />
+      )}
     </div>
   );
 }

public/CPLmockData/SERVICE/da.js

@@ -0,0 +1,3 @@
+// public/CPLmockData/SERVICE/da.js
+win_da_state = [1, 0, 1, 0];
+win_da_bezeichnung = ["Ausgang1", "Ausgang2", "Ausgang3", "Ausgang4"];

utils/loadWindowVariables.ts

@@ -57,6 +57,8 @@ export async function loadWindowVariables(): Promise<WindowVariables> {
       "win_opcUaZustand",
       "win_opcUaActiveClientCount",
       "win_opcUaNodesetName",
+      "win_da_state",
+      "win_da_bezeichnung",
     ];
 
     const loadScript = (src: string): Promise<void> => {
@@ -75,6 +77,7 @@ export async function loadWindowVariables(): Promise<WindowVariables> {
     };
 
     const scripts: string[] = [
+      "da.js",
       "de.js",
       "ae.js",
       "kueData.js",