Redux Slice erstllen für Chart Data

components/modales/kueModal/LoopTDRChartActionBar.tsx

@@ -1,17 +1,21 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import DateRangePicker from "./DateRangePicker";
+import ChartModal from "./ChartModal"; // Importiere das Chart-Modal
+import { useDispatch, useSelector } from "react-redux";
+import { setChartData } from "../../../redux/slices/chartDataSlice";
+import { RootState } from "../../../redux/store";
 
 const LoopTDRChartActionBar: React.FC = () => {
+  const dispatch = useDispatch();
   const BASE_URL = "http://localhost:3002";
 
   const [vonDatum, setVonDatum] = useState<Date>(new Date());
   const [bisDatum, setBisDatum] = useState<Date>(new Date());
-  const [filteredData, setFilteredData] = useState<any[]>([]);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [showChartModal, setShowChartModal] = useState(false);
 
-  useEffect(() => {
-    handleAktualisieren();
-  }, []);
+  // Redux-Daten holen (damit sich das ChartModal darauf bezieht)
+  const chartData = useSelector((state: RootState) => state.chartData.data);
 
   const fetchAllData = async () => {
     let index = 0;
@@ -34,24 +38,23 @@ const LoopTDRChartActionBar: React.FC = () => {
 
         const jsonData = await response.json();
         allData.push(jsonData);
-        index++; // Nächste URL abrufen
+        index++;
       } catch (error) {
         console.error(`❌ Fehler bei ${url}:`, error);
-        break; // Falls ein Fehler auftritt, Abbruch der Schleife
+        break;
       }
     }
-
+    console.log("📥 Alle abgerufenen JSON-Daten:", allData);
+    dispatch(setChartData(allData)); // 🔥 Daten in Redux speichern
     return allData;
   };
 
   const handleAktualisieren = async () => {
     try {
       setErrorMessage(null);
-      setFilteredData([]);
 
       console.log("📡 API Haupt-URL:", BASE_URL);
 
-      // **Alle verfügbaren JSON-Objekte abrufen**
       const allData = await fetchAllData();
 
       if (allData.length === 0) {
@@ -62,26 +65,6 @@ const LoopTDRChartActionBar: React.FC = () => {
 
       console.log("📥 Alle abgerufenen JSON-Daten:");
       console.table(allData);
-
-      // **Daten filtern nach Datum**
-      const vonTimestamp = new Date(vonDatum).setHours(0, 0, 0, 0);
-      const bisTimestamp = new Date(bisDatum).setHours(23, 59, 59, 999);
-
-      const filtered = allData.filter((item: any) => {
-        const itemDateParts = item.t.split(" ")[0].split("-");
-        const itemTimestamp = new Date(
-          Number(itemDateParts[2]), // Jahr
-          Number(itemDateParts[1]) - 1, // Monat (JS zählt ab 0)
-          Number(itemDateParts[0]) // Tag
-        ).setHours(0, 0, 0, 0);
-
-        return itemTimestamp >= vonTimestamp && itemTimestamp <= bisTimestamp;
-      });
-
-      console.log("🔍 Gefilterte Daten:");
-      console.table(filtered);
-
-      setFilteredData(filtered);
     } catch (error) {
       console.error("❌ Fehler beim Abrufen der Daten:", error);
       setErrorMessage("❌ Fehler beim Laden der Daten.");
@@ -98,6 +81,20 @@ const LoopTDRChartActionBar: React.FC = () => {
       >
         Aktualisieren
       </button>
+
+      <button
+        onClick={() => setShowChartModal(true)}
+        className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
+      >
+        Diagramm anzeigen
+      </button>
+
+      {showChartModal && (
+        <ChartModal
+          isOpen={showChartModal}
+          onClose={() => setShowChartModal(false)}
+        />
+      )}
     </div>
   );
 };