From da3fe59817593b0406dc39e0f92a92a019cf3a79 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sat, 22 Feb 2025 10:02:51 +0100 Subject: [PATCH] TDR-Chart findet die dateien, aber zeichnet die Chart noch nicht --- .../kue705FO/Charts/TDRChart/TDRChart.tsx | 59 +++-- .../Charts/TDRChart/TDRChartActionBar.tsx | 199 ++++++++++++++- components/modales/KueModal.jsx | 232 ++++++++++++++++++ components/modales/kueModal/TDRPopup.tsx | 208 ++++++++++++++++ 4 files changed, 674 insertions(+), 24 deletions(-) create mode 100644 components/modales/KueModal.jsx create mode 100644 components/modales/kueModal/TDRPopup.tsx diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx index f6aae9b..ca6d40f 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx @@ -1,6 +1,5 @@ -import React, { useEffect, useRef } from "react"; -import { useSelector } from "react-redux"; -import { RootState } from "../../../../../../redux/store"; +// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx +import React, { useEffect, useRef, useState } from "react"; import Chart from "chart.js/auto"; import "chartjs-adapter-date-fns"; import { parseISO } from "date-fns"; @@ -9,15 +8,42 @@ const TDRChart: React.FC = () => { const chartRef = useRef(null); const chartInstance = useRef(null); - // Nutze entweder Redux-Daten oder Mock-Daten - const chartData = useSelector((state: RootState) => state.chartData.data) || [ - { timestamp: "2025-02-13T12:00:00", tdr: 2.1 }, - { timestamp: "2025-02-13T12:10:00", tdr: 2.3 }, - { timestamp: "2025-02-13T12:20:00", tdr: 2.6 }, - ]; + // Zustand für die Chart-Daten + const [chartData, setChartData] = useState< + { timestamp: string; tdr: number }[] + >([]); useEffect(() => { - if (chartRef.current) { + // 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' + setChartData(data); + }) + .catch((error) => { + console.error("Fehler beim Abrufen der Daten:", error); + }); + }, []); + + useEffect(() => { + if (chartRef.current && chartData.length > 0) { if (chartInstance.current) { chartInstance.current.destroy(); } @@ -57,16 +83,13 @@ const TDRChart: React.FC = () => { }); } } - - return () => { - if (chartInstance.current) { - chartInstance.current.destroy(); - chartInstance.current = null; - } - }; }, [chartData]); - return ; + return ( +
+ +
+ ); }; export default TDRChart; diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx index 9826be5..cdbb017 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx @@ -1,11 +1,135 @@ // /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx -import React, { useState } from "react"; +import React, { useState, useEffect, useRef } from "react"; import DateRangePicker from "../DateRangePicker"; import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart"; import { useDispatch } from "react-redux"; import { setChartData } from "../../../../../../redux/slices/chartDataSlice"; +import { parseISO } from "date-fns"; const TDRChartActionBar: React.FC = () => { + 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 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(); + + 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) => { + 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 [chartData, setChartData] = 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' + setChartData(data); + }) + .catch((error) => { + console.error("Fehler beim Abrufen der Daten:", error); + }); + }, []); + const dispatch = useDispatch(); const BASE_URL = "http://localhost:3002"; @@ -17,7 +141,7 @@ const TDRChartActionBar: React.FC = () => { if (!response.ok) throw new Error("Fehler beim Abrufen der Daten"); const data = await response.json(); - dispatch(setChartData(data)); + setShowChart(true); } catch (error) { console.error("Fehler beim Laden der Daten:", error); @@ -25,15 +149,78 @@ const TDRChartActionBar: React.FC = () => { }; return ( -
- {}} setBisDatum={() => {}} /> +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + + - {showChart && null}
); }; diff --git a/components/modales/KueModal.jsx b/components/modales/KueModal.jsx new file mode 100644 index 0000000..eb62e47 --- /dev/null +++ b/components/modales/KueModal.jsx @@ -0,0 +1,232 @@ +"use client"; // components/modales/KueModal.jsx +import ReactModal from "react-modal"; +import { useState, useEffect } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons +import handleChange from "./handlers/handleChange"; +import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten"; +import handleSave from "./handlers/handleSave"; + +function KueModal({ showModal, onClose, slot, onModulNameChange }) { + const dispatch = useDispatch(); + const [ids, setIds] = useState(Array(32).fill("---")); + const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---")); + const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState( + Array(32).fill(10.0) + ); + const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0)); + const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState( + Array(32).fill(0.1) + ); + const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState( + Array(32).fill(1.0) + ); + const [schleifenintervall, setSchleifenintervall] = useState( + Array(32).fill(24) + ); + + const [originalValues, setOriginalValues] = useState({}); + + // Werte aus dem Redux-Store abrufen + const { + kueID, + kueLimit1, + kueDelay1, + kueLimit2Low, + kueLimit2High, + kueLoopInterval, + } = useSelector((state) => state.variables); + + // Initiale Werte festlegen, nur einmal beim Öffnen des Modals + useEffect(() => { + if (showModal) { + setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids); + setBezeichnungen( + kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen + ); + setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte); + setVerzoegerung(kueDelay1 || verzoegerung); + setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte); + setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte); + setSchleifenintervall(kueLoopInterval || schleifenintervall); + + setOriginalValues({ + ids: [...ids], + bezeichnungen: [...bezeichnungen], + isolationsgrenzwerte: [...isolationsgrenzwerte], + verzoegerung: [...verzoegerung], + untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte], + obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte], + schleifenintervall: [...schleifenintervall], + }); + } + }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal + + return ( + +
+

KUE Einstellung - Slot {slot + 1}

+ +
+ +
+
+ + handleChange(setIds, e, slot)} + /> +
+
+ +
+

Isolationsmessung

+ + + + + + + + + + + + + +
+ Grenzwert (MOhm) + + Verzögerung (sek) +
+ + handleChange(setIsolationsgrenzwerte, e, slot) + } + /> + + handleChange(setVerzoegerung, e, slot)} + /> +
+ +

Schleifenmessung

+ + + + + + + + + + + + + +
+ Grenzwert (kOhm) + + Schleifenintervall (h) +
+ + handleChange(setUntereSchleifenGrenzwerte, e, slot) + } + /> + + handleChange(setSchleifenintervall, e, slot)} + /> +
+
+ +
+ + +
+ + ); +} + +export default KueModal; diff --git a/components/modales/kueModal/TDRPopup.tsx b/components/modales/kueModal/TDRPopup.tsx new file mode 100644 index 0000000..b43bb3c --- /dev/null +++ b/components/modales/kueModal/TDRPopup.tsx @@ -0,0 +1,208 @@ +"use client"; // components/modules/KueModal/TDRPopup.tsx +import React, { useState, useEffect, useRef } from "react"; +import ReactModal from "react-modal"; +import Chart from "chart.js/auto"; +import { useSelector } from "react-redux"; +import KueModal from "../KueModal"; +import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons +import { RootState } from "../../../redux/store"; +import { DataTDR } from "../../../redux/types/chartDataTypesTDR"; +import { useDispatch } from "react-redux"; +import { + setSelectedChartData, + setSelectedFileName, +} from "../../../redux/slices/variablesSlice"; +const TDRChartActionBar: React.FC = () => { + 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 dispatch = useDispatch(); // Redux-Dispatch + + 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(); + dispatch(setSelectedChartData(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) => { + const selectedFile = event.target.value; + setAusgewählteDatei(selectedFile); + console.log("Ausgewählte Datei:", selectedFile); + + // Datei in Redux speichern + dispatch(setSelectedFileName(selectedFile)); + + // Lade die Datei und speichere sie in Redux + handleLoadData(selectedFile); + }; + + const loadSelectedFileData = async (filename: string) => { + const yearFolder = getYearFolderName(jahr); + const monthFolder = `Month_${monat.toString().padStart(2, "0")}`; + + try { + const response = await fetch( + `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}` + ); + + if (response.ok) { + const data: DataTDR[] = await response.json(); + console.log("Geladene Daten:", data); + + // Redux-Action zum Speichern der Daten aufrufen + dispatch(setSelectedChartData(data)); + } else { + console.error("Fehler beim Laden der Datei:", filename); + } + } catch (error) { + console.error("Fehler beim Laden der Datei:", error); + } + }; + + return ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + + + +
+ ); +}; + +export default TDRChartActionBar;