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
-   const {
+  // Werte aus dem Redux-Store abrufen
+  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[];