dropdownmenü für DIA0, DIA1 und DIA2 für KÜs Charts

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

@@ -1,21 +1,55 @@
+// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
 import React, { useState } from "react";
 import DateRangePicker from "../DateRangePicker";
 import { useDispatch } from "react-redux";
 import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
 
 const LoopChartActionBar: React.FC = () => {
+  const dispatch = useDispatch();
+
+  // Zustand für das Dropdown-Menü zur Auswahl von DIA-Modus (Alle, Stunden, Tage)
+  const [selectedMode, setSelectedMode] = useState<"DIA0" | "DIA1" | "DIA2">(
+    "DIA0"
+  );
+
+  // Zustand für das Dropdown-Menü zur Auswahl des Slot-Typs (Isolations- oder Schleifenwiderstand)
+  const [selectedSlotType, setSelectedSlotType] = useState<
+    "isolationswiderstand" | "schleifenwiderstand"
+  >("schleifenwiderstand");
+
+  // Zustand für das Datum
+  const [vonDatum, setVonDatum] = useState("2025;01;01");
+  const [bisDatum, setBisDatum] = useState("2025;07;31");
+
+  // Slot-Werte
   const isolationswiderstand = 3;
   const schleifenwiderstand = 4;
-  const dispatch = useDispatch();
-  const [showChart, setShowChart] = useState(false);
 
+  /**
+   * Dynamische API-URL-Erstellung für Entwicklung und Produktion
+   * @param mode - DIA0, DIA1 oder DIA2
+   * @param slotIndex - Slot für die Abfrage
+   */
+  const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", slotIndex: number) => {
+    const baseUrl =
+      process.env.NODE_ENV === "development"
+        ? `/api/mockChartData?${mode}=true`
+        : `/CPL?seite.ACP&${mode}=${vonDatum};${bisDatum};${slotIndex}`;
+
+    return baseUrl;
+  };
+
+  /**
+   * Funktion zum Laden der Messwerte
+   */
   const handleFetchData = async () => {
-    try {
-      const apiUrl =
-        process.env.NODE_ENV === "development"
-          ? "/CPLmockData/mockChartData.json"
-          : `/CPL?seite.ACP&DIA1=2025;01;01;2025;07;31;${slotIndex};${schleifenwiderstand}`;
+    const slotIndex =
+      selectedSlotType === "schleifenwiderstand"
+        ? schleifenwiderstand
+        : isolationswiderstand;
 
+    try {
+      const apiUrl = getApiUrl(selectedMode, slotIndex);
       const response = await fetch(apiUrl);
       const data = await response.json();
 
@@ -32,14 +66,43 @@ const LoopChartActionBar: React.FC = () => {
 
   return (
     <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
-      <DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
+      {/* Datumsauswahl */}
+      <DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
+
+      {/* Dropdown für DIA-Modus */}
+      <select
+        value={selectedMode}
+        onChange={(e) =>
+          setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2")
+        }
+        className="px-3 py-1 bg-white border rounded text-sm"
+      >
+        <option value="DIA0">Alle Messwerte (DIA0)</option>
+        <option value="DIA1">Stündliche Werte (DIA1)</option>
+        <option value="DIA2">Tägliche Werte (DIA2)</option>
+      </select>
+
+      {/* Dropdown für Slot-Typ */}
+      <select
+        value={selectedSlotType}
+        onChange={(e) =>
+          setSelectedSlotType(
+            e.target.value as "isolationswiderstand" | "schleifenwiderstand"
+          )
+        }
+        className="px-3 py-1 bg-white border rounded text-sm"
+      >
+        <option value="schleifenwiderstand">Schleifenwiderstand</option>
+        <option value="isolationswiderstand">Isolationswiderstand</option>
+      </select>
+
+      {/* Daten abrufen */}
       <button
         onClick={handleFetchData}
         className="px-3 py-1 bg-green-500 text-white rounded text-sm"
       >
-        Aktualisieren
+        Daten Laden
       </button>
-      {showChart && null}
     </div>
   );
 };