64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
|
||
import React, { useState } from "react";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import { RootState } from "../../../../../../redux/store";
|
||
import { fetchTDRChartDataById } from "../../../../../../services/fetchTDRChartDataById";
|
||
import {
|
||
setTDRChartDataById,
|
||
setSelectedTDRId,
|
||
} from "../../../../../../redux/slices/tdrDataByIdSlice";
|
||
|
||
const TDRChartActionBar: React.FC = () => {
|
||
const dispatch = useDispatch();
|
||
|
||
const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
|
||
const selectedSlot = useSelector(
|
||
(state: RootState) => state.kueChartMode.selectedSlot
|
||
);
|
||
|
||
const idsForSlot =
|
||
selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];
|
||
|
||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
||
|
||
const handleSelectChange = async (
|
||
e: React.ChangeEvent<HTMLSelectElement>
|
||
) => {
|
||
const id = parseInt(e.target.value);
|
||
setSelectedId(id);
|
||
|
||
const data = await fetchTDRChartDataById(id);
|
||
if (!data) return;
|
||
|
||
dispatch(setTDRChartDataById({ id, data }));
|
||
dispatch(setSelectedTDRId(id)); // 👉 wichtig!
|
||
};
|
||
|
||
return (
|
||
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||
{idsForSlot.length > 0 && (
|
||
<>
|
||
<label htmlFor="tdrIdSelect" className="text-sm font-semibold">
|
||
Messung ID
|
||
</label>
|
||
<select
|
||
id="tdrIdSelect"
|
||
value={selectedId ?? ""}
|
||
onChange={handleSelectChange}
|
||
className="border rounded px-2 py-1 text-sm"
|
||
>
|
||
<option value="">-- Wähle Messung --</option>
|
||
{idsForSlot.map((entry) => (
|
||
<option key={entry.id} value={entry.id}>
|
||
ID {entry.id} – {entry.t}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TDRChartActionBar;
|