From f9c050417ebd40b4e898957ddfd4526dc5c6eb9d Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 20 Feb 2025 08:07:53 +0100 Subject: [PATCH] =?UTF-8?q?digitale=20Eing=C3=A4nge=20Redux=20Slice=20erst?= =?UTF-8?q?ellt=20f=C3=BCr=20mehr=20=C3=9Cbersicht?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/WindowVariablesInitializer.tsx | 58 ++++++++++++++ .../main/einausgaenge/DigitalInputs.tsx | 3 +- .../main/einausgaenge/DigitalOutputs.tsx | 3 +- config/webVersion.ts | 2 +- ...alInputData.ts => useDigitalInputsData.ts} | 2 +- ...talOutputs.ts => useDigitalOutputsData.ts} | 2 +- .../windowVariables/useLoadWindowVariables.ts | 77 +++++++++++++++++++ pages/_app.tsx | 3 + pages/einausgaenge.tsx | 8 +- pages/index.tsx | 2 + public/CPLmockData/SERVICE/de.js | 37 ++++++++- redux/slices/digitalInputsSlice.ts | 50 ++++++++++++ redux/store.ts | 2 + utils/loadWindowVariables.ts | 2 +- 14 files changed, 240 insertions(+), 11 deletions(-) create mode 100644 components/WindowVariablesInitializer.tsx rename hooks/einausgaenge/{useDigitalInputData.ts => useDigitalInputsData.ts} (95%) rename hooks/einausgaenge/{useDigitalOutputs.ts => useDigitalOutputsData.ts} (95%) create mode 100644 hooks/windowVariables/useLoadWindowVariables.ts create mode 100644 redux/slices/digitalInputsSlice.ts diff --git a/components/WindowVariablesInitializer.tsx b/components/WindowVariablesInitializer.tsx new file mode 100644 index 0000000..55850cd --- /dev/null +++ b/components/WindowVariablesInitializer.tsx @@ -0,0 +1,58 @@ +// components/WindowVariables/Initializer.tsx +"use client"; + +import { useEffect } from "react"; +import { useDispatch } from "react-redux"; +import { setInputs } from "../redux/slices/digitalInputsSlice"; + +const WindowVariablesInitializer = () => { + const dispatch = useDispatch(); + + useEffect(() => { + const loadScriptsAndInitialize = async () => { + try { + // Beispielhafter Ladevorgang eines Skripts + await loadScript("/CPLmockData/SERVICE/de.js"); + + // Zugriff auf window-Variablen nach dem Laden der Skripte + const winDeState = window.win_de_state || []; + const winDeLabel = window.win_de_label || []; + + const initialInputs = winDeState.map( + (status: number, index: number) => ({ + id: index + 1, + label: winDeLabel[index] || `Eingang ${index + 1}`, + status: status === 1, + }) + ); + + // Dispatch der Aktion zum Setzen der Inputs + dispatch(setInputs(initialInputs)); + } catch (error) { + console.error( + "Fehler beim Laden der Skripte oder Initialisieren der Inputs:", + error + ); + } + }; + + loadScriptsAndInitialize(); + }, [dispatch]); + + return null; +}; + +export default WindowVariablesInitializer; + +// Hilfsfunktion zum Laden eines Skripts +const loadScript = (src: string): Promise => { + return new Promise((resolve, reject) => { + const script = document.createElement("script"); + script.src = src; + script.async = true; + script.onload = () => resolve(); + script.onerror = () => + reject(new Error(`Fehler beim Laden des Skripts: ${src}`)); + document.head.appendChild(script); + }); +}; diff --git a/components/main/einausgaenge/DigitalInputs.tsx b/components/main/einausgaenge/DigitalInputs.tsx index db525a8..5d37538 100644 --- a/components/main/einausgaenge/DigitalInputs.tsx +++ b/components/main/einausgaenge/DigitalInputs.tsx @@ -1,4 +1,5 @@ -// components/main/einausgaenge/DigitalInputs.tsx +"use client"; // components/main/einausgaenge/DigitalInputs.tsx + import React from "react"; import { Icon } from "@iconify/react"; diff --git a/components/main/einausgaenge/DigitalOutputs.tsx b/components/main/einausgaenge/DigitalOutputs.tsx index 743cb19..69050b1 100644 --- a/components/main/einausgaenge/DigitalOutputs.tsx +++ b/components/main/einausgaenge/DigitalOutputs.tsx @@ -1,4 +1,5 @@ -// components/main/einausgaenge/DigitalOutputs.tsx +"use client"; // components/main/einausgaenge/DigitalOutputs.tsx + import React from "react"; import { Icon } from "@iconify/react"; diff --git a/config/webVersion.ts b/config/webVersion.ts index beffac1..0de0cb3 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.58"; +const webVersion = "1.6.59"; export default webVersion; diff --git a/hooks/einausgaenge/useDigitalInputData.ts b/hooks/einausgaenge/useDigitalInputsData.ts similarity index 95% rename from hooks/einausgaenge/useDigitalInputData.ts rename to hooks/einausgaenge/useDigitalInputsData.ts index 4686185..610d739 100644 --- a/hooks/einausgaenge/useDigitalInputData.ts +++ b/hooks/einausgaenge/useDigitalInputsData.ts @@ -1,4 +1,4 @@ -// hooks/useDigitalInputData.ts +"use client"; // hooks/einausgaenge/useDigitalInputsData.ts import { useEffect, useState } from "react"; export function useDigitalInputData() { diff --git a/hooks/einausgaenge/useDigitalOutputs.ts b/hooks/einausgaenge/useDigitalOutputsData.ts similarity index 95% rename from hooks/einausgaenge/useDigitalOutputs.ts rename to hooks/einausgaenge/useDigitalOutputsData.ts index 75f4bf6..82a5f21 100644 --- a/hooks/einausgaenge/useDigitalOutputs.ts +++ b/hooks/einausgaenge/useDigitalOutputsData.ts @@ -1,4 +1,4 @@ -// /hooks/einausgaenge/useDigitalOutputs.ts +"use client"; // /hooks/einausgaenge/useDigitalOutputsData.ts import { useState, useEffect } from "react"; // Definition des Typs für digitale Ausgänge diff --git a/hooks/windowVariables/useLoadWindowVariables.ts b/hooks/windowVariables/useLoadWindowVariables.ts new file mode 100644 index 0000000..95d3ce4 --- /dev/null +++ b/hooks/windowVariables/useLoadWindowVariables.ts @@ -0,0 +1,77 @@ +// hooks/windowvariables/useLoadWindowVariables.ts +import { useEffect } from "react"; +import { useDispatch } from "react-redux"; +import { setInputs } from "../../redux/slices/digitalInputsSlice"; + +const requiredVars: string[] = [ + // Liste der benötigten Variablennamen + "win_de_state", + "win_de_label", + // weitere Variablen... +]; + +const scripts: string[] = [ + "da.js", + "de.js", + "ae.js", + "kueData.js", + "Start.js", + "System.js", + "opcua.js", +]; + +const loadScript = (src: string): Promise => { + return new Promise((resolve, reject) => { + const script = document.createElement("script"); + const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production"; + script.src = + environment === "production" + ? `/CPL?/CPL/SERVICE/${src}` + : `/CPLmockData/SERVICE/${src}`; + script.async = true; + script.onload = () => resolve(); + script.onerror = () => reject(new Error(`Script load error: ${src}`)); + document.head.appendChild(script); + }); +}; + +export const useLoadWindowVariables = () => { + const dispatch = useDispatch(); + + useEffect(() => { + const loadVariables = async () => { + try { + for (const script of scripts) { + 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; + }, + {} + ); + + // Beispiel: Aktualisieren des Redux-Stores mit geladenen Variablen + if (variablesObj.de_state && variablesObj.de_label) { + const initialInputs = variablesObj.de_state.map( + (status: number, index: number) => ({ + id: index + 1, + label: variablesObj.de_label[index] || `Eingang ${index + 1}`, + status: status === 1, + }) + ); + dispatch(setInputs(initialInputs)); + } + } catch (error) { + console.error("Fehler beim Laden der Skripte oder Variablen:", error); + } + }; + + loadVariables(); + }, [dispatch]); +}; diff --git a/pages/_app.tsx b/pages/_app.tsx index 8b33c73..b077da4 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,3 +1,4 @@ +"use client"; // pages/_app.tsx import { useEffect, useState } from "react"; import { loadWindowVariables } from "../utils/loadWindowVariables"; @@ -9,6 +10,7 @@ import { Provider } from "react-redux"; import { setVariables } from "../redux/slices/variablesSlice"; import store from "../redux/store"; import { AppProps } from "next/app"; +import WindowVariablesInitializer from "../components/WindowVariablesInitializer"; function MyApp({ Component, pageProps }: AppProps) { const [sessionExpired, setSessionExpired] = useState(false); @@ -39,6 +41,7 @@ function MyApp({ Component, pageProps }: AppProps) { return ( +
diff --git a/pages/einausgaenge.tsx b/pages/einausgaenge.tsx index 7384e36..3e2c977 100644 --- a/pages/einausgaenge.tsx +++ b/pages/einausgaenge.tsx @@ -1,12 +1,12 @@ -// pages/einausgaenge.tsx -"use client"; +"use client"; // pages/einausgaenge.tsx + import React, { useState } from "react"; import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs"; 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"; +import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputsData"; +import { useDigitalOutputs } from "../hooks/einausgaenge/useDigitalOutputsData"; function EinAusgaenge() { // Verwendung des benutzerdefinierten Hooks für digitale Ausgänge diff --git a/pages/index.tsx b/pages/index.tsx index 89e34d1..404137f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { useEffect } from "react"; import { useRouter } from "next/router"; diff --git a/public/CPLmockData/SERVICE/de.js b/public/CPLmockData/SERVICE/de.js index b00f0bc..bf33d38 100644 --- a/public/CPLmockData/SERVICE/de.js +++ b/public/CPLmockData/SERVICE/de.js @@ -1,7 +1,42 @@ -var win_de = [ +// public/CPLmockData/SERVICE/de.js +var win_de_state = [ 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]; +var win_de_label = [ + "DE1", + "DE2", + "DE3", + "DE4", + "DE5", + "DE6", + "DE7", + "DE8", + "DE9", + "DE10", + "DE11", + "DE12", + "DE13", + "DE14", + "DE15", + "DE16", + "DE17", + "DE18", + "DE19", + "DE20", + "DE21", + "DE22", + "DE23", + "DE24", + "DE25", + "DE26", + "DE27", + "DE28", + "DE29", + "DE30", + "DE31", + "DE32", +]; var win_counter = [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, diff --git a/redux/slices/digitalInputsSlice.ts b/redux/slices/digitalInputsSlice.ts new file mode 100644 index 0000000..566b381 --- /dev/null +++ b/redux/slices/digitalInputsSlice.ts @@ -0,0 +1,50 @@ +// slices/digitalInputsSlice.ts +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; + +interface DigitalInput { + id: number; + label: string; + status: boolean; +} + +interface DigitalInputsState { + inputs: DigitalInput[]; +} + +const initialState: DigitalInputsState = { + inputs: [], // Initial leerer Zustand +}; + +const digitalInputsSlice = createSlice({ + name: "digitalInputs", + initialState, + reducers: { + setInputs: (state, action: PayloadAction) => { + state.inputs = action.payload; + }, + updateInputStatus: ( + state, + action: PayloadAction<{ id: number; status: boolean }> + ) => { + const { id, status } = action.payload; + const input = state.inputs.find((input) => input.id === id); + if (input) { + input.status = status; + } + }, + updateInputLabel: ( + state, + action: PayloadAction<{ id: number; label: string }> + ) => { + const { id, label } = action.payload; + const input = state.inputs.find((input) => input.id === id); + if (input) { + input.label = label; + } + }, + }, +}); + +export const { setInputs, updateInputStatus, updateInputLabel } = + digitalInputsSlice.actions; +export default digitalInputsSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts index a13dae2..cd51955 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -4,6 +4,7 @@ import authReducer from "./slices/authSlice"; import variablesReducer from "./slices/variablesSlice"; import chartDataReducer from "./slices/chartDataSlice"; import webVersionReducer from "./slices/webVersionSlice"; +import digitalInputsReducer from "./slices/digitalInputsSlice"; const store = configureStore({ reducer: { @@ -11,6 +12,7 @@ const store = configureStore({ variables: variablesReducer, chartData: chartDataReducer, webVersion: webVersionReducer, + digitalInputs: digitalInputsReducer, }, }); diff --git a/utils/loadWindowVariables.ts b/utils/loadWindowVariables.ts index f3a5df8..1df6c4a 100644 --- a/utils/loadWindowVariables.ts +++ b/utils/loadWindowVariables.ts @@ -19,7 +19,7 @@ export async function loadWindowVariables(): Promise { "win_systemZeit", "win_ntpTimezone", "win_ntpActive", - "win_de", + "win_de_state", "win_counter", "win_flutter", "win_kueOnline",