diff --git a/components/header/Header.tsx b/components/header/Header.tsx index e43e2cd..08fefa7 100644 --- a/components/header/Header.tsx +++ b/components/header/Header.tsx @@ -54,7 +54,7 @@ function Header() { const dispatch = useDispatch(); const deviceName = useSelector( - (state: RootState) => state.systemSettings.deviceName + (state: RootState) => state.systemSettingsSlice.deviceName ); useEffect(() => { diff --git a/components/header/settingsModal/SettingsModal.tsx b/components/header/settingsModal/SettingsModal.tsx index d5722ff..b98720e 100644 --- a/components/header/settingsModal/SettingsModal.tsx +++ b/components/header/settingsModal/SettingsModal.tsx @@ -29,35 +29,37 @@ function SettingModal({ showModal, onClose }) { const [showLoginForm, setShowLoginForm] = useState(false); const deviceName_Redux = useSelector( - (state: RootState) => state.systemSettings.deviceName + (state: RootState) => state.systemSettingsSlice.deviceName ); 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( - (state: RootState) => state.systemSettings.subnet + (state: RootState) => state.systemSettingsSlice.subnet ); const gateway_Redux = useSelector( - (state: RootState) => state.systemSettings.gateway + (state: RootState) => state.systemSettingsSlice.gateway ); const datetime_Redux = useSelector( - (state: RootState) => state.systemSettings.cplInternalTimestamp + (state: RootState) => state.systemSettingsSlice.cplInternalTimestamp ); const ntp1_Redux = useSelector( - (state: RootState) => state.systemSettings.ntp1 + (state: RootState) => state.systemSettingsSlice.ntp1 ); const ntp2_Redux = useSelector( - (state: RootState) => state.systemSettings.ntp2 + (state: RootState) => state.systemSettingsSlice.ntp2 ); const ntp3_Redux = useSelector( - (state: RootState) => state.systemSettings.ntp3 + (state: RootState) => state.systemSettingsSlice.ntp3 ); const ntpTimezone_Redux = useSelector( - (state: RootState) => state.systemSettings.ntpTimezone + (state: RootState) => state.systemSettingsSlice.ntpTimezone ); const active_Redux = useSelector( - (state: RootState) => state.systemSettings.ntpActive + (state: RootState) => state.systemSettingsSlice.ntpActive ); const [name, setName] = useState(deviceName_Redux || ""); diff --git a/components/main/analogeEingaenge/AnalogInputsChart.tsx b/components/main/analogeEingaenge/AnalogInputsChart.tsx index 4df7800..94ce736 100644 --- a/components/main/analogeEingaenge/AnalogInputsChart.tsx +++ b/components/main/analogeEingaenge/AnalogInputsChart.tsx @@ -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 diff --git a/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx b/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx index 066b7fd..f5f01da 100644 --- a/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx +++ b/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx @@ -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); diff --git a/components/main/einausgaenge/DigitalInputs.tsx b/components/main/einausgaenge/DigitalInputs.tsx index 5ebcfc9..34ad303 100644 --- a/components/main/einausgaenge/DigitalInputs.tsx +++ b/components/main/einausgaenge/DigitalInputs.tsx @@ -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** diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx index fe18a54..4d829fc 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx @@ -35,10 +35,10 @@ const ChartSwitcher: React.FC = ({ // **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 = ({ dispatch(setSelectedChartType(chartType)); }; //------------------------------------- - + /* useEffect(() => { //dispatch(fetchAllTDRChartData()); // Erstes Laden @@ -70,7 +70,7 @@ const ChartSwitcher: React.FC = ({ return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird }, [dispatch]); - + */ //------------------------------------- return ( = ({ 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(); diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx index 6243e64..68e28b7 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx @@ -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 diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 5775ff4..3c5f807 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -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(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 = { - 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 (
- - - - { - 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 ( - - {`${date.getDate()}.${date.getMonth() + 1}`} - - ); - }} - /> - - `${wert.toFixed(0)} `} - /> - } /> - { - 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 ( -
- {orderedPayload.map((entry, index) => ( - - ⬤ {legendLabelMap[entry.value] ?? entry.value} - - ))} -
- ); - }} - /> - - - - {["DIA1", "DIA2"].includes(selectedMode) && ( - - )} - {selectedMode === "DIA0" && ( - - )} - new Date(zeit).toLocaleDateString()} - /> - - +
); }; diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/README.md b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/README.md new file mode 100644 index 0000000..b5f863c --- /dev/null +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/README.md @@ -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 + } diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx index fe6998c..d4e9c08 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx @@ -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]) diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx index 894ecd8..4af0faa 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx @@ -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(null); const currentChartData = selectedId !== null ? tdrDataById[selectedId] : []; diff --git a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx index 4c08fd3..411fdd5 100644 --- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx +++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx @@ -37,7 +37,7 @@ const Kue705FO: React.FC = ({ `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 = ({ 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 = ({ ); //--------------------------------- //--------------------------------- - 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 && diff --git a/components/main/kabelueberwachung/kue705FO/KueModal.tsx b/components/main/kabelueberwachung/kue705FO/KueModal.tsx index 76e345b..e6989ea 100644 --- a/components/main/kabelueberwachung/kue705FO/KueModal.tsx +++ b/components/main/kabelueberwachung/kue705FO/KueModal.tsx @@ -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({ diff --git a/components/main/settingsPageComponents/GeneralSettings.tsx b/components/main/settingsPageComponents/GeneralSettings.tsx index 8942831..f1c8746 100644 --- a/components/main/settingsPageComponents/GeneralSettings.tsx +++ b/components/main/settingsPageComponents/GeneralSettings.tsx @@ -15,7 +15,7 @@ import { fetchSystemSettingsThunk } from "../../../redux/thunks/fetchSystemSetti const GeneralSettings: React.FC = () => { const dispatch = useDispatch(); const systemSettings = useSelector( - (state: RootState) => state.systemSettings + (state: RootState) => state.systemSettingsSlice ); const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true); diff --git a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx index 2e95720..c41236a 100644 --- a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx +++ b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx @@ -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(""); diff --git a/components/main/uebersicht/Baugruppentraeger.tsx b/components/main/uebersicht/Baugruppentraeger.tsx index a04cb43..e38f0e9 100644 --- a/components/main/uebersicht/Baugruppentraeger.tsx +++ b/components/main/uebersicht/Baugruppentraeger.tsx @@ -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( diff --git a/components/main/uebersicht/Last20MessagesTable.tsx b/components/main/uebersicht/Last20MessagesTable.tsx index 0de1c23..d137921 100644 --- a/components/main/uebersicht/Last20MessagesTable.tsx +++ b/components/main/uebersicht/Last20MessagesTable.tsx @@ -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 diff --git a/components/main/uebersicht/NetworkInfo.tsx b/components/main/uebersicht/NetworkInfo.tsx index 2da4d37..3d84af7 100644 --- a/components/main/uebersicht/NetworkInfo.tsx +++ b/components/main/uebersicht/NetworkInfo.tsx @@ -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 diff --git a/components/main/uebersicht/VersionInfo.tsx b/components/main/uebersicht/VersionInfo.tsx index 19834ba..9e9823c 100644 --- a/components/main/uebersicht/VersionInfo.tsx +++ b/components/main/uebersicht/VersionInfo.tsx @@ -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 ( diff --git a/pages/kabelueberwachung.tsx b/pages/kabelueberwachung.tsx index e7b1342..72b4160 100644 --- a/pages/kabelueberwachung.tsx +++ b/pages/kabelueberwachung.tsx @@ -25,14 +25,14 @@ function Kabelueberwachung() { kueResidence, kueCableBreak, kueGroundFault, - } = useSelector((state) => state.kueData); + } = useSelector((state) => state.kueDataSlice); //---------------------------------------------------------------- // 🚀 **TDR-Daten bereits in Redux abrufen** // Redux-Variablen abrufen - const tdrData = useSelector((state) => state.tdrChart.data); - const loading = useSelector((state) => state.tdrChart.loading); - const error = useSelector((state) => state.tdrChart.error); + const tdrData = useSelector((state) => state.tdrChartSlice.data); + const loading = useSelector((state) => state.tdrChartSlice.loading); + const error = useSelector((state) => state.tdrChartSlice.error); //---------------------------------------------------------------- //---------------------------------------------------------------- @@ -110,7 +110,7 @@ function Kabelueberwachung() { data: loopData, loading: loopLoading, error: loopError, - } = useSelector((state: RootState) => state.loopChart); + } = useSelector((state: RootState) => state.loopChartSlice); // Zugriff z. B. auf Schleifenwiderstand von DIA1 const dia1Schleifen = loopData["DIA1"]?.[4]; diff --git a/redux/slices/analogeEingaengeSlice.ts b/redux/slices/analogeEingaengeSlice.ts index 56a398a..387372b 100644 --- a/redux/slices/analogeEingaengeSlice.ts +++ b/redux/slices/analogeEingaengeSlice.ts @@ -68,7 +68,7 @@ export const loadFromWindow = createAsyncThunk( // Redux Slice const analogeEingaengeSlice = createSlice({ - name: "analogeEingaenge", + name: "analogeEingaengeSlice", initialState, reducers: { setAnalogerEingang( diff --git a/redux/slices/authSlice.ts b/redux/slices/authSlice.ts index 24fb896..6ff8491 100644 --- a/redux/slices/authSlice.ts +++ b/redux/slices/authSlice.ts @@ -2,7 +2,7 @@ import { createSlice } from "@reduxjs/toolkit"; const authSlice = createSlice({ - name: "auth", + name: "authSlice", initialState: { isAdminLoggedIn: false, users: { diff --git a/redux/slices/digitalInputsSlice.ts b/redux/slices/digitalInputsSlice.ts index 72a46a8..70c88d6 100644 --- a/redux/slices/digitalInputsSlice.ts +++ b/redux/slices/digitalInputsSlice.ts @@ -18,7 +18,7 @@ const initialState: DigitalInputsState = { }; const digitalInputsSlice = createSlice({ - name: "digitalInputs", + name: "digitalInputsSlice", initialState, reducers: { setInputs: (state, action: PayloadAction) => { diff --git a/redux/slices/digitalOutputsSlice.ts b/redux/slices/digitalOutputsSlice.ts index 4a97e02..4ababb5 100644 --- a/redux/slices/digitalOutputsSlice.ts +++ b/redux/slices/digitalOutputsSlice.ts @@ -19,7 +19,7 @@ const initialState: DigitalOutputsState = { // Slice erstellen const digitalOutputsSlice = createSlice({ - name: "digitalOutputs", + name: "digitalOutputsSlice", initialState, reducers: { setDigitalOutputs(state, action: PayloadAction) { diff --git a/redux/slices/kabelueberwachungChartSlice.ts b/redux/slices/kabelueberwachungChartSlice.ts index 595d980..87b6a45 100644 --- a/redux/slices/kabelueberwachungChartSlice.ts +++ b/redux/slices/kabelueberwachungChartSlice.ts @@ -43,7 +43,7 @@ const initialState: KabelueberwachungChartState = { // Erstellung des Slices const kabelueberwachungChartSlice = createSlice({ - name: "kabelueberwachungChart", + name: "kabelueberwachungChartSlice", initialState, reducers: { setSlotNumber: (state, action: PayloadAction) => { diff --git a/redux/slices/kueChartModeSlice.ts b/redux/slices/kueChartModeSlice.ts index 2856a37..59c6475 100644 --- a/redux/slices/kueChartModeSlice.ts +++ b/redux/slices/kueChartModeSlice.ts @@ -12,7 +12,7 @@ const initialState: KueChartModeState = { }; export const kueChartModeSlice = createSlice({ - name: "kueChartMode", + name: "kueChartModeSlice", initialState, reducers: { setActiveMode: (state, action: PayloadAction<"Schleife" | "TDR">) => { diff --git a/redux/slices/kueDataSlice.ts b/redux/slices/kueDataSlice.ts index db1974e..9869220 100644 --- a/redux/slices/kueDataSlice.ts +++ b/redux/slices/kueDataSlice.ts @@ -82,7 +82,7 @@ const initialState: KueDataState = { }; const kueDataSlice = createSlice({ - name: "kueData", + name: "kueDataSlice", initialState, reducers: { setKueData: (state, action: PayloadAction>) => { diff --git a/redux/slices/last20MessagesSlice.ts b/redux/slices/last20MessagesSlice.ts index 07b0b7e..28698a8 100644 --- a/redux/slices/last20MessagesSlice.ts +++ b/redux/slices/last20MessagesSlice.ts @@ -10,7 +10,7 @@ const initialState: Last20MessagesSlice = { }; export const last20MessagesSlice = createSlice({ - name: "last20Messages", + name: "last20MessagesSlice", initialState, reducers: { setLast20Messages: (state, action: PayloadAction) => { diff --git a/redux/slices/loopChartSlice.ts b/redux/slices/loopChartSlice.ts index 671810f..6677fbb 100644 --- a/redux/slices/loopChartSlice.ts +++ b/redux/slices/loopChartSlice.ts @@ -21,7 +21,7 @@ const initialState: LoopChartState = { }; const loopChartSlice = createSlice({ - name: "loopChart", + name: "loopChartSlice", initialState, reducers: {}, extraReducers: (builder) => { diff --git a/redux/slices/opcuaSettingsSlice.ts b/redux/slices/opcuaSettingsSlice.ts index 492ea4c..4ef6890 100644 --- a/redux/slices/opcuaSettingsSlice.ts +++ b/redux/slices/opcuaSettingsSlice.ts @@ -29,7 +29,7 @@ const initialState: OPCUASettingsState = { }; const opcuaSettingsSlice = createSlice({ - name: "opcuaSettings", + name: "opcuaSettingsSlice", initialState, reducers: { toggleOpcUaServer(state) { diff --git a/redux/slices/selectedChartDataSlice.ts b/redux/slices/selectedChartDataSlice.ts index 9b8e7a0..0c73c39 100644 --- a/redux/slices/selectedChartDataSlice.ts +++ b/redux/slices/selectedChartDataSlice.ts @@ -9,7 +9,7 @@ const initialState: SelectedChartDataState = { }; const selectedChartDataSlice = createSlice({ - name: "selectedChartData", + name: "selectedChartDataSlice", initialState, reducers: { setSelectedChartData(state, action: PayloadAction) { diff --git a/redux/slices/systemSettingsSlice.ts b/redux/slices/systemSettingsSlice.ts index e636d94..7b95568 100644 --- a/redux/slices/systemSettingsSlice.ts +++ b/redux/slices/systemSettingsSlice.ts @@ -32,7 +32,7 @@ const initialState: SystemSettingsState = { }; const systemSettingsSlice = createSlice({ - name: "systemSettings", + name: "systemSettingsSlice", initialState, reducers: { setSystemSettings: ( diff --git a/redux/slices/tdmChartSlice.ts b/redux/slices/tdmChartSlice.ts index 380a1ea..e5ffdcc 100644 --- a/redux/slices/tdmChartSlice.ts +++ b/redux/slices/tdmChartSlice.ts @@ -16,7 +16,7 @@ const initialState: TDMChartState = { }; const tdmChartSlice = createSlice({ - name: "tdmChart", + name: "tdmChartSlice", initialState, reducers: {}, extraReducers: (builder) => { diff --git a/redux/slices/tdmSingleChartSlice.ts b/redux/slices/tdmSingleChartSlice.ts index 6a6dc35..9f201a1 100644 --- a/redux/slices/tdmSingleChartSlice.ts +++ b/redux/slices/tdmSingleChartSlice.ts @@ -24,7 +24,7 @@ const initialState: TDMChartState = { }; const tdmSingleChartSlice = createSlice({ - name: "tdmSingleChart", + name: "tdmSingleChartSlice", initialState, reducers: {}, extraReducers: (builder) => { diff --git a/redux/slices/tdrChartSlice.ts b/redux/slices/tdrChartSlice.ts index 4a2714b..3a48594 100644 --- a/redux/slices/tdrChartSlice.ts +++ b/redux/slices/tdrChartSlice.ts @@ -19,7 +19,7 @@ const initialState: TDRChartState = { }; const tdrChartSlice = createSlice({ - name: "tdrChart", + name: "tdrChartSlice", initialState, reducers: { setSelectedSlot: (state, action: PayloadAction) => { diff --git a/redux/slices/tdrDataByIdSlice.ts b/redux/slices/tdrDataByIdSlice.ts index b6dd9e5..d1596b1 100644 --- a/redux/slices/tdrDataByIdSlice.ts +++ b/redux/slices/tdrDataByIdSlice.ts @@ -8,7 +8,7 @@ const initialState = { }; const tdrDataByIdSlice = createSlice({ - name: "tdrDataById", + name: "tdrDataByIdSlice", initialState, reducers: { setTDRChartDataById: ( diff --git a/redux/slices/tdrReferenceChartDataBySlotSlice.ts b/redux/slices/tdrReferenceChartDataBySlotSlice.ts index 672aa1b..abd9bf5 100644 --- a/redux/slices/tdrReferenceChartDataBySlotSlice.ts +++ b/redux/slices/tdrReferenceChartDataBySlotSlice.ts @@ -15,7 +15,7 @@ const initialState: TDRReferenceChartState = { }; const tdrReferenceChartDataBySlotSlice = createSlice({ - name: "tdrReferenceChartDataBySlot", + name: "tdrReferenceChartDataBySlotSlice", initialState, reducers: {}, extraReducers: (builder) => { diff --git a/redux/slices/tdrReferenceChartSlice.ts b/redux/slices/tdrReferenceChartSlice.ts index 771b0cb..8a6ee22 100644 --- a/redux/slices/tdrReferenceChartSlice.ts +++ b/redux/slices/tdrReferenceChartSlice.ts @@ -16,7 +16,7 @@ const initialState: TDRReferenceChartState = { }; const tdrReferenceChartSlice = createSlice({ - name: "tdrReferenceChart", + name: "tdrReferenceChartSlice", initialState, reducers: {}, extraReducers: (builder) => { diff --git a/redux/slices/webVersionSlice.ts b/redux/slices/webVersionSlice.ts index 2fc8188..dbeedfc 100644 --- a/redux/slices/webVersionSlice.ts +++ b/redux/slices/webVersionSlice.ts @@ -11,7 +11,7 @@ const initialState: WebVersionState = { }; const webVersionSlice = createSlice({ - name: "webVersion", + name: "webVersionSlice", initialState, reducers: { setWebVersion(state, action: PayloadAction) { diff --git a/redux/store.ts b/redux/store.ts index 9c1fc95..1d28de8 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -24,26 +24,26 @@ import tdrReferenceChartDataBySlotReducer from "./slices/tdrReferenceChartDataBy const store = configureStore({ reducer: { - auth: authReducer, - kueChartMode: kueChartModeReducer, - webVersion: webVersionReducer, - digitalInputs: digitalInputsReducer, - kabelueberwachungChart: kabelueberwachungChartReducer, - last20Messages: last20MessagesReducer, - systemSettings: systemSettingsReducer, - opcuaSettings: opcuaSettingsReducer, - digitalOutputs: digitalOutputsReducer, - analogeEingaenge: analogeEingaengeReducer, - brush: brushReducer, - tdrChart: tdrChartReducer, - tdrReferenceChart: tdrReferenceChartReducer, - loopChart: loopChartReducer, - tdmChart: tdmChartReducer, - tdrDataById: tdrDataByIdReducer, - kueData: kueDataReducer, - selectedChartData: selectedChartDataReducer, - tdmSingleChart: tdmSingleChartReducer, - tdrReferenceChartDataBySlot: tdrReferenceChartDataBySlotReducer, + authSlice: authReducer, + kueChartModeSlice: kueChartModeReducer, + webVersionSlice: webVersionReducer, + digitalInputsSlice: digitalInputsReducer, + kabelueberwachungChartSlice: kabelueberwachungChartReducer, + last20MessagesSlice: last20MessagesReducer, + systemSettingsSlice: systemSettingsReducer, + opcuaSettingsSlice: opcuaSettingsReducer, + digitalOutputsSlice: digitalOutputsReducer, + analogeEingaengeSlice: analogeEingaengeReducer, + brushSlice: brushReducer, + tdrChartSlice: tdrChartReducer, + tdrReferenceChartSlice: tdrReferenceChartReducer, + loopChartSlice: loopChartReducer, + tdmChartSlice: tdmChartReducer, + tdrDataByIdSlice: tdrDataByIdReducer, + kueDataSlice: kueDataReducer, + selectedChartDataSlice: selectedChartDataReducer, + tdmSingleChartSlice: tdmSingleChartReducer, + tdrReferenceChartDataBySlotSlice: tdrReferenceChartDataBySlotReducer, }, });