From a641d3d10014943276c077abf0b95d839f5ceb09 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Tue, 25 Feb 2025 20:09:24 +0100 Subject: [PATCH] git commit -m "fix: Redux TypeScript Fehler behoben & automatische Mock-Daten Aktualisierung MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useAppDispatch in store.ts hinzugefügt, um AsyncThunkActions korrekt zu dispatchen - TypeScript-Fehler in useFetchAnalogeEingaenge.ts behoben - loadFromWindow wird jetzt regelmäßig neu geladen, um Änderungen in Mock-Daten zu übernehmen - UI aktualisiert sich automatisch, wenn sich Werte in ae.js ändern - Code-Struktur verbessert & Redux-Integration optimiert Test erfolgreich: Änderungen in ae.js werden nun direkt in der UI sichtbar!" --- .../hooks/useFetchAnalogeEingaenge.ts | 8 +- config/webVersion.ts | 2 +- data/mockdata/analogInputs.ts | 32 -------- data/mockdata/types.ts | 13 --- data/mockdata/xioPm1Inputs.ts | 80 ------------------- data/mockdata/xioPm2Inputs.ts | 80 ------------------- public/CPLmockData/SERVICE/ae.js | 2 +- redux/slices/analogeEingaengeSlice.ts | 52 +++++------- redux/store.ts | 3 +- 9 files changed, 30 insertions(+), 242 deletions(-) delete mode 100644 data/mockdata/analogInputs.ts delete mode 100644 data/mockdata/types.ts delete mode 100644 data/mockdata/xioPm1Inputs.ts delete mode 100644 data/mockdata/xioPm2Inputs.ts diff --git a/components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts b/components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts index f6117bf..235c081 100644 --- a/components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts +++ b/components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts @@ -1,23 +1,25 @@ // components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts import { useEffect } from "react"; -import { useDispatch } from "react-redux"; +import { useAppDispatch } from "../../../../redux/store"; // ✅ Typisierte Dispatch-Funktion verwenden import { loadFromWindow, setAnalogeEingaenge, } from "../../../../redux/slices/analogeEingaengeSlice"; export const useFetchAnalogeEingaenge = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); // ✅ Verwende die App-Dispatch-Funktion useEffect(() => { dispatch(loadFromWindow()); // Initial Mock-Daten aus `window` laden const interval = setInterval(async () => { try { + dispatch(loadFromWindow()); // 🔄 Mock-Daten regelmäßig neu laden + const response = await fetch("/api/get-embedded-data"); if (!response.ok) throw new Error("Fehler beim Abrufen der Daten"); const data = await response.json(); - dispatch(setAnalogeEingaenge(data)); + dispatch(setAnalogeEingaenge(data)); // ✅ API-Daten in Redux speichern } catch (error) { console.error("Fehler beim Abruf der Sensordaten:", error); } diff --git a/config/webVersion.ts b/config/webVersion.ts index 542cae4..a832c38 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.115"; +const webVersion = "1.6.116"; export default webVersion; diff --git a/data/mockdata/analogInputs.ts b/data/mockdata/analogInputs.ts deleted file mode 100644 index 02c7276..0000000 --- a/data/mockdata/analogInputs.ts +++ /dev/null @@ -1,32 +0,0 @@ -// /data/mockdata/analogInputs.ts -/** - Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden - */ -import { InputData } from "./types"; - -export const analogInputs: InputData[] = [ - { id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true }, - { - id: 2, - value: 22.91, - name: "Feuchtigkeit", - uW: true, - uG: true, - oW: true, - oG: false, - }, - { id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true }, - { id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true }, - { id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true }, - { - id: 6, - value: 21.0, - name: "Temperatur", - uW: true, - uG: true, - oW: false, - oG: false, - }, - { id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true }, - { id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true }, -]; diff --git a/data/mockdata/types.ts b/data/mockdata/types.ts deleted file mode 100644 index 3370a73..0000000 --- a/data/mockdata/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -// /data/mockdata/types.ts -/** - Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden - */ -export interface InputData { - id: number; - value: number; - name: string; - uW: boolean; - uG: boolean; - oW: boolean; - oG: boolean; -} diff --git a/data/mockdata/xioPm1Inputs.ts b/data/mockdata/xioPm1Inputs.ts deleted file mode 100644 index a5ef5d3..0000000 --- a/data/mockdata/xioPm1Inputs.ts +++ /dev/null @@ -1,80 +0,0 @@ -// /data/mockdata/xioPm1Inputs.ts -/** - Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden - */ -import { InputData } from "./types"; - -export const xioPm1Inputs: InputData[] = [ - { - id: 1, - value: 1.34, - name: "Test1", - uW: true, - uG: true, - oW: false, - oG: true, - }, - { - id: 2, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 3, - value: 7.94, - name: "----", - uW: false, - uG: true, - oW: true, - oG: true, - }, - { - id: 4, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 5, - value: 6.13, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 6, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 7, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 8, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, -]; diff --git a/data/mockdata/xioPm2Inputs.ts b/data/mockdata/xioPm2Inputs.ts deleted file mode 100644 index 588b8d0..0000000 --- a/data/mockdata/xioPm2Inputs.ts +++ /dev/null @@ -1,80 +0,0 @@ -// /data/mockdata/xioPm1Inputs.ts -/** - Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden - */ -import { InputData } from "./types"; - -export const xioPm2Inputs: InputData[] = [ - { - id: 1, - value: 1.34, - name: "Test1", - uW: true, - uG: true, - oW: false, - oG: true, - }, - { - id: 2, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 3, - value: 7.94, - name: "----", - uW: false, - uG: true, - oW: true, - oG: true, - }, - { - id: 4, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 5, - value: 6.13, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 6, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 7, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, - { - id: 8, - value: 7.94, - name: "----", - uW: true, - uG: true, - oW: true, - oG: true, - }, -]; diff --git a/public/CPLmockData/SERVICE/ae.js b/public/CPLmockData/SERVICE/ae.js index 8942ad8..d413caf 100644 --- a/public/CPLmockData/SERVICE/ae.js +++ b/public/CPLmockData/SERVICE/ae.js @@ -1,5 +1,5 @@ // public/CPLmockData/SERVICE/ae.js -var win_analogeEingaenge1 = [1, 0, "----", 1, 1, 0, 1]; // Eingang 1 +var win_analogeEingaenge1 = [1, 0, "Sensor1", 1, 1, 0, 1]; // Eingang 1 var win_analogeEingaenge2 = [2, 22.91, "Feuchtigkeit", 1, 1, 1, 0]; // Eingang 2 var win_analogeEingaenge3 = [3, 0, "----", 1, 1, 0, 1]; // Eingang 3 var win_analogeEingaenge4 = [4, 0, "----", 1, 1, 0, 1]; // Eingang 4 diff --git a/redux/slices/analogeEingaengeSlice.ts b/redux/slices/analogeEingaengeSlice.ts index c45a0bb..c2e3050 100644 --- a/redux/slices/analogeEingaengeSlice.ts +++ b/redux/slices/analogeEingaengeSlice.ts @@ -1,7 +1,6 @@ -// redux/slices/analogeEingaengeSlice.ts +// Redux Slice: redux/slices/analogeEingaengeSlice.ts import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit"; -// Typ für einen einzelnen analogen Eingang export interface AnalogerEingang { id: number | null; value: number | null; @@ -12,19 +11,11 @@ export interface AnalogerEingang { oG: boolean; } -// Typ für den Gesamt-State export interface AnalogeEingaengeState { - win_analogeEingaenge1: AnalogerEingang; - win_analogeEingaenge2: AnalogerEingang; - win_analogeEingaenge3: AnalogerEingang; - win_analogeEingaenge4: AnalogerEingang; - win_analogeEingaenge5: AnalogerEingang; - win_analogeEingaenge6: AnalogerEingang; - win_analogeEingaenge7: AnalogerEingang; - win_analogeEingaenge8: AnalogerEingang; + [key: string]: AnalogerEingang; } -// Standardwert für einen Eingang +// Standardwerte für Eingänge const defaultAnalogerEingang: AnalogerEingang = { id: null, value: null, @@ -35,7 +26,7 @@ const defaultAnalogerEingang: AnalogerEingang = { oG: false, }; -// Initialer Zustand mit leeren Werten +// Initialer Zustand const initialState: AnalogeEingaengeState = { win_analogeEingaenge1: { ...defaultAnalogerEingang }, win_analogeEingaenge2: { ...defaultAnalogerEingang }, @@ -47,19 +38,18 @@ const initialState: AnalogeEingaengeState = { win_analogeEingaenge8: { ...defaultAnalogerEingang }, }; -// Mock-Daten aus `window` laden +// Dynamisch Mock-Daten aus `window` abrufen export const loadFromWindow = createAsyncThunk( "analogeEingaenge/loadFromWindow", async () => { - const entries = Object.entries(window).filter(([key]) => - key.startsWith("win_analogeEingaenge") - ); - const data: Partial = {}; - entries.forEach(([key, value]) => { + for (let i = 1; i <= 8; i++) { + const key = `win_analogeEingaenge${i}`; + const value = (window as any)[key]; + if (Array.isArray(value) && value.length === 7) { - data[key as keyof AnalogeEingaengeState] = { + data[key] = { id: value[0], value: value[1], name: value[2], @@ -69,7 +59,7 @@ export const loadFromWindow = createAsyncThunk( oG: value[6] === 1, }; } - }); + } return data; } @@ -82,18 +72,18 @@ const analogeEingaengeSlice = createSlice({ reducers: { setAnalogerEingang( state, - action: PayloadAction<{ - key: keyof AnalogeEingaengeState; - value: AnalogerEingang; - }> + action: PayloadAction<{ key: string; value: AnalogerEingang }> ) { state[action.payload.key] = action.payload.value; }, - resetAnalogeEingaenge(state) { - Object.keys(state).forEach((key) => { - state[key as keyof AnalogeEingaengeState] = { - ...defaultAnalogerEingang, - }; + setAnalogeEingaenge( + state, + action: PayloadAction> + ) { + Object.entries(action.payload).forEach(([key, value]) => { + if (value) { + state[key] = value; + } }); }, }, @@ -104,7 +94,7 @@ const analogeEingaengeSlice = createSlice({ }, }); -export const { setAnalogerEingang, resetAnalogeEingaenge } = +export const { setAnalogerEingang, setAnalogeEingaenge } = analogeEingaengeSlice.actions; export default analogeEingaengeSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts index ae691df..de71d8e 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -1,5 +1,5 @@ -// redux/store.ts import { configureStore } from "@reduxjs/toolkit"; +import { useDispatch } from "react-redux"; import authReducer from "./slices/authSlice"; import variablesReducer from "./slices/variablesSlice"; import kueChartModeReducer from "./slices/kueChartModeSlice"; @@ -30,5 +30,6 @@ const store = configureStore({ export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; +export const useAppDispatch: () => AppDispatch = useDispatch; // ✅ Typisierte Dispatch-Funktion export default store;