826977c9c7
- Aktuelle Messkurve wird bei Klick auf „Als Referenzkurve setzen“ in localStorage gespeichert - fetchTDRReferenceCurve lädt zuerst aus localStorage, dann aus Datei/Produktion - Ermöglicht Setzen und Testen von Referenzkurven in der Entwicklungsumgebung ohne Backend
108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { useSelector } from "react-redux";
|
||
import { useAppDispatch } from "../../../../../../redux/store";
|
||
import { RootState } from "../../../../../../redux/store";
|
||
import { fetchTDMDataBySlotThunk } from "../../../../../../redux/thunks/fetchTDMListBySlotThunk";
|
||
import { fetchTDRChartDataByIdThunk } from "../../../../../../redux/thunks/fetchTDRChartDataByIdThunk";
|
||
|
||
const TDRChartActionBar: React.FC = () => {
|
||
const dispatch = useAppDispatch();
|
||
|
||
// ✅ Redux: selectedSlot aus kueChartMode (0-basiert)
|
||
const selectedSlot = useSelector(
|
||
(state: RootState) => state.kueChartMode.selectedSlot
|
||
);
|
||
|
||
const tdmChartData = useSelector(
|
||
(state: RootState) => state.tdmSingleChart.data
|
||
);
|
||
|
||
const idsForSlot =
|
||
selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];
|
||
|
||
const tdrDataById = useSelector(
|
||
(state: RootState) => state.tdrDataById.dataById
|
||
);
|
||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
||
const currentChartData = selectedId !== null ? tdrDataById[selectedId] : [];
|
||
|
||
// 🔄 Dropdown-Auswahl: neue Messung laden
|
||
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||
const id = parseInt(e.target.value);
|
||
setSelectedId(id);
|
||
dispatch(fetchTDRChartDataByIdThunk(id));
|
||
};
|
||
|
||
// 📌 Referenz setzen (nutzt Slotnummer + 1 für die API)
|
||
const handleSetReference = () => {
|
||
if (selectedSlot === null || !currentChartData?.length) return;
|
||
|
||
localStorage.setItem(
|
||
`ref-curve-slot${selectedSlot}`,
|
||
JSON.stringify(currentChartData)
|
||
);
|
||
|
||
alert("✅ Referenzkurve lokal gespeichert (nur im Browser)");
|
||
};
|
||
|
||
// 📥 Beim Slot-Wechsel TDM-Liste + letzte ID laden
|
||
useEffect(() => {
|
||
if (selectedSlot !== null) {
|
||
dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action: any) => {
|
||
const slotData = action.payload?.data;
|
||
if (slotData?.length > 0) {
|
||
const lastId = slotData[0].id;
|
||
setSelectedId(lastId);
|
||
dispatch(fetchTDRChartDataByIdThunk(lastId));
|
||
}
|
||
});
|
||
}
|
||
}, [selectedSlot, dispatch]);
|
||
|
||
return (
|
||
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
|
||
{/* 🧩 Slot-Anzeige (1-basiert für Benutzer) */}
|
||
<div className="text-sm font-semibold">
|
||
{selectedSlot !== null
|
||
? `Slot ${selectedSlot + 1}`
|
||
: "Kein Slot gewählt"}
|
||
</div>
|
||
|
||
{/* ✅ Referenz setzen */}
|
||
{selectedId !== null && (
|
||
<button
|
||
onClick={handleSetReference}
|
||
className="border border-blue-500 text-blue-600 bg-white rounded px-3 py-1 text-sm hover:bg-blue-100"
|
||
>
|
||
Als Referenzkurve setzen
|
||
</button>
|
||
)}
|
||
|
||
{/* 🔽 Dropdown für Messungen */}
|
||
<div className="flex items-center space-x-2">
|
||
<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"
|
||
disabled={idsForSlot.length === 0}
|
||
>
|
||
<option value="">-- Wähle Messung --</option>
|
||
{idsForSlot.map((entry) => (
|
||
<option key={entry.id} value={entry.id}>
|
||
ID {entry.id} – {entry.t}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TDRChartActionBar;
|