From 41910e450e88abfe47d7589fd9a574bae4428a25 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 10 Sep 2025 12:25:40 +0200 Subject: [PATCH] style: Detailansicht Modal dark mode --- .env.development | 2 +- .env.production | 2 +- CHANGELOG.md | 5 + components/main/system/DetailModal.tsx | 109 +++++++++++------- .../main/system/SystemChartActionBar.tsx | 22 ++-- package-lock.json | 4 +- package.json | 2 +- 7 files changed, 88 insertions(+), 58 deletions(-) diff --git a/.env.development b/.env.development index 82d6d33..b48ce7c 100644 --- a/.env.development +++ b/.env.development @@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_USE_CGI=false # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.898 +NEXT_PUBLIC_APP_VERSION=1.6.899 NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) diff --git a/.env.production b/.env.production index 4e4c5f1..c719e96 100644 --- a/.env.production +++ b/.env.production @@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_USE_CGI=true # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.898 +NEXT_PUBLIC_APP_VERSION=1.6.899 NEXT_PUBLIC_CPL_MODE=production \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f1ce71..d156d1a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [1.6.899] – 2025-09-10 + +- style: AnalogInputsChartModal dark mode + +--- ## [1.6.898] – 2025-09-10 - style: AnalogInputsSettingsModal dark mode diff --git a/components/main/system/DetailModal.tsx b/components/main/system/DetailModal.tsx index aeb6ab2..37e2c43 100644 --- a/components/main/system/DetailModal.tsx +++ b/components/main/system/DetailModal.tsx @@ -27,6 +27,10 @@ import { Legend, Filler, TimeScale, + type ChartDataset, + type ChartOptions, + type ChartData, + type Chart, } from "chart.js"; import "chartjs-adapter-date-fns"; @@ -65,7 +69,7 @@ type ReduxDataEntry = { m?: number; // aktueller Messwert (optional, falls vorhanden) }; -const chartOptions = { +const chartOptions: ChartOptions<"line"> = { responsive: true, maintainAspectRatio: false, plugins: { @@ -78,9 +82,11 @@ const chartOptions = { mode: "index" as const, intersect: false, callbacks: { + // eslint-disable-next-line @typescript-eslint/no-explicit-any label: function (ctx: any) { return `Messwert: ${ctx.parsed.y}`; }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any title: function (items: any[]) { const date = items[0].parsed.x; return `Zeitpunkt: ${new Date(date).toLocaleString("de-DE")}`; @@ -140,13 +146,13 @@ export const DetailModal = ({ }: Props) => { // Stable empty reference to avoid React-Redux dev warning about selector returning new [] each call const EMPTY_REDUX_DATA: ReadonlyArray = Object.freeze([]); - const chartRef = useRef(null); - const [chartData, setChartData] = useState({ + const chartRef = useRef | null>(null); + const [chartData, setChartData] = useState>({ datasets: [], }); const [isLoading, setIsLoading] = useState(false); const [shouldUpdateChart, setShouldUpdateChart] = useState(false); - const [forceUpdate, setForceUpdate] = useState(0); // Für periodische UI-Updates + // const [forceUpdate, setForceUpdate] = useState(0); // Für periodische UI-Updates (derzeit nicht benötigt) const reduxData = useSelector((state: RootState) => { switch (selectedKey) { @@ -221,11 +227,8 @@ export const DetailModal = ({ // Periodische UI-Updates alle 2 Sekunden während Wartezeit useEffect(() => { if (isOpen && (!chartData.datasets || chartData.datasets.length === 0)) { - const interval = setInterval(() => { - setForceUpdate((prev) => prev + 1); // Force re-render für cursor-wait Update - }, 2000); - - return () => clearInterval(interval); + // Optional: periodische Re-Renders wurden deaktiviert, da nicht mehr notwendig + // (kann wieder aktiviert werden falls Cursor-Animation erwünscht ist) } }, [isOpen, chartData.datasets]); @@ -274,7 +277,12 @@ export const DetailModal = ({ useEffect(() => { if (chartRef.current && selectedKey) { - chartRef.current.options.plugins.title.text = `Verlauf ${selectedKey}`; + const opts = chartRef.current.options as ChartOptions<"line"> & { + plugins?: { title?: { text?: string } }; + }; + if (opts.plugins?.title) { + opts.plugins.title.text = `Verlauf ${selectedKey}`; + } chartRef.current.update("none"); } }, [selectedKey]); @@ -290,14 +298,13 @@ export const DetailModal = ({ if (chartRef.current && isLoading) { const chartInstance = chartRef.current; // Save previous callback to restore later - const prevCallback = chartInstance.options.animation?.onComplete; - chartInstance.options.animation = { - ...chartInstance.options.animation, - onComplete: () => { - setIsLoading(false); - if (typeof prevCallback === "function") prevCallback(); - }, + const animation: any = chartInstance.options.animation || {}; // eslint-disable-line @typescript-eslint/no-explicit-any + const prevCallback = animation.onComplete; + animation.onComplete = () => { + setIsLoading(false); + if (typeof prevCallback === "function") prevCallback(); }; + chartInstance.options.animation = animation; chartInstance.update(); } }, [chartData, isLoading]); @@ -338,7 +345,7 @@ export const DetailModal = ({ } // Create datasets array for multiple lines - const datasets = []; + const datasets: ChartDataset<"line">[] = []; // Check which data fields are available and create datasets accordingly const hasMinimum = filtered.some( @@ -416,7 +423,8 @@ export const DetailModal = ({ }); } - const newChartData = { + const newChartData: ChartData<"line"> = { + labels: [], datasets: datasets, }; @@ -428,7 +436,13 @@ export const DetailModal = ({ setChartData({ datasets: [] }); setShouldUpdateChart(false); // Reset flag } - }, [reduxData, selectedKey, shouldUpdateChart]); + }, [ + reduxData, + selectedKey, + shouldUpdateChart, + pickerVonDatum, + pickerBisDatum, + ]); if (!isOpen || !selectedKey) return null; @@ -442,19 +456,25 @@ export const DetailModal = ({ }`} >
-
-

+ {/* Header */} +
+

Detailansicht: {selectedKey}

- -
+
-
-
+
- - -
- + {/* Body */} +
+
+ +
+
+ +
+ {/* Optional Footer (currently empty, reserved for future) */}

); diff --git a/components/main/system/SystemChartActionBar.tsx b/components/main/system/SystemChartActionBar.tsx index d774dc1..0c3169c 100644 --- a/components/main/system/SystemChartActionBar.tsx +++ b/components/main/system/SystemChartActionBar.tsx @@ -30,7 +30,7 @@ const SystemChartActionBar: React.FC = ({
- + { { DIA0: "Alle Messwerte", DIA1: "Stündlich", DIA2: "Täglich" }[ @@ -39,7 +39,7 @@ const SystemChartActionBar: React.FC = ({ } @@ -50,20 +50,18 @@ const SystemChartActionBar: React.FC = ({ /> - + {["DIA0", "DIA1", "DIA2"].map((option) => ( - `px-4 py-1 cursor-pointer ${ - selected - ? "bg-littwin-blue text-white" - : active - ? "bg-gray-200" - : "" - }` - } + className={({ selected, active }) => { + const base = "px-4 py-1 cursor-pointer text-sm"; + if (selected) return `${base} bg-littwin-blue text-white`; // selected highlight + if (active) + return `${base} bg-[var(--color-surface-alt)] text-fg`; + return `${base} text-fg`; + }} > { { diff --git a/package-lock.json b/package-lock.json index 4b6a48d..c8f908f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cpl-v4", - "version": "1.6.898", + "version": "1.6.899", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cpl-v4", - "version": "1.6.898", + "version": "1.6.899", "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", diff --git a/package.json b/package.json index 4b298a8..c95ea1d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cpl-v4", - "version": "1.6.898", + "version": "1.6.899", "private": true, "scripts": { "dev": "next dev -p 3000",