feat: in System 5 Volt DIA0, DIA1 und DIA2 in dropdown anzeigen

components/main/system/DetailModal.tsx

@@ -9,28 +9,33 @@ type Props = {
   isOpen: boolean;
   selectedKey: string | null;
   onClose: () => void;
+  zeitraum: "DIA0" | "DIA1" | "DIA2";
+  setZeitraum: (typ: "DIA0" | "DIA1" | "DIA2") => void;
 };
 
-export const DetailModal = ({ isOpen, selectedKey, onClose }: Props) => {
-  // Mapping: Welcher Redux-Zweig zu welchem selectedKey gehört
+export const DetailModal = ({
+  isOpen,
+  selectedKey,
+  onClose,
+  zeitraum,
+  setZeitraum,
+}: Props) => {
   const typMap: Record<string, "DIA0" | "DIA1" | "DIA2"> = {
-    "+5V": "DIA1",
-    "+15V": "DIA1",
-    "-15V": "DIA1",
-    "-98V": "DIA1",
+    "+5V": zeitraum,
+    "+15V": zeitraum,
+    "-15V": zeitraum,
+    "-98V": zeitraum,
   };
 
   const typ = selectedKey ? typMap[selectedKey] : null;
+  type ReduxDataItem = { t: string; i: number };
 
-  // Redux State abrufen
   const reduxData = useSelector((state: RootState) =>
-    typ ? state.systemspannung5Vplus[typ] : []
+    typ ? (state.systemspannung5Vplus[typ] as ReduxDataItem[]) : []
   );
 
-  // Zeitstempel und Werte extrahieren
-  type DataPoint = { t: string; i: number };
-  const labels = reduxData.map((e: unknown) => (e as DataPoint).t);
-  const values = reduxData.map((e: unknown) => (e as DataPoint).i);
+  const labels = reduxData.map((e: ReduxDataItem) => e.t);
+  const values = reduxData.map((e: ReduxDataItem) => e.i);
 
   const baseOptions = {
     responsive: true,
@@ -68,9 +73,16 @@ export const DetailModal = ({ isOpen, selectedKey, onClose }: Props) => {
 
         <div className="mb-4">
           <label className="mr-2 font-medium">Zeitraum:</label>
-          <select className="border px-2 py-1 rounded">
-            <option>Letzte 24 Stunden</option>
-            {/* Optional: dynamische Filter */}
+          <select
+            className="border px-2 py-1 rounded"
+            value={zeitraum}
+            onChange={(e) =>
+              setZeitraum(e.target.value as "DIA0" | "DIA1" | "DIA2")
+            }
+          >
+            <option value="DIA0">Alle Messwerte</option>
+            <option value="DIA1">Stündlich</option>
+            <option value="DIA2">Täglich</option>
           </select>
         </div>