JSON Dateien in einem Ordner verschoben

components/modules/Kue705FO.tsx

@@ -6,11 +6,9 @@ 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";
-
-interface DataTDR {
-  t: number; // Oder Date, falls t ein Datum ist
-  m: number; // Der Wert für den Pegel
-}
+import { DataTDR } from "../../redux/types/chartDataTypesTDR";
+import { useDispatch } from "react-redux";
+import { setSelectedChartData } from "../../redux/store/variablesSlice";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -24,6 +22,10 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   /*   console.log(
     `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
   ); */
+  const selectedChartData = useSelector(
+    (state: RootState) => state.variables.selectedChartData
+  );
+  const dispatch = useDispatch();
 
   const chartRef = useRef(null);
   const [zoomPlugin, setZoomPlugin] = useState<any>(null); // Plugin-Status für Chart.js
@@ -53,6 +55,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [showChartModal, setShowChartModal] = useState(false);
   const [chartData, setChartData] = useState(null);
 
+  dispatch(setSelectedChartData(chartData));
   // Redux-Variablen abrufen
   const {
     kuePSTmMinus96V,
@@ -179,11 +182,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
-    // Zerstöre das vorherige Diagramm, falls vorhanden
+    // Zerstöre vorhandenes Diagramm
     if (chartInstance.current) {
       chartInstance.current.destroy();
     }
 
+    // Erstelle neues Diagramm
     chartInstance.current = new Chart(ctx, {
       type: "line",
       data: {
@@ -221,7 +225,10 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
           x: {
             type: "linear",
             position: "bottom",
-            title: { display: true, text: "Meter" },
+            title: { display: true, text: "Zeit" },
+          },
+          y: {
+            title: { display: true, text: "Pegel" },
           },
         },
       },
@@ -239,12 +246,15 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     fetch(fileData)
       .then((response) => response.json())
       .then((data) => {
-        setChartData(data);
-        createTDRChart(data);
+        console.log("Geladene Daten:", data); // Debug-Ausgabe
+        if (data && data.length > 0) {
+          setChartData(data);
+          createTDRChart(data);
+        } else {
+          console.error("Keine Daten gefunden.");
+        }
       })
-      .catch((error) =>
-        console.error("Fehler beim Laden der TDR-Messkurvendaten:", error)
-      );
+      .catch((error) => console.error("Fehler beim Laden der Daten:", error));
   };
 
   const loadLoopChartData = () => {
@@ -738,19 +748,18 @@ interface Kue705FOProps {
 // TDRPopup Komponente
 //-------------------------------------------------------------
 
-const TDRPopup = ({
-  onDataSelect,
-}: {
-  onDataSelect: (data: DataTDR[]) => void;
-}) => {
+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
@@ -763,7 +772,7 @@ const TDRPopup = ({
         const response = await fetch(
           `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
         );
-        //link in console anzeigen
+
         console.log(
           `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
         );
@@ -803,25 +812,27 @@ const TDRPopup = ({
   };
 
   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);
+    loadSelectedFileData(selectedFile);
   };
 
-  // Laden der ausgewählten Datei
   const loadSelectedFileData = async (filename: string) => {
-    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    const yearFolder = getYearFolderName(jahr);
     const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
 
     try {
       const response = await fetch(
         `/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);
       }