diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx index ca6d40f..391c96f 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx @@ -1,46 +1,15 @@ // components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef } from "react"; +import { useSelector } from "react-redux"; import Chart from "chart.js/auto"; import "chartjs-adapter-date-fns"; -import { parseISO } from "date-fns"; const TDRChart: React.FC = () => { const chartRef = useRef(null); const chartInstance = 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); - }); - }, []); + // TDR-Daten aus dem Redux Store selektieren + const chartData = useSelector((state: any) => state.tdrData.data); useEffect(() => { if (chartRef.current && chartData.length > 0) { @@ -53,14 +22,17 @@ const TDRChart: React.FC = () => { chartInstance.current = new Chart(ctx, { type: "line", data: { - labels: chartData.map((entry) => parseISO(entry.timestamp)), datasets: [ { label: "TDR Entfernung (km)", - data: chartData.map((entry) => entry.tdr ?? 0), + data: chartData, borderColor: "rgba(255, 99, 132, 1)", backgroundColor: "rgba(255, 99, 132, 0.2)", tension: 0.1, + parsing: { + xAxisKey: "t", // Schlüssel für den Zeitstempel + yAxisKey: "m", // Schlüssel für den Messwert + }, }, ], }, @@ -70,11 +42,20 @@ const TDRChart: React.FC = () => { scales: { x: { type: "time", - time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" }, - title: { display: true, text: "Zeit" }, + time: { + unit: "minute", + tooltipFormat: "dd.MM.yyyy HH:mm", + }, + title: { + display: true, + text: "Zeit", + }, }, y: { - title: { display: true, text: "km" }, + title: { + display: true, + text: "km", + }, min: 0, max: 3, }, diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx index cdbb017..b5b8f80 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx @@ -2,11 +2,13 @@ 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"; +import { useDispatch } from "react-redux"; +import { setTDRData } from "../../../../../../redux/slices/tdrDataSlice"; 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 @@ -73,6 +75,8 @@ const TDRChartActionBar: React.FC = () => { return; } const data = await response.json(); + // Daten im Redux Store speichern + dispatch(setTDRData(data)); console.log("Daten erfolgreich in Redux gespeichert:", data); } catch (error) { @@ -130,7 +134,6 @@ const TDRChartActionBar: React.FC = () => { }); }, []); - const dispatch = useDispatch(); const BASE_URL = "http://localhost:3002"; const [showChart, setShowChart] = useState(false); diff --git a/components/modales/KueModal.jsx b/components/modales/KueModal.jsx deleted file mode 100644 index eb62e47..0000000 --- a/components/modales/KueModal.jsx +++ /dev/null @@ -1,232 +0,0 @@ -"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 deleted file mode 100644 index b43bb3c..0000000 --- a/components/modales/kueModal/TDRPopup.tsx +++ /dev/null @@ -1,208 +0,0 @@ -"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; diff --git a/components/modals/InputModal.tsx b/components/modals/InputModal.tsx deleted file mode 100644 index daa0322..0000000 --- a/components/modals/InputModal.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; - -export default function InputModal({ isOpen, input, closeModal }) { - if (!isOpen || !input) return null; - - return ( -
-
-

- Details für Eingang {input.id} -

-

- Status:{" "} - {input.status === "active" ? "Aktiv" : "Inaktiv"} -

-

- Beschreibung: {input.description} -

- -
-
- ); -} diff --git a/components/modals/OutputModal.tsx b/components/modals/OutputModal.tsx deleted file mode 100644 index 58a5630..0000000 --- a/components/modals/OutputModal.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; - -export default function OutputModal({ isOpen, output, closeModal }) { - if (!isOpen || !output) return null; - - return ( -
-
-

- Details für Ausgang {output.id} -

-

- Bezeichnung: {output.description} -

-

- Status:{" "} - {output.toggle ? "Eingeschaltet" : "Ausgeschaltet"} -

- -
-
- ); -} diff --git a/config/webVersion.ts b/config/webVersion.ts index e9261b7..003b049 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.85"; +const webVersion = "1.6.86"; export default webVersion; diff --git a/redux/slices/tdrDataSlice.ts b/redux/slices/tdrDataSlice.ts new file mode 100644 index 0000000..559047c --- /dev/null +++ b/redux/slices/tdrDataSlice.ts @@ -0,0 +1,26 @@ +// redux/slices/tdrDataSlice.ts +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; + +interface TDRDataState { + data: { timestamp: string; tdr: number }[]; +} + +const initialState: TDRDataState = { + data: [], +}; + +const tdrDataSlice = createSlice({ + name: "tdrData", + initialState, + reducers: { + setTDRData( + state, + action: PayloadAction<{ timestamp: string; tdr: number }[]> + ) { + state.data = action.payload; + }, + }, +}); + +export const { setTDRData } = tdrDataSlice.actions; +export default tdrDataSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts index c025fbf..27456c9 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -6,6 +6,7 @@ import chartDataReducer from "./slices/chartDataSlice"; import webVersionReducer from "./slices/webVersionSlice"; import digitalInputsReducer from "./slices/digitalInputsSlice"; import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice"; +import tdrDataReducer from "./slices/tdrDataSlice"; const store = configureStore({ reducer: { @@ -15,6 +16,7 @@ const store = configureStore({ webVersion: webVersionReducer, digitalInputs: digitalInputsReducer, kabelueberwachungChart: kabelueberwachungChartReducer, + tdrData: tdrDataReducer, }, });