From 3b61dcb31b0f081ac9f8f6d93e6635f16c3c143e Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 1 Aug 2025 14:05:58 +0200 Subject: [PATCH] git commit -m "feat: Enhance DetailModal with auto-loading and improved UX - Add automatic data loading every 2 seconds when no chart data available - Implement intelligent cursor-wait display for entire modal during loading - Auto-reset to 'Alle Messwerte' (DIA0) and clear date fields on modal open - Add Tailwind-based color system for chart lines (gray for min/max, littwin-blue for current/average) - Improve chart line layering with background/foreground organization - Add periodic UI updates to ensure responsive loading feedback - Maintain manual 'Daten laden' button control alongside auto-loading - Fix TypeScript dependencies and optimize useEffect performance" --- .env.development | 2 +- .env.production | 2 +- CHANGELOG.md | 5 ++ components/main/system/DetailModal.tsx | 109 +++++++++++++++---------- package-lock.json | 4 +- package.json | 2 +- 6 files changed, 77 insertions(+), 47 deletions(-) diff --git a/.env.development b/.env.development index bebdce5..2a6934b 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.679 +NEXT_PUBLIC_APP_VERSION=1.6.680 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 8c88872..faeed57 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.679 +NEXT_PUBLIC_APP_VERSION=1.6.680 NEXT_PUBLIC_CPL_MODE=production \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c3ac45..fe1d123 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [1.6.680] – 2025-08-01 + +- fix: System ->Detailansicht -> Modal + +--- ## [1.6.679] – 2025-08-01 - fix: Chart System diff --git a/components/main/system/DetailModal.tsx b/components/main/system/DetailModal.tsx index 1df03a2..9c3bd58 100644 --- a/components/main/system/DetailModal.tsx +++ b/components/main/system/DetailModal.tsx @@ -148,6 +148,7 @@ export const DetailModal = ({ }); const [isLoading, setIsLoading] = useState(false); const [shouldUpdateChart, setShouldUpdateChart] = useState(false); + const [forceUpdate, setForceUpdate] = useState(0); // Für periodische UI-Updates const reduxData = useSelector((state: RootState) => { switch (selectedKey) { @@ -173,46 +174,6 @@ export const DetailModal = ({ ); const dispatch = useAppDispatch(); - // Reset Zeitraum auf DIA0 und Datumswerte wenn Modal geöffnet wird - useEffect(() => { - if (isOpen) { - setZeitraum("DIA0"); - dispatch(setVonDatum("")); - dispatch(setBisDatum("")); - - // Automatisch Daten laden nach dem Reset - setTimeout(() => { - handleFetchData(); - }, 100); // Kurze Verzögerung damit setZeitraum wirksam wird - } - }, [isOpen, setZeitraum, dispatch]); - - const toggleFullScreen = () => { - dispatch(setFullScreen(!isFullScreen)); - setTimeout(() => { - chartRef.current?.resize(); - }, 50); - }; - - const handleClose = () => { - dispatch(setFullScreen(false)); - dispatch(setVonDatum("")); - dispatch(setBisDatum("")); - onClose(); - }; - - useEffect(() => { - const loadZoomPlugin = async () => { - if (typeof window !== "undefined") { - const zoomPlugin = (await import("chartjs-plugin-zoom")).default; - if (!ChartJS.registry.plugins.get("zoom")) { - ChartJS.register(zoomPlugin); - } - } - }; - loadZoomPlugin(); - }, []); - // API-Request beim Klick auf "Daten laden" - memoized für useEffect dependency const handleFetchData = useCallback(() => { setIsLoading(true); @@ -247,6 +208,67 @@ export const DetailModal = ({ } }, [selectedKey, zeitraum, dispatch]); + // Reset Zeitraum auf DIA0 und Datumswerte wenn Modal geöffnet wird + useEffect(() => { + if (isOpen) { + setZeitraum("DIA0"); + dispatch(setVonDatum("")); + dispatch(setBisDatum("")); + + // Chart-Daten zurücksetzen beim Öffnen + setChartData({ datasets: [] }); + } + }, [isOpen, setZeitraum, dispatch]); + + // 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); + } + }, [isOpen, chartData.datasets]); + + // Automatisches "Daten laden" alle 2 Sekunden wenn keine Daten vorhanden + useEffect(() => { + if (isOpen && (!chartData.datasets || chartData.datasets.length === 0)) { + const interval = setInterval(() => { + console.log("Auto-clicking 'Daten laden' button..."); + handleFetchData(); // Automatisch Daten laden + }, 2000); + + return () => clearInterval(interval); + } + }, [isOpen, chartData.datasets, handleFetchData]); + + const toggleFullScreen = () => { + dispatch(setFullScreen(!isFullScreen)); + setTimeout(() => { + chartRef.current?.resize(); + }, 50); + }; + + const handleClose = () => { + dispatch(setFullScreen(false)); + dispatch(setVonDatum("")); + dispatch(setBisDatum("")); + onClose(); + }; + + useEffect(() => { + const loadZoomPlugin = async () => { + if (typeof window !== "undefined") { + const zoomPlugin = (await import("chartjs-plugin-zoom")).default; + if (!ChartJS.registry.plugins.get("zoom")) { + ChartJS.register(zoomPlugin); + } + } + }; + loadZoomPlugin(); + }, []); + useEffect(() => { if (chartRef.current && selectedKey) { chartRef.current.options.plugins.title.text = `Verlauf ${selectedKey}`; @@ -373,16 +395,19 @@ export const DetailModal = ({ if (!isOpen || !selectedKey) return null; + // Prüfen ob Chart Daten haben (für cursor-wait) + const hasChartData = chartData.datasets && chartData.datasets.length > 0; + return (

diff --git a/package-lock.json b/package-lock.json index 4f7d714..1ae569d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cpl-v4", - "version": "1.6.679", + "version": "1.6.680", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cpl-v4", - "version": "1.6.679", + "version": "1.6.680", "dependencies": { "@fontsource/roboto": "^5.1.0", "@headlessui/react": "^2.2.4", diff --git a/package.json b/package.json index 0adc211..729f58c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cpl-v4", - "version": "1.6.679", + "version": "1.6.680", "private": true, "scripts": { "dev": "next dev",