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);
       }

pages/_app.tsx

@@ -6,8 +6,8 @@ import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import "../styles/globals.css";
 import { Provider } from "react-redux";
-import { setVariables } from "../store/variablesSlice";
-import store from "../store/store";
+import { setVariables } from "../redux/store/variablesSlice";
+import store from "../redux/store/store";
 import { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {

public/CPLmockData/LastTDR/kue_01/Year_24/Month_01/directory.json

@@ -1,10 +1,10 @@
 {
   "files": [
     {
-      "filename": "05-0829.json"
+      "filename": "01-0829.json"
     },
     {
-      "filename": "05-1911.json"
+      "filename": "02-1911.json"
     }
   ]
 }

redux/store/variablesSlice.ts

@@ -1,8 +1,10 @@
 // redux/store/variablesSlice.ts
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { DataTDR } from "../types/chartDataTypesTDR";
 
 // Typ für den State
 export interface VariablesState {
+  selectedChartData: DataTDR[] | null;
   //------------
   kueBezeichnungen: string[];
   isolationsgrenzwerte: number[];
@@ -63,6 +65,7 @@ export interface VariablesState {
 // Initialer Zustand
 const initialState: VariablesState = {
   //------------
+  selectedChartData: null,
   kueBezeichnungen: [],
   isolationsgrenzwerte: [],
   verzoegerung: [],
@@ -141,8 +144,12 @@ const variablesSlice = createSlice({
         ] as VariablesState[keyof VariablesState]) = value!;
       });
     },
+    setSelectedChartData(state, action: PayloadAction<DataTDR[] | null>) {
+      state.selectedChartData = action.payload;
+    },
   },
 });
 
-export const { setVariable, setVariables } = variablesSlice.actions;
+export const { setVariable, setVariables, setSelectedChartData } =
+  variablesSlice.actions;
 export default variablesSlice.reducer;

redux/types/chartDataTypesTDR.ts

@@ -0,0 +1,5 @@
+// redux/types/chartDataTypesTDR.ts
+export interface DataTDR {
+  t: number; // Zeitstempel oder Index
+  m: number; // Pegelwert
+}