fix: Behebt "window is not defined" Fehler und ermöglicht erfolgreichen Build

- 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.

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))}
+        setVonDatum={(date) =>
-        setBisDatum={(date) => dispatch(setBisDatum(date))}
+          dispatch(setVonDatum(date.toISOString().split("T")[0]))
+        }
+        setBisDatum={(date) =>
+          dispatch(setBisDatum(date.toISOString().split("T")[0]))
+        }
       />
 
       {/* Dropdown für DIA-Modus */}

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx

@@ -1,16 +1,23 @@
-// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
-import React, { useEffect, useRef } from "react";
+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 `${
+                    return `${tooltipItem.dataset.label}: ${(
-                      tooltipItem.dataset.label
+                      tooltipItem.raw as { x: number; y: number }
-                    }: ${tooltipItem.raw.y.toFixed(2)} kOhm `;
+                    ).y.toFixed(2)} kOhm `;
                   },
                 },
               },

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

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;