From 5fbc04728b05eac06aa9e61b2074e5114657a544 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 28 Jan 2025 15:13:29 +0100
Subject: [PATCH] feat: Auslagerung der TDRPopup-Komponente in eine eigene
 Datei

- TDRPopup-Komponente in `components/modules/KueModal/TDRPopup.tsx` ausgelagert
- Importpfad in Kue705FO angepasst, um die ausgelagerte Komponente korrekt zu referenzieren
---
 components/modales/kueModal/TDRPopup.tsx | 109 +++++++++----
 components/modules/Kue705FO.tsx          | 197 +----------------------
 2 files changed, 82 insertions(+), 224 deletions(-)

diff --git a/components/modales/kueModal/TDRPopup.tsx b/components/modales/kueModal/TDRPopup.tsx
index 9dee4f0..b1edeb3 100644
--- a/components/modales/kueModal/TDRPopup.tsx
+++ b/components/modales/kueModal/TDRPopup.tsx
@@ -1,34 +1,57 @@
-import React, { useState, useEffect } from "react";
-
-const TDRPopup = () => {
+"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 "../../modales/kueModal/KueModal";
+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,
+  setSelectedFileName,
+} from "../../../redux/store/variablesSlice";
+const TDRPopup: React.FC = () => {
   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 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(
-          `/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
-            .toString()
-            .padStart(2, "0")}/directory.json`
-        );
-        if (response.ok) {
-          const data = await response.json();
-          const files = data.files.map(
-            (file: { filename: string }) => file.filename
+        const response = await fetch(path);
+        if (!response.ok) {
+          console.error(
+            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
           );
-          setDateiListe(files); // Dateien setzen
-        } else {
-          console.error("Fehler beim Laden der Datei directory.json");
-          setDateiListe([]); // Leere Liste bei Fehler
+          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);
-        setDateiListe([]);
       }
     };
 
@@ -47,26 +70,56 @@ const TDRPopup = () => {
   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<HTMLSelectElement>) => {
-    setAusgewählteDatei(event.target.value);
-    console.log("Ausgewählte Datei:", event.target.value);
-    // Hier kannst du die Logik hinzufügen, um die Datei zu laden und die Diagrammdaten zu aktualisieren
-    loadSelectedFileData(event.target.value);
+    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);
   };
 
-  // Laden der ausgewählten Datei
   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/Year_${jahr}/Month_${monat
-          .toString()
-          .padStart(2, "0")}/${filename}`
+        `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`
       );
+
       if (response.ok) {
-        const data = await response.json();
+        const data: DataTDR[] = await response.json();
         console.log("Geladene Daten:", data);
-        // Hier kannst du die Daten für das Diagramm verwenden
+
+        // Redux-Action zum Speichern der Daten aufrufen
+        dispatch(setSelectedChartData(data));
       } else {
         console.error("Fehler beim Laden der Datei:", filename);
       }
diff --git a/components/modules/Kue705FO.tsx b/components/modules/Kue705FO.tsx
index f8f5ed5..e665805 100644
--- a/components/modules/Kue705FO.tsx
+++ b/components/modules/Kue705FO.tsx
@@ -12,6 +12,7 @@ import {
   setSelectedChartData,
   setSelectedFileName,
 } from "../../redux/store/variablesSlice";
+import TDRPopup from "../modales/kueModal/TDRPopup";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -815,199 +816,3 @@ interface Kue705FOProps {
   tdrLocation: number[];
   alarmStatus?: boolean;
 }
-//-------------------------------------------------------------
-// TDRPopup Komponente
-//-------------------------------------------------------------
-
-const TDRPopup: React.FC = () => {
-  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 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<HTMLSelectElement>) => {
-    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 (
-    <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>
-  );
-};