Redux Dateien in redux/store/ verschoben

components/modales/kueModal/KueModal.tsx

@@ -2,9 +2,9 @@
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { setVariables  } from "../../../store/variablesSlice";
+import { setVariables } from "../../../redux/store/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
-import handleSave , { OriginalValues } from "./handlers/handleSave";
+import handleSave, { OriginalValues } from "./handlers/handleSave";
 import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
 import handleChange from "./handlers/handleChange";
 import firmwareUpdate from "./handlers/firmwareUpdate";
@@ -23,7 +23,9 @@ function KueModal({
   slot,
   onModulNameChange,
 }: KueModalProps): JSX.Element {
-  const isAdminLoggedIn = useSelector((state: any) => state.auth.isAdminLoggedIn);
+  const isAdminLoggedIn = useSelector(
+    (state: any) => state.auth.isAdminLoggedIn
+  );
   const [isAdmin, setIsAdmin] = useState(false);
   const dispatch = useDispatch();
   const [ids, setIds] = useState(Array(32).fill(""));
@@ -51,10 +53,9 @@ function KueModal({
     obereSchleifenGrenzwerte: Array(32).fill(1.0),
     schleifenintervall: Array(32).fill(24),
   });
-  
 
-   // Werte aus dem Redux-Store abrufen
+  // Werte aus dem Redux-Store abrufen
-   const {
+  const {
     kueID,
     kueLimit1,
     kueDelay1,
@@ -89,7 +90,9 @@ function KueModal({
     if (showModal) {
       setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
       setBezeichnungen(
-        kueID ? kueID.map((name: string) => name.trim() || "---") : bezeichnungen
+        kueID
+          ? kueID.map((name: string) => name.trim() || "---")
+          : bezeichnungen
       );
       setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
       setVerzoegerung(kueDelay1 || verzoegerung);
@@ -106,7 +109,6 @@ function KueModal({
         obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
         schleifenintervall: [...schleifenintervall],
       });
-      
     }
   }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
   //------------------------------------------------------------------------------------------------------------
@@ -132,7 +134,6 @@ function KueModal({
         overlay: {
           backgroundColor: "rgba(0, 0, 0, 0.5)",
           zIndex: 100,
-   
         },
         content: {
           top: "50%",

components/modales/kueModal/TDRPopup.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from "react";
+
+const TDRPopup = () => {
+  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 [sortAscending, setSortAscending] = useState(true);
+
+  // Fetch directory.json basierend auf Jahr und Monat
+  useEffect(() => {
+    const loadDirectory = async () => {
+      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
+          );
+          setDateiListe(files); // Dateien setzen
+        } else {
+          console.error("Fehler beim Laden der Datei directory.json");
+          setDateiListe([]); // Leere Liste bei Fehler
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Datei directory.json:", error);
+        setDateiListe([]);
+      }
+    };
+
+    loadDirectory();
+  }, [jahr, monat]);
+
+  const handleSortToggle = () => {
+    setSortAscending(!sortAscending);
+    setDateiListe((prevListe) =>
+      [...prevListe].sort((a, b) =>
+        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
+      )
+    );
+  };
+
+  const handleAktualisieren = () => {
+    console.log("Daten werden aktualisiert für:", jahr, monat);
+  };
+
+  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);
+  };
+
+  // Laden der ausgewählten Datei
+  const loadSelectedFileData = async (filename: string) => {
+    try {
+      const response = await fetch(
+        `/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
+          .toString()
+          .padStart(2, "0")}/${filename}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        console.log("Geladene Daten:", data);
+        // Hier kannst du die Daten für das Diagramm verwenden
+      } else {
+        console.error("Fehler beim Laden der Datei:", filename);
+      }
+    } catch (error) {
+      console.error("Fehler beim Laden der Datei:", error);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
+      <div className="flex items-center space-x-2">
+        <label htmlFor="jahrSelect" className="text-sm font-semibold">
+          Jahr
+        </label>
+        <select
+          id="jahrSelect"
+          className="border rounded px-2 py-1"
+          value={jahr}
+          onChange={(e) => setJahr(Number(e.target.value))}
+        >
+          {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
+            <option key={year} value={year}>
+              {year}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="monatSelect" className="text-sm font-semibold">
+          Monat
+        </label>
+        <select
+          id="monatSelect"
+          className="border rounded px-2 py-1"
+          value={monat}
+          onChange={(e) => setMonat(Number(e.target.value))}
+        >
+          {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
+            <option key={month} value={month}>
+              {month.toString().padStart(2, "0")}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label htmlFor="dateiSelect" className="text-sm font-semibold">
+          Auswahl
+        </label>
+        <select
+          id="dateiSelect"
+          className="border rounded px-2 py-1"
+          value={ausgewählteDatei}
+          onChange={handleDateiAuswahl}
+        >
+          <option value="" disabled>
+            Bitte wählen...
+          </option>
+          {dateiListe.map((file, index) => (
+            <option key={index} value={file}>
+              {file}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <button
+        onClick={handleSortToggle}
+        className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
+      >
+        <i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
+        <span className="ml-1">Sortieren</span>
+      </button>
+
+      <button
+        onClick={handleAktualisieren}
+        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
+      >
+        Aktualisieren
+      </button>
+    </div>
+  );
+};
+
+export default TDRPopup;

components/modales/kueModal/handlers/handleSave.ts

@@ -1,7 +1,7 @@
 // components/modales/kueModal/handlers/handleSave.ts
-import { setVariables } from "../../../../store/variablesSlice";
+import { setVariables } from "../../../../redux/store/variablesSlice";
 
-export  interface OriginalValues {
+export interface OriginalValues {
   kueID: string[];
   kueBezeichnungen: string[];
   isolationsgrenzwerte: number[];

components/modules/Kue705FO.tsx

@@ -5,7 +5,7 @@ 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 "../../store/store";
+import { RootState } from "../../redux/store/store";
 
 interface DataTDR {
   t: number; // Oder Date, falls t ein Datum ist
@@ -170,15 +170,21 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const handleCloseChartModal = () => setShowChartModal(false);
   // Funktion zum Erstellen des TDR-Charts
 
+  const chartInstance = useRef<Chart | null>(null);
+
   const createTDRChart = (dataTDR: DataTDR[]) => {
     const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-    const ctx = canvas?.getContext("2d");
+    if (!canvas) return;
-    if (!ctx) {
+
-      console.error("Canvas context konnte nicht gefunden werden");
+    const ctx = canvas.getContext("2d");
-      return;
+    if (!ctx) return;
+
+    // Zerstöre das vorherige Diagramm, falls vorhanden
+    if (chartInstance.current) {
+      chartInstance.current.destroy();
     }
 
-    new Chart(ctx, {
+    chartInstance.current = new Chart(ctx, {
       type: "line",
       data: {
         labels: dataTDR.map((row) => row.t),
@@ -188,21 +194,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
             data: dataTDR.map((row) => row.m),
             borderColor: "#00AEEF",
             borderWidth: 1,
-            pointBorderWidth: 0,
-            pointStyle: false,
             fill: false,
-            yAxisID: "y",
           },
         ],
       },
       options: {
-        scales: {
+        responsive: true,
-          x: {
-            type: "linear",
-            position: "left",
-            title: { display: true, text: "Meter" },
-          },
-        },
         plugins: {
           zoom: {
             pan: {
@@ -211,15 +208,22 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
             },
             zoom: {
               wheel: {
-                enabled: true, // Zoom mit Mausrad
+                enabled: true,
               },
               pinch: {
-                enabled: true, // Pinch-Zoom für Touchgeräte
+                enabled: true,
               },
-              mode: "xy", // x und y Achsen zoomen
+              mode: "xy",
             },
           },
         },
+        scales: {
+          x: {
+            type: "linear",
+            position: "bottom",
+            title: { display: true, text: "Meter" },
+          },
+        },
       },
     });
   };
@@ -733,23 +737,97 @@ interface Kue705FOProps {
 //-------------------------------------------------------------
 // TDRPopup Komponente
 //-------------------------------------------------------------
-// Im Modal für TDR
+
-const TDRPopup = () => {
+const TDRPopup = ({
+  onDataSelect,
+}: {
+  onDataSelect: (data: DataTDR[]) => void;
+}) => {
   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 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); // Jahr in Year_xx umwandeln
+      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+
+      try {
+        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`
+        );
+
+        if (!response.ok) {
+          console.error(
+            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
+          );
+          setDateiListe([]);
+          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);
+      }
+    };
+
+    loadDirectory();
+  }, [jahr, monat]);
+
   const handleSortToggle = () => {
     setSortAscending(!sortAscending);
-    console.log(
+    setDateiListe((prevListe) =>
-      "Sortierung umkehren:",
+      [...prevListe].sort((a, b) =>
-      sortAscending ? "Absteigend" : "Aufsteigend"
+        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
+      )
     );
   };
 
   const handleAktualisieren = () => {
-    console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
+    console.log("Daten werden aktualisiert für:", jahr, monat);
-    // Logik für die Aktualisierung hinzufügen
+  };
+
+  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);
+  };
+
+  // Laden der ausgewählten Datei
+  const loadSelectedFileData = async (filename: string) => {
+    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    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();
+        console.log("Geladene Daten:", data);
+        // Hier kannst du die Daten für das Diagramm verwenden
+      } else {
+        console.error("Fehler beim Laden der Datei:", filename);
+      }
+    } catch (error) {
+      console.error("Fehler beim Laden der Datei:", error);
+    }
   };
 
   return (
@@ -784,24 +862,30 @@ const TDRPopup = () => {
         >
           {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
             <option key={month} value={month}>
-              {month}
+              {month.toString().padStart(2, "0")}
             </option>
           ))}
         </select>
       </div>
 
       <div className="flex items-center space-x-2">
-        <label htmlFor="emptySelect" className="text-sm font-semibold">
+        <label htmlFor="dateiSelect" className="text-sm font-semibold">
           Auswahl
         </label>
         <select
-          id="emptySelect"
+          id="dateiSelect"
           className="border rounded px-2 py-1"
-          defaultValue=""
+          value={ausgewählteDatei}
+          onChange={handleDateiAuswahl}
         >
           <option value="" disabled>
             Bitte wählen...
           </option>
+          {dateiListe.map((file, index) => (
+            <option key={index} value={file}>
+              {file}
+            </option>
+          ))}
         </select>
       </div>
 

redux/store/authSlice.ts

@@ -1,4 +1,4 @@
-// redux/authSlice.ts
+// redux/store/authSlice.ts
 import { createSlice } from "@reduxjs/toolkit";
 
 const authSlice = createSlice({

redux/store/rootReducer.ts

@@ -1,4 +1,4 @@
-// store/rootReducer.ts
+// redux/store/rootReducer.ts
 import { combineReducers } from "redux";
 import variablesReducer from "./variablesSlice";
 import authReducer from "./authSlice";

redux/store/store.ts

@@ -1,4 +1,4 @@
-// store/store.ts
+// redux/store/store.ts
 import { configureStore } from "@reduxjs/toolkit";
 import rootReducer from "./rootReducer";
 

redux/store/variablesSlice.ts

@@ -1,4 +1,4 @@
-// store/variablesSlice.ts
+// redux/store/variablesSlice.ts
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 // Typ für den State