From 4a94fc9ce693732676ca09d0ee98dcba89fe1756 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 21 Feb 2025 13:23:52 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Behebt=20"window=20is=20not=20defined"?=
 =?UTF-8?q?=20Fehler=20und=20erm=C3=B6glicht=20erfolgreichen=20Build?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Import von `chartjs-plugin-zoom` in `LoopMeasurementChart.tsx` dynamisch in `useEffect` verschoben.
- Stellt sicher, dass `window` nur im Client-Umfeld genutzt wird.
- Erfolgreicher Next.js Production-Build getestet.
---
 .../LoopChartActionBar.tsx                    | 10 ++++--
 .../LoopMeasurementChart.tsx                  | 30 ++++++++++++------
 .../kabelueberwachung/kue705FO/Kue705FO.tsx   | 31 +++++++++++++++++--
 config/webVersion.ts                          |  2 +-
 4 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
index 345824f..4b4c99b 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
@@ -1,4 +1,4 @@
-// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
 import React, { useEffect } from "react";
 import DateRangePicker from "../DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
@@ -72,8 +72,12 @@ const LoopChartActionBar: React.FC = () => {
     <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
       {/* Datumsauswahl */}
       <DateRangePicker
-        setVonDatum={(date) => dispatch(setVonDatum(date))}
-        setBisDatum={(date) => dispatch(setBisDatum(date))}
+        setVonDatum={(date) =>
+          dispatch(setVonDatum(date.toISOString().split("T")[0]))
+        }
+        setBisDatum={(date) =>
+          dispatch(setBisDatum(date.toISOString().split("T")[0]))
+        }
       />
 
       {/* Dropdown für DIA-Modus */}
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
index a394d14..33762ae 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
@@ -1,16 +1,23 @@
-// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
-import React, { useEffect, useRef } from "react";
+"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-moment";
-import zoomPlugin from "chartjs-plugin-zoom"; // Zoom-Plugin importieren
-
-Chart.register(zoomPlugin); // Plugin registrieren
 
 const LoopMeasurementChart = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
+  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default);
+        Chart.register(mod.default);
+      });
+    }
+  }, []);
 
   // Daten & Datum aus Redux abrufen
   const { chartData, vonDatum, bisDatum } = useSelector(
@@ -122,7 +129,9 @@ const LoopMeasurementChart = () => {
               },
               y: {
                 ticks: {
-                  callback: (value) => value.toFixed(2) + " kOhm",
+                  callback: (value) =>
+                    (typeof value === "number" ? value.toFixed(2) : value) +
+                    " kOhm",
                 },
               },
             },
@@ -130,7 +139,8 @@ const LoopMeasurementChart = () => {
               tooltip: {
                 callbacks: {
                   label: (tooltipItem) => {
-                    const date = new Date(tooltipItem.raw.x);
+                    const rawItem = tooltipItem.raw as { x: number; y: number };
+                    const date = new Date(rawItem.x);
                     const timeString = `${date
                       .getHours()
                       .toString()
@@ -138,9 +148,9 @@ const LoopMeasurementChart = () => {
                       .getMinutes()
                       .toString()
                       .padStart(2, "0")}`;
-                    return `${
-                      tooltipItem.dataset.label
-                    }: ${tooltipItem.raw.y.toFixed(2)} kOhm `;
+                    return `${tooltipItem.dataset.label}: ${(
+                      tooltipItem.raw as { x: number; y: number }
+                    ).y.toFixed(2)} kOhm `;
                   },
                 },
               },
diff --git a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
index 6b54379..c063561 100644
--- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
@@ -47,7 +47,10 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [kueVersion, setKueVersion] = useState("V4.19");
   const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
   const [currentModulName, setCurrentModulName] = useState(modulName);
-  const [activeButton, setActiveButton] = useState("Schleife");
+  const [activeButton, setActiveButton] = useState<"Schleife" | "TDR">(
+    "Schleife"
+  );
+
   const [loopTitleText, setloopTitleText] = useState(
     "Schleifenwiderstand [kOhm]"
   );
@@ -379,7 +382,18 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
             <div className="flex mt-1 space-x-[0.063rem] ">
               <button
-                onClick={() => handleButtonClick("Schleife")}
+                onClick={() =>
+                  handleButtonClick(
+                    "Schleife",
+                    setActiveButton,
+                    setloopTitleText,
+                    setLoopDisplayValue,
+                    Number(schleifenwiderstand), // <- Stelle sicher, dass es eine Zahl ist
+                    tdrLocation,
+                    slotIndex,
+                    dispatch
+                  )
+                }
                 className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
                   activeButton === "Schleife"
                     ? "bg-littwin-blue"
@@ -389,7 +403,18 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
                 Schleife
               </button>
               <button
-                onClick={() => handleButtonClick("TDR")}
+                onClick={() =>
+                  handleButtonClick(
+                    "TDR",
+                    setActiveButton,
+                    setloopTitleText,
+                    setLoopDisplayValue,
+                    Number(schleifenwiderstand), // <- Stelle sicher, dass es eine Zahl ist
+                    tdrLocation,
+                    slotIndex,
+                    dispatch
+                  )
+                }
                 className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
                   Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
                     ? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
diff --git a/config/webVersion.ts b/config/webVersion.ts
index a1ef2d4..e2d1de8 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.80";
+const webVersion = "1.6.81";
 export default webVersion;