Refaktorierung: Auslagerung der useEffect-Logik für digitale Ausgänge in benutzerdefinierten Hook

- Erstellte den Hook `useDigitalOutputs` in `/hooks/einausgaenge/useDigitalOutputs.ts`, der die `useEffect`-Logik zur Verwaltung der digitalen Ausgänge kapselt.
- Anpassung der `EinAusgaenge`-Komponente zur Nutzung des neuen Hooks für eine klarere und wiederverwendbare Struktur.

config/webVersion.ts

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

hooks/einausgaenge/useDigitalOutputs.ts

@@ -0,0 +1,50 @@
+// /hooks/einausgaenge/useDigitalOutputs.ts
+import { useState, useEffect } from "react";
+
+// Definition des Typs für digitale Ausgänge
+interface DigitalOutput {
+  id: number;
+  description: string;
+  toggle: boolean;
+}
+
+export function useDigitalOutputs() {
+  const [digitalOutputs, setDigitalOutputs] = useState<DigitalOutput[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  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;
+
+      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);
+      } else {
+        console.error("Daten konnten nicht geladen werden.");
+      }
+      setIsLoading(false);
+    };
+
+    script.onerror = () => {
+      console.error("Fehler beim Laden der da.js-Datei.");
+      setIsLoading(false);
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return { digitalOutputs, isLoading, setDigitalOutputs };
+}

pages/einausgaenge.tsx

@@ -1,25 +1,20 @@
-"use client"; // pages/einausgaenge.tsx
+// pages/einausgaenge.tsx
-import React, { useState, useEffect } from "react";
+"use client";
+import React, { useState } from "react";
 import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
-
-// Extend the Window interface to include win_da_state and win_da_bezeichnung
-declare global {
-  interface Window {
-    win_da_state: any;
-    win_da_bezeichnung: any;
-  }
-}
 import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
 import InputModal from "../components/main/einausgaenge/modals/InputModal";
 import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
 import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputData";
+import { useDigitalOutputs } from "../hooks/einausgaenge/useDigitalOutputs";
 
 function EinAusgaenge() {
-  // Zustand für digitale Ausgänge
+  // Verwendung des benutzerdefinierten Hooks für digitale Ausgänge
-  const [digitalOutputs, setDigitalOutputs] = useState<
+  const {
-    { id: number; description: string; toggle: boolean }[]
+    digitalOutputs,
-  >([]);
+    isLoading: isLoadingOutputs,
-  const [isLoadingOutputs, setIsLoadingOutputs] = useState(true);
+    setDigitalOutputs,
+  } = useDigitalOutputs();
 
   // Zustand für Modale
   const [selectedInput, setSelectedInput] = useState(null);
@@ -30,45 +25,8 @@ function EinAusgaenge() {
   // Laden der digitalen Eingänge
   const { mockData, isLoading: isLoadingInputs } = useDigitalInputData();
 
-  // 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) => {
+  const toggleSwitch = (id: number) => {
     setDigitalOutputs((prevOutputs) =>
       prevOutputs.map((output) =>
         output.id === id ? { ...output, toggle: !output.toggle } : output
@@ -77,7 +35,7 @@ function EinAusgaenge() {
   };
 
   // Funktionen zum Öffnen und Schließen der Modale
-  const openInputModal = (input) => {
+  const openInputModal = (input: any) => {
     setSelectedInput(input);
     setIsInputModalOpen(true);
   };
@@ -87,7 +45,7 @@ function EinAusgaenge() {
     setIsInputModalOpen(false);
   };
 
-  const openOutputModal = (output) => {
+  const openOutputModal = (output: any) => {
     setSelectedOutput(output);
     setIsOutputModalOpen(true);
   };
@@ -98,12 +56,14 @@ function EinAusgaenge() {
   };
 
   // Digitale Eingänge aus Mock-Daten generieren
-  const digitalInputs = mockData.win_de.map((status, index) => ({
+  const digitalInputs = mockData.win_de.map(
-    id: index + 1,
+    (status: number, index: number) => ({
-    status: status === 1 ? "active" : "inactive",
+      id: index + 1,
-    description: `DE${index + 1}`,
+      status: status === 1 ? "active" : "inactive",
-    isInverted: false,
+      description: `DE${index + 1}`,
-  }));
+      isInverted: false,
+    })
+  );
 
   const inputsGroup1 = digitalInputs.slice(0, 16);
   const inputsGroup2 = digitalInputs.slice(16);