Redux Dateien in redux/store/ verschoben

2025-01-28 10:25:24 +01:00
parent 243099fc75
commit b1e50188ab
9 changed files with 2220 additions and 1979 deletions
--- a/components/modales/kueModal/KueModal.tsx
+++ b/components/modales/kueModal/KueModal.tsx
@@ -2,9 +2,9 @@
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { setVariables  } from "../../../store/variablesSlice";
+import { setVariables } from "../../../redux/store/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
-import handleSave , { OriginalValues } from "./handlers/handleSave";
+import handleSave, { OriginalValues } from "./handlers/handleSave";
 import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
 import handleChange from "./handlers/handleChange";
 import firmwareUpdate from "./handlers/firmwareUpdate";
@@ -23,7 +23,9 @@ function KueModal({
  slot,
  onModulNameChange,
 }: KueModalProps): JSX.Element {
-  const isAdminLoggedIn = useSelector((state: any) => state.auth.isAdminLoggedIn);
+  const isAdminLoggedIn = useSelector(
+    (state: any) => state.auth.isAdminLoggedIn
+  );
  const [isAdmin, setIsAdmin] = useState(false);
  const dispatch = useDispatch();
  const [ids, setIds] = useState(Array(32).fill(""));
@@ -51,10 +53,9 @@ function KueModal({
    obereSchleifenGrenzwerte: Array(32).fill(1.0),
    schleifenintervall: Array(32).fill(24),
  });
-  

-   // Werte aus dem Redux-Store abrufen
-   const {
+  // Werte aus dem Redux-Store abrufen
+  const {
    kueID,
    kueLimit1,
    kueDelay1,
@@ -89,7 +90,9 @@ function KueModal({
    if (showModal) {
      setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
      setBezeichnungen(
-        kueID ? kueID.map((name: string) => name.trim() || "---") : bezeichnungen
+        kueID
+          ? kueID.map((name: string) => name.trim() || "---")
+          : bezeichnungen
      );
      setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
      setVerzoegerung(kueDelay1 || verzoegerung);
@@ -106,7 +109,6 @@ function KueModal({
        obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
        schleifenintervall: [...schleifenintervall],
      });
-      
    }
  }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
  //------------------------------------------------------------------------------------------------------------
@@ -132,7 +134,6 @@ function KueModal({
        overlay: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 100,
-   
        },
        content: {
          top: "50%",
--- a/components/modales/kueModal/TDRPopup.tsx
+++ b/components/modales/kueModal/TDRPopup.tsx
@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from "react";
+
+const TDRPopup = () => {
+  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 [sortAscending, setSortAscending] = useState(true);
+
+  // Fetch directory.json basierend auf Jahr und Monat
+  useEffect(() => {
+    const loadDirectory = async () => {
+      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
+          );
+          setDateiListe(files); // Dateien setzen
+        } else {
+          console.error("Fehler beim Laden der Datei directory.json");
+          setDateiListe([]); // Leere Liste bei Fehler
+        }
+      } catch (error) {
+        console.error("Fehler beim Laden der Datei directory.json:", error);
+        setDateiListe([]);
+      }
+    };
+
+    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 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);
+  };
+
+  // Laden der ausgewählten Datei
+  const loadSelectedFileData = async (filename: string) => {
+    try {
+      const response = await fetch(
+        `/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
+          .toString()
+          .padStart(2, "0")}/${filename}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        console.log("Geladene Daten:", data);
+        // Hier kannst du die Daten für das Diagramm verwenden
+      } 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>
+  );
+};
+
+export default TDRPopup;
--- a/components/modales/kueModal/handlers/handleSave.ts
+++ b/components/modales/kueModal/handlers/handleSave.ts
@@ -1,7 +1,7 @@
 // components/modales/kueModal/handlers/handleSave.ts
-import { setVariables } from "../../../../store/variablesSlice";
+import { setVariables } from "../../../../redux/store/variablesSlice";

-export  interface OriginalValues {
+export interface OriginalValues {
  kueID: string[];
  kueBezeichnungen: string[];
  isolationsgrenzwerte: number[];
--- a/components/modules/Kue705FO.tsx
+++ b/components/modules/Kue705FO.tsx
@@ -5,7 +5,7 @@ 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 "../../store/store";
+import { RootState } from "../../redux/store/store";

 interface DataTDR {
  t: number; // Oder Date, falls t ein Datum ist
@@ -170,15 +170,21 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
  const handleCloseChartModal = () => setShowChartModal(false);
  // Funktion zum Erstellen des TDR-Charts

+  const chartInstance = useRef<Chart | null>(null);
+
  const createTDRChart = (dataTDR: DataTDR[]) => {
    const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-    const ctx = canvas?.getContext("2d");
-    if (!ctx) {
-      console.error("Canvas context konnte nicht gefunden werden");
-      return;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Zerstöre das vorherige Diagramm, falls vorhanden
+    if (chartInstance.current) {
+      chartInstance.current.destroy();
    }

-    new Chart(ctx, {
+    chartInstance.current = new Chart(ctx, {
      type: "line",
      data: {
        labels: dataTDR.map((row) => row.t),
@@ -188,21 +194,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
            data: dataTDR.map((row) => row.m),
            borderColor: "#00AEEF",
            borderWidth: 1,
-            pointBorderWidth: 0,
-            pointStyle: false,
            fill: false,
-            yAxisID: "y",
          },
        ],
      },
      options: {
-        scales: {
-          x: {
-            type: "linear",
-            position: "left",
-            title: { display: true, text: "Meter" },
-          },
-        },
+        responsive: true,
        plugins: {
          zoom: {
            pan: {
@@ -211,15 +208,22 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
            },
            zoom: {
              wheel: {
-                enabled: true, // Zoom mit Mausrad
+                enabled: true,
              },
              pinch: {
-                enabled: true, // Pinch-Zoom für Touchgeräte
+                enabled: true,
              },
-              mode: "xy", // x und y Achsen zoomen
+              mode: "xy",
            },
          },
        },
+        scales: {
+          x: {
+            type: "linear",
+            position: "bottom",
+            title: { display: true, text: "Meter" },
+          },
+        },
      },
    });
  };
@@ -733,23 +737,97 @@ interface Kue705FOProps {
 //-------------------------------------------------------------
 // TDRPopup Komponente
 //-------------------------------------------------------------
-// Im Modal für TDR
-const TDRPopup = () => {
+
+const TDRPopup = ({
+  onDataSelect,
+}: {
+  onDataSelect: (data: DataTDR[]) => void;
+}) => {
  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 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); // Jahr in Year_xx umwandeln
+      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+
+      try {
+        const response = await fetch(
+          `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
+        );
+        //link in console anzeigen
+        console.log(
+          `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
+        );
+
+        if (!response.ok) {
+          console.error(
+            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
+          );
+          setDateiListe([]);
+          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);
-    console.log(
-      "Sortierung umkehren:",
-      sortAscending ? "Absteigend" : "Aufsteigend"
+    setDateiListe((prevListe) =>
+      [...prevListe].sort((a, b) =>
+        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
+      )
    );
  };

  const handleAktualisieren = () => {
-    console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
-    // Logik für die Aktualisierung hinzufügen
+    console.log("Daten werden aktualisiert für:", jahr, monat);
+  };
+
+  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);
+  };
+
+  // Laden der ausgewählten Datei
+  const loadSelectedFileData = async (filename: string) => {
+    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    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 = await response.json();
+        console.log("Geladene Daten:", data);
+        // Hier kannst du die Daten für das Diagramm verwenden
+      } else {
+        console.error("Fehler beim Laden der Datei:", filename);
+      }
+    } catch (error) {
+      console.error("Fehler beim Laden der Datei:", error);
+    }
  };

  return (
@@ -784,24 +862,30 @@ const TDRPopup = () => {
        >
          {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
            <option key={month} value={month}>
-              {month}
+              {month.toString().padStart(2, "0")}
            </option>
          ))}
        </select>
      </div>

      <div className="flex items-center space-x-2">
-        <label htmlFor="emptySelect" className="text-sm font-semibold">
+        <label htmlFor="dateiSelect" className="text-sm font-semibold">
          Auswahl
        </label>
        <select
-          id="emptySelect"
+          id="dateiSelect"
          className="border rounded px-2 py-1"
-          defaultValue=""
+          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>

--- a/public/CPLmockData/LastTDR/kue_01/Year_24/Month_01/05-0829.json
+++ b/public/CPLmockData/LastTDR/kue_01/Year_24/Month_01/05-0829.json
--- a/redux/store/authSlice.ts
+++ b/redux/store/authSlice.ts
@@ -1,4 +1,4 @@
-// redux/authSlice.ts
+// redux/store/authSlice.ts
 import { createSlice } from "@reduxjs/toolkit";

 const authSlice = createSlice({
--- a/redux/store/rootReducer.ts
+++ b/redux/store/rootReducer.ts
@@ -1,4 +1,4 @@
-// store/rootReducer.ts
+// redux/store/rootReducer.ts
 import { combineReducers } from "redux";
 import variablesReducer from "./variablesSlice";
 import authReducer from "./authSlice";
--- a/redux/store/store.ts
+++ b/redux/store/store.ts
@@ -1,4 +1,4 @@
-// store/store.ts
+// redux/store/store.ts
 import { configureStore } from "@reduxjs/toolkit";
 import rootReducer from "./rootReducer";

--- a/redux/store/variablesSlice.ts
+++ b/redux/store/variablesSlice.ts
@@ -1,4 +1,4 @@
-// store/variablesSlice.ts
+// redux/store/variablesSlice.ts
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";

 // Typ für den State