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/header/Header.tsx
View File

@@ -54,7 +54,7 @@ function Header() {
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const deviceName = useSelector( const deviceName = useSelector(
(state: RootState) => state.systemSettings.deviceName (state: RootState) => state.systemSettingsSlice.deviceName
); );
useEffect(() => { useEffect(() => {

24
components/header/settingsModal/SettingsModal.tsx
View File

@@ -29,35 +29,37 @@ function SettingModal({ showModal, onClose }) {
const [showLoginForm, setShowLoginForm] = useState(false); const [showLoginForm, setShowLoginForm] = useState(false);
const deviceName_Redux = useSelector( const deviceName_Redux = useSelector(
(state: RootState) => state.systemSettings.deviceName (state: RootState) => state.systemSettingsSlice.deviceName
); );
const mac1_Redux = useSelector( const mac1_Redux = useSelector(
(state: RootState) => state.systemSettings.mac1 (state: RootState) => state.systemSettingsSlice.mac1
);
const ip_Redux = useSelector(
(state: RootState) => state.systemSettingsSlice.ip
); );
const ip_Redux = useSelector((state: RootState) => state.systemSettings.ip);
const subnet_Redux = useSelector( const subnet_Redux = useSelector(
(state: RootState) => state.systemSettings.subnet (state: RootState) => state.systemSettingsSlice.subnet
); );
const gateway_Redux = useSelector( const gateway_Redux = useSelector(
(state: RootState) => state.systemSettings.gateway (state: RootState) => state.systemSettingsSlice.gateway
); );
const datetime_Redux = useSelector( const datetime_Redux = useSelector(
(state: RootState) => state.systemSettings.cplInternalTimestamp (state: RootState) => state.systemSettingsSlice.cplInternalTimestamp
); );
const ntp1_Redux = useSelector( const ntp1_Redux = useSelector(
(state: RootState) => state.systemSettings.ntp1 (state: RootState) => state.systemSettingsSlice.ntp1
); );
const ntp2_Redux = useSelector( const ntp2_Redux = useSelector(
(state: RootState) => state.systemSettings.ntp2 (state: RootState) => state.systemSettingsSlice.ntp2
); );
const ntp3_Redux = useSelector( const ntp3_Redux = useSelector(
(state: RootState) => state.systemSettings.ntp3 (state: RootState) => state.systemSettingsSlice.ntp3
); );
const ntpTimezone_Redux = useSelector( const ntpTimezone_Redux = useSelector(
(state: RootState) => state.systemSettings.ntpTimezone (state: RootState) => state.systemSettingsSlice.ntpTimezone
); );
const active_Redux = useSelector( const active_Redux = useSelector(
(state: RootState) => state.systemSettings.ntpActive (state: RootState) => state.systemSettingsSlice.ntpActive
); );
const [name, setName] = useState(deviceName_Redux || ""); const [name, setName] = useState(deviceName_Redux || "");

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

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

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

@@ -12,7 +12,7 @@ export default function AnalogeEingaengeTable() {
}, [dispatch]); }, [dispatch]);
const analogeEingaenge = useSelector( const analogeEingaenge = useSelector(
(state: RootState) => state.analogeEingaenge (state: RootState) => state.analogeEingaengeSlice
); );
const [selectedEingang, setSelectedEingang] = useState(null); 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 }) { export default function DigitalInputs({ openInputModal }) {
const digitalInputs = useSelector( const digitalInputs = useSelector(
(state: RootState) => state.digitalInputs.inputs (state: RootState) => state.digitalInputsSlice.inputs
); );
// **Gruppiere Eingänge in zwei Tabellen** // **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)** // **Redux-States für aktive Messkurve (TDR oder Schleife)**
const activeMode = useSelector( const activeMode = useSelector(
(state: RootState) => state.kueChartMode.activeMode (state: RootState) => state.kueChartModeSlice.activeMode
); );
const isFullScreen = useSelector( const isFullScreen = useSelector(
(state: RootState) => state.kabelueberwachungChart.isFullScreen (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
); );
// **Modal schließen + Redux-Status zurücksetzen** // **Modal schließen + Redux-Status zurücksetzen**
@@ -60,7 +60,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
dispatch(setSelectedChartType(chartType)); dispatch(setSelectedChartType(chartType));
}; };
//------------------------------------- //-------------------------------------
/*
useEffect(() => { useEffect(() => {
//dispatch(fetchAllTDRChartData()); // Erstes Laden //dispatch(fetchAllTDRChartData()); // Erstes Laden
@@ -70,7 +70,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird
}, [dispatch]); }, [dispatch]);
*/
//------------------------------------- //-------------------------------------
return ( return (
<ReactModal <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 dispatch = useDispatch();
const reduxVonDatum = useSelector( const reduxVonDatum = useSelector(
(state: RootState) => state.kabelueberwachungChart.vonDatum (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
); );
const reduxBisDatum = useSelector( const reduxBisDatum = useSelector(
(state: RootState) => state.kabelueberwachungChart.bisDatum (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
); );
const today = new Date(); const today = new Date();

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

@@ -25,7 +25,7 @@ const LoopChartActionBar: React.FC = () => {
isChartOpen, isChartOpen,
slotNumber, slotNumber,
loopMeasurementCurveChartData, loopMeasurementCurveChartData,
} = useSelector((state: RootState) => state.kabelueberwachungChart); } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
/** /**
* API-URL-Erstellung für Entwicklung und Produktion * 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 "use client"; // components/main/Kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useCallback, useEffect, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux"; import React, { useEffect, useRef, useState } from "react";
import { RootState } from "../../../../../../redux/store";
import { import {
ComposedChart, Chart as ChartJS,
XAxis, LineElement,
YAxis, PointElement,
CartesianGrid, LinearScale,
TimeScale,
Title,
Tooltip, Tooltip,
Legend, Legend,
ResponsiveContainer, Filler,
Line, ChartOptions,
Brush, } from "chart.js";
} from "recharts"; import zoomPlugin from "chartjs-plugin-zoom";
import { setBrushRange } from "../../../../../../redux/slices/brushSlice"; 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 LoopMeasurementChart = () => {
const dispatch = useDispatch(); const chartRef = useRef<any>(null);
const unit = useSelector( const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
(state: RootState) => state.kabelueberwachungChart.unit useSelector((state: RootState) => state.kabelueberwachungChartSlice);
);
const brushRange = useSelector((state: RootState) => state.brush); const [zoomed, setZoomed] = useState(false);
const {
loopMeasurementCurveChartData,
selectedMode,
vonDatum,
bisDatum,
isFullScreen,
} = useSelector((state: RootState) => state.kabelueberwachungChart);
const formatierteDaten = useMemo( const data = {
() => labels: loopMeasurementCurveChartData
loopMeasurementCurveChartData .map((entry) => new Date(entry.t))
.map((eintrag) => ({ .reverse(),
zeit: new Date(eintrag.t).getTime(), datasets: [
messwertMinimum: eintrag.i, {
messwertMaximum: eintrag.a, label: "Messwert Minimum",
messwert: eintrag.m ?? null, data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
messwertDurchschnitt: ["DIA0", "DIA1", "DIA2"].includes(selectedMode) borderColor: "lightgrey",
? eintrag.g ?? null borderWidth: 1,
: null, fill: false,
})) pointRadius: 0,
.reverse(), },
[loopMeasurementCurveChartData, selectedMode] {
); label: "Messwert Maximum",
data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
useEffect(() => { borderColor: "lightgrey",
if (brushRange.endIndex === 0 && formatierteDaten.length) { borderWidth: 1,
dispatch( fill: false,
setBrushRange({ pointRadius: 0,
startIndex: 0, },
endIndex: formatierteDaten.length - 1, selectedMode === "DIA0"
}) ? {
); label: "Messwert",
} data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
}, [formatierteDaten, brushRange.endIndex, dispatch]); borderColor: "#00AEEF",
borderWidth: 2,
const handleBrushChange = useCallback( fill: false,
({ startIndex, endIndex }: { startIndex?: number; endIndex?: number }) => { pointRadius: 2,
if (startIndex === undefined || endIndex === undefined) return; }
: {
dispatch( label: "Messwert Durchschnitt",
setBrushRange({ data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
startIndex, borderColor: "#00AEEF",
endIndex, borderWidth: 2,
startDate: new Date( fill: false,
formatierteDaten[startIndex]?.zeit || formatierteDaten[0].zeit pointRadius: 2,
) },
.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 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 ( return (
<div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}> <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
<ResponsiveContainer width="100%" height="100%"> <Line ref={chartRef} data={data} options={options} />
<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>
</div> </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** // 🟢 **Hole den ausgewählten Slot und Messkurve aus Redux**
const selectedId = useSelector( const selectedId = useSelector(
(state: RootState) => state.tdrDataById.selectedId (state: RootState) => state.tdrDataByIdSlice.selectedId
); );
const selectedSlot = useSelector( const selectedSlot = useSelector(
(state: RootState) => state.kueChartMode.selectedSlot (state: RootState) => state.kueChartModeSlice.selectedSlot
); );
const selectedChartType = useSelector( const selectedChartType = useSelector(
(state: RootState) => state.kueChartMode.activeMode (state: RootState) => state.kueChartModeSlice.activeMode
); );
const tdrDataById = useSelector( const tdrDataById = useSelector(
(state: RootState) => state.tdrDataById.dataById (state: RootState) => state.tdrDataByIdSlice.dataById
); );
//-------------------------------- //--------------------------------
const tdrInitialData = const tdrInitialData =
@@ -46,7 +46,7 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
//-------------------------------- //--------------------------------
const referenceChartData = useSelector((state: RootState) => const referenceChartData = useSelector((state: RootState) =>
selectedSlot !== null selectedSlot !== null
? state.tdrReferenceChartDataBySlot.referenceData[selectedSlot] || [] ? state.tdrReferenceChartDataBySlotSlice.referenceData[selectedSlot] || []
: [] : []
); );
//-------------------------------- //--------------------------------
@@ -58,7 +58,7 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
//-------------------------------- //--------------------------------
const tdmChartData = useSelector( const tdmChartData = useSelector(
(state: RootState) => state.tdmSingleChart.data (state: RootState) => state.tdmSingleChartSlice.data
); );
const pinDistance = const pinDistance =
selectedId !== null && Array.isArray(tdmChartData?.[selectedSlot ?? -1]) 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) // ✅ Redux: selectedSlot aus kueChartMode (0-basiert)
const selectedSlot = useSelector( const selectedSlot = useSelector(
(state: RootState) => state.kueChartMode.selectedSlot (state: RootState) => state.kueChartModeSlice.selectedSlot
); );
const tdmChartData = useSelector( const tdmChartData = useSelector(
(state: RootState) => state.tdmSingleChart.data (state: RootState) => state.tdmSingleChartSlice.data
); );
const idsForSlot = const idsForSlot =
selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : []; selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];
const tdrDataById = useSelector( const tdrDataById = useSelector(
(state: RootState) => state.tdrDataById.dataById (state: RootState) => state.tdrDataByIdSlice.dataById
); );
const [selectedId, setSelectedId] = useState<number | null>(null); const [selectedId, setSelectedId] = useState<number | null>(null);
const currentChartData = selectedId !== null ? tdrDataById[selectedId] : []; 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}` `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
); */ ); */
const selectedChartData = useSelector( const selectedChartData = useSelector(
(state: RootState) => state.selectedChartData.selectedChartData (state: RootState) => state.selectedChartDataSlice.selectedChartData
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -77,7 +77,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
kueAlarm2: kueAlarm2Raw, kueAlarm2: kueAlarm2Raw,
kueOverflow: kueOverflowRaw, kueOverflow: kueOverflowRaw,
kuePSTmMinus96V, // <- richtig, weil so im State vorhanden kuePSTmMinus96V, // <- richtig, weil so im State vorhanden
} = useSelector((state: RootState) => state.kueData); } = useSelector((state: RootState) => state.kueDataSlice);
//--------------------------------------------- //---------------------------------------------
const kueCableBreak = useMemo( 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 = const latestTdrDistanceMeters =
Array.isArray(tdmChartData?.[slotIndex]) && Array.isArray(tdmChartData?.[slotIndex]) &&
tdmChartData[slotIndex].length > 0 && tdmChartData[slotIndex].length > 0 &&

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

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

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

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

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

@@ -12,7 +12,9 @@ import {
export default function OPCUAInterfaceSettings() { export default function OPCUAInterfaceSettings() {
const dispatch = useDispatch(); 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 // Lokale Zustände für das neue Benutzerformular
const [newUsername, setNewUsername] = useState(""); const [newUsername, setNewUsername] = useState("");

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

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

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

@@ -9,7 +9,7 @@ const Last20MessagesTable: React.FC = () => {
// Holt last20Messages aus Redux // Holt last20Messages aus Redux
const rawLast20Messages = useSelector( const rawLast20Messages = useSelector(
(state: RootState) => state.last20Messages.last20Messages (state: RootState) => state.last20MessagesSlice.last20Messages
); );
// Holt Daten aus `window.win_last20Messages` und speichert sie in Redux // 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]); }, [dispatch]);
// Werte direkt aus Redux holen // Werte direkt aus Redux holen
const ip = const ip =
useSelector((state: RootState) => state.systemSettings.ip) || "Unbekannt"; useSelector((state: RootState) => state.systemSettingsSlice.ip) ||
"Unbekannt";
const subnet = const subnet =
useSelector((state: RootState) => state.systemSettings.subnet) || useSelector((state: RootState) => state.systemSettingsSlice.subnet) ||
"Unbekannt"; "Unbekannt";
const gateway = const gateway =
useSelector((state: RootState) => state.systemSettings.gateway) || useSelector((state: RootState) => state.systemSettingsSlice.gateway) ||
"Unbekannt"; "Unbekannt";
const opcUaZustandRaw = useSelector( const opcUaZustandRaw = useSelector(
(state: RootState) => state.opcuaSettings.opcUaZustand (state: RootState) => state.opcuaSettingsSlice.opcUaZustand
); );
const opcUaNodesetName = const opcUaNodesetName =
useSelector((state: RootState) => state.opcuaSettings.opcUaNodesetName) || useSelector(
"Unbekannt"; (state: RootState) => state.opcuaSettingsSlice.opcUaNodesetName
) || "Unbekannt";
// OPC-UA Zustand in lesbaren Text umwandeln // OPC-UA Zustand in lesbaren Text umwandeln
const opcUaZustand = const opcUaZustand =
Number(opcUaZustandRaw) === 1 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 VersionInfo: React.FC = () => {
const appVersion = const appVersion =
useSelector((state: RootState) => state.systemSettings.appVersion) || useSelector((state: RootState) => state.systemSettingsSlice.appVersion) ||
"Unbekannt"; "Unbekannt";
const webVersion = useSelector( const webVersion = useSelector(
(state: RootState) => state.webVersion.version (state: RootState) => state.webVersionSlice.version
); // Webversion aus Redux holen ); // Webversion aus Redux holen
return ( return (

10
pages/kabelueberwachung.tsx
View File

@@ -25,14 +25,14 @@ function Kabelueberwachung() {
kueResidence, kueResidence,
kueCableBreak, kueCableBreak,
kueGroundFault, kueGroundFault,
} = useSelector((state) => state.kueData); } = useSelector((state) => state.kueDataSlice);
//---------------------------------------------------------------- //----------------------------------------------------------------
// 🚀 **TDR-Daten bereits in Redux abrufen** // 🚀 **TDR-Daten bereits in Redux abrufen**
// Redux-Variablen abrufen // Redux-Variablen abrufen
const tdrData = useSelector((state) => state.tdrChart.data); const tdrData = useSelector((state) => state.tdrChartSlice.data);
const loading = useSelector((state) => state.tdrChart.loading); const loading = useSelector((state) => state.tdrChartSlice.loading);
const error = useSelector((state) => state.tdrChart.error); const error = useSelector((state) => state.tdrChartSlice.error);
//---------------------------------------------------------------- //----------------------------------------------------------------
//---------------------------------------------------------------- //----------------------------------------------------------------
@@ -110,7 +110,7 @@ function Kabelueberwachung() {
data: loopData, data: loopData,
loading: loopLoading, loading: loopLoading,
error: loopError, error: loopError,
} = useSelector((state: RootState) => state.loopChart); } = useSelector((state: RootState) => state.loopChartSlice);
// Zugriff z. B. auf Schleifenwiderstand von DIA1 // Zugriff z. B. auf Schleifenwiderstand von DIA1
const dia1Schleifen = loopData["DIA1"]?.[4]; const dia1Schleifen = loopData["DIA1"]?.[4];

2
redux/slices/analogeEingaengeSlice.ts
View File

@@ -68,7 +68,7 @@ export const loadFromWindow = createAsyncThunk(
// Redux Slice // Redux Slice
const analogeEingaengeSlice = createSlice({ const analogeEingaengeSlice = createSlice({
name: "analogeEingaenge", name: "analogeEingaengeSlice",
initialState, initialState,
reducers: { reducers: {
setAnalogerEingang( setAnalogerEingang(

2
redux/slices/authSlice.ts
View File

@@ -2,7 +2,7 @@
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
const authSlice = createSlice({ const authSlice = createSlice({
name: "auth", name: "authSlice",
initialState: { initialState: {
isAdminLoggedIn: false, isAdminLoggedIn: false,
users: { users: {

2
redux/slices/digitalInputsSlice.ts
View File

@@ -18,7 +18,7 @@ const initialState: DigitalInputsState = {
}; };
const digitalInputsSlice = createSlice({ const digitalInputsSlice = createSlice({
name: "digitalInputs", name: "digitalInputsSlice",
initialState, initialState,
reducers: { reducers: {
setInputs: (state, action: PayloadAction<DigitalInput[]>) => { setInputs: (state, action: PayloadAction<DigitalInput[]>) => {

2
redux/slices/digitalOutputsSlice.ts
View File

@@ -19,7 +19,7 @@ const initialState: DigitalOutputsState = {
// Slice erstellen // Slice erstellen
const digitalOutputsSlice = createSlice({ const digitalOutputsSlice = createSlice({
name: "digitalOutputs", name: "digitalOutputsSlice",
initialState, initialState,
reducers: { reducers: {
setDigitalOutputs(state, action: PayloadAction<DigitalOutput[]>) { setDigitalOutputs(state, action: PayloadAction<DigitalOutput[]>) {

2
redux/slices/kabelueberwachungChartSlice.ts
View File

@@ -43,7 +43,7 @@ const initialState: KabelueberwachungChartState = {
// Erstellung des Slices // Erstellung des Slices
const kabelueberwachungChartSlice = createSlice({ const kabelueberwachungChartSlice = createSlice({
name: "kabelueberwachungChart", name: "kabelueberwachungChartSlice",
initialState, initialState,
reducers: { reducers: {
setSlotNumber: (state, action: PayloadAction<number | null>) => { setSlotNumber: (state, action: PayloadAction<number | null>) => {

2
redux/slices/kueChartModeSlice.ts
View File

@@ -12,7 +12,7 @@ const initialState: KueChartModeState = {
}; };
export const kueChartModeSlice = createSlice({ export const kueChartModeSlice = createSlice({
name: "kueChartMode", name: "kueChartModeSlice",
initialState, initialState,
reducers: { reducers: {
setActiveMode: (state, action: PayloadAction<"Schleife" | "TDR">) => { setActiveMode: (state, action: PayloadAction<"Schleife" | "TDR">) => {

2
redux/slices/kueDataSlice.ts
View File

@@ -82,7 +82,7 @@ const initialState: KueDataState = {
}; };
const kueDataSlice = createSlice({ const kueDataSlice = createSlice({
name: "kueData", name: "kueDataSlice",
initialState, initialState,
reducers: { reducers: {
setKueData: (state, action: PayloadAction<Partial<KueDataState>>) => { setKueData: (state, action: PayloadAction<Partial<KueDataState>>) => {

2
redux/slices/last20MessagesSlice.ts
View File

@@ -10,7 +10,7 @@ const initialState: Last20MessagesSlice = {
}; };
export const last20MessagesSlice = createSlice({ export const last20MessagesSlice = createSlice({
name: "last20Messages", name: "last20MessagesSlice",
initialState, initialState,
reducers: { reducers: {
setLast20Messages: (state, action: PayloadAction<string | null>) => { setLast20Messages: (state, action: PayloadAction<string | null>) => {

2
redux/slices/loopChartSlice.ts
View File

@@ -21,7 +21,7 @@ const initialState: LoopChartState = {
}; };
const loopChartSlice = createSlice({ const loopChartSlice = createSlice({
name: "loopChart", name: "loopChartSlice",
initialState, initialState,
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {

2
redux/slices/opcuaSettingsSlice.ts
View File

@@ -29,7 +29,7 @@ const initialState: OPCUASettingsState = {
}; };
const opcuaSettingsSlice = createSlice({ const opcuaSettingsSlice = createSlice({
name: "opcuaSettings", name: "opcuaSettingsSlice",
initialState, initialState,
reducers: { reducers: {
toggleOpcUaServer(state) { toggleOpcUaServer(state) {

2
redux/slices/selectedChartDataSlice.ts
View File

@@ -9,7 +9,7 @@ const initialState: SelectedChartDataState = {
}; };
const selectedChartDataSlice = createSlice({ const selectedChartDataSlice = createSlice({
name: "selectedChartData", name: "selectedChartDataSlice",
initialState, initialState,
reducers: { reducers: {
setSelectedChartData(state, action: PayloadAction<any>) { setSelectedChartData(state, action: PayloadAction<any>) {

2
redux/slices/systemSettingsSlice.ts
View File

@@ -32,7 +32,7 @@ const initialState: SystemSettingsState = {
}; };
const systemSettingsSlice = createSlice({ const systemSettingsSlice = createSlice({
name: "systemSettings", name: "systemSettingsSlice",
initialState, initialState,
reducers: { reducers: {
setSystemSettings: ( setSystemSettings: (

2
redux/slices/tdmChartSlice.ts
View File

@@ -16,7 +16,7 @@ const initialState: TDMChartState = {
}; };
const tdmChartSlice = createSlice({ const tdmChartSlice = createSlice({
name: "tdmChart", name: "tdmChartSlice",
initialState, initialState,
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {

2
redux/slices/tdmSingleChartSlice.ts
View File

@@ -24,7 +24,7 @@ const initialState: TDMChartState = {
}; };
const tdmSingleChartSlice = createSlice({ const tdmSingleChartSlice = createSlice({
name: "tdmSingleChart", name: "tdmSingleChartSlice",
initialState, initialState,
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {

2
redux/slices/tdrChartSlice.ts
View File

@@ -19,7 +19,7 @@ const initialState: TDRChartState = {
}; };
const tdrChartSlice = createSlice({ const tdrChartSlice = createSlice({
name: "tdrChart", name: "tdrChartSlice",
initialState, initialState,
reducers: { reducers: {
setSelectedSlot: (state, action: PayloadAction<number>) => { setSelectedSlot: (state, action: PayloadAction<number>) => {

2
redux/slices/tdrDataByIdSlice.ts
View File

@@ -8,7 +8,7 @@ const initialState = {
}; };
const tdrDataByIdSlice = createSlice({ const tdrDataByIdSlice = createSlice({
name: "tdrDataById", name: "tdrDataByIdSlice",
initialState, initialState,
reducers: { reducers: {
setTDRChartDataById: ( setTDRChartDataById: (

2
redux/slices/tdrReferenceChartDataBySlotSlice.ts
View File

@@ -15,7 +15,7 @@ const initialState: TDRReferenceChartState = {
}; };
const tdrReferenceChartDataBySlotSlice = createSlice({ const tdrReferenceChartDataBySlotSlice = createSlice({
name: "tdrReferenceChartDataBySlot", name: "tdrReferenceChartDataBySlotSlice",
initialState, initialState,
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {

2
redux/slices/tdrReferenceChartSlice.ts
View File

@@ -16,7 +16,7 @@ const initialState: TDRReferenceChartState = {
}; };
const tdrReferenceChartSlice = createSlice({ const tdrReferenceChartSlice = createSlice({
name: "tdrReferenceChart", name: "tdrReferenceChartSlice",
initialState, initialState,
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {

2
redux/slices/webVersionSlice.ts
View File

@@ -11,7 +11,7 @@ const initialState: WebVersionState = {
}; };
const webVersionSlice = createSlice({ const webVersionSlice = createSlice({
name: "webVersion", name: "webVersionSlice",
initialState, initialState,
reducers: { reducers: {
setWebVersion(state, action: PayloadAction<string>) { setWebVersion(state, action: PayloadAction<string>) {

40
redux/store.ts
View File

@@ -24,26 +24,26 @@ import tdrReferenceChartDataBySlotReducer from "./slices/tdrReferenceChartDataBy
const store = configureStore({ const store = configureStore({
reducer: { reducer: {
auth: authReducer, authSlice: authReducer,
kueChartMode: kueChartModeReducer, kueChartModeSlice: kueChartModeReducer,
webVersion: webVersionReducer, webVersionSlice: webVersionReducer,
digitalInputs: digitalInputsReducer, digitalInputsSlice: digitalInputsReducer,
kabelueberwachungChart: kabelueberwachungChartReducer, kabelueberwachungChartSlice: kabelueberwachungChartReducer,
last20Messages: last20MessagesReducer, last20MessagesSlice: last20MessagesReducer,
systemSettings: systemSettingsReducer, systemSettingsSlice: systemSettingsReducer,
opcuaSettings: opcuaSettingsReducer, opcuaSettingsSlice: opcuaSettingsReducer,
digitalOutputs: digitalOutputsReducer, digitalOutputsSlice: digitalOutputsReducer,
analogeEingaenge: analogeEingaengeReducer, analogeEingaengeSlice: analogeEingaengeReducer,
brush: brushReducer, brushSlice: brushReducer,
tdrChart: tdrChartReducer, tdrChartSlice: tdrChartReducer,
tdrReferenceChart: tdrReferenceChartReducer, tdrReferenceChartSlice: tdrReferenceChartReducer,
loopChart: loopChartReducer, loopChartSlice: loopChartReducer,
tdmChart: tdmChartReducer, tdmChartSlice: tdmChartReducer,
tdrDataById: tdrDataByIdReducer, tdrDataByIdSlice: tdrDataByIdReducer,
kueData: kueDataReducer, kueDataSlice: kueDataReducer,
selectedChartData: selectedChartDataReducer, selectedChartDataSlice: selectedChartDataReducer,
tdmSingleChart: tdmSingleChartReducer, tdmSingleChartSlice: tdmSingleChartReducer,
tdrReferenceChartDataBySlot: tdrReferenceChartDataBySlotReducer, tdrReferenceChartDataBySlotSlice: tdrReferenceChartDataBySlotReducer,
}, },
}); });