From d67ad97f83d88b6a9b9a012ebff0a646c0c60940 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 13 Feb 2025 09:15:37 +0100
Subject: [PATCH] =?UTF-8?q?Redux=20Slice=20erstllen=20f=C3=BCr=20Chart=20D?=
 =?UTF-8?q?ata?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kueModal/LoopTDRChartActionBar.tsx        | 57 +++++++++----------
 config/webVersion.ts                          |  2 +-
 redux/slices/chartDataSlice.ts                | 25 ++++++++
 redux/store.ts                                |  2 +
 4 files changed, 55 insertions(+), 31 deletions(-)
 create mode 100644 redux/slices/chartDataSlice.ts

diff --git a/components/modales/kueModal/LoopTDRChartActionBar.tsx b/components/modales/kueModal/LoopTDRChartActionBar.tsx
index ef12b11..4d90c49 100644
--- a/components/modales/kueModal/LoopTDRChartActionBar.tsx
+++ b/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>
   );
 };
diff --git a/config/webVersion.ts b/config/webVersion.ts
index 8e49607..0307670 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -5,5 +5,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.0.6.8";
+const webVersion = "1.0.6.9";
 export default webVersion;
diff --git a/redux/slices/chartDataSlice.ts b/redux/slices/chartDataSlice.ts
new file mode 100644
index 0000000..3a07edd
--- /dev/null
+++ b/redux/slices/chartDataSlice.ts
@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface ChartDataState {
+  data: any[];
+}
+
+const initialState: ChartDataState = {
+  data: [],
+};
+
+export const chartDataSlice = createSlice({
+  name: "chartData",
+  initialState,
+  reducers: {
+    setChartData: (state, action: PayloadAction<any[]>) => {
+      state.data = action.payload;
+    },
+    clearChartData: (state) => {
+      state.data = [];
+    },
+  },
+});
+
+export const { setChartData, clearChartData } = chartDataSlice.actions;
+export default chartDataSlice.reducer;
diff --git a/redux/store.ts b/redux/store.ts
index 34a476d..d8dae75 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -2,11 +2,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import authReducer from "./slices/authSlice";
 import variablesReducer from "./slices/variablesSlice";
+import chartDataReducer from "./slices/chartDataSlice";
 
 const store = configureStore({
   reducer: {
     auth: authReducer,
     variables: variablesReducer,
+    chartData: chartDataReducer,
   },
 });