diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx index efc8745..3331ebe 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx @@ -1,5 +1,5 @@ -"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx -import React, { useEffect, useMemo } from "react"; +"use client"; +import React from "react"; import DateRangePicker from "./DateRangePicker"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "../../../../../../redux/store"; @@ -10,6 +10,8 @@ import { setSelectedMode, setSelectedSlotType, setChartOpen, + setFullScreen, + setLoading, } from "../../../../../../redux/slices/kabelueberwachungChartSlice"; import { setBrushRange } from "../../../../../../redux/slices/brushSlice"; import { setChartTitle } from "../../../../../../redux/slices/loopChartTypeSlice"; @@ -17,7 +19,6 @@ import { setChartTitle } from "../../../../../../redux/slices/loopChartTypeSlice const LoopChartActionBar: React.FC = () => { const dispatch = useDispatch(); - // Redux-Status abrufen const { vonDatum, bisDatum, @@ -26,21 +27,14 @@ const LoopChartActionBar: React.FC = () => { isChartOpen, slotNumber, loopMeasurementCurveChartData, + isLoading, } = useSelector((state: RootState) => state.kabelueberwachungChartSlice); - /** - * API-URL-Erstellung für Entwicklung und Produktion - */ const getApiUrl = ( mode: "DIA0" | "DIA1" | "DIA2", type: number, slotNumber: number ) => { - if (!slotNumber) { - console.error("⚠️ Slot-Nummer nicht gesetzt!"); - return ""; - } - const typeFolder = type === 3 ? "isolationswiderstand" : "schleifenwiderstand"; @@ -54,27 +48,31 @@ const LoopChartActionBar: React.FC = () => { return baseUrl; }; - // Funktion zur Umformatierung des Datums von "YYYY-MM-DD" zu "YYYY;MM;DD" const formatDate = (dateString: string) => { - const dateParts = dateString.split("-"); - return `${dateParts[0]};${dateParts[1]};${dateParts[2]}`; + const [year, month, day] = dateString.split("-"); + return `${year};${month};${day}`; }; - /** - * Funktion zum Laden der Messwerte - */ const handleFetchData = async () => { const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3; + if (slotNumber === null) { - console.error("⚠️ Slot-Nummer nicht gesetzt!"); + alert("⚠️ Bitte zuerst einen Slot auswählen!"); return; } - const apiUrl = getApiUrl(selectedMode, type, slotNumber); // ✅ slotNumber ergänzt + const apiUrl = getApiUrl(selectedMode, type, slotNumber); if (!apiUrl) return; + dispatch(setLoading(true)); + dispatch(setChartOpen(false)); + dispatch(setLoopMeasurementCurveChartData([])); + dispatch(setFullScreen(false)); + + const MIN_LOADING_TIME_MS = 1000; + const startTime = Date.now(); + try { - // console.log("📡 API-Request an:", apiUrl); const response = await fetch(apiUrl, { method: "GET", headers: { "Content-Type": "application/json" }, @@ -83,53 +81,28 @@ const LoopChartActionBar: React.FC = () => { if (!response.ok) throw new Error(`Fehler: ${response.status}`); const jsonData = await response.json(); - console.log("✅ API URL ", apiUrl); - console.log("✅ Daten erfolgreich geladen:", jsonData); + const elapsedTime = Date.now() - startTime; + const waitTime = Math.max(0, MIN_LOADING_TIME_MS - elapsedTime); + await new Promise((resolve) => setTimeout(resolve, waitTime)); - if (Array.isArray(jsonData)) { - dispatch(setLoopMeasurementCurveChartData([...jsonData])); - - // Falls das Chart zum ersten Mal geöffnet wird, setze vonDatum & bisDatum - if (!isChartOpen && jsonData.length > 0) { - const firstDate = new Date(jsonData[jsonData.length - 1].t); - const lastDate = new Date(jsonData[0].t); - dispatch(setVonDatum(firstDate.toISOString().split("T")[0])); - dispatch(setBisDatum(lastDate.toISOString().split("T")[0])); - dispatch(setChartOpen(true)); - } + if (Array.isArray(jsonData) && jsonData.length > 0) { + dispatch(setLoopMeasurementCurveChartData(jsonData)); + dispatch(setChartOpen(true)); } else { - console.error("⚠️ Erwartetes Array, aber erhalten:", jsonData); + alert("⚠️ Keine Messdaten im gewählten Zeitraum gefunden."); + dispatch(setLoopMeasurementCurveChartData([])); + dispatch(setChartOpen(false)); } - } catch (error) { - console.error("❌ Fehler beim Laden der Daten:", error); + } catch (err) { + console.error("❌ Fehler beim Laden der Daten:", err); + alert("❌ Fehler beim Laden der Daten."); + } finally { + dispatch(setLoading(false)); } }; - const minDate = useMemo(() => { - if (!loopMeasurementCurveChartData?.length) return ""; - return new Date( - loopMeasurementCurveChartData[loopMeasurementCurveChartData.length - 1].t - ) - .toISOString() - .split("T")[0]; - }, [loopMeasurementCurveChartData]); - - const maxDate = useMemo(() => { - if (!loopMeasurementCurveChartData?.length) return ""; - return new Date(loopMeasurementCurveChartData[0].t) - .toISOString() - .split("T")[0]; - }, [loopMeasurementCurveChartData]); - - // Automatische Datenaktualisierung bei Auswahländerung - useEffect(() => { - handleFetchData(); - // Wenn sich slotNumber, Zeitraum oder Auswahl ändert, neu laden: - }, [selectedMode, selectedSlotType, slotNumber, vonDatum, bisDatum]); - return (