Redux Dateien in redux/store/ verschoben

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;