diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 2.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 2.tsx new file mode 100644 index 0000000..f9a1663 --- /dev/null +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 2.tsx @@ -0,0 +1,203 @@ +"use client"; +import React, { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { RootState } from "../../../../../../redux/store"; +import { + setVonDatum, + setBisDatum, +} from "../../../../../../redux/slices/kabelueberwachungChartSlice"; +import { + ComposedChart, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, + Line, + Brush, + Area, +} from "recharts"; + +// Benutzerdefinierter Tooltip für die richtige Anordnung der Werte +const CustomTooltip = ({ active, payload, label }: any) => { + if (active && payload && payload.length) { + const messwertMax = payload.find( + (p: any) => p.dataKey === "messwertMaximum" + ); + const messwert = payload.find((p: any) => p.dataKey === "messwert"); + const messwertMin = payload.find( + (p: any) => p.dataKey === "messwertMinimum" + ); + const messwertDurchschnitt = payload.find( + (p: any) => p.dataKey === "messwertDurchschnitt" + ); + + return ( +
+ {new Date(label).toLocaleString()} +
+ {messwertMax + ? `Messwert Maximum: ${messwertMax.value.toFixed(2)} kOhm` + : ""} +
+
+ {messwert ? `Messwert: ${messwert.value.toFixed(2)} kOhm` : ""} + {messwertDurchschnitt + ? `Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed( + 2 + )} kOhm` + : ""} +
+
+ {messwertMin + ? `Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm` + : ""} +
+
+ ); + } + return null; +}; + +const LoopMeasurementChart = () => { + const littwinBlue = getComputedStyle( + document.documentElement + ).getPropertyValue("--littwin-blue"); + const dispatch = useDispatch(); + const istVollbild = useSelector( + (state: RootState) => state.kabelueberwachungChart.isFullScreen + ); + const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector( + (state: RootState) => state.kabelueberwachungChart + ); + const ausgewaehlterModus = useSelector( + (state: RootState) => state.kabelueberwachungChart.selectedMode + ); + + // Konvertiere Daten für den Chart & kehre Reihenfolge um + const formatierteDaten = loopMeasurementCurveChartData + .map((eintrag) => ({ + zeit: new Date(eintrag.t).getTime(), // Zeitstempel + messwertMinimum: eintrag.i, // Minimum (Tiefstwert) + messwertMaximum: eintrag.a, // Maximum (Höchstwert) + messwert: eintrag.m ?? null, // Aktueller Messwert + messwertDurchschnitt: + ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2" + ? eintrag.g ?? null + : null, // Durchschnittswert nur in DIA1 & DIA2 + })) + .reverse(); // Hier wird die Reihenfolge umgekehrt + + // Berechnung des minimalen Werts für Y-Achse + const minMesswert = Math.min( + ...loopMeasurementCurveChartData.map((entry) => entry.i) + ); + + const [zoomedXDomain, setZoomedXDomain] = useState([ + new Date(vonDatum).getTime(), + new Date(bisDatum).getTime(), + ]); + + const handleZoom = (domain: any) => { + setZoomedXDomain(domain); + }; + + return ( +
+ + + + new Date(zeit).toLocaleDateString()} + /> + `${wert.toFixed(2)} kOhm`} + /> + } /> + + {/* Manuell definierte Legende mit der richtigen Reihenfolge */} + + + {/* Messwert Minimum als Linie */} + + + {/* Messwert Maximum als Linie */} + + + {/* Messwert Durchschnitt (nur in DIA1 & DIA2) */} + {(ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2") && ( + + )} + + {/* Messwert als Punktdiagramm */} + {ausgewaehlterModus === "DIA0" && ( + + )} + + + +
+ ); +}; + +export default LoopMeasurementChart; diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 3.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 3.tsx new file mode 100644 index 0000000..76b7d18 --- /dev/null +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy 3.tsx @@ -0,0 +1,189 @@ +"use client"; +import React from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { RootState } from "../../../../../../redux/store"; +import { + setVonDatum, + setBisDatum, +} from "../../../../../../redux/slices/kabelueberwachungChartSlice"; +import { + ComposedChart, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, + Line, +} from "recharts"; + +// 📌 Benutzerdefinierter Tooltip für die richtige Anordnung der Werte +const CustomTooltip = ({ active, payload, label }: any) => { + if (active && payload && payload.length) { + const messwertMax = payload.find( + (p: any) => p.dataKey === "messwertMaximum" + ); + const messwert = payload.find((p: any) => p.dataKey === "messwert"); + const messwertMin = payload.find( + (p: any) => p.dataKey === "messwertMinimum" + ); + const messwertDurchschnitt = payload.find( + (p: any) => p.dataKey === "messwertDurchschnitt" + ); + + return ( +
+ {new Date(label).toLocaleString()} +
+ {messwertMax + ? `Messwert Maximum: ${messwertMax.value.toFixed(2)} kOhm` + : ""} +
+
+ {messwert ? `Messwert: ${messwert.value.toFixed(2)} kOhm` : ""} + {messwertDurchschnitt + ? `Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed( + 2 + )} kOhm` + : ""} +
+
+ {messwertMin + ? `Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm` + : ""} +
+
+ ); + } + return null; +}; + +const LoopMeasurementChart = () => { + const littwinBlue = getComputedStyle( + document.documentElement + ).getPropertyValue("--littwin-blue"); + const dispatch = useDispatch(); + const istVollbild = useSelector( + (state: RootState) => state.kabelueberwachungChart.isFullScreen + ); + const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector( + (state: RootState) => state.kabelueberwachungChart + ); + const ausgewaehlterModus = useSelector( + (state: RootState) => state.kabelueberwachungChart.selectedMode + ); + + // 📌 Konvertiere Daten für den Chart & kehre Reihenfolge um + const formatierteDaten = loopMeasurementCurveChartData + .map((eintrag) => ({ + zeit: new Date(eintrag.t).getTime(), // Zeitstempel + messwertMinimum: eintrag.i, // Minimum (Tiefstwert) + messwertMaximum: eintrag.a, // Maximum (Höchstwert) + messwert: eintrag.m ?? null, // Aktueller Messwert + messwertDurchschnitt: + ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2" + ? eintrag.g ?? null + : null, // Durchschnittswert nur in DIA1 & DIA2 + })) + .reverse(); // 🔄 Hier wird die Reihenfolge umgekehrt + + // Berechnung des minimalen Werts für Y-Achse + const minMesswert = Math.min( + ...loopMeasurementCurveChartData.map((entry) => entry.i) + ); + + return ( +
+ + + + new Date(zeit).toLocaleDateString()} + /> + `${wert.toFixed(2)} kOhm`} + /> + } /> + + {/* 📌 Manuell definierte Legende mit der richtigen Reihenfolge */} + + + {/* Messwert Minimum als Linie */} + + + {/* Messwert Maximum als Linie */} + + + {/* Messwert Durchschnitt (nur in DIA1 & DIA2) */} + {(ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2") && ( + + )} + + {/* Messwert als Punktdiagramm */} + {ausgewaehlterModus === "DIA0" && ( + + )} + + +
+ ); +}; + +export default LoopMeasurementChart; diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy.tsx new file mode 100644 index 0000000..58ef243 --- /dev/null +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart copy.tsx @@ -0,0 +1,188 @@ +"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +import React, { useEffect, useRef, useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { RootState } from "../../../../../../redux/store"; +import Chart from "chart.js/auto"; +import "chartjs-adapter-moment"; +import { + setVonDatum, + setBisDatum, +} from "../../../../../../redux/slices/kabelueberwachungChartSlice"; + +const LoopMeasurementChart = () => { + const dispatch = useDispatch(); + const isFullScreen = useSelector( + (state: RootState) => state.kabelueberwachungChart.isFullScreen + ); + const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector( + (state: RootState) => state.kabelueberwachungChart + ); + const selectedMode = useSelector( + (state: RootState) => state.kabelueberwachungChart.selectedMode + ); + + const chartRef = useRef(null); + const chartInstance = useRef(null); + const [zoomPlugin, setZoomPlugin] = useState(null); + + useEffect(() => { + if (typeof window !== "undefined") { + import("chartjs-plugin-zoom").then((mod) => { + setZoomPlugin(mod.default); + Chart.register(mod.default); + }); + } + }, []); + + useEffect(() => { + if (chartRef.current) { + if (chartInstance.current) { + chartInstance.current.destroy(); + } + + console.log("Chart Data:", loopMeasurementCurveChartData); + console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum); + console.log("Selected Mode:", selectedMode); + + // Basis-Datasets für alle Datenpunkte + const datasets = [ + { + label: "Messwert Minimum ", + data: loopMeasurementCurveChartData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.i, + })), + borderColor: "rgba(75, 192, 192, 1)", // Türkis + backgroundColor: "rgba(75, 192, 192, 0.2)", + fill: false, + }, + { + label: "Messwert Maximum ", + data: loopMeasurementCurveChartData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.a, + })), + borderColor: "rgba(192, 75, 75, 1)", // Rot + backgroundColor: "rgba(192, 75, 75, 0.2)", + fill: false, + }, + ]; + + // Falls DIA0: `m` als aktueller Messwert verwenden + if ( + selectedMode === "DIA0" && + loopMeasurementCurveChartData.some((entry) => entry.m !== undefined) + ) { + datasets.push({ + label: "Messwert", + data: loopMeasurementCurveChartData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.m ?? NaN, + })), + borderColor: "rgba(255, 165, 0, 1)", // Orange + backgroundColor: "rgba(255, 165, 0, 0.2)", + fill: false, + }); + } + + // Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden + if ( + (selectedMode === "DIA1" || selectedMode === "DIA2") && + loopMeasurementCurveChartData.some((entry) => entry.g !== undefined) + ) { + datasets.push({ + label: "Messwert Durchschnitt", // g als Durchschnittswert verwenden + data: loopMeasurementCurveChartData.map((entry) => ({ + x: new Date(entry.t).getTime(), + y: entry.g ?? NaN, + })), + borderColor: "rgba(75, 75, 192, 1)", // Blau + backgroundColor: "rgba(75, 75, 192, 0.2)", + fill: false, + }); + } + + const ctx = chartRef.current.getContext("2d"); + if (ctx) { + chartInstance.current = new Chart(ctx, { + type: "line", + data: { datasets }, + options: { + responsive: true, + maintainAspectRatio: false, + animation: false, + elements: { + line: { spanGaps: true }, + }, + scales: { + x: { + type: "time", + time: { + unit: "day", + tooltipFormat: "dd.MM.yyyy HH:mm", + displayFormats: { day: "dd.MM.yyyy" }, + }, + title: { display: true, text: "" }, // kann Zeit oder Datum eingefügt werden für X-Achse + min: new Date(vonDatum).getTime(), + max: new Date(bisDatum).getTime(), + }, + y: { + ticks: { + callback: (value) => + (typeof value === "number" ? value.toFixed(2) : value) + + " kOhm", + }, + }, + }, + plugins: { + tooltip: { + callbacks: { + label: (tooltipItem) => { + const rawItem = tooltipItem.raw as { x: number; y: number }; + return `${tooltipItem.dataset.label}: ${rawItem.y.toFixed( + 2 + )} kOhm`; + }, + }, + }, + zoom: { + pan: { enabled: true, mode: "xy" }, + zoom: { + wheel: { enabled: true }, + pinch: { enabled: true }, + mode: "xy", + onZoomComplete: (chart) => { + const xScale = chart.chart.scales.x; + const newVonDatum = new Date(xScale.min) + .toISOString() + .split("T")[0]; + const newBisDatum = new Date(xScale.max) + .toISOString() + .split("T")[0]; + + dispatch(setVonDatum(newVonDatum)); + dispatch(setBisDatum(newBisDatum)); + }, + }, + }, + }, + }, + }); + } + } + }, [loopMeasurementCurveChartData, vonDatum, bisDatum, selectedMode]); + + return ( +
+ +
+ ); +}; + +export default LoopMeasurementChart; diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index e7f6d12..82ac7a6 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -1,189 +1,168 @@ -"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx -import React, { useEffect, useRef, useState } from "react"; +"use client"; +import React, { useCallback, useEffect, useMemo } from "react"; import { useSelector, useDispatch } from "react-redux"; import { RootState } from "../../../../../../redux/store"; -import Chart from "chart.js/auto"; -import "chartjs-adapter-moment"; import { - setVonDatum, - setBisDatum, -} from "../../../../../../redux/slices/kabelueberwachungChartSlice"; + ComposedChart, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, + Line, + Brush, +} from "recharts"; +import { setBrushRange } from "../../../../../../redux/slices/brushSlice"; + +const CustomTooltip = ({ active, payload, label }: any) => { + if (active && payload && payload.length) { + const messwertMax = payload.find( + (p: any) => p.dataKey === "messwertMaximum" + ); + const messwert = payload.find((p: any) => p.dataKey === "messwert"); + const messwertMin = payload.find( + (p: any) => p.dataKey === "messwertMinimum" + ); + const messwertDurchschnitt = payload.find( + (p: any) => p.dataKey === "messwertDurchschnitt" + ); + + return ( +
+ {new Date(label).toLocaleString()} + {messwertMax && ( +
+ Messwert Maximum: {messwertMax.value.toFixed(2)} kOhm +
+ )} + {messwert && ( +
+ Messwert: {messwert.value.toFixed(2)} kOhm +
+ )} + {messwertDurchschnitt && ( +
{`Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed( + 2 + )} kOhm`}
+ )} + {messwertMin && ( +
{`Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`}
+ )} +
+ ); + } + return null; +}; const LoopMeasurementChart = () => { const dispatch = useDispatch(); - const isFullScreen = useSelector( - (state: RootState) => state.kabelueberwachungChart.isFullScreen - ); - const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector( - (state: RootState) => state.kabelueberwachungChart - ); - const selectedMode = useSelector( - (state: RootState) => state.kabelueberwachungChart.selectedMode + + const brushRange = useSelector((state: RootState) => state.brush); + const { + loopMeasurementCurveChartData, + selectedMode, + vonDatum, + bisDatum, + isFullScreen, + } = useSelector((state: RootState) => state.kabelueberwachungChart); + + const formatierteDaten = useMemo( + () => + loopMeasurementCurveChartData + .map((eintrag) => ({ + zeit: new Date(eintrag.t).getTime(), + messwertMinimum: eintrag.i, + messwertMaximum: eintrag.a, + messwert: eintrag.m ?? null, + messwertDurchschnitt: ["DIA1", "DIA2"].includes(selectedMode) + ? eintrag.g ?? null + : null, + })) + .reverse(), + [loopMeasurementCurveChartData, selectedMode] ); - const chartRef = useRef(null); - const chartInstance = useRef(null); - const [zoomPlugin, setZoomPlugin] = useState(null); - + // Initialisierung des Brush-Bereichs nur beim ersten Laden der Daten useEffect(() => { - if (typeof window !== "undefined") { - import("chartjs-plugin-zoom").then((mod) => { - setZoomPlugin(mod.default); - Chart.register(mod.default); - }); + if (brushRange.endIndex === 0 && formatierteDaten.length) { + dispatch( + setBrushRange({ + startIndex: 0, + endIndex: formatierteDaten.length - 1, + }) + ); } - }, []); + }, [formatierteDaten, brushRange.endIndex, dispatch]); - useEffect(() => { - if (chartRef.current) { - if (chartInstance.current) { - chartInstance.current.destroy(); - } - - console.log("Chart Data:", loopMeasurementCurveChartData); - console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum); - console.log("Selected Mode:", selectedMode); - - // Basis-Datasets für alle Datenpunkte - const datasets = [ - { - label: "Messwert Minimum ", - data: loopMeasurementCurveChartData.map((entry) => ({ - x: new Date(entry.t).getTime(), - y: entry.i, - })), - borderColor: "rgba(75, 192, 192, 1)", // Türkis - backgroundColor: "rgba(75, 192, 192, 0.2)", - fill: false, - }, - { - label: "Messwert Maximum ", - data: loopMeasurementCurveChartData.map((entry) => ({ - x: new Date(entry.t).getTime(), - y: entry.a, - })), - borderColor: "rgba(192, 75, 75, 1)", // Rot - backgroundColor: "rgba(192, 75, 75, 0.2)", - fill: false, - }, - ]; - - // Falls DIA0: `m` als aktueller Messwert verwenden - if ( - selectedMode === "DIA0" && - loopMeasurementCurveChartData.some((entry) => entry.m !== undefined) - ) { - datasets.push({ - label: "Messwert", - data: loopMeasurementCurveChartData.map((entry) => ({ - x: new Date(entry.t).getTime(), - y: entry.m ?? NaN, - })), - borderColor: "rgba(255, 165, 0, 1)", // Orange - backgroundColor: "rgba(255, 165, 0, 0.2)", - fill: false, - }); - } - - // Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden - if ( - (selectedMode === "DIA1" || selectedMode === "DIA2") && - loopMeasurementCurveChartData.some((entry) => entry.g !== undefined) - ) { - datasets.push({ - label: "Messwert Durchschnitt", // g als Durchschnittswert verwenden - data: loopMeasurementCurveChartData.map((entry) => ({ - x: new Date(entry.t).getTime(), - y: entry.g ?? NaN, - })), - borderColor: "rgba(75, 75, 192, 1)", // Blau - backgroundColor: "rgba(75, 75, 192, 0.2)", - fill: false, - }); - } - - const ctx = chartRef.current.getContext("2d"); - if (ctx) { - chartInstance.current = new Chart(ctx, { - type: "line", - data: { datasets }, - options: { - responsive: true, - maintainAspectRatio: false, - animation: false, - elements: { - line: { - tension: 0.4, // Sorgt für eine weichere Kurve - cubicInterpolationMode: "monotone", - }, - }, - scales: { - x: { - type: "time", - time: { - unit: "day", - tooltipFormat: "dd.MM.yyyy HH:mm", - displayFormats: { day: "dd.MM.yyyy" }, - }, - title: { display: true, text: "" }, // kann Zeit oder Datum eingefügt werden für X-Achse - min: new Date(vonDatum).getTime(), - max: new Date(bisDatum).getTime(), - }, - y: { - ticks: { - callback: (value) => - (typeof value === "number" ? value.toFixed(2) : value) + - " kOhm", - }, - }, - }, - plugins: { - tooltip: { - callbacks: { - label: (tooltipItem) => { - const rawItem = tooltipItem.raw as { x: number; y: number }; - return `${tooltipItem.dataset.label}: ${rawItem.y.toFixed( - 2 - )} kOhm`; - }, - }, - }, - zoom: { - pan: { enabled: true, mode: "xy" }, - zoom: { - wheel: { enabled: true }, - pinch: { enabled: true }, - mode: "xy", - onZoomComplete: (chart) => { - const xScale = chart.chart.scales.x; - const newVonDatum = new Date(xScale.min) - .toISOString() - .split("T")[0]; - const newBisDatum = new Date(xScale.max) - .toISOString() - .split("T")[0]; - - dispatch(setVonDatum(newVonDatum)); - dispatch(setBisDatum(newBisDatum)); - }, - }, - }, - }, - }, - }); - } - } - }, [loopMeasurementCurveChartData, vonDatum, bisDatum, selectedMode]); + const handleBrushChange = useCallback( + ({ startIndex, endIndex }) => { + dispatch(setBrushRange({ startIndex, endIndex })); + }, + [dispatch] + ); return ( -
- +
+ + + + new Date(zeit).toLocaleDateString()} + /> + `${wert.toFixed(2)} kOhm`} + /> + } /> + + + + {["DIA1", "DIA2"].includes(selectedMode) && ( + + )} + {selectedMode === "DIA0" && ( + + )} + + +
); }; diff --git a/config/webVersion.ts b/config/webVersion.ts index 1472195..69cda3d 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.119"; +const webVersion = "1.6.120"; export default webVersion; diff --git a/redux/slices/brushSlice.ts b/redux/slices/brushSlice.ts new file mode 100644 index 0000000..c43b02c --- /dev/null +++ b/redux/slices/brushSlice.ts @@ -0,0 +1,19 @@ +// brushSlice.ts (✅ Korrekt) +import { createSlice } from "@reduxjs/toolkit"; + +const brushSlice = createSlice({ + name: "brush", + initialState: { + startIndex: 0, + endIndex: 0, + }, + reducers: { + setBrushRange(state, action) { + state.startIndex = action.payload.startIndex; + state.endIndex = action.payload.endIndex; + }, + }, +}); + +export const { setBrushRange } = brushSlice.actions; +export default brushSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts index de71d8e..b0ecbed 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -11,6 +11,7 @@ import systemSettingsReducer from "./slices/systemSettingsSlice"; import opcuaSettingsReducer from "./slices/opcuaSettingsSlice"; import digitalOutputsReducer from "./slices/digitalOutputsSlice"; import analogeEingaengeReducer from "./slices/analogeEingaengeSlice"; +import brushReducer from "./slices/brushSlice"; const store = configureStore({ reducer: { @@ -25,6 +26,7 @@ const store = configureStore({ opcuaSettings: opcuaSettingsReducer, digitalOutputs: digitalOutputsReducer, analogeEingaenge: analogeEingaengeReducer, + brush: brushReducer, }, }); diff --git a/styles/globals.css b/styles/globals.css index e71da9a..9dc9b5e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -6,6 +6,7 @@ :root { --background: #ffffff; --foreground: #171717; + --littwin-blue: #00aeef; } @media (prefers-color-scheme: dark) {