Redux Slice merkt vonDatum und bisDatum

This commit is contained in:
ISA
2025-02-21 09:34:03 +01:00
parent 46f1974222
commit 7ac29bd3ef
3 changed files with 34 additions and 15 deletions

View File

@@ -1,26 +1,35 @@
// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
import React, { useState } from "react";
import React from "react";
import DateRangePicker from "../DateRangePicker";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import {
setVonDatum,
setBisDatum,
} from "../../../../../../redux/slices/dateRangeKueChartSlice";
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"
// Datum aus Redux abrufen
const vonDatum = useSelector(
(state: RootState) => state.dateRangeKueChart.vonDatum
);
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] = useState<
const [selectedSlotType, setSelectedSlotType] = React.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;
@@ -28,7 +37,7 @@ const LoopChartActionBar: React.FC = () => {
/**
* Dynamische API-URL-Erstellung für Entwicklung und Produktion
* @param mode - DIA0, DIA1 oder DIA2
* @param slotIndex - Slot für die Abfrage
* @param type - Slot für die Abfrage (3 = Isolationswiderstand, 4 = Schleifenwiderstand)
*/
const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", type: number) => {
return process.env.NODE_ENV === "development"
@@ -65,7 +74,10 @@ const LoopChartActionBar: React.FC = () => {
return (
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
{/* Datumsauswahl */}
<DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
<DateRangePicker
setVonDatum={(date) => dispatch(setVonDatum(date))}
setBisDatum={(date) => dispatch(setBisDatum(date))}
/>
{/* Dropdown für DIA-Modus */}
<select