Sortieren Liste wird aktualisiert, aber Chart noch nicht

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

@@ -1,4 +1,3 @@
-// /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
 import React, { useState, useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
 import { setTDRChartData } from "../../../../../../redux/slices/kabelueberwachungChartSlice";
@@ -7,219 +6,147 @@ const TDRChartActionBar: React.FC = () => {
   const dispatch = useDispatch();
   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 [dateiListe, setDateiListe] = useState<string[]>([]);
+  const [ausgewählteDatei, setAusgewählteDatei] = useState<string>("");
+  const [sortAscending, setSortAscending] = useState(true);
 
   const getYearFolderName = (year: number): string => {
     return `Year_${String(year).slice(-2)}`;
   };
 
-  const [sortAscending, setSortAscending] = useState(true);
-
-  // Fetch directory.json basierend auf Jahr und Monat
+  // 📌 Laden der Datei-Liste aus directory.json
   useEffect(() => {
     const loadDirectory = async () => {
       const yearFolder = getYearFolderName(jahr);
       const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
       const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
 
-      console.log("Verwendeter Pfad:", path);
-
       try {
         const response = await fetch(path);
         if (!response.ok) {
-          console.error(
-            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
-          );
-          setDateiListe([]); // Setze eine leere Liste
+          console.error(`Fehler beim Laden der Datei.`);
+          setDateiListe([]);
+          setAusgewählteDatei("");
           return;
         }
 
         const data = await response.json();
-        const files = data.files.map(
+        let files = data.files.map(
           (file: { filename: string }) => file.filename
         );
+
+        if (!sortAscending) {
+          files.reverse(); // 🔄 Falls bereits sortiert, Reihenfolge umkehren
+        }
+
         setDateiListe(files);
+        setAusgewählteDatei(files.length > 0 ? files[0] : ""); // 🟢 Automatische Auswahl der ersten Datei
       } catch (error) {
         console.error("Fehler beim Laden der Datei directory.json:", error);
       }
     };
 
     loadDirectory();
-  }, [jahr, monat]);
+  }, [jahr, monat, sortAscending]);
 
+  // 📌 Daten für die ausgewählte Datei laden
+  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedFile = event.target.value;
+    setAusgewählteDatei(selectedFile);
+    loadAndStoreChartData(selectedFile);
+  };
+
+  // 📌 Sortieren der Datei-Liste und automatische Anpassung der Auswahl
   const handleSortToggle = () => {
     setSortAscending(!sortAscending);
-    setDateiListe((prevListe) => [...prevListe].reverse()); // 🔄 Umkehren der Reihenfolge
+    setDateiListe((prevListe) => {
+      const newListe = [...prevListe].reverse(); // 🔄 Reihenfolge umkehren
+      setAusgewählteDatei(newListe.length > 0 ? newListe[0] : ""); // 🟢 Erste Datei auswählen
+      return newListe;
+    });
   };
 
-  const handleAktualisieren = () => {
-    console.log("Daten werden aktualisiert für:", jahr, monat);
-  };
-  //----------------------------------
-  const loadAndStoreChartData = async (url: string) => {
+  // 📌 Daten abrufen und in Redux speichern
+  const loadAndStoreChartData = async (filename: string) => {
+    const yearFolder = getYearFolderName(jahr);
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
+
     try {
-      const response = await fetch(url);
+      const response = await fetch(filePath);
       if (!response.ok) {
-        console.error(
-          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
-        );
+        console.error(`Fehler beim Laden der Datei.`);
         return;
       }
-      const data = await response.json();
-      // Daten im Redux Store speichern
-      dispatch(setTDRChartData(data));
 
-      console.log("Daten erfolgreich in Redux gespeichert:", data);
+      const data = await response.json();
+      dispatch(setTDRChartData(data));
     } catch (error) {
       console.error("Fehler beim Laden der JSON-Daten:", error);
     }
   };
-  const handleLoadData = (filename: string) => {
-    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
-    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
-    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
-    loadAndStoreChartData(filePath);
-  };
-  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedFile = event.target.value;
-    setAusgewählteDatei(selectedFile);
-    console.log("Ausgewählte Datei:", selectedFile);
-
-    // Lade die Datei und speichere sie in Redux
-    handleLoadData(selectedFile);
-  };
-
-  const chartRef = useRef<HTMLCanvasElement>(null);
-
-  // Zustand für die Chart-Daten
-  const [tdrChartData, settdrChartData] = useState<
-    { timestamp: string; tdr: number }[]
-  >([]);
-
-  useEffect(() => {
-    // Aktuelles Jahr und Monat ermitteln
-    const currentYear = new Date().getFullYear();
-    const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
-
-    // Pfad zur directory.json-Datei erstellen
-    const yearFolder = `Year_${String(currentYear).slice(-2)}`;
-    const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
-    const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
-
-    // Daten abrufen
-    fetch(path)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(
-            `Fehler beim Laden der Datei: ${response.statusText}`
-          );
-        }
-        return response.json();
-      })
-      .then((data) => {
-        // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
-        settdrChartData(data);
-      })
-      .catch((error) => {
-        console.error("Fehler beim Abrufen der Daten:", error);
-      });
-  }, []);
-
-  const BASE_URL = window.location.origin;
-  console.log("BASE_URL in TDRChartACtionBar:", BASE_URL);
-
-  const [showChart, setShowChart] = useState(false);
-
-  const handleFetchData = async () => {
-    try {
-      const response = await fetch(`${BASE_URL}/tdr`);
-      if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
-
-      const data = await response.json();
-
-      setShowChart(true);
-    } catch (error) {
-      console.error("Fehler beim Laden der Daten:", 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...
+    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
+      {/* Jahr Auswahl */}
+      <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>
-          {dateiListe.map((file, index) => (
-            <option key={index} value={file}>
-              {file}
-            </option>
-          ))}
-        </select>
-      </div>
+        ))}
+      </select>
 
+      {/* Monat Auswahl */}
+      <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>
+
+      {/* Datei Auswahl */}
+      <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}
+      >
+        {dateiListe.map((file, index) => (
+          <option key={index} value={file}>
+            {file}
+          </option>
+        ))}
+      </select>
+
+      {/* Sortieren-Button */}
       <button
         onClick={handleSortToggle}
-        className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
+        className="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>
-
-      {/* Aktualisieren-Button */}
-      {/* 
-            <button
-        onClick={handleAktualisieren}
-        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
-      >
-        Aktualisieren
-      </button>
-      */}
     </div>
   );
 };