feat: Digitale Ausgänge aus Redux-Store in UI integriert

- DigitalOutputs.tsx auf Redux umgestellt, um Werte direkt aus dem Store zu lesen
- toggleSwitch-Funktion angepasst, um den Status von digitalen Ausgängen in Redux zu aktualisieren
- useDigitalOutputsData.ts nutzt nun Redux zum Speichern der `win_da_state` und `win_da_bezeichnung` Werte
- Entfernen von Prop `digitalOutputs` in `DigitalOutputs.tsx`, da Redux nun als Datenquelle dient
- Weboberfläche zeigt nun digitale Ausgänge korrekt an und Status kann geändert werden

hooks/einausgaenge/useDigitalOutputsData.ts

@@ -1,42 +1,63 @@
-"use client"; // /hooks/einausgaenge/useDigitalOutputsData.ts
-import { useState, useEffect } from "react";
+"use client";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../redux/store";
+import { setDigitalOutputs } from "../../redux/slices/digitalOutputsSlice";
 
-// Definition des Typs für digitale Ausgänge
+// Typ für digitale Ausgänge
 interface DigitalOutput {
   id: number;
-  description: string;
-  toggle: boolean;
+  label: string;
+  status: boolean;
 }
 
 export function useDigitalOutputs() {
-  const [digitalOutputs, setDigitalOutputs] = useState<DigitalOutput[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const dispatch = useDispatch();
+  const digitalOutputs = useSelector(
+    (state: RootState) => state.digitalOutputs?.outputs ?? []
+  );
+  const isLoading = digitalOutputs.length === 0;
 
   useEffect(() => {
+    console.log("Lade da.js für digitale Ausgänge...");
+
     const script = document.createElement("script");
     script.src = "/CPLmockData/SERVICE/da.js";
     script.async = true;
 
     script.onload = () => {
+      console.log("Skript geladen. Überprüfe window-Variablen:");
+      console.log("win_da_state:", window.win_da_state);
+      console.log("win_da_bezeichnung:", window.win_da_bezeichnung);
+
       const da = window.win_da_state;
       const bezeichnungen = window.win_da_bezeichnung;
 
-      if (da && bezeichnungen) {
-        const outputs = da.map((status: number, index: number) => ({
-          id: index + 1,
-          description: bezeichnungen[index] || `Ausgang${index + 1}`,
-          toggle: status === 1,
-        }));
-        setDigitalOutputs(outputs);
+      if (
+        Array.isArray(da) &&
+        Array.isArray(bezeichnungen) &&
+        da.length === bezeichnungen.length
+      ) {
+        const outputs: DigitalOutput[] = da.map(
+          (status: number, index: number) => ({
+            id: index + 1,
+            label: bezeichnungen[index] || `Ausgang ${index + 1}`,
+            status: status === 1,
+          })
+        );
+
+        console.log("Dispatching setDigitalOutputs mit Werten:", outputs);
+        dispatch(setDigitalOutputs(outputs));
       } else {
-        console.error("Daten konnten nicht geladen werden.");
+        console.error("Digitale Ausgänge konnten nicht geladen werden.", {
+          da_state: da,
+          da_bezeichnung: bezeichnungen,
+        });
       }
-      setIsLoading(false);
     };
 
     script.onerror = () => {
       console.error("Fehler beim Laden der da.js-Datei.");
-      setIsLoading(false);
     };
 
     document.body.appendChild(script);
@@ -44,7 +65,7 @@ export function useDigitalOutputs() {
     return () => {
       document.body.removeChild(script);
     };
-  }, []);
+  }, [dispatch]);
 
-  return { digitalOutputs, isLoading, setDigitalOutputs };
+  return { digitalOutputs, isLoading };
 }

hooks/windowVariables/useLoadWindowVariables.ts

@@ -1,10 +1,9 @@
 // hooks/windowvariables/useLoadWindowVariables.ts
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
+import { setDigitalOutputs } from "../../redux/slices/digitalOutputsSlice";
 
-const requiredVars: string[] = [
-  // Hier verbleiben nur die noch benötigten Variablen
-];
+const requiredVars: string[] = ["win_da_state", "win_da_bezeichnung"];
 
 const scripts: string[] = [
   "da.js",
@@ -37,24 +36,29 @@ export const useLoadWindowVariables = () => {
   useEffect(() => {
     const loadVariables = async () => {
       try {
+        await loadScript("da.js"); // Lade `da.js` zuerst
         for (const script of scripts) {
-          await loadScript(script);
+          if (script !== "da.js") await loadScript(script);
         }
 
-        const variablesObj: { [key: string]: any } = requiredVars.reduce(
-          (acc, variable) => {
-            const winVar = (window as any)[variable];
-            if (winVar !== undefined) {
-              acc[variable.replace("win_", "")] = winVar;
-            }
-            return acc;
-          },
-          {}
-        );
+        console.log("Laden abgeschlossen. Jetzt werden Variablen geprüft.");
+        console.log("win_da_state:", window.win_da_state);
+        console.log("win_da_bezeichnung:", window.win_da_bezeichnung);
 
-        // Falls noch andere Variablen verarbeitet werden müssen, kann hier Code eingefügt werden
+        if (window.win_da_state && window.win_da_bezeichnung) {
+          const digitalOutputs = window.win_da_state.map(
+            (status: number, index: number) => ({
+              id: index + 1,
+              label: window.win_da_bezeichnung[index] || `Ausgang ${index + 1}`,
+              status: status === 1,
+            })
+          );
+
+          console.log("Dispatching digitalOutputs:", digitalOutputs);
+          dispatch(setDigitalOutputs(digitalOutputs));
+        }
       } catch (error) {
-        console.error("Fehler beim Laden der Skripte oder Variablen:", error);
+        console.error("Fehler beim Laden der Skripte:", error);
       }
     };