feat: Add cursor wait during chart data loading

- Implemented cursor wait state while chart data is being loaded in `AnalogInputsChart.tsx`.
- Fixed missing dependencies in `useEffect` and defined `loading` state.
- Updated `handleFetchData` to manage
This commit is contained in:
ISA
2025-07-23 13:16:57 +02:00
parent 4d48100375
commit bc554d3474
7 changed files with 24 additions and 9 deletions

View File

@@ -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.634 NEXT_PUBLIC_APP_VERSION=1.6.636
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)

View File

@@ -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.634 NEXT_PUBLIC_APP_VERSION=1.6.636
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

View File

@@ -1,3 +1,13 @@
## [1.6.636] 2025-07-23
- Isolationsfehler in Display anzeigen -> aktuell Zahl ist rot ohne Beschrifftung , es soll Zahl ISO MOhm und Isolationsfehler
---
## [1.6.635] 2025-07-23
- Isolationsfehler in Display anzeigen -> aktuell Zahl ist rot ohne Beschrifftung , es soll Zahl ISO MOhm und Isolationsfehler
---
## [1.6.634] 2025-07-23 ## [1.6.634] 2025-07-23
- Isolationsfehler in Display anzeigen -> aktuell Zahl ist rot ohne Beschrifftung , es soll Zahl ISO MOhm und Isolationsfehler - Isolationsfehler in Display anzeigen -> aktuell Zahl ist rot ohne Beschrifftung , es soll Zahl ISO MOhm und Isolationsfehler

View File

@@ -53,7 +53,7 @@ export default function AnalogInputsChart() {
}, []); }, []);
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const chartRef = useRef<any>(null); const chartRef = useRef<Line>(null); // Specify Line type for chartRef
// Redux Werte für Chart-Daten // Redux Werte für Chart-Daten
const { zeitraum, vonDatum, bisDatum, data, autoLoad, selectedId } = const { zeitraum, vonDatum, bisDatum, data, autoLoad, selectedId } =
@@ -114,10 +114,15 @@ export default function AnalogInputsChart() {
setLocalBisDatum(to); setLocalBisDatum(to);
}; };
// Define loading state
const [loading, setLoading] = React.useState(false);
// ✅ Button → Redux + Fetch triggern // ✅ Button → Redux + Fetch triggern
const handleFetchData = () => { const handleFetchData = () => {
if (!selectedAnalogInput?.id) return; if (!selectedAnalogInput?.id) return;
setLoading(true); // Set loading to true when fetching data
// Fallback auf Redux-Werte, falls lokale Werte leer sind // Fallback auf Redux-Werte, falls lokale Werte leer sind
const from = localVonDatum || vonDatumRedux || ""; const from = localVonDatum || vonDatumRedux || "";
const to = localBisDatum || bisDatumRedux || ""; const to = localBisDatum || bisDatumRedux || "";
@@ -154,7 +159,7 @@ export default function AnalogInputsChart() {
vonDatum: from, vonDatum: from,
bisDatum: to, bisDatum: to,
}) })
); ).finally(() => setLoading(false)); // Reset loading after fetch
}; };
// Auto-trigger fetch when a row is selected and id is not 0 (only once per selection) // Auto-trigger fetch when a row is selected and id is not 0 (only once per selection)
@@ -347,7 +352,7 @@ export default function AnalogInputsChart() {
}, []); }, []);
return ( return (
<div className="flex flex-col gap-3"> <div className={`flex flex-col gap-3 ${loading ? "cursor-wait" : ""}`}>
<div className="flex flex-wrap items-center gap-4 mb-2"> <div className="flex flex-wrap items-center gap-4 mb-2">
{/* ✅ Neuer DatePicker mit schönem Styling (lokal, ohne Redux) */} {/* ✅ Neuer DatePicker mit schönem Styling (lokal, ohne Redux) */}
<AnalogInputsDatePicker <AnalogInputsDatePicker

View File

@@ -23,6 +23,6 @@
23.07.2025 23.07.2025
- [x] TODO: Isolationsfehler in Display anzeigen -> aktuell Zahl ist rot ohne Beschrifftung , es soll Zahl ISO MOhm und Isolationsfehler - [x] TODO: Isolationsfehler in Display anzeigen -> aktuell Zahl ist rot ohne Beschrifftung , es soll Zahl ISO MOhm und Isolationsfehler
- [x] TODO: Kilometer Km -> km kleingeschrieben 1000, 1024 wird Großgeschrieben Kilobyte Kb - [x] TODO: Kilometer Km -> km kleingeschrieben 1000, 1024 wird Großgeschrieben Kilobyte Kb
- [ ] TODO: Messwerteingänge Mouse couror wait beim laden, damit der user etwas wartet - [x] TODO: Messwerteingänge Mouse couror wait beim laden, damit der user etwas wartet
- [ ] TODO: In KÜ, unter KÜ Balken/Bereich für Scheleife, Bereich für TDR wenn aktiv ist und Bereich für KVz wenn aktive ist - [ ] TODO: In KÜ, unter KÜ Balken/Bereich für Scheleife, Bereich für TDR wenn aktiv ist und Bereich für KVz wenn aktive ist
- [ ] TODO: Bei alle Messkurven Mouse couror :wait implementieren, während das laden - [ ] TODO: Bei alle Messkurven Mouse couror :wait implementieren, während das laden

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.634", "version": "1.6.636",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.634", "version": "1.6.636",
"dependencies": { "dependencies": {
"@fontsource/roboto": "^5.1.0", "@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4", "@headlessui/react": "^2.2.4",

View File

@@ -1,6 +1,6 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.634", "version": "1.6.636",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",