Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

digitale Eingänge Redux Slice erstellt für mehr Übersicht

Browse Source
This commit is contained in:
ISA
2025-02-20 08:07:53 +01:00
parent 4dab654856
commit f9c050417e
14 changed files with 240 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/WindowVariablesInitializer.tsx Normal file
View File

@@ -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<void> => {
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);
});
};

3
components/main/einausgaenge/DigitalInputs.tsx
View File

@@ -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";

3
components/main/einausgaenge/DigitalOutputs.tsx
View File

@@ -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";

2
config/webVersion.ts
View File

@@ -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;

2
hooks/einausgaenge/useDigitalInputData.ts → hooks/einausgaenge/useDigitalInputsData.ts
View File

@@ -1,4 +1,4 @@
// hooks/useDigitalInputData.ts
"use client"; // hooks/einausgaenge/useDigitalInputsData.ts
import { useEffect, useState } from "react";
export function useDigitalInputData() {

2
hooks/einausgaenge/useDigitalOutputs.ts → hooks/einausgaenge/useDigitalOutputsData.ts
View File

@@ -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

77
hooks/windowVariables/useLoadWindowVariables.ts Normal file
View File

@@ -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<void> => {
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]);
};

3
pages/_app.tsx
View File

@@ -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 (
<Provider store={store}>
<WindowVariablesInitializer />
<div className="flex flex-col h-screen overflow-hidden">
<Header />
<div className="flex flex-grow w-full">

8
pages/einausgaenge.tsx
View File

@@ -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

2
pages/index.tsx
View File

@@ -1,3 +1,5 @@
"use client";
import { useEffect } from "react";
import { useRouter } from "next/router";

37
public/CPLmockData/SERVICE/de.js
View File

@@ -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,

50
redux/slices/digitalInputsSlice.ts Normal file
View File

@@ -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<DigitalInput[]>) => {
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;

2
redux/store.ts
View File

@@ -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,
},
});

2
utils/loadWindowVariables.ts
View File

@@ -19,7 +19,7 @@ export async function loadWindowVariables(): Promise<WindowVariables> {
"win_systemZeit",
"win_ntpTimezone",
"win_ntpActive",
"win_de",
"win_de_state",
"win_counter",
"win_flutter",
"win_kueOnline",