diff --git a/config/webVersion.ts b/config/webVersion.ts index 0007ec2..beffac1 100644 --- a/config/webVersion.ts +++ b/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; diff --git a/hooks/einausgaenge/useDigitalOutputs.ts b/hooks/einausgaenge/useDigitalOutputs.ts new file mode 100644 index 0000000..75f4bf6 --- /dev/null +++ b/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([]); + 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 }; +} diff --git a/pages/einausgaenge.tsx b/pages/einausgaenge.tsx index 8caf35c..7384e36 100644 --- a/pages/einausgaenge.tsx +++ b/pages/einausgaenge.tsx @@ -1,25 +1,20 @@ -"use client"; // pages/einausgaenge.tsx -import React, { useState, useEffect } from "react"; +// pages/einausgaenge.tsx +"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 - const [digitalOutputs, setDigitalOutputs] = useState< - { id: number; description: string; toggle: boolean }[] - >([]); - const [isLoadingOutputs, setIsLoadingOutputs] = useState(true); + // Verwendung des benutzerdefinierten Hooks für digitale Ausgänge + const { + digitalOutputs, + isLoading: isLoadingOutputs, + 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) => ({ - id: index + 1, - status: status === 1 ? "active" : "inactive", - description: `DE${index + 1}`, - isInverted: false, - })); + const digitalInputs = mockData.win_de.map( + (status: number, index: number) => ({ + 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);