loop DatePicke

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -1,9 +1,11 @@
 "use client";
 // /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
 import React, { useEffect, useState } from "react";
+import { useAppDispatch } from "@/redux/store";
+import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
 import { RSL_DURATION_SECONDS, NODE_ENV } from "@/utils/env";
 import DateRangePicker from "@/components/common/DateRangePicker";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { RootState } from "@/redux/store";
 import {
   setLoopMeasurementCurveChartData,
@@ -16,7 +18,7 @@ import { Listbox } from "@headlessui/react";
 
 //-----------------------------------------------------------------------------------useLoopChartLoader
 export const useLoopChartLoader = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { vonDatum, bisDatum, selectedMode, selectedSlotType, slotNumber } =
     useSelector((state: RootState) => state.kabelueberwachungChartSlice);
   const hasShownNoDataAlert = React.useRef(false);
@@ -93,7 +95,7 @@ export const useLoopChartLoader = () => {
 
 //-----------------------------------------------------------------------------------LoopChartActionBar
 const LoopChartActionBar: React.FC = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   // RSL Progress State – Dauer konfigurierbar über NEXT_PUBLIC_RSL_DURATION_SECONDS
   const TOTAL_DURATION = RSL_DURATION_SECONDS;
   const [rslRunning, setRslRunning] = useState(false);
@@ -133,20 +135,26 @@ const LoopChartActionBar: React.FC = () => {
   } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
 
   const { chartTitle } = useSelector((state: RootState) => state.loopChartType);
+  // Vom DateRangePicker-Slice (vom UI gewählte Werte)
+  const { vonDatum: pickerVonDatum, bisDatum: pickerBisDatum } = useSelector(
+    (state: RootState) => state.dateRangePicker
+  );
 
   const getApiUrl = (
     mode: "DIA0" | "DIA1" | "DIA2",
     type: number,
-    slotNumber: number
+    slotNumber: number,
+    fromDate: string,
+    toDate: string
   ) => {
     const typeFolder = "schleifenwiderstand";
 
     const baseUrl =
       process.env.NODE_ENV === "development"
-        ? `/api/cpl/slotDataAPIHandler?slot=${slotNumber}&messart=${typeFolder}&dia=${mode}&vonDatum=${vonDatum}&bisDatum=${bisDatum}`
+        ? `/api/cpl/slotDataAPIHandler?slot=${slotNumber}&messart=${typeFolder}&dia=${mode}&vonDatum=${fromDate}&bisDatum=${toDate}`
         : `${window.location.origin}/CPL?seite.ACP&${mode}=${formatDate(
-            vonDatum
-          )};${formatDate(bisDatum)};${slotNumber};${type};`;
+            fromDate
+          )};${formatDate(toDate)};${slotNumber};${type};`;
     console.log("baseUrl", baseUrl);
 
     return baseUrl;
@@ -195,7 +203,26 @@ const LoopChartActionBar: React.FC = () => {
       return;
     }
 
-    const apiUrl = getApiUrl(selectedMode, type, slotNumber);
+    // Meldungen laden, wenn Meldungen-Ansicht aktiv ist
+    if (chartTitle === "Meldungen") {
+      try {
+        dispatch(setLoading(true));
+        const fromDate = pickerVonDatum ?? vonDatum;
+        const toDate = pickerBisDatum ?? bisDatum;
+        await dispatch(getMessagesThunk({ fromDate, toDate })).unwrap();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        console.error("❌ Fehler beim Laden der Meldungen:", message);
+        alert("❌ Fehler beim Laden der Meldungen.");
+      } finally {
+        dispatch(setLoading(false));
+      }
+      return;
+    }
+
+    const fromDate = pickerVonDatum ?? vonDatum;
+    const toDate = pickerBisDatum ?? bisDatum;
+    const apiUrl = getApiUrl(selectedMode, type, slotNumber, fromDate, toDate);
     if (!apiUrl) return;
 
     dispatch(setLoading(true));
@@ -222,8 +249,8 @@ const LoopChartActionBar: React.FC = () => {
       console.log("  Slot:", slotNumber);
       console.log("  Typ:", selectedSlotType, "→", type);
       console.log("  Modus:", selectedMode);
-      console.log("  Von:", vonDatum);
-      console.log("  Bis:", bisDatum);
+      console.log("  Von:", fromDate);
+      console.log("  Bis:", toDate);
       console.log("  URL:", apiUrl);
       console.log("  Daten:", jsonData);
 
@@ -254,12 +281,8 @@ const LoopChartActionBar: React.FC = () => {
       </div>
 
       <div className="flex items-center space-x-2">
-        {/* DateRangePicker – wie bei ISO nur sichtbar bei Messkurve */}
-        <div
-          style={{
-            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
-          }}
-        >
+        {/* DateRangePicker – für beide Ansichten sichtbar */}
+        <div>
           <DateRangePicker compact />
         </div>
 

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx

@@ -238,7 +238,7 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
           {chartTitle === "Messkurve" ? (
             <LoopMeasurementChart />
           ) : (
-            <Report moduleType="RSL" />
+            <Report moduleType="RSL" autoLoad={false} />
           )}
         </div>
       </div>