uninstall redux-persist, weil nimmt viel Performance weg
This commit is contained in:
@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
|
|||||||
NEXT_PUBLIC_EXPORT_STATIC=false
|
NEXT_PUBLIC_EXPORT_STATIC=false
|
||||||
NEXT_PUBLIC_USE_CGI=false
|
NEXT_PUBLIC_USE_CGI=false
|
||||||
# App-Versionsnummer
|
# App-Versionsnummer
|
||||||
NEXT_PUBLIC_APP_VERSION=1.6.598
|
NEXT_PUBLIC_APP_VERSION=1.6.599
|
||||||
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
|
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
|
||||||
|
|
||||||
|
|||||||
@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
|
|||||||
NEXT_PUBLIC_EXPORT_STATIC=true
|
NEXT_PUBLIC_EXPORT_STATIC=true
|
||||||
NEXT_PUBLIC_USE_CGI=true
|
NEXT_PUBLIC_USE_CGI=true
|
||||||
# App-Versionsnummer
|
# App-Versionsnummer
|
||||||
NEXT_PUBLIC_APP_VERSION=1.6.598
|
NEXT_PUBLIC_APP_VERSION=1.6.599
|
||||||
NEXT_PUBLIC_CPL_MODE=production
|
NEXT_PUBLIC_CPL_MODE=production
|
||||||
11
CHANGELOG.md
11
CHANGELOG.md
@@ -1,3 +1,14 @@
|
|||||||
|
## [1.6.599] – 2025-07-14
|
||||||
|
|
||||||
|
- feat: AnalogInputsChart mit DateRangePicker und vollständiger Redux-Integration erweitert
|
||||||
|
|
||||||
|
- analogInputsHistorySlice angepasst: zeitraum, vonDatum, bisDatum und data hinzugefügt
|
||||||
|
- Typdefinitionen im Slice und Thunk korrigiert
|
||||||
|
- getAnalogInputsHistoryThunk erweitert, um vonDatum und bisDatum zu akzeptieren
|
||||||
|
- DateRangePicker korrekt in AnalogInputsChart.tsx integriert
|
||||||
|
- Fehler bei Selector-Zugriffen und Dispatch behoben
|
||||||
|
|
||||||
|
---
|
||||||
## [1.6.598] – 2025-07-11
|
## [1.6.598] – 2025-07-11
|
||||||
|
|
||||||
- feat: AnalogInputsChart mit DateRangePicker und vollständiger Redux-Integration erweitert
|
- feat: AnalogInputsChart mit DateRangePicker und vollständiger Redux-Integration erweitert
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ import {
|
|||||||
setVonDatum,
|
setVonDatum,
|
||||||
setBisDatum,
|
setBisDatum,
|
||||||
setZeitraum,
|
setZeitraum,
|
||||||
} from "@/redux/slices/analogInputsHistorySlice";
|
} from "@/redux/slices/analogInputs/analogInputsHistorySlice";
|
||||||
import DateRangePicker from "@/components/common/DateRangePicker";
|
import DateRangePicker from "@/components/common/DateRangePicker";
|
||||||
import { Listbox } from "@headlessui/react";
|
import { Listbox } from "@headlessui/react";
|
||||||
import { getColor } from "@/utils/colors";
|
import { getColor } from "@/utils/colors";
|
||||||
|
|||||||
@@ -1,32 +1,31 @@
|
|||||||
"use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
|
"use client";
|
||||||
|
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Listbox } from "@headlessui/react";
|
import { Listbox } from "@headlessui/react";
|
||||||
interface AnalogInput {
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
id: number;
|
import { RootState } from "@/redux/store";
|
||||||
label?: string;
|
import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
|
||||||
offset?: number | string;
|
|
||||||
factor?: number | string;
|
|
||||||
loggerInterval: string;
|
|
||||||
unit?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
import type { AnalogInput } from "@/types/analogInput"; // 👈 Importiere den Typ (jetzt definiert und exportiert)
|
||||||
selectedInput: AnalogInput;
|
|
||||||
isOpen: boolean;
|
export default function AnalogInputsSettingsModal() {
|
||||||
onClose: () => void;
|
const dispatch = useDispatch();
|
||||||
}
|
|
||||||
|
const isOpen = useSelector(
|
||||||
|
(state: RootState) => state.analogInputsUi.isSettingsModalOpen
|
||||||
|
);
|
||||||
|
|
||||||
|
const selectedInput = useSelector<RootState, AnalogInput | null>(
|
||||||
|
(state) => state.selectedAnalogInput
|
||||||
|
);
|
||||||
|
|
||||||
export default function AnalogInputSettingsModal({
|
|
||||||
selectedInput,
|
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
}: Props) {
|
|
||||||
const [label, setLabel] = useState("");
|
const [label, setLabel] = useState("");
|
||||||
const [offset, setOffset] = useState("0.000");
|
const [offset, setOffset] = useState("0.000");
|
||||||
const [factor, setFactor] = useState("1.000");
|
const [factor, setFactor] = useState("1.000");
|
||||||
const [loggerInterval, setLoggerInterval] = useState("9");
|
const [loggerInterval, setLoggerInterval] = useState("9");
|
||||||
const [unit, setUnit] = useState("V");
|
const [unit, setUnit] = useState("V");
|
||||||
const [isSaving, setIsSaving] = useState(false);
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
const unitOptions = ["V", "mA", "°C", "bar", "%"];
|
const unitOptions = ["V", "mA", "°C", "bar", "%"];
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -42,12 +41,8 @@ export default function AnalogInputSettingsModal({
|
|||||||
? selectedInput.factor.toFixed(3)
|
? selectedInput.factor.toFixed(3)
|
||||||
: selectedInput.factor || "1.000"
|
: selectedInput.factor || "1.000"
|
||||||
);
|
);
|
||||||
setLoggerInterval(selectedInput.loggerInterval);
|
setLoggerInterval(selectedInput.loggerInterval || "9");
|
||||||
setUnit(selectedInput.unit || "V");
|
setUnit(selectedInput.unit || "V");
|
||||||
console.log(
|
|
||||||
"selectedInput in analoge Eingänge:",
|
|
||||||
selectedInput.loggerInterval
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}, [selectedInput, isOpen]);
|
}, [selectedInput, isOpen]);
|
||||||
|
|
||||||
@@ -55,6 +50,7 @@ export default function AnalogInputSettingsModal({
|
|||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
setIsSaving(true);
|
setIsSaving(true);
|
||||||
|
|
||||||
const slot = selectedInput.id;
|
const slot = selectedInput.id;
|
||||||
const isDev = window.location.hostname === "localhost";
|
const isDev = window.location.hostname === "localhost";
|
||||||
|
|
||||||
@@ -100,7 +96,7 @@ export default function AnalogInputSettingsModal({
|
|||||||
alert("Einstellungen gespeichert (Produktion).");
|
alert("Einstellungen gespeichert (Produktion).");
|
||||||
}
|
}
|
||||||
|
|
||||||
onClose();
|
dispatch(setIsSettingsModalOpen(false));
|
||||||
location.reload();
|
location.reload();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
alert("Fehler beim Speichern.");
|
alert("Fehler beim Speichern.");
|
||||||
@@ -118,7 +114,7 @@ export default function AnalogInputSettingsModal({
|
|||||||
Einstellungen Messwerteingang {selectedInput.id}
|
Einstellungen Messwerteingang {selectedInput.id}
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={() => dispatch(setIsSettingsModalOpen(false))}
|
||||||
className="text-2xl hover:text-gray-400"
|
className="text-2xl hover:text-gray-400"
|
||||||
aria-label="Modal schließen"
|
aria-label="Modal schließen"
|
||||||
>
|
>
|
||||||
@@ -128,10 +124,7 @@ export default function AnalogInputSettingsModal({
|
|||||||
|
|
||||||
{/* Bezeichnung */}
|
{/* Bezeichnung */}
|
||||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||||
<div>
|
|
||||||
<span className="font-normal">Bezeichnung:</span>
|
<span className="font-normal">Bezeichnung:</span>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="w-full border rounded px-3 py-1 mb-4"
|
className="w-full border rounded px-3 py-1 mb-4"
|
||||||
@@ -139,43 +132,34 @@ export default function AnalogInputSettingsModal({
|
|||||||
onChange={(e) => setLabel(e.target.value)}
|
onChange={(e) => setLabel(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{/* Offset */}
|
{/* Offset */}
|
||||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||||
<div>
|
|
||||||
<span className="font-normal">Offset:</span>
|
<span className="font-normal">Offset:</span>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
step="0.001"
|
step="0.001"
|
||||||
className="border border-gray-300 rounded px-2 py-1 w-full text-right "
|
className="border border-gray-300 rounded px-2 py-1 w-full text-right"
|
||||||
value={offset}
|
value={offset}
|
||||||
onChange={(e) => setOffset(e.target.value)}
|
onChange={(e) => setOffset(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{/* Faktor */}
|
{/* Faktor */}
|
||||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||||
<div>
|
|
||||||
<span className="font-normal">Faktor:</span>
|
<span className="font-normal">Faktor:</span>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
step="0.001"
|
step="0.001"
|
||||||
className="border border-gray-300 rounded px-2 py-1 w-full text-right"
|
className="border border-gray-300 rounded px-2 py-1 w-full text-right"
|
||||||
value={factor}
|
value={factor}
|
||||||
onChange={(e) => setFactor(e.target.value)}
|
onChange={(e) => setFactor(e.target.value)}
|
||||||
/>{" "}
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Einheit */}
|
{/* Einheit */}
|
||||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||||
<div>
|
|
||||||
<span className="font-normal">Einheit:</span>
|
<span className="font-normal">Einheit:</span>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Listbox value={unit} onChange={setUnit}>
|
<Listbox value={unit} onChange={setUnit}>
|
||||||
<div className="relative w-full">
|
<div className="relative w-full">
|
||||||
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
|
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
|
||||||
@@ -216,9 +200,9 @@ export default function AnalogInputSettingsModal({
|
|||||||
</div>
|
</div>
|
||||||
</Listbox>
|
</Listbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{/* Loggerintervall/Speicherintervall */}
|
{/* Speicherintervall */}
|
||||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 ">
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||||
<span className="font-normal">Speicherintervall:</span>
|
<span className="font-normal">Speicherintervall:</span>
|
||||||
<div className="relative w-full">
|
<div className="relative w-full">
|
||||||
<input
|
<input
|
||||||
@@ -233,6 +217,7 @@ export default function AnalogInputSettingsModal({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Speichern-Button */}
|
||||||
<div className="flex justify-end gap-2 mt-6">
|
<div className="flex justify-end gap-2 mt-6">
|
||||||
<button
|
<button
|
||||||
onClick={handleSave}
|
onClick={handleSave}
|
||||||
|
|||||||
@@ -7,18 +7,13 @@ import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
|
|||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import settingsIcon from "@iconify/icons-mdi/settings";
|
import settingsIcon from "@iconify/icons-mdi/settings";
|
||||||
import waveformIcon from "@iconify/icons-mdi/waveform";
|
import waveformIcon from "@iconify/icons-mdi/waveform";
|
||||||
import { setSelectedAnalogInput } from "@/redux/slices/selectedAnalogInputSlice";
|
import { setSelectedAnalogInput } from "@/redux/slices/analogInputs/selectedAnalogInputSlice";
|
||||||
|
import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
|
||||||
|
import { setSelectedId } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
|
||||||
|
|
||||||
export default function AnalogInputsTable({
|
export default function AnalogInputsTable() {
|
||||||
setSelectedId,
|
|
||||||
setSelectedInput,
|
|
||||||
setIsSettingsModalOpen,
|
|
||||||
}: {
|
|
||||||
setSelectedId: (id: number) => void;
|
|
||||||
setSelectedInput: (input: AnalogInput) => void;
|
|
||||||
setIsSettingsModalOpen: (open: boolean) => void;
|
|
||||||
}) {
|
|
||||||
const dispatch = useDispatch<AppDispatch>();
|
const dispatch = useDispatch<AppDispatch>();
|
||||||
|
|
||||||
const [activeId, setActiveId] = React.useState<number | null>(null);
|
const [activeId, setActiveId] = React.useState<number | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -30,9 +25,10 @@ export default function AnalogInputsTable({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const handleSelect = (id: number, input: AnalogInput) => {
|
const handleSelect = (id: number, input: AnalogInput) => {
|
||||||
setSelectedId(id);
|
dispatch(setIsSettingsModalOpen(true));
|
||||||
|
dispatch(setSelectedId(id));
|
||||||
setActiveId(id);
|
setActiveId(id);
|
||||||
dispatch(setSelectedAnalogInput(input)); // 🧠 hier kommt die Bezeichnung in Redux
|
dispatch(setSelectedAnalogInput(input));
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -100,8 +96,6 @@ export default function AnalogInputsTable({
|
|||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handleSelect(e.id!, e);
|
handleSelect(e.id!, e);
|
||||||
setSelectedInput(e);
|
|
||||||
setIsSettingsModalOpen(true);
|
|
||||||
}}
|
}}
|
||||||
className="text-gray-400 hover:text-gray-500"
|
className="text-gray-400 hover:text-gray-500"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,20 +6,20 @@ import AnalogInputsChart from "@/components/main/analogInputs/AnalogInputsChart"
|
|||||||
import AnalogInputsSettingsModal from "@/components/main/analogInputs/AnalogInputsSettingsModal";
|
import AnalogInputsSettingsModal from "@/components/main/analogInputs/AnalogInputsSettingsModal";
|
||||||
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
|
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
|
||||||
import { useAppDispatch } from "@/redux/store";
|
import { useAppDispatch } from "@/redux/store";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
export interface AnalogInput2 {
|
import { RootState } from "@/redux/store";
|
||||||
id: number;
|
|
||||||
label?: string;
|
|
||||||
offset?: number | string;
|
|
||||||
factor?: number | string;
|
|
||||||
loggerInterval: string;
|
|
||||||
unit?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function AnalogInputsView() {
|
function AnalogInputsView() {
|
||||||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
const selectedInput = useSelector(
|
||||||
const [selectedInput, setSelectedInput] = useState<AnalogInput2 | null>(null);
|
(state: RootState) => state.selectedAnalogInput
|
||||||
const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
|
);
|
||||||
|
const selectedId = useSelector(
|
||||||
|
(state: RootState) => state.analogInputsHistory.selectedId
|
||||||
|
);
|
||||||
|
const isSettingsModalOpen = useSelector(
|
||||||
|
(state: RootState) => state.analogInputsUi.isSettingsModalOpen
|
||||||
|
);
|
||||||
|
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -40,13 +40,7 @@ function AnalogInputsView() {
|
|||||||
<h2 className="text-xl font-semibold mb-4 text-gray-700">
|
<h2 className="text-xl font-semibold mb-4 text-gray-700">
|
||||||
Messwerteingänge
|
Messwerteingänge
|
||||||
</h2>
|
</h2>
|
||||||
<AnalogInputsTable
|
<AnalogInputsTable />
|
||||||
setSelectedId={setSelectedId}
|
|
||||||
setSelectedInput={(input) =>
|
|
||||||
setSelectedInput(input as unknown as AnalogInput2)
|
|
||||||
}
|
|
||||||
setIsSettingsModalOpen={setIsSettingsModalOpen}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
|
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
|
||||||
@@ -58,13 +52,7 @@ function AnalogInputsView() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{selectedInput !== null && (
|
{selectedInput !== null && <AnalogInputsSettingsModal />}
|
||||||
<AnalogInputsSettingsModal
|
|
||||||
selectedInput={selectedInput}
|
|
||||||
isOpen={isSettingsModalOpen}
|
|
||||||
onClose={() => setIsSettingsModalOpen(false)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
15
package-lock.json
generated
15
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "cpl-v4",
|
"name": "cpl-v4",
|
||||||
"version": "1.6.598",
|
"version": "1.6.599",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "cpl-v4",
|
"name": "cpl-v4",
|
||||||
"version": "1.6.598",
|
"version": "1.6.599",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/roboto": "^5.1.0",
|
"@fontsource/roboto": "^5.1.0",
|
||||||
"@headlessui/react": "^2.2.4",
|
"@headlessui/react": "^2.2.4",
|
||||||
@@ -43,8 +43,7 @@
|
|||||||
"react-spinners": "^0.14.1",
|
"react-spinners": "^0.14.1",
|
||||||
"react-toastify": "^10.0.6",
|
"react-toastify": "^10.0.6",
|
||||||
"recharts": "^2.15.1",
|
"recharts": "^2.15.1",
|
||||||
"redux": "^5.0.1",
|
"redux": "^5.0.1"
|
||||||
"redux-persist": "^6.0.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@testing-library/jest-dom": "^6.6.3",
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
@@ -10258,14 +10257,6 @@
|
|||||||
"redux": "*"
|
"redux": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/redux-persist": {
|
|
||||||
"version": "6.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
|
|
||||||
"integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
|
|
||||||
"peerDependencies": {
|
|
||||||
"redux": ">4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/redux-thunk": {
|
"node_modules/redux-thunk": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cpl-v4",
|
"name": "cpl-v4",
|
||||||
"version": "1.6.598",
|
"version": "1.6.599",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
@@ -51,8 +51,7 @@
|
|||||||
"react-spinners": "^0.14.1",
|
"react-spinners": "^0.14.1",
|
||||||
"react-toastify": "^10.0.6",
|
"react-toastify": "^10.0.6",
|
||||||
"recharts": "^2.15.1",
|
"recharts": "^2.15.1",
|
||||||
"redux": "^5.0.1",
|
"redux": "^5.0.1"
|
||||||
"redux-persist": "^6.0.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@testing-library/jest-dom": "^6.6.3",
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
|
|||||||
@@ -3,14 +3,14 @@
|
|||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Provider } from "react-redux";
|
import { Provider } from "react-redux";
|
||||||
import { PersistGate } from "redux-persist/integration/react";
|
|
||||||
import { persistor } from "@/redux/store";
|
import { useAppDispatch } from "@/redux/store";
|
||||||
import store, { useAppDispatch } from "@/redux/store";
|
|
||||||
import { AppProps } from "next/app";
|
import { AppProps } from "next/app";
|
||||||
|
|
||||||
import Header from "@/components/header/Header";
|
import Header from "@/components/header/Header";
|
||||||
import Navigation from "@/components/navigation/Navigation";
|
import Navigation from "@/components/navigation/Navigation";
|
||||||
import Footer from "@/components/footer/Footer";
|
import Footer from "@/components/footer/Footer";
|
||||||
|
import { store } from "@/redux/store";
|
||||||
|
|
||||||
// Thunks importieren
|
// Thunks importieren
|
||||||
import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
|
import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
|
||||||
@@ -38,11 +38,9 @@ import "@/styles/globals.css";
|
|||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
return (
|
return (
|
||||||
<PersistGate loading={null} persistor={persistor}>
|
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<AppContent Component={Component} pageProps={pageProps} />
|
<AppContent Component={Component} pageProps={pageProps} />
|
||||||
</Provider>
|
</Provider>
|
||||||
</PersistGate>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
|
// /redux/slices/analogInputs/analogInputsHistory.ts
|
||||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
import { getAnalogInputsHistoryThunk } from "../thunks/getAnalogInputsHistoryThunk";
|
import { getAnalogInputsHistoryThunk } from "../../thunks/getAnalogInputsHistoryThunk";
|
||||||
|
|
||||||
export type AnalogInputsHistoryEntry = {
|
export type AnalogInputsHistoryEntry = {
|
||||||
t: string;
|
t: string;
|
||||||
@@ -7,6 +8,7 @@ export type AnalogInputsHistoryEntry = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export interface InputHistoryState {
|
export interface InputHistoryState {
|
||||||
|
selectedId: number | null;
|
||||||
zeitraum: string;
|
zeitraum: string;
|
||||||
vonDatum: string;
|
vonDatum: string;
|
||||||
bisDatum: string;
|
bisDatum: string;
|
||||||
@@ -16,6 +18,7 @@ export interface InputHistoryState {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const initialState: InputHistoryState = {
|
const initialState: InputHistoryState = {
|
||||||
|
selectedId: null,
|
||||||
zeitraum: "DIA0",
|
zeitraum: "DIA0",
|
||||||
vonDatum: "",
|
vonDatum: "",
|
||||||
bisDatum: "",
|
bisDatum: "",
|
||||||
@@ -28,6 +31,9 @@ export const analogInputsHistorySlice = createSlice({
|
|||||||
name: "analogInputsHistory",
|
name: "analogInputsHistory",
|
||||||
initialState,
|
initialState,
|
||||||
reducers: {
|
reducers: {
|
||||||
|
setSelectedId: (state, action: PayloadAction<number | null>) => {
|
||||||
|
state.selectedId = action.payload;
|
||||||
|
},
|
||||||
setZeitraum: (state, action: PayloadAction<string>) => {
|
setZeitraum: (state, action: PayloadAction<string>) => {
|
||||||
state.zeitraum = action.payload;
|
state.zeitraum = action.payload;
|
||||||
},
|
},
|
||||||
@@ -56,7 +62,11 @@ export const analogInputsHistorySlice = createSlice({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const { setZeitraum, setVonDatum, setBisDatum } =
|
export const {
|
||||||
analogInputsHistorySlice.actions;
|
setSelectedId,
|
||||||
|
setZeitraum,
|
||||||
|
setVonDatum,
|
||||||
|
setBisDatum,
|
||||||
|
} = analogInputsHistorySlice.actions;
|
||||||
|
|
||||||
export default analogInputsHistorySlice.reducer;
|
export default analogInputsHistorySlice.reducer;
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
// Redux Slice: redux/slices/analogInputsSlice.ts
|
// Redux Slice: redux/slices/analogInputs/analogInputsSlice.ts
|
||||||
import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
|
import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
|
||||||
import type { AnalogInput } from "@/types/analogInput";
|
import type { AnalogInput } from "@/types/analogInput";
|
||||||
|
|
||||||
23
redux/slices/analogInputs/analogInputsUiSlice.ts
Normal file
23
redux/slices/analogInputs/analogInputsUiSlice.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
// /redux/slices/analogInputs/analogInputsUiSlice.ts
|
||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
interface AnalogInputsUiState {
|
||||||
|
isSettingsModalOpen: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: AnalogInputsUiState = {
|
||||||
|
isSettingsModalOpen: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const analogInputsUiSlice = createSlice({
|
||||||
|
name: "analogInputsUi",
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
setIsSettingsModalOpen: (state, action: PayloadAction<boolean>) => {
|
||||||
|
state.isSettingsModalOpen = action.payload;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const { setIsSettingsModalOpen } = analogInputsUiSlice.actions;
|
||||||
|
export default analogInputsUiSlice.reducer;
|
||||||
34
redux/slices/analogInputs/selectedAnalogInputSlice.ts
Normal file
34
redux/slices/analogInputs/selectedAnalogInputSlice.ts
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
// redux/slices/analogInputs/selectedAnalogInputSlice.ts
|
||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
import type { AnalogInput } from "@/types/analogInput";
|
||||||
|
|
||||||
|
// Anfangszustand: noch kein Eingang ausgewählt
|
||||||
|
const initialState: AnalogInput = {
|
||||||
|
id: 0,
|
||||||
|
label: "",
|
||||||
|
value: 0,
|
||||||
|
name: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedAnalogInputSlice = createSlice({
|
||||||
|
name: "selectedAnalogInput",
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
setSelectedAnalogInput(state, action: PayloadAction<AnalogInput>) {
|
||||||
|
if (state) {
|
||||||
|
// Mutiert vorhandene Struktur (optional, wenn initialState nicht null sein darf)
|
||||||
|
Object.assign(state, action.payload);
|
||||||
|
} else {
|
||||||
|
return action.payload;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clearSelectedAnalogInput() {
|
||||||
|
return initialState;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const { setSelectedAnalogInput, clearSelectedAnalogInput } =
|
||||||
|
selectedAnalogInputSlice.actions;
|
||||||
|
|
||||||
|
export default selectedAnalogInputSlice.reducer;
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
// /redux/slices/selectedAnalogInputSlice.ts
|
|
||||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
|
||||||
|
|
||||||
type SelectedAnalogInput = {
|
|
||||||
id: number;
|
|
||||||
label: string;
|
|
||||||
status: boolean;
|
|
||||||
loggerInterval: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
const initialState: SelectedAnalogInput | null = null;
|
|
||||||
// @ts-expect-error 123
|
|
||||||
const selectedAnalogInputSlice = createSlice<SelectedAnalogInput | null>({
|
|
||||||
name: "selectedAnalogInput",
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
setSelectedAnalogInput: (
|
|
||||||
_state,
|
|
||||||
action: PayloadAction<SelectedAnalogInput>
|
|
||||||
) => action.payload,
|
|
||||||
|
|
||||||
resetSelectedAnalogInput: () => null,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const { setSelectedAnalogInput, resetSelectedAnalogInput } =
|
|
||||||
selectedAnalogInputSlice.actions;
|
|
||||||
|
|
||||||
export default selectedAnalogInputSlice.reducer;
|
|
||||||
@@ -1,7 +1,5 @@
|
|||||||
// /redux/store.ts
|
// /redux/store.ts
|
||||||
import { configureStore } from "@reduxjs/toolkit";
|
import { configureStore } from "@reduxjs/toolkit";
|
||||||
import { persistReducer, persistStore } from "redux-persist";
|
|
||||||
import storage from "redux-persist/lib/storage"; // = localStorage
|
|
||||||
import authReducer from "./slices/authSlice";
|
import authReducer from "./slices/authSlice";
|
||||||
import kueChartModeReducer from "./slices/kueChartModeSlice";
|
import kueChartModeReducer from "./slices/kueChartModeSlice";
|
||||||
import webVersionReducer from "./slices/webVersionSlice";
|
import webVersionReducer from "./slices/webVersionSlice";
|
||||||
@@ -12,7 +10,7 @@ import opcuaSettingsReducer from "./slices/opcuaSettingsSlice";
|
|||||||
import digitalOutputsReducer from "./slices/digitalOutputsSlice";
|
import digitalOutputsReducer from "./slices/digitalOutputsSlice";
|
||||||
import brushReducer from "./slices/brushSlice";
|
import brushReducer from "./slices/brushSlice";
|
||||||
import tdrChartReducer from "./slices/tdrChartSlice";
|
import tdrChartReducer from "./slices/tdrChartSlice";
|
||||||
import analogInputsSlice from "./slices/analogInputsSlice";
|
import analogInputsSlice from "./slices/analogInputs/analogInputsSlice";
|
||||||
import digitalInputsReducer from "./slices/digitalInputsSlice";
|
import digitalInputsReducer from "./slices/digitalInputsSlice";
|
||||||
import tdrReferenceChartReducer from "./slices/tdrReferenceChartSlice";
|
import tdrReferenceChartReducer from "./slices/tdrReferenceChartSlice";
|
||||||
import loopChartReducer from "./slices/loopChartSlice";
|
import loopChartReducer from "./slices/loopChartSlice";
|
||||||
@@ -24,8 +22,8 @@ import tdmSingleChartReducer from "./slices/tdmSingleChartSlice";
|
|||||||
import tdrReferenceChartDataBySlotReducer from "./slices/tdrReferenceChartDataBySlotSlice";
|
import tdrReferenceChartDataBySlotReducer from "./slices/tdrReferenceChartDataBySlotSlice";
|
||||||
import loopChartTypeSlice from "./slices/loopChartTypeSlice";
|
import loopChartTypeSlice from "./slices/loopChartTypeSlice";
|
||||||
import systemVoltTempReducer from "./slices/systemVoltTempSlice";
|
import systemVoltTempReducer from "./slices/systemVoltTempSlice";
|
||||||
import analogInputsHistoryReducer from "./slices/analogInputsHistorySlice";
|
import analogInputsHistoryReducer from "./slices/analogInputs/analogInputsHistorySlice";
|
||||||
import selectedAnalogInputReducer from "./slices/selectedAnalogInputSlice";
|
import selectedAnalogInputReducer from "./slices/analogInputs/selectedAnalogInputSlice";
|
||||||
import messagesReducer from "./slices/messagesSlice";
|
import messagesReducer from "./slices/messagesSlice";
|
||||||
import firmwareUpdateReducer from "@/redux/slices/firmwareUpdateSlice";
|
import firmwareUpdateReducer from "@/redux/slices/firmwareUpdateSlice";
|
||||||
import confirmModalReducer from "./slices/confirmModalSlice";
|
import confirmModalReducer from "./slices/confirmModalSlice";
|
||||||
@@ -39,21 +37,7 @@ import temperaturProzessorReducer from "./slices/temperaturProzessorSlice";
|
|||||||
import { combineReducers } from "@reduxjs/toolkit";
|
import { combineReducers } from "@reduxjs/toolkit";
|
||||||
import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
|
import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
|
||||||
import systemChartReducer from "./slices/systemChartSlice";
|
import systemChartReducer from "./slices/systemChartSlice";
|
||||||
|
import analogInputsUiReducer from "./slices/analogInputs/analogInputsUiSlice";
|
||||||
//---------------------------------------
|
|
||||||
// 🧠 Nur diese Slices werden persistiert
|
|
||||||
const persistConfig = {
|
|
||||||
key: "root",
|
|
||||||
storage,
|
|
||||||
whitelist: [
|
|
||||||
"systemspannung5Vplus",
|
|
||||||
"systemspannung15Vplus",
|
|
||||||
"systemspannung15Vminus",
|
|
||||||
"systemspannung98Vminus",
|
|
||||||
"temperaturAdWandler",
|
|
||||||
"temperaturProzessor",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
const rootReducer = combineReducers({
|
const rootReducer = combineReducers({
|
||||||
systemspannung5Vplus: systemspannung5VplusReducer,
|
systemspannung5Vplus: systemspannung5VplusReducer,
|
||||||
@@ -62,8 +46,6 @@ const rootReducer = combineReducers({
|
|||||||
systemspannung98Vminus: systemspannung98VminusReducer,
|
systemspannung98Vminus: systemspannung98VminusReducer,
|
||||||
temperaturAdWandler: temperaturAdWandlerReducer,
|
temperaturAdWandler: temperaturAdWandlerReducer,
|
||||||
temperaturProzessor: temperaturProzessorReducer,
|
temperaturProzessor: temperaturProzessorReducer,
|
||||||
// Die restlichen Slices werden nicht persistiert, aber können hier auch aufgenommen werden,
|
|
||||||
// falls sie Teil des globalen States sein sollen:
|
|
||||||
authSlice: authReducer,
|
authSlice: authReducer,
|
||||||
kueChartModeSlice: kueChartModeReducer,
|
kueChartModeSlice: kueChartModeReducer,
|
||||||
webVersionSlice: webVersionReducer,
|
webVersionSlice: webVersionReducer,
|
||||||
@@ -73,7 +55,6 @@ const rootReducer = combineReducers({
|
|||||||
systemSettingsSlice: systemSettingsReducer,
|
systemSettingsSlice: systemSettingsReducer,
|
||||||
opcuaSettingsSlice: opcuaSettingsReducer,
|
opcuaSettingsSlice: opcuaSettingsReducer,
|
||||||
digitalOutputsSlice: digitalOutputsReducer,
|
digitalOutputsSlice: digitalOutputsReducer,
|
||||||
analogInputs: analogInputsSlice,
|
|
||||||
brushSlice: brushReducer,
|
brushSlice: brushReducer,
|
||||||
tdrChartSlice: tdrChartReducer,
|
tdrChartSlice: tdrChartReducer,
|
||||||
tdrReferenceChartSlice: tdrReferenceChartReducer,
|
tdrReferenceChartSlice: tdrReferenceChartReducer,
|
||||||
@@ -86,30 +67,32 @@ const rootReducer = combineReducers({
|
|||||||
tdrReferenceChartDataBySlotSlice: tdrReferenceChartDataBySlotReducer,
|
tdrReferenceChartDataBySlotSlice: tdrReferenceChartDataBySlotReducer,
|
||||||
loopChartType: loopChartTypeSlice,
|
loopChartType: loopChartTypeSlice,
|
||||||
systemVoltTemp: systemVoltTempReducer,
|
systemVoltTemp: systemVoltTempReducer,
|
||||||
analogInputsHistory: analogInputsHistoryReducer,
|
|
||||||
selectedAnalogInput: selectedAnalogInputReducer,
|
|
||||||
messages: messagesReducer,
|
messages: messagesReducer,
|
||||||
firmwareUpdate: firmwareUpdateReducer,
|
firmwareUpdate: firmwareUpdateReducer,
|
||||||
confirmModal: confirmModalReducer,
|
confirmModal: confirmModalReducer,
|
||||||
firmwareProgress: firmwareProgressReducer,
|
firmwareProgress: firmwareProgressReducer,
|
||||||
systemChartSlice: systemChartReducer,
|
systemChartSlice: systemChartReducer,
|
||||||
|
analogInputs: analogInputsSlice,
|
||||||
|
analogInputsHistory: analogInputsHistoryReducer,
|
||||||
|
selectedAnalogInput: selectedAnalogInputReducer,
|
||||||
|
analogInputsUi: analogInputsUiReducer,
|
||||||
});
|
});
|
||||||
|
// ⬆️ Alle deine Imports und combineReducers bleiben so wie du sie geschrieben hast ...
|
||||||
|
|
||||||
const persistedReducer = persistReducer(persistConfig, rootReducer);
|
// ✅ Store erstellen
|
||||||
|
|
||||||
//-------------------------------------------
|
|
||||||
|
|
||||||
export const store = configureStore({
|
export const store = configureStore({
|
||||||
reducer: persistedReducer,
|
reducer: rootReducer,
|
||||||
|
// (optional) middleware anpassen, z. B. um Warnungen zu ignorieren:
|
||||||
|
middleware: (getDefaultMiddleware) =>
|
||||||
|
getDefaultMiddleware({
|
||||||
|
serializableCheck: false, // z. B. falls du redux-persist nutzt oder dispatch mit non-serializable Payloads hast
|
||||||
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const persistor = persistStore(store);
|
// ✅ Typen für AppDispatch & RootState
|
||||||
|
|
||||||
// Typisierte Hooks
|
|
||||||
export type RootState = ReturnType<typeof store.getState>;
|
export type RootState = ReturnType<typeof store.getState>;
|
||||||
export type AppDispatch = typeof store.dispatch;
|
export type AppDispatch = typeof store.dispatch;
|
||||||
|
|
||||||
export const useAppDispatch = () => useDispatch<AppDispatch>();
|
// ✅ Hooks für Typsicherheit
|
||||||
|
export const useAppDispatch: () => AppDispatch = useDispatch;
|
||||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
||||||
|
|
||||||
export default store;
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { createAsyncThunk } from "@reduxjs/toolkit";
|
import { createAsyncThunk } from "@reduxjs/toolkit";
|
||||||
import { fetchAnalogInputsHistory } from "@/services/fetchAnalogInputsHistoryService";
|
import { fetchAnalogInputsHistory } from "@/services/fetchAnalogInputsHistoryService";
|
||||||
import { AnalogInputsHistoryEntry } from "../slices/analogInputsHistorySlice";
|
import { AnalogInputsHistoryEntry } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
|
||||||
|
|
||||||
export const getAnalogInputsHistoryThunk = createAsyncThunk(
|
export const getAnalogInputsHistoryThunk = createAsyncThunk(
|
||||||
"analogInputsHistory/fetch",
|
"analogInputsHistory/fetch",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// /redux/thunks/getAnalogInputsThunk.ts
|
// /redux/thunks/getAnalogInputsThunk.ts
|
||||||
import { createAsyncThunk } from "@reduxjs/toolkit";
|
import { createAsyncThunk } from "@reduxjs/toolkit";
|
||||||
import { fetchAnalogInputsService } from "@/services/fetchAnalogInputsService";
|
import { fetchAnalogInputsService } from "@/services/fetchAnalogInputsService";
|
||||||
import { setAnalogInputs } from "@/redux/slices/analogInputsSlice";
|
import { setAnalogInputs } from "@/redux/slices/analogInputs/analogInputsSlice";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holt die analogen Eingänge von der API und speichert sie in Redux.
|
* Holt die analogen Eingänge von der API und speichert sie in Redux.
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
// services/fetchAnalogInputsHistory.ts
|
// services/fetchAnalogInputsHistory.ts
|
||||||
|
|
||||||
import { AnalogInputsHistoryEntry } from "@/redux/slices/analogInputsHistorySlice";
|
import { AnalogInputsHistoryEntry } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
|
||||||
|
|
||||||
export async function fetchAnalogInputsHistory(
|
export async function fetchAnalogInputsHistory(
|
||||||
eingang: number,
|
eingang: number,
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ export interface AnalogInput {
|
|||||||
unit?: string;
|
unit?: string;
|
||||||
value: number;
|
value: number;
|
||||||
name: string;
|
name: string;
|
||||||
|
loggerInterval?: string;
|
||||||
|
|
||||||
// Statusflags
|
// Statusflags
|
||||||
isUnderWarning?: boolean;
|
isUnderWarning?: boolean;
|
||||||
@@ -13,8 +14,8 @@ export interface AnalogInput {
|
|||||||
isOverLimit?: boolean;
|
isOverLimit?: boolean;
|
||||||
|
|
||||||
// Weitere optionale Felder
|
// Weitere optionale Felder
|
||||||
offset?: number;
|
offset?: number | string;
|
||||||
factor?: number;
|
factor?: number | string;
|
||||||
weighting?: number;
|
weighting?: number;
|
||||||
|
|
||||||
// Zusätzliche Felder im Slice
|
// Zusätzliche Felder im Slice
|
||||||
|
|||||||
Reference in New Issue
Block a user