145 lines
4.5 KiB
TypeScript
145 lines
4.5 KiB
TypeScript
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
|
|
import React, { useEffect } from "react";
|
|
import DateRangePicker from "../DateRangePicker";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { RootState } from "../../../../../../redux/store";
|
|
import {
|
|
setVonDatum,
|
|
setBisDatum,
|
|
setChartData,
|
|
setSelectedMode,
|
|
setSelectedSlotType,
|
|
setChartOpen,
|
|
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
|
|
|
|
const LoopChartActionBar: React.FC = () => {
|
|
const dispatch = useDispatch();
|
|
|
|
// Redux-Status abrufen
|
|
const {
|
|
vonDatum,
|
|
bisDatum,
|
|
selectedMode,
|
|
selectedSlotType,
|
|
isChartOpen,
|
|
slotNumber,
|
|
} = useSelector((state: RootState) => state.kabelueberwachungChart);
|
|
|
|
/**
|
|
* API-URL-Erstellung für Entwicklung und Produktion
|
|
*/
|
|
const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", type: number) => {
|
|
if (!slotNumber) {
|
|
console.error("⚠️ Slot-Nummer nicht gesetzt!");
|
|
return "";
|
|
}
|
|
|
|
// Dynamische Basis-URL abhängig von Umgebung
|
|
const baseUrl =
|
|
process.env.NODE_ENV === "development"
|
|
? `/CPLmockData/kuesChartData/${mode}_${type}.json`
|
|
: `${window.location.origin}/CPL?seite.ACP&${mode}=${formatDate(
|
|
vonDatum
|
|
)};${formatDate(bisDatum)};${slotNumber};${type};`;
|
|
|
|
return baseUrl;
|
|
};
|
|
|
|
// Funktion zur Umformatierung des Datums von "YYYY-MM-DD" zu "YYYY;MM;DD"
|
|
const formatDate = (dateString: string) => {
|
|
const dateParts = dateString.split("-");
|
|
return `${dateParts[0]};${dateParts[1]};${dateParts[2]}`;
|
|
};
|
|
|
|
/**
|
|
* Funktion zum Laden der Messwerte
|
|
*/
|
|
/**
|
|
* Funktion zum Laden der Messwerte
|
|
*/
|
|
const handleFetchData = async () => {
|
|
const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3;
|
|
const apiUrl = getApiUrl(selectedMode, type);
|
|
|
|
try {
|
|
console.log("📡 API-Request an:", apiUrl); // Debugging
|
|
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();
|
|
console.log("✅ Daten erfolgreich geladen:", jsonData);
|
|
|
|
if (Array.isArray(jsonData)) {
|
|
dispatch(setChartData(jsonData));
|
|
|
|
// Falls das Chart zum ersten Mal geöffnet wird, setze vonDatum & bisDatum
|
|
if (!isChartOpen && jsonData.length > 0) {
|
|
const firstDate = new Date(jsonData[jsonData.length - 1].t);
|
|
const lastDate = new Date(jsonData[0].t);
|
|
dispatch(setVonDatum(firstDate.toISOString().split("T")[0]));
|
|
dispatch(setBisDatum(lastDate.toISOString().split("T")[0]));
|
|
dispatch(setChartOpen(true)); // Chart öffnen
|
|
}
|
|
} else {
|
|
console.error("⚠️ Erwartetes Array, aber erhalten:", jsonData);
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Fehler beim Laden der Produktions-Daten:", error);
|
|
}
|
|
};
|
|
|
|
// **Automatische Datenaktualisierung bei Auswahländerung**
|
|
useEffect(() => {
|
|
handleFetchData();
|
|
}, [selectedMode, selectedSlotType]); // Wird ausgeführt, wenn sich ein Dropdown ändert
|
|
|
|
return (
|
|
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
|
{/* Datumsauswahl */}
|
|
<DateRangePicker
|
|
setVonDatum={(date) =>
|
|
dispatch(setVonDatum(date.toISOString().split("T")[0]))
|
|
}
|
|
setBisDatum={(date) =>
|
|
dispatch(setBisDatum(date.toISOString().split("T")[0]))
|
|
}
|
|
/>
|
|
|
|
{/* Dropdown für DIA-Modus */}
|
|
<select
|
|
value={selectedMode}
|
|
onChange={(e) =>
|
|
dispatch(setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2"))
|
|
}
|
|
className="px-3 py-1 bg-white border rounded text-sm"
|
|
>
|
|
<option value="DIA0">Alle Messwerte (DIA0)</option>
|
|
<option value="DIA1">Stündliche Werte (DIA1)</option>
|
|
<option value="DIA2">Tägliche Werte (DIA2)</option>
|
|
</select>
|
|
|
|
{/* Dropdown für Slot-Typ */}
|
|
<select
|
|
value={selectedSlotType}
|
|
onChange={(e) =>
|
|
dispatch(
|
|
setSelectedSlotType(
|
|
e.target.value as "isolationswiderstand" | "schleifenwiderstand"
|
|
)
|
|
)
|
|
}
|
|
className="px-3 py-1 bg-white border rounded text-sm"
|
|
>
|
|
<option value="schleifenwiderstand">Schleifenwiderstand</option>
|
|
<option value="isolationswiderstand">Isolationswiderstand</option>
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoopChartActionBar;
|