From 6cc904e7d93e61c5450bd376a17856b01a2d5da9 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sun, 16 Mar 2025 15:40:35 +0100 Subject: [PATCH] Sortieren Liste wird aktualisiert, aber Chart noch nicht --- .../Charts/TDRChart/TDRChartActionBar.tsx | 253 +++++++----------- config/webVersion.ts | 2 +- 2 files changed, 91 insertions(+), 164 deletions(-) diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx index 25b74cf..8d638ca 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx +++ b/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([]); // Liste der Dateien - const [ausgewählteDatei, setAusgewählteDatei] = useState(""); // Ausgewählte Datei + const [dateiListe, setDateiListe] = useState([]); + const [ausgewählteDatei, setAusgewählteDatei] = useState(""); + 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) => { + 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) => { - 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(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 ( -
-
- - -
- -
- - -
- -
- - setJahr(Number(e.target.value))} + > + {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => ( + - {dateiListe.map((file, index) => ( - - ))} - -
+ ))} + + {/* Monat Auswahl */} + + + + {/* Datei Auswahl */} + + + + {/* Sortieren-Button */} - - {/* Aktualisieren-Button */} - {/* - - */}
); }; diff --git a/config/webVersion.ts b/config/webVersion.ts index c04d77a..0fc0c22 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.127"; +const webVersion = "1.6.128"; export default webVersion;