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

feat(redux): Rename all Redux slices and store keys to match file names for clarity

Browse Source 
- Renamed all slice names (createSlice `name` attribute) to match their file names (e.g. loopChartSlice, authSlice, kueDataSlice etc.)
- Updated `store.ts` to register each reducer with consistent key names (e.g. state.loopChartSlice instead of state.loopChart)
- Adjusted all `useSelector` and Redux state accesses across the codebase
- Improves maintainability, searchability and consistency across files and Redux DevTools
This commit is contained in:
ISA
2025-04-01 12:26:41 +02:00
parent 948bc0d5ea
commit 20e20dec30
41 changed files with 288 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/main/analogeEingaenge/AnalogInputsChart.tsx
View File

@@ -14,7 +14,7 @@ import {
export default function AnalogInputsChart() {
const analogInputs = useSelector(
(state: RootState) => state.analogeEingaenge
(state: RootState) => state.analogeEingaengeSlice
);
// Daten für das Diagramm vorbereiten

2
components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
View File

@@ -12,7 +12,7 @@ export default function AnalogeEingaengeTable() {
}, [dispatch]);
const analogeEingaenge = useSelector(
(state: RootState) => state.analogeEingaenge
(state: RootState) => state.analogeEingaengeSlice
);
const [selectedEingang, setSelectedEingang] = useState(null);

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

@@ -6,7 +6,7 @@ import { Icon } from "@iconify/react";
export default function DigitalInputs({ openInputModal }) {
const digitalInputs = useSelector(
(state: RootState) => state.digitalInputs.inputs
(state: RootState) => state.digitalInputsSlice.inputs
);
// **Gruppiere Eingänge in zwei Tabellen**

8
components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
View File

@@ -35,10 +35,10 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
// **Redux-States für aktive Messkurve (TDR oder Schleife)**
const activeMode = useSelector(
(state: RootState) => state.kueChartMode.activeMode
(state: RootState) => state.kueChartModeSlice.activeMode
);
const isFullScreen = useSelector(
(state: RootState) => state.kabelueberwachungChart.isFullScreen
(state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
);
// **Modal schließen + Redux-Status zurücksetzen**
@@ -60,7 +60,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
dispatch(setSelectedChartType(chartType));
};
//-------------------------------------
/*
useEffect(() => {
//dispatch(fetchAllTDRChartData()); // Erstes Laden
@@ -70,7 +70,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird
}, [dispatch]);
*/
//-------------------------------------
return (
<ReactModal

4
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
View File

@@ -20,10 +20,10 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
const dispatch = useDispatch();
const reduxVonDatum = useSelector(
(state: RootState) => state.kabelueberwachungChart.vonDatum
(state: RootState) => state.kabelueberwachungChartSlice.vonDatum
);
const reduxBisDatum = useSelector(
(state: RootState) => state.kabelueberwachungChart.bisDatum
(state: RootState) => state.kabelueberwachungChartSlice.bisDatum
);
const today = new Date();

2
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -25,7 +25,7 @@ const LoopChartActionBar: React.FC = () => {
isChartOpen,
slotNumber,
loopMeasurementCurveChartData,
} = useSelector((state: RootState) => state.kabelueberwachungChart);
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
/**
* API-URL-Erstellung für Entwicklung und Produktion

361
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -1,242 +1,149 @@
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useCallback, useEffect, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
"use client"; // components/main/Kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef, useState } from "react";
import {
ComposedChart,
XAxis,
YAxis,
CartesianGrid,
Chart as ChartJS,
LineElement,
PointElement,
LinearScale,
TimeScale,
Title,
Tooltip,
Legend,
ResponsiveContainer,
Line,
Brush,
} from "recharts";
import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
Filler,
ChartOptions,
} from "chart.js";
import zoomPlugin from "chartjs-plugin-zoom";
import "chartjs-adapter-date-fns";
import { Line } from "react-chartjs-2";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import CustomTooltip from "./CustomTooltip";
ChartJS.register(
LineElement,
PointElement,
LinearScale,
TimeScale,
Title,
Tooltip,
Legend,
Filler,
zoomPlugin
);
const LoopMeasurementChart = () => {
const dispatch = useDispatch();
const unit = useSelector(
(state: RootState) => state.kabelueberwachungChart.unit
);
const chartRef = useRef<any>(null);
const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
useSelector((state: RootState) => state.kabelueberwachungChartSlice);
const brushRange = useSelector((state: RootState) => state.brush);
const {
loopMeasurementCurveChartData,
selectedMode,
vonDatum,
bisDatum,
isFullScreen,
} = useSelector((state: RootState) => state.kabelueberwachungChart);
const [zoomed, setZoomed] = useState(false);
const formatierteDaten = useMemo(
() =>
loopMeasurementCurveChartData
.map((eintrag) => ({
zeit: new Date(eintrag.t).getTime(),
messwertMinimum: eintrag.i,
messwertMaximum: eintrag.a,
messwert: eintrag.m ?? null,
messwertDurchschnitt: ["DIA0", "DIA1", "DIA2"].includes(selectedMode)
? eintrag.g ?? null
: null,
}))
.reverse(),
[loopMeasurementCurveChartData, selectedMode]
);
useEffect(() => {
if (brushRange.endIndex === 0 && formatierteDaten.length) {
dispatch(
setBrushRange({
startIndex: 0,
endIndex: formatierteDaten.length - 1,
})
);
}
}, [formatierteDaten, brushRange.endIndex, dispatch]);
const handleBrushChange = useCallback(
({ startIndex, endIndex }: { startIndex?: number; endIndex?: number }) => {
if (startIndex === undefined || endIndex === undefined) return;
dispatch(
setBrushRange({
startIndex,
endIndex,
startDate: new Date(
formatierteDaten[startIndex]?.zeit || formatierteDaten[0].zeit
)
.toISOString()
.split("T")[0],
endDate: new Date(
formatierteDaten[endIndex]?.zeit ||
formatierteDaten[formatierteDaten.length - 1].zeit
)
.toISOString()
.split("T")[0],
})
);
},
[dispatch, formatierteDaten]
);
useEffect(() => {
if (formatierteDaten.length) {
const startIndex = formatierteDaten.findIndex(
(d) => new Date(d.zeit).toISOString().split("T")[0] === vonDatum
);
const endIndex = formatierteDaten.findIndex(
(d) => new Date(d.zeit).toISOString().split("T")[0] === bisDatum
);
if (startIndex !== -1 && endIndex !== -1) {
dispatch(
setBrushRange({
startIndex,
endIndex,
startDate: vonDatum,
endDate: bisDatum,
})
);
}
}
}, [vonDatum, bisDatum, formatierteDaten, dispatch]);
useEffect(() => {
if (formatierteDaten.length > 0) {
dispatch(
setBrushRange({
startIndex: 0,
endIndex: formatierteDaten.length - 1,
startDate: new Date(formatierteDaten[0].zeit)
.toISOString()
.split("T")[0],
endDate: new Date(formatierteDaten[formatierteDaten.length - 1].zeit)
.toISOString()
.split("T")[0],
})
);
}
}, [selectedMode, formatierteDaten, dispatch]);
const legendLabelMap: Record<string, string> = {
messwertMinimum: "Minimum",
messwert: "Messwert",
messwertMaximum: "Maximum",
messwertDurchschnitt: "Durchschnitt",
const data = {
labels: loopMeasurementCurveChartData
.map((entry) => new Date(entry.t))
.reverse(),
datasets: [
{
label: "Messwert Minimum",
data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
borderColor: "lightgrey",
borderWidth: 1,
fill: false,
pointRadius: 0,
},
{
label: "Messwert Maximum",
data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
borderColor: "lightgrey",
borderWidth: 1,
fill: false,
pointRadius: 0,
},
selectedMode === "DIA0"
? {
label: "Messwert",
data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
borderColor: "#00AEEF",
borderWidth: 2,
fill: false,
pointRadius: 2,
}
: {
label: "Messwert Durchschnitt",
data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
borderColor: "#00AEEF",
borderWidth: 2,
fill: false,
pointRadius: 2,
},
],
};
const options: ChartOptions<"line"> = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "top" as const,
},
tooltip: {
mode: "index",
intersect: false,
},
zoom: {
pan: {
enabled: true,
mode: "x",
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "x",
onZoomComplete: () => setZoomed(true),
},
limits: {
x: { min: "original", max: "original" },
y: { min: "original", max: "original" },
},
},
},
scales: {
x: {
type: "time",
time: {
unit: "day",
tooltipFormat: "dd.MM.yyyy HH:mm",
},
title: {
display: true,
text: "Zeit",
},
},
y: {
title: {
display: true,
text: unit,
},
ticks: {
precision: 0,
},
},
},
};
useEffect(() => {
if (!zoomed && chartRef.current) {
chartRef.current.resetZoom?.();
}
}, [loopMeasurementCurveChartData, selectedMode]);
return (
<div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
<ResponsiveContainer width="100%" height="100%">
<ComposedChart data={formatierteDaten} margin={{ right: 90, left: 20 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="zeit"
domain={["dataMin", "dataMax"]}
allowDataOverflow={true}
interval={Math.floor(formatierteDaten.length / 15)}
tickFormatter={(zeit) => {
const date = new Date(zeit);
return `${date.getDate()}.${date.getMonth() + 1}`;
}}
tick={(props) => {
const { x, y, payload } = props;
const date = new Date(payload.value);
return (
<text
x={x}
y={y}
dy={5}
textAnchor="end"
transform={`rotate(-25, ${x}, ${y})`}
>
{`${date.getDate()}.${date.getMonth() + 1}`}
</text>
);
}}
/>
<YAxis
label={{ value: unit, angle: -90, position: "insideLeft" }}
domain={["auto", "auto"]}
tickFormatter={(wert) => `${wert.toFixed(0)} `}
/>
<Tooltip content={<CustomTooltip unit={unit} />} />
<Legend
verticalAlign="top"
align="center"
content={({ payload }) => {
if (!payload) return null;
const orderedPayload = [...payload].sort((a, b) => {
const order = [
"messwertMinimum",
"messwert",
"messwertDurchschnitt",
"messwertMaximum",
];
return order.indexOf(a.value) - order.indexOf(b.value);
});
return (
<div
style={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
{orderedPayload.map((entry, index) => (
<span
key={index}
style={{ margin: "0 10px", color: entry.color }}
>
⬤ {legendLabelMap[entry.value] ?? entry.value}
</span>
))}
</div>
);
}}
/>
<Line
type="monotone"
dataKey="messwertMinimum"
stroke="lightgrey"
dot={false}
/>
<Line
type="monotone"
dataKey="messwertMaximum"
stroke="lightgrey"
dot={false}
/>
{["DIA1", "DIA2"].includes(selectedMode) && (
<Line
type="monotone"
dataKey="messwertDurchschnitt"
stroke="#00AEEF"
dot
/>
)}
{selectedMode === "DIA0" && (
<Line type="monotone" dataKey="messwert" stroke="#00AEEF" dot />
)}
<Brush
dataKey="zeit"
height={30}
stroke="#8884d8"
onChange={handleBrushChange}
startIndex={brushRange.startIndex}
endIndex={brushRange.endIndex || formatierteDaten.length - 1}
tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
/>
</ComposedChart>
</ResponsiveContainer>
<Line ref={chartRef} data={data} options={options} />
</div>
);
};

54
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/README.md Normal file
View File

@@ -0,0 +1,54 @@
### 🧭 Zoom-Verhalten beim Schleifen-/Isolationsdiagramm
In dieser Komponente wird das automatische Nachladen der Messwerte temporär deaktiviert, wenn der Benutzer per Maus in das Diagramm zoomt oder pannt. Nach 30 Sekunden ohne Zoom/Pan-Aktion wird die automatische Aktualisierung wieder aktiviert. Dieses Verhalten dient dazu, den Zoom-Zustand nicht durch neue Daten zu verlieren.
---
### 📁 Enthaltene Komponenten
- `LoopChartActionBar.tsx`
→ Auswahlleiste für Slot-Nummer, Zeitraum (über `DateRangePicker`), Messmodus (`DIA0`, `DIA1`, `DIA2`) und Slot-Typ (Schleife/Isolation).
→ Ruft alle 10 Sekunden neue Messdaten ab – außer der Zoom-Modus pausiert das.
- `LoopMeasurementChart.tsx`
→ Das eigentliche Liniendiagramm mit Chart.js + Zoom-Plugin.
→ Erkennt Zoom/Pan und setzt `chartUpdatePaused`, bis 30 Sekunden Inaktivität vergangen sind.
- `DateRangePicker.tsx`
→ Zeigt zwei Felder für Von-/Bis-Datum. Nutzt Redux, um globale Zeitfenster zu setzen.
- `CustomTooltip.tsx`
→ Zeigt beim Hover über die Kurve kontextbezogene Werte wie Messwert, Min, Max und Durchschnitt (DIA0/1/2).
---
### 🟢 UML-Aktivitätsdiagramm (Zoom → Pause → Timer → Auto-Update)
```mermaid
flowchart TD
Start([Start])
ZoomEvent[[Zoom oder Pan erkannt]]
SetPause[Setze chartUpdatePaused = true]
StartTimer[Starte 30s Timer]
Check[Timer abgelaufen?]
SetResume[Setze chartUpdatePaused = false]
FetchData[[Datenabruf wieder erlaubt]]
End([Ende])
Start --> ZoomEvent --> SetPause --> StartTimer --> Check
Check -- Nein --> StartTimer
Check -- Ja --> SetResume --> FetchData --> End
```
stateDiagram-v2
[*] --> AktualisierungAktiv
AktualisierungAktiv --> ZoomPause : Zoom/Pan erkannt
ZoomPause --> AktualisierungAktiv : 30 Sekunden Inaktivität
state AktualisierungAktiv {
[*] --> Normalbetrieb
}
state ZoomPause {
[*] --> CountdownLäuft
}

12
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
View File

@@ -20,16 +20,16 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
// 🟢 **Hole den ausgewählten Slot und Messkurve aus Redux**
const selectedId = useSelector(
(state: RootState) => state.tdrDataById.selectedId
(state: RootState) => state.tdrDataByIdSlice.selectedId
);
const selectedSlot = useSelector(
(state: RootState) => state.kueChartMode.selectedSlot
(state: RootState) => state.kueChartModeSlice.selectedSlot
);
const selectedChartType = useSelector(
(state: RootState) => state.kueChartMode.activeMode
(state: RootState) => state.kueChartModeSlice.activeMode
);
const tdrDataById = useSelector(
(state: RootState) => state.tdrDataById.dataById
(state: RootState) => state.tdrDataByIdSlice.dataById
);
//--------------------------------
const tdrInitialData =
@@ -46,7 +46,7 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
//--------------------------------
const referenceChartData = useSelector((state: RootState) =>
selectedSlot !== null
? state.tdrReferenceChartDataBySlot.referenceData[selectedSlot] || []
? state.tdrReferenceChartDataBySlotSlice.referenceData[selectedSlot] || []
: []
);
//--------------------------------
@@ -58,7 +58,7 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
//--------------------------------
const tdmChartData = useSelector(
(state: RootState) => state.tdmSingleChart.data
(state: RootState) => state.tdmSingleChartSlice.data
);
const pinDistance =
selectedId !== null && Array.isArray(tdmChartData?.[selectedSlot ?? -1])

6
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
View File

@@ -13,18 +13,18 @@ const TDRChartActionBar: React.FC = () => {
// ✅ Redux: selectedSlot aus kueChartMode (0-basiert)
const selectedSlot = useSelector(
(state: RootState) => state.kueChartMode.selectedSlot
(state: RootState) => state.kueChartModeSlice.selectedSlot
);
const tdmChartData = useSelector(
(state: RootState) => state.tdmSingleChart.data
(state: RootState) => state.tdmSingleChartSlice.data
);
const idsForSlot =
selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];
const tdrDataById = useSelector(
(state: RootState) => state.tdrDataById.dataById
(state: RootState) => state.tdrDataByIdSlice.dataById
);
const [selectedId, setSelectedId] = useState<number | null>(null);
const currentChartData = selectedId !== null ? tdrDataById[selectedId] : [];

8
components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
View File

@@ -37,7 +37,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
`Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
); */
const selectedChartData = useSelector(
(state: RootState) => state.selectedChartData.selectedChartData
(state: RootState) => state.selectedChartDataSlice.selectedChartData
);
const dispatch = useDispatch();
@@ -77,7 +77,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
kueAlarm2: kueAlarm2Raw,
kueOverflow: kueOverflowRaw,
kuePSTmMinus96V, // <- richtig, weil so im State vorhanden
} = useSelector((state: RootState) => state.kueData);
} = useSelector((state: RootState) => state.kueDataSlice);
//---------------------------------------------
const kueCableBreak = useMemo(
@@ -140,7 +140,9 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
);
//---------------------------------
//---------------------------------
const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
const tdmChartData = useSelector(
(state: RootState) => state.tdmChartSlice.data
);
const latestTdrDistanceMeters =
Array.isArray(tdmChartData?.[slotIndex]) &&
tdmChartData[slotIndex].length > 0 &&

4
components/main/kabelueberwachung/kue705FO/KueModal.tsx
View File

@@ -23,7 +23,7 @@ function KueModal({
onModulNameChange,
}: KueModalProps): JSX.Element {
const isAdminLoggedIn = useSelector(
(state: any) => state.auth.isAdminLoggedIn
(state: any) => state.authSlice.isAdminLoggedIn
);
const [isAdmin, setIsAdmin] = useState(false);
const dispatch = useDispatch();
@@ -61,7 +61,7 @@ function KueModal({
kueLimit2Low,
kueLimit2High,
kueLoopInterval,
} = useSelector((state: any) => state.kueData);
} = useSelector((state: any) => state.kueDataSlice);
const handleSaveWrapper = () => {
handleSave({

2
components/main/settingsPageComponents/GeneralSettings.tsx
View File

@@ -15,7 +15,7 @@ import { fetchSystemSettingsThunk } from "../../../redux/thunks/fetchSystemSetti
const GeneralSettings: React.FC = () => {
const dispatch = useDispatch<AppDispatch>();
const systemSettings = useSelector(
(state: RootState) => state.systemSettings
(state: RootState) => state.systemSettingsSlice
);
const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true);

4
components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
View File

@@ -12,7 +12,9 @@ import {
export default function OPCUAInterfaceSettings() {
const dispatch = useDispatch();
const opcuaSettings = useSelector((state: RootState) => state.opcuaSettings);
const opcuaSettings = useSelector(
(state: RootState) => state.opcuaSettingsSlice
);
// Lokale Zustände für das neue Benutzerformular
const [newUsername, setNewUsername] = useState("");

2
components/main/uebersicht/Baugruppentraeger.tsx
View File

@@ -18,7 +18,7 @@ const Baugruppentraeger: React.FC = () => {
kueAlarm1,
kueAlarm2,
kueGroundFault,
} = useSelector((state: RootState) => state.kueData);
} = useSelector((state: RootState) => state.kueDataSlice);
// `kueOnline` sicherstellen, dass es nur Zahlen enthält
const kueOnline = useMemo(

2
components/main/uebersicht/Last20MessagesTable.tsx
View File

@@ -9,7 +9,7 @@ const Last20MessagesTable: React.FC = () => {
// Holt last20Messages aus Redux
const rawLast20Messages = useSelector(
(state: RootState) => state.last20Messages.last20Messages
(state: RootState) => state.last20MessagesSlice.last20Messages
);
// Holt Daten aus `window.win_last20Messages` und speichert sie in Redux

14
components/main/uebersicht/NetworkInfo.tsx
View File

@@ -15,19 +15,21 @@ const NetworkInfo: React.FC = () => {
}, [dispatch]);
// Werte direkt aus Redux holen
const ip =
useSelector((state: RootState) => state.systemSettings.ip) || "Unbekannt";
useSelector((state: RootState) => state.systemSettingsSlice.ip) ||
"Unbekannt";
const subnet =
useSelector((state: RootState) => state.systemSettings.subnet) ||
useSelector((state: RootState) => state.systemSettingsSlice.subnet) ||
"Unbekannt";
const gateway =
useSelector((state: RootState) => state.systemSettings.gateway) ||
useSelector((state: RootState) => state.systemSettingsSlice.gateway) ||
"Unbekannt";
const opcUaZustandRaw = useSelector(
(state: RootState) => state.opcuaSettings.opcUaZustand
(state: RootState) => state.opcuaSettingsSlice.opcUaZustand
);
const opcUaNodesetName =
useSelector((state: RootState) => state.opcuaSettings.opcUaNodesetName) ||
"Unbekannt";
useSelector(
(state: RootState) => state.opcuaSettingsSlice.opcUaNodesetName
) || "Unbekannt";
// OPC-UA Zustand in lesbaren Text umwandeln
const opcUaZustand =
Number(opcUaZustandRaw) === 1

4
components/main/uebersicht/VersionInfo.tsx
View File

@@ -6,10 +6,10 @@ import { RootState } from "../../../redux/store";
const VersionInfo: React.FC = () => {
const appVersion =
useSelector((state: RootState) => state.systemSettings.appVersion) ||
useSelector((state: RootState) => state.systemSettingsSlice.appVersion) ||
"Unbekannt";
const webVersion = useSelector(
(state: RootState) => state.webVersion.version
(state: RootState) => state.webVersionSlice.version
); // Webversion aus Redux holen
return (