feat: Meldungen in in Iso Chart
This commit is contained in:
ISA
@@ -88,6 +88,87 @@ export const useIsoChartLoader = () => {
|
||||
return { loadIsoChartData };
|
||||
};
|
||||
|
||||
//-----------------------------------------------------------------------------------useIsoDataLoader Hook
|
||||
export const useIsoDataLoader = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { vonDatum, bisDatum, selectedMode, slotNumber } = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChartSlice
|
||||
);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const [year, month, day] = dateString.split("-");
|
||||
return `${year};${month};${day}`;
|
||||
};
|
||||
|
||||
const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", slotNumber: number) => {
|
||||
const type = 3; // Fest auf Isolationswiderstand gesetzt
|
||||
const typeFolder = "isolationswiderstand";
|
||||
|
||||
const baseUrl =
|
||||
process.env.NODE_ENV === "development"
|
||||
? `/api/cpl/slotDataAPIHandler?slot=${slotNumber}&messart=${typeFolder}&dia=${mode}&vonDatum=${vonDatum}&bisDatum=${bisDatum}`
|
||||
: `${window.location.origin}/CPL?seite.ACP&${mode}=${formatDate(
|
||||
vonDatum
|
||||
)};${formatDate(bisDatum)};${slotNumber};${type};`;
|
||||
|
||||
return baseUrl;
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
if (slotNumber === null) {
|
||||
console.log("⚠️ Kein Slot ausgewählt - automatisches Laden übersprungen");
|
||||
return;
|
||||
}
|
||||
|
||||
const apiUrl = getApiUrl(selectedMode, slotNumber);
|
||||
if (!apiUrl) return;
|
||||
|
||||
dispatch(setLoading(true));
|
||||
dispatch(setChartOpen(false));
|
||||
dispatch(setIsoMeasurementCurveChartData([]));
|
||||
|
||||
const MIN_LOADING_TIME_MS = 1000;
|
||||
const startTime = Date.now();
|
||||
|
||||
try {
|
||||
const response = await fetch(apiUrl, {
|
||||
method: "GET",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error(`Fehler: ${response.status}`);
|
||||
|
||||
const jsonData = await response.json();
|
||||
const elapsedTime = Date.now() - startTime;
|
||||
const waitTime = Math.max(0, MIN_LOADING_TIME_MS - elapsedTime);
|
||||
await new Promise((resolve) => setTimeout(resolve, waitTime));
|
||||
|
||||
console.log("▶️ Automatisches Laden - Isolationswiderstand-Daten für:");
|
||||
console.log(" Slot:", slotNumber);
|
||||
console.log(" Modus:", selectedMode);
|
||||
console.log(" Von:", vonDatum);
|
||||
console.log(" Bis:", bisDatum);
|
||||
|
||||
if (Array.isArray(jsonData) && jsonData.length > 0) {
|
||||
dispatch(setIsoMeasurementCurveChartData(jsonData));
|
||||
dispatch(setChartOpen(true));
|
||||
} else {
|
||||
console.log(
|
||||
"⚠️ Keine Messdaten im gewählten Zeitraum gefunden (automatisches Laden)"
|
||||
);
|
||||
dispatch(setIsoMeasurementCurveChartData([]));
|
||||
dispatch(setChartOpen(false));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("❌ Fehler beim automatischen Laden der Daten:", err);
|
||||
} finally {
|
||||
dispatch(setLoading(false));
|
||||
}
|
||||
};
|
||||
|
||||
return { loadData };
|
||||
};
|
||||
|
||||
//-----------------------------------------------------------------------------------IsoChartActionBar
|
||||
const IsoChartActionBar: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
@@ -183,67 +264,71 @@ const IsoChartActionBar: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<DateRangePicker />
|
||||
{/* DateRangePicker - nur bei Messkurve anzeigen */}
|
||||
{chartTitle === "Messkurve" && <DateRangePicker />}
|
||||
|
||||
<Listbox
|
||||
value={selectedMode}
|
||||
onChange={(value) => {
|
||||
dispatch(setSelectedMode(value));
|
||||
dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
|
||||
}}
|
||||
>
|
||||
<div className="relative w-48">
|
||||
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
||||
<span>
|
||||
{
|
||||
{
|
||||
DIA0: "Alle Messwerte",
|
||||
DIA1: "Stündliche Werte",
|
||||
DIA2: "Tägliche Werte",
|
||||
}[selectedMode]
|
||||
}
|
||||
</span>
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-400"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Listbox.Button>
|
||||
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
|
||||
{["DIA0", "DIA1", "DIA2"].map((mode) => (
|
||||
<Listbox.Option
|
||||
key={mode}
|
||||
value={mode}
|
||||
className={({ selected, active }) =>
|
||||
`px-4 py-1 cursor-pointer ${
|
||||
selected
|
||||
? "bg-littwin-blue text-white"
|
||||
: active
|
||||
? "bg-gray-200"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
{/* DIA0-DIA2 Dropdown - nur bei Messkurve anzeigen */}
|
||||
{chartTitle === "Messkurve" && (
|
||||
<Listbox
|
||||
value={selectedMode}
|
||||
onChange={(value) => {
|
||||
dispatch(setSelectedMode(value));
|
||||
dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
|
||||
}}
|
||||
>
|
||||
<div className="relative w-48">
|
||||
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
||||
<span>
|
||||
{
|
||||
{
|
||||
DIA0: "Alle Messwerte",
|
||||
DIA1: "Stündliche Werte",
|
||||
DIA2: "Tägliche Werte",
|
||||
}[mode]
|
||||
}[selectedMode]
|
||||
}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
</span>
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-400"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Listbox.Button>
|
||||
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
|
||||
{["DIA0", "DIA1", "DIA2"].map((mode) => (
|
||||
<Listbox.Option
|
||||
key={mode}
|
||||
value={mode}
|
||||
className={({ selected, active }) =>
|
||||
`px-4 py-1 cursor-pointer ${
|
||||
selected
|
||||
? "bg-littwin-blue text-white"
|
||||
: active
|
||||
? "bg-gray-200"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
{
|
||||
{
|
||||
DIA0: "Alle Messwerte",
|
||||
DIA1: "Stündliche Werte",
|
||||
DIA2: "Tägliche Werte",
|
||||
}[mode]
|
||||
}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
)}
|
||||
|
||||
{/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" */}
|
||||
{/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" - immer anzeigen */}
|
||||
<Listbox
|
||||
value={chartTitle}
|
||||
onChange={(value) => dispatch(setChartTitle(value))}
|
||||
@@ -285,14 +370,18 @@ const IsoChartActionBar: React.FC = () => {
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
|
||||
>
|
||||
Daten laden
|
||||
</button>
|
||||
{/* Daten laden Button - nur bei Messkurve anzeigen */}
|
||||
{chartTitle === "Messkurve" && (
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
|
||||
>
|
||||
Daten laden
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
{/* Loading Indicator - nur bei Messkurve anzeigen */}
|
||||
{chartTitle === "Messkurve" && isLoading && (
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-500">
|
||||
<div className="w-4 h-4 border-2 border-t-2 border-blue-500 rounded-full animate-spin" />
|
||||
<span>Lade Daten...</span>
|
||||
|
||||
Reference in New Issue
Block a user