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

// /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";

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 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);
      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
          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);
    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 loadAndStoreChartData = async (url: string) => {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        console.error(
          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
        );
        return;
      }
      const data = await response.json();
      // Daten im Redux Store speichern
      dispatch(setTDRChartData(data));

      console.log("Daten erfolgreich in Redux gespeichert:", 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 = "http://localhost:3002";

  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...
          </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 TDRChartActionBar;