refactor: Code-Struktur verbessert, Handler und Logik modularisiert

- Alle Event-Handler in eigene Dateien ausgelagert:
  - `handleOpenModal.ts`, `handleCloseModal.ts`
  - `handleOpenChartModal.ts`, `handleCloseChartModal.ts`
  - `handleRefreshClick.ts`, `handleSave.ts`
- Neue Hooks zur Verwaltung von Redux-Selektoren und UI-Zuständen erstellt
- `Kue705FO.tsx` gesäubert, jetzt schlanker und übersichtlicher
- Verbesserte Wartbarkeit und Wiederverwendbarkeit der Code-Basis

components/main/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -1,21 +1,13 @@
 "use client"; // components/modules/kue705FO/Kue705FO.tsx
 import React, { useState, useEffect, useRef } from "react";
-import Chart from "chart.js/auto";
 import { useSelector } from "react-redux";
 import KueModal from "./KueModal";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
-import { RootState } from "../../../../redux/store";
-import { useDispatch } from "react-redux";
-import { setSelectedChartData } from "../../../../redux/slices/variablesSlice";
-import { goLoop } from "../../../../utils/goLoop";
-import { goTDR } from "../../../../utils/goTDR";
 import { Kue705FOProps } from "../../../../types/components/Kue705FOProps";
 import ChartSwitcher from "./Charts/ChartSwitcher";
-import { setActiveMode } from "../../../../redux/slices/kueChartModeSlice";
+//-------Redux Toolkit--------
-import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
+import { RootState } from "../../../../redux/store";
-import { setChartOpen } from "../../../../redux/slices/kabelueberwachungChartSlice";
+import { useDispatch } from "react-redux";
-import { setSlotNumber } from "../../../../redux/slices/kabelueberwachungChartSlice";
-import { createTDRChart } from "../../../../utils/chartUtils";
 //-------hooks----------------
 import useChartPlugin from "./hooks/useChartPlugin";
 import useAlarmStatus from "./hooks/useAlarmStatus";
@@ -25,6 +17,13 @@ import useLoopDisplay from "./hooks/useLoopDisplay";
 import useModulName from "./hooks/useModulName";
 import useChartData from "./hooks/useChartData";
 import useTDRChart from "./hooks/useTDRChart";
+//--------handlers----------------
+import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
+import handleOpenModal from "./handlers/handleOpenModal";
+import handleCloseModal from "./handlers/handleCloseModal";
+import handleOpenChartModal from "./handlers/handleOpenChartModal";
+import handleCloseChartModal from "./handlers/handleCloseChartModal";
+import handleRefreshClick from "./handlers/handleRefreshClick";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -33,7 +32,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   kueOnline,
   slotIndex,
   tdrLocation,
-  alarmStatus,
 }) => {
   /*   console.log(
     `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
@@ -68,7 +66,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
     useState(null);
 
-  // Redux-Variablen abrufen
+  //------- Redux-Variablen abrufen--------------------------------
   const {
     kuePSTmMinus96V,
     kueVersion: reduxKueVersion,
@@ -92,40 +90,15 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     (state: RootState) => state.variables.kueOverflow?.map(Number) ?? []
   );
 
-  //-------------------------
+  //-------------------------handlers-------------------------
-  const handleOpenModal = () => setShowModal(true);
+  const openModal = () => handleOpenModal(setShowModal);
-  const handleCloseModal = () => setShowModal(false);
+  const closeModal = () => handleCloseModal(setShowModal);
-
+  const openChartModal = () =>
-  const handleOpenChartModal = () => {
+    handleOpenChartModal(setShowChartModal, dispatch, slotIndex, activeButton);
-    setShowChartModal(true);
+  const refreshClick = () =>
-    dispatch(setChartOpen(true));
+    handleRefreshClick(activeButton, slotIndex, setLoading);
-    dispatch(setSlotNumber(slotIndex + 1)); // Slot-Nummer speichern
+  const closeChartModal = () =>
-
+    handleCloseChartModal(setShowChartModal, chartInstance);
-    if (activeButton === "TDR") {
-      dispatch(setActiveMode("TDR"));
-    } else {
-      dispatch(setActiveMode("Schleife"));
-    }
-  };
-
-  // Funktion aufrufen in handleRefreshClick
-  const handleRefreshClick = () => {
-    if (activeButton === "Schleife") {
-      goLoop(slotIndex, setLoading);
-    } else if (activeButton === "TDR") {
-      goTDR(slotIndex, setLoading);
-    }
-  };
-
-  const handleCloseChartModal = () => {
-    if (chartInstance.current) {
-      console.log("Chart wird beim Schließen des Modals zerstört.");
-      chartInstance.current.destroy();
-      chartInstance.current = null;
-    }
-    setShowChartModal(false);
-  };
-
   //----------------------------------
   //hooks einbinden
   const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
@@ -189,7 +162,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
               </h3>
 
               <button
-                onClick={handleOpenModal}
+                onClick={openModal}
                 className="w-[0.938rem] h-[0.938rem] bg-gray-400 flex items-center justify-center"
               >
                 <span className="text-white text-[1.25rem]">⚙</span>
@@ -198,7 +171,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
             {}
             <KueModal
               showModal={showModal}
-              onClose={handleCloseModal}
+              onClose={closeModal}
               slot={slotIndex}
               onModulNameChange={setCurrentModulName}
             />
@@ -269,7 +242,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
             <div className="relative w-full h-[2.813rem]  bg-gray-100 border border-gray-400 flex items-center justify-center mt-4">
               <button
-                onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
+                onClick={refreshClick} // Dynamische Funktion basierend auf aktivem Button
                 className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
                 disabled={loading} // Disable button while loading
               >
@@ -343,7 +316,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
             </div>
 
             <button
-              onClick={handleOpenChartModal} // Öffnet das Chart-Modal
+              onClick={openChartModal} // Öffnet das Chart-Modal
               className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center mt-[0.063rem]"
             >
               Messkurve
@@ -352,10 +325,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
           {/* Modal für Messkurve */}
           {showChartModal && (
-            <ChartSwitcher
+            <ChartSwitcher isOpen={showChartModal} onClose={closeChartModal} />
-              isOpen={showChartModal}
-              onClose={handleCloseChartModal}
-            />
           )}
         </>
       ) : (

components/main/kabelueberwachung/kue705FO/handlers/handleCloseChartModal.ts

@@ -0,0 +1,14 @@
+// components/main/kabelueberwachung/kue705FO/handlers/handleCloseChartModal.ts
+const handleCloseChartModal = (
+  setShowChartModal: (value: boolean) => void,
+  chartInstance: any
+) => {
+  if (chartInstance.current) {
+    console.log("Chart wird beim Schließen des Modals zerstört.");
+    chartInstance.current.destroy();
+    chartInstance.current = null;
+  }
+  setShowChartModal(false);
+};
+
+export default handleCloseChartModal;

components/main/kabelueberwachung/kue705FO/handlers/handleCloseModal.ts

@@ -0,0 +1,6 @@
+// components/main/kabelueberwachung/kue705FO/handlers/handleCloseModal.ts
+const handleCloseModal = (setShowModal: (value: boolean) => void) => {
+  setShowModal(false);
+};
+
+export default handleCloseModal;

components/main/kabelueberwachung/kue705FO/handlers/handleOpenChartModal.ts

@@ -0,0 +1,27 @@
+// components/main/kabelueberwachung/kue705FO/handlers/handleOpenChartModal.ts
+import { Dispatch, SetStateAction } from "react";
+import {
+  setChartOpen,
+  setSlotNumber,
+} from "../../../../../redux/slices/kabelueberwachungChartSlice";
+import { setActiveMode } from "../../../../../redux/slices/kueChartModeSlice";
+import { useDispatch } from "react-redux";
+
+const handleOpenChartModal = (
+  setShowChartModal: Dispatch<SetStateAction<boolean>>,
+  dispatch: ReturnType<typeof useDispatch>,
+  slotIndex: number,
+  activeButton: "Schleife" | "TDR"
+) => {
+  setShowChartModal(true);
+  dispatch(setChartOpen(true));
+  dispatch(setSlotNumber(slotIndex + 1));
+
+  if (activeButton === "TDR") {
+    dispatch(setActiveMode("TDR"));
+  } else {
+    dispatch(setActiveMode("Schleife"));
+  }
+};
+
+export default handleOpenChartModal;

components/main/kabelueberwachung/kue705FO/handlers/handleOpenModal.ts

@@ -0,0 +1,6 @@
+// components/main/kabelueberwachung/kue705FO/handlers/handleOpenModal.ts
+const handleOpenModal = (setShowModal: (value: boolean) => void) => {
+  setShowModal(true);
+};
+
+export default handleOpenModal;

components/main/kabelueberwachung/kue705FO/handlers/handleRefreshClick.ts

@@ -0,0 +1,18 @@
+// components/main/kabelueberwachung/kue705FO/handlers/handleRefreshClick.ts
+import { Dispatch, SetStateAction } from "react";
+import { goLoop } from "../../../../../utils/goLoop";
+import { goTDR } from "../../../../../utils/goTDR";
+
+const handleRefreshClick = (
+  activeButton: "Schleife" | "TDR",
+  slotIndex: number,
+  setLoading: Dispatch<SetStateAction<boolean>>
+) => {
+  if (activeButton === "Schleife") {
+    goLoop(slotIndex, setLoading);
+  } else if (activeButton === "TDR") {
+    goTDR(slotIndex, setLoading);
+  }
+};
+
+export default handleRefreshClick;

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.106";
+const webVersion = "1.6.107";
 export default webVersion;