diff --git a/components/main/uebersicht/Last20MessagesTable.tsx b/components/main/uebersicht/Last20MessagesTable.tsx index 710d032..1420328 100644 --- a/components/main/uebersicht/Last20MessagesTable.tsx +++ b/components/main/uebersicht/Last20MessagesTable.tsx @@ -1,13 +1,34 @@ -"use client"; -import React from "react"; -import { useSelector } from "react-redux"; +"use client"; // /components/main/uebersicht/Last20MessagesTable.tsx +import React, { useEffect } from "react"; +import { useSelector, useDispatch } from "react-redux"; import { RootState } from "../../../redux/store"; +import { setLast20Messages } from "../../../redux/slices/dashboardSlice"; const Last20MessagesTable: React.FC = () => { + const dispatch = useDispatch(); + + // Holt last20Messages aus Redux const rawLast20Messages = useSelector( - (state: RootState) => state.variables.last20Messages + (state: RootState) => state.dashboard.last20Messages ); + // Holt Daten aus `window.win_last20Messages` und speichert sie in Redux + useEffect(() => { + const loadWindowMessages = () => { + if (typeof window !== "undefined" && (window as any).win_last20Messages) { + dispatch(setLast20Messages((window as any).win_last20Messages)); + } + }; + + // Initialen Wert setzen + loadWindowMessages(); + + // Falls die Daten erst später geladen werden, überprüfe jede Sekunde + const interval = setInterval(loadWindowMessages, 1000); + + return () => clearInterval(interval); + }, [dispatch]); + // Hilfsfunktion zum Parsen der Nachrichten const parseMessages = (messages: string | null) => { if (typeof messages === "string") { diff --git a/redux/slices/dashboardSlice.ts b/redux/slices/dashboardSlice.ts new file mode 100644 index 0000000..8846ff2 --- /dev/null +++ b/redux/slices/dashboardSlice.ts @@ -0,0 +1,23 @@ +// /redux/slices/dashboardSlice.ts +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; + +interface DashboardState { + last20Messages: string | null; +} + +const initialState: DashboardState = { + last20Messages: null, +}; + +export const dashboardSlice = createSlice({ + name: "dashboard", + initialState, + reducers: { + setLast20Messages: (state, action: PayloadAction) => { + state.last20Messages = action.payload; + }, + }, +}); + +export const { setLast20Messages } = dashboardSlice.actions; +export default dashboardSlice.reducer; diff --git a/redux/slices/variablesSlice.ts b/redux/slices/variablesSlice.ts index 1b19b1d..3370796 100644 --- a/redux/slices/variablesSlice.ts +++ b/redux/slices/variablesSlice.ts @@ -14,7 +14,7 @@ export interface VariablesState { obereSchleifenGrenzwerte: number[]; schleifenintervall: number[]; //--------------- - last20Messages: string | null; + deviceName: string | null; mac1: string | null; ip: string | null; @@ -78,7 +78,7 @@ const initialState: VariablesState = { obereSchleifenGrenzwerte: [], schleifenintervall: [], //--------------- - last20Messages: null, + deviceName: null, mac1: null, ip: null, diff --git a/redux/store.ts b/redux/store.ts index be9ebac..e9028c9 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -6,6 +6,7 @@ import kueChartModeReducer from "./slices/kueChartModeSlice"; import webVersionReducer from "./slices/webVersionSlice"; import digitalInputsReducer from "./slices/digitalInputsSlice"; import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice"; +import dashboardReducer from "./slices/dashboardSlice"; const store = configureStore({ reducer: { @@ -15,6 +16,7 @@ const store = configureStore({ webVersion: webVersionReducer, digitalInputs: digitalInputsReducer, kabelueberwachungChart: kabelueberwachungChartReducer, + dashboard: dashboardReducer, }, });