feat: Auslagerung der TDRPopup-Komponente in eine eigene Datei

- TDRPopup-Komponente in `components/modules/KueModal/TDRPopup.tsx` ausgelagert
- Importpfad in Kue705FO angepasst, um die ausgelagerte Komponente korrekt zu referenzieren

components/modales/kueModal/TDRPopup.tsx

@@ -1,34 +1,57 @@
-import React, { useState, useEffect } from "react";
-
-const TDRPopup = () => {
+"use client"; // components/modules/KueModal/TDRPopup.tsx
+import React, { useState, useEffect, useRef } from "react";
+import ReactModal from "react-modal";
+import Chart from "chart.js/auto";
+import { useSelector } from "react-redux";
+import KueModal from "../../modales/kueModal/KueModal";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import { RootState } from "../../../redux/store/store";
+import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
+import { useDispatch } from "react-redux";
+import {
+  setSelectedChartData,
+  setSelectedFileName,
+} from "../../../redux/store/variablesSlice";
+const TDRPopup: React.FC = () => {
   const [jahr, setJahr] = useState(new Date().getFullYear());
   const [monat, setMonat] = useState(new Date().getMonth() + 1);
   const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
   const [ausgewählteDatei, setAusgewählteDatei] = useState<string>(""); // Ausgewählte Datei
+
+  const dispatch = useDispatch(); // Redux-Dispatch
+
+  const getYearFolderName = (year: number): string => {
+    return `Year_${String(year).slice(-2)}`;
+  };
+
   const [sortAscending, setSortAscending] = useState(true);
 
   // Fetch directory.json basierend auf Jahr und Monat
   useEffect(() => {
     const loadDirectory = async () => {
+      const yearFolder = getYearFolderName(jahr);
+      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+      const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
+
+      console.log("Verwendeter Pfad:", path);
+
       try {
-        const response = await fetch(
-          `/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
-            .toString()
-            .padStart(2, "0")}/directory.json`
-        );
-        if (response.ok) {
-          const data = await response.json();
-          const files = data.files.map(
-            (file: { filename: string }) => file.filename
+        const response = await fetch(path);
+        if (!response.ok) {
+          console.error(
+            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
           );
-          setDateiListe(files); // Dateien setzen
-        } else {
-          console.error("Fehler beim Laden der Datei directory.json");
-          setDateiListe([]); // Leere Liste bei Fehler
+          setDateiListe([]); // Setze eine leere Liste
+          return;
         }
+
+        const data = await response.json();
+        const files = data.files.map(
+          (file: { filename: string }) => file.filename
+        );
+        setDateiListe(files);
       } catch (error) {
         console.error("Fehler beim Laden der Datei directory.json:", error);
-        setDateiListe([]);
       }
     };
 
@@ -47,26 +70,56 @@ const TDRPopup = () => {
   const handleAktualisieren = () => {
     console.log("Daten werden aktualisiert für:", jahr, monat);
   };
-
+  //----------------------------------
+  const loadAndStoreChartData = async (url: string) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        console.error(
+          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
+        );
+        return;
+      }
+      const data = await response.json();
+      dispatch(setSelectedChartData(data));
+      console.log("Daten erfolgreich in Redux gespeichert:", data);
+    } catch (error) {
+      console.error("Fehler beim Laden der JSON-Daten:", error);
+    }
+  };
+  const handleLoadData = (filename: string) => {
+    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
+    loadAndStoreChartData(filePath);
+  };
   const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setAusgewählteDatei(event.target.value);
-    console.log("Ausgewählte Datei:", event.target.value);
-    // Hier kannst du die Logik hinzufügen, um die Datei zu laden und die Diagrammdaten zu aktualisieren
-    loadSelectedFileData(event.target.value);
+    const selectedFile = event.target.value;
+    setAusgewählteDatei(selectedFile);
+    console.log("Ausgewählte Datei:", selectedFile);
+
+    // Datei in Redux speichern
+    dispatch(setSelectedFileName(selectedFile));
+
+    // Lade die Datei und speichere sie in Redux
+    handleLoadData(selectedFile);
   };
 
-  // Laden der ausgewählten Datei
   const loadSelectedFileData = async (filename: string) => {
+    const yearFolder = getYearFolderName(jahr);
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+
     try {
       const response = await fetch(
-        `/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
-          .toString()
-          .padStart(2, "0")}/${filename}`
+        `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`
       );
+
       if (response.ok) {
-        const data = await response.json();
+        const data: DataTDR[] = await response.json();
         console.log("Geladene Daten:", data);
-        // Hier kannst du die Daten für das Diagramm verwenden
+
+        // Redux-Action zum Speichern der Daten aufrufen
+        dispatch(setSelectedChartData(data));
       } else {
         console.error("Fehler beim Laden der Datei:", filename);
       }