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

git commit -m "fix: Redux TypeScript Fehler behoben & automatische Mock-Daten Aktualisierung

Browse Source 
- 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!"
This commit is contained in:
Ismail Ali
2025-02-25 20:09:24 +01:00
parent 8c01dd3fc3
commit a641d3d100
9 changed files with 30 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts
View File

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

2
config/webVersion.ts
View File

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

32
data/mockdata/analogInputs.ts
View File

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

13
data/mockdata/types.ts
View File

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

80
data/mockdata/xioPm1Inputs.ts
View File

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

80
data/mockdata/xioPm2Inputs.ts
View File

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

2
public/CPLmockData/SERVICE/ae.js
View File

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

52
redux/slices/analogeEingaengeSlice.ts
View File

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

3
redux/store.ts
View File

@@ -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<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch; // ✅ Typisierte Dispatch-Funktion
export default store;