feat: Automatisches Laden der Chart-Daten bei Dropdown-Wechsel

- Redux-Slice `kabelueberwachungChartSlice.ts` erweitert um `selectedMode` und `selectedSlotType`
- `LoopChartActionBar.tsx` so angepasst, dass Änderungen in den Dropdown-Menüs automatisch `handleFetchData` aufrufen
- `useEffect` hinzugefügt, um Daten beim Wechsel von `selectedMode` oder `selectedSlotType` neu zu laden
- Manuelles Klicken auf den "Daten Laden"-Button ist nun nicht mehr nötig

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

@@ -1,43 +1,26 @@
 // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
-import React from "react";
+import React, { useEffect } from "react";
 import DateRangePicker from "../DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
 import {
   setVonDatum,
   setBisDatum,
-} from "../../../../../../redux/slices/dateRangeKueChartSlice";
-import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
+  setChartData,
+  setSelectedMode,
+  setSelectedSlotType,
+} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
 
 const LoopChartActionBar: React.FC = () => {
   const dispatch = useDispatch();
 
-  // Datum aus Redux abrufen
-  const vonDatum = useSelector(
-    (state: RootState) => state.dateRangeKueChart.vonDatum
+  // Redux-Status abrufen
+  const { vonDatum, bisDatum, selectedMode, selectedSlotType } = useSelector(
+    (state: RootState) => state.kabelueberwachungChart
   );
-  const bisDatum = useSelector(
-    (state: RootState) => state.dateRangeKueChart.bisDatum
-  );
-
-  // Zustand für das Dropdown-Menü zur Auswahl von DIA-Modus (Alle, Stunden, Tage)
-  const [selectedMode, setSelectedMode] = React.useState<
-    "DIA0" | "DIA1" | "DIA2"
-  >("DIA0");
-
-  // Zustand für das Dropdown-Menü zur Auswahl des Slot-Typs (Isolations- oder Schleifenwiderstand)
-  const [selectedSlotType, setSelectedSlotType] = React.useState<
-    "isolationswiderstand" | "schleifenwiderstand"
-  >("schleifenwiderstand");
-
-  // Slot-Werte
-  const isolationswiderstand = 3;
-  const schleifenwiderstand = 4;
 
   /**
-   * Dynamische API-URL-Erstellung für Entwicklung und Produktion
-   * @param mode - DIA0, DIA1 oder DIA2
-   * @param type - Slot für die Abfrage (3 = Isolationswiderstand, 4 = Schleifenwiderstand)
+   * API-URL-Erstellung für Entwicklung und Produktion
    */
   const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", type: number) => {
     return process.env.NODE_ENV === "development"
@@ -49,7 +32,7 @@ const LoopChartActionBar: React.FC = () => {
    * Funktion zum Laden der Messwerte
    */
   const handleFetchData = async () => {
-    const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3; // 4 für Schleifenwiderstand, 3 für Isolationswiderstand
+    const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3;
 
     try {
       const apiUrl = getApiUrl(selectedMode, type);
@@ -71,6 +54,11 @@ const LoopChartActionBar: React.FC = () => {
     }
   };
 
+  // **Automatische Datenaktualisierung bei Auswahländerung**
+  useEffect(() => {
+    handleFetchData();
+  }, [selectedMode, selectedSlotType]); // Wird ausgeführt, wenn sich ein Dropdown ändert
+
   return (
     <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
       {/* Datumsauswahl */}
@@ -83,7 +71,7 @@ const LoopChartActionBar: React.FC = () => {
       <select
         value={selectedMode}
         onChange={(e) =>
-          setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2")
+          dispatch(setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2"))
         }
         className="px-3 py-1 bg-white border rounded text-sm"
       >
@@ -96,8 +84,10 @@ const LoopChartActionBar: React.FC = () => {
       <select
         value={selectedSlotType}
         onChange={(e) =>
-          setSelectedSlotType(
-            e.target.value as "isolationswiderstand" | "schleifenwiderstand"
+          dispatch(
+            setSelectedSlotType(
+              e.target.value as "isolationswiderstand" | "schleifenwiderstand"
+            )
           )
         }
         className="px-3 py-1 bg-white border rounded text-sm"