- Layout verbessert: Tabelle und Diagramm jetzt nebeneinander (grid-responsive) - Responsivität optimiert: Kein unnötiges horizontales Scrollen mehr - Diagramm verbessert: - Höhere Lesbarkeit mit stärkeren Linien und Abstand für Achsenbeschriftungen - Anpassung der Höhe und Breite für mobile & große Bildschirme - Tabelle optimiert: - Bessere Lesbarkeit mit größeren Abständen - Hover-Effekte für Zeilen - Dynamisches Spaltenlayout für kleine & große Bildschirme - Code aufgeräumt und verbessert Test auf verschiedenen Bildschirmgrößen erfolgreich!"
111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
// 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;
|
|
name: string;
|
|
uW: boolean;
|
|
uG: boolean;
|
|
oW: boolean;
|
|
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;
|
|
}
|
|
|
|
// Standardwert für einen Eingang
|
|
const defaultAnalogerEingang: AnalogerEingang = {
|
|
id: null,
|
|
value: null,
|
|
name: "",
|
|
uW: false,
|
|
uG: false,
|
|
oW: false,
|
|
oG: false,
|
|
};
|
|
|
|
// Initialer Zustand mit leeren Werten
|
|
const initialState: AnalogeEingaengeState = {
|
|
win_analogeEingaenge1: { ...defaultAnalogerEingang },
|
|
win_analogeEingaenge2: { ...defaultAnalogerEingang },
|
|
win_analogeEingaenge3: { ...defaultAnalogerEingang },
|
|
win_analogeEingaenge4: { ...defaultAnalogerEingang },
|
|
win_analogeEingaenge5: { ...defaultAnalogerEingang },
|
|
win_analogeEingaenge6: { ...defaultAnalogerEingang },
|
|
win_analogeEingaenge7: { ...defaultAnalogerEingang },
|
|
win_analogeEingaenge8: { ...defaultAnalogerEingang },
|
|
};
|
|
|
|
// Mock-Daten aus `window` laden
|
|
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]) => {
|
|
if (Array.isArray(value) && value.length === 7) {
|
|
data[key as keyof AnalogeEingaengeState] = {
|
|
id: value[0],
|
|
value: value[1],
|
|
name: value[2],
|
|
uW: value[3] === 1,
|
|
uG: value[4] === 1,
|
|
oW: value[5] === 1,
|
|
oG: value[6] === 1,
|
|
};
|
|
}
|
|
});
|
|
|
|
return data;
|
|
}
|
|
);
|
|
|
|
// Redux Slice
|
|
const analogeEingaengeSlice = createSlice({
|
|
name: "analogeEingaenge",
|
|
initialState,
|
|
reducers: {
|
|
setAnalogerEingang(
|
|
state,
|
|
action: PayloadAction<{
|
|
key: keyof AnalogeEingaengeState;
|
|
value: AnalogerEingang;
|
|
}>
|
|
) {
|
|
state[action.payload.key] = action.payload.value;
|
|
},
|
|
resetAnalogeEingaenge(state) {
|
|
Object.keys(state).forEach((key) => {
|
|
state[key as keyof AnalogeEingaengeState] = {
|
|
...defaultAnalogerEingang,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
extraReducers: (builder) => {
|
|
builder.addCase(loadFromWindow.fulfilled, (state, action) => {
|
|
Object.assign(state, action.payload);
|
|
});
|
|
},
|
|
});
|
|
|
|
export const { setAnalogerEingang, resetAnalogeEingaenge } =
|
|
analogeEingaengeSlice.actions;
|
|
|
|
export default analogeEingaengeSlice.reducer;
|