diff --git a/components/modules/Kue705FO.tsx b/components/modules/Kue705FO.tsx index 10c6858..a1e3b93 100644 --- a/components/modules/Kue705FO.tsx +++ b/components/modules/Kue705FO.tsx @@ -8,7 +8,10 @@ import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons import { RootState } from "../../redux/store/store"; import { DataTDR } from "../../redux/types/chartDataTypesTDR"; import { useDispatch } from "react-redux"; -import { setSelectedChartData } from "../../redux/store/variablesSlice"; +import { + setSelectedChartData, + setSelectedFileName, +} from "../../redux/store/variablesSlice"; const Kue705FO: React.FC = ({ isolationswert, @@ -55,7 +58,12 @@ const Kue705FO: React.FC = ({ const [showChartModal, setShowChartModal] = useState(false); const [chartData, setChartData] = useState(null); - dispatch(setSelectedChartData(chartData)); + useEffect(() => { + if (chartData) { + dispatch(setSelectedChartData(chartData)); + } + }, [chartData, dispatch]); // Führe dispatch nur aus, wenn chartData sich ändert + // Redux-Variablen abrufen const { kuePSTmMinus96V, @@ -170,91 +178,119 @@ const Kue705FO: React.FC = ({ } }; - const handleCloseChartModal = () => setShowChartModal(false); + const handleCloseChartModal = () => { + if (chartInstance.current) { + console.log("Chart wird beim Schließen des Modals zerstört."); + chartInstance.current.destroy(); + chartInstance.current = null; + } + setShowChartModal(false); + }; + // Funktion zum Erstellen des TDR-Charts const chartInstance = useRef(null); const createTDRChart = (dataTDR: DataTDR[]) => { const canvas = document.getElementById("myChart") as HTMLCanvasElement; - if (!canvas) return; - const ctx = canvas.getContext("2d"); - if (!ctx) return; - - // Zerstöre vorhandenes Diagramm - if (chartInstance.current) { - chartInstance.current.destroy(); + if (!canvas) { + console.error("Canvas mit ID 'myChart' nicht gefunden."); + return; } - // Erstelle neues Diagramm - chartInstance.current = new Chart(ctx, { - type: "line", - data: { - labels: dataTDR.map((row) => row.t), - datasets: [ - { - label: "Pegel", - data: dataTDR.map((row) => row.m), - borderColor: "#00AEEF", - borderWidth: 1, - fill: false, - }, - ], - }, - options: { - responsive: true, - plugins: { - zoom: { - pan: { - enabled: true, - mode: "xy", + const ctx = canvas.getContext("2d"); + if (!ctx) { + console.error("2D-Kontext für Canvas konnte nicht erstellt werden."); + return; + } + + // Vorhandenes Chart zerstören, falls vorhanden + if (chartInstance.current) { + console.log("Vorhandenes Chart wird zerstört."); + chartInstance.current.destroy(); + chartInstance.current = null; // Referenz zurücksetzen + } + + // Neues Chart erstellen + try { + chartInstance.current = new Chart(ctx, { + type: "line", + data: { + labels: dataTDR.map((row) => row.t), + datasets: [ + { + label: "Pegel", + data: dataTDR.map((row) => row.m), + borderColor: "#00AEEF", + borderWidth: 1, + fill: false, }, + ], + }, + options: { + responsive: true, + plugins: { zoom: { - wheel: { + pan: { enabled: true, + mode: "xy", }, - pinch: { - enabled: true, + zoom: { + wheel: { + enabled: true, + }, + pinch: { + enabled: true, + }, + mode: "xy", }, - mode: "xy", + }, + }, + scales: { + x: { + type: "linear", + position: "bottom", + title: { display: true, text: "Zeit" }, + }, + y: { + title: { display: true, text: "Pegel" }, }, }, }, - scales: { - x: { - type: "linear", - position: "bottom", - title: { display: true, text: "Zeit" }, - }, - y: { - title: { display: true, text: "Pegel" }, - }, - }, - }, - }); + }); + console.log("Neues Chart erfolgreich erstellt."); + } catch (error) { + console.error("Fehler beim Erstellen des Charts:", error); + } }; - const loadTDRChartData = () => { - const slot = slotIndex; - const environment = process.env.NODE_ENV || "production"; - const fileData = - environment === "production" - ? `/CPL?/CPL/lastTDR/slot${slot}.json` - : `/CPLmockData/lastTDR/slot${slot}.json`; + const selectedFileName = useSelector( + (state: RootState) => state.variables.selectedFileName + ); - fetch(fileData) + const loadTDRChartData = () => { + if (!selectedFileName) { + console.error("Kein Dateiname in Redux gespeichert."); + return; + } + + const yearFolder = `Year_${jahr.toString().slice(-2)}`; + const monthFolder = `Month_${monat.toString().padStart(2, "0")}`; + + //const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`; + const filePath = `/CPLmockData/LastTDR/kue_01/Year_24/Month_01/02-1911.json`; + + fetch(filePath) .then((response) => response.json()) .then((data) => { - console.log("Geladene Daten:", data); // Debug-Ausgabe - if (data && data.length > 0) { - setChartData(data); - createTDRChart(data); - } else { - console.error("Keine Daten gefunden."); - } + console.log("Geladene Daten:", data); + setChartData(data); + createTDRChart(data); }) - .catch((error) => console.error("Fehler beim Laden der Daten:", error)); + .catch((error) => + console.error("Fehler beim Laden der TDR-Daten:", error) + ); }; const loadLoopChartData = () => { @@ -512,6 +548,24 @@ const Kue705FO: React.FC = ({ //--------------------------------------------------- + //---------------------------------- + useEffect(() => { + if (selectedChartData) { + createTDRChart(selectedChartData); // Neues Chart erstellen + } + + return () => { + // Cleanup beim Komponentenwechsel + if (chartInstance.current) { + console.log("Chart wird beim Komponentenwechsel zerstört."); + chartInstance.current.destroy(); + chartInstance.current = null; + } + }; + }, [selectedChartData]); + + //---------------------------------- + return (
{ 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); - loadSelectedFileData(selectedFile); + + // Datei in Redux speichern + dispatch(setSelectedFileName(selectedFile)); + + // Lade die Datei und speichere sie in Redux + handleLoadData(selectedFile); }; const loadSelectedFileData = async (filename: string) => { diff --git a/redux/store/variablesSlice.ts b/redux/store/variablesSlice.ts index c4c8f79..2b7c299 100644 --- a/redux/store/variablesSlice.ts +++ b/redux/store/variablesSlice.ts @@ -5,6 +5,7 @@ import { DataTDR } from "../types/chartDataTypesTDR"; // Typ für den State export interface VariablesState { selectedChartData: DataTDR[] | null; + selectedFileName: string | null; //------------ kueBezeichnungen: string[]; isolationsgrenzwerte: number[]; @@ -64,6 +65,7 @@ export interface VariablesState { // Initialer Zustand const initialState: VariablesState = { + selectedFileName: null, //------------ selectedChartData: null, kueBezeichnungen: [], @@ -147,9 +149,16 @@ const variablesSlice = createSlice({ setSelectedChartData(state, action: PayloadAction) { state.selectedChartData = action.payload; }, + setSelectedFileName(state, action: PayloadAction) { + state.selectedFileName = action.payload; + }, }, }); -export const { setVariable, setVariables, setSelectedChartData } = - variablesSlice.actions; +export const { + setVariable, + setVariables, + setSelectedChartData, + setSelectedFileName, +} = variablesSlice.actions; export default variablesSlice.reducer;