ac9b94eb5f
- Fetch-API in `LoopChartActionBar.tsx` angepasst, um Mock-Daten aus `/public/CPLmockData/kuesChartData/` zu laden. - Mock-Daten als statische JSON-Dateien (`DIA0.json`, `DIA1.json`, `DIA2.json`) hinzugefügt. - `LoopMeasurementChart.tsx` angepasst, um die Daten aus dem Redux-Store zu verwenden. - Debugging-Logs entfernt und Fehlerbehandlung für fehlgeschlagene API-Requests verbessert. Mock-Daten können jetzt ohne API-Server geladen werden.
107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
|
|
import React, { useState } from "react";
|
|
import DateRangePicker from "../DateRangePicker";
|
|
import { useDispatch } from "react-redux";
|
|
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"
|
|
);
|
|
|
|
// Zustand für das Dropdown-Menü zur Auswahl des Slot-Typs (Isolations- oder Schleifenwiderstand)
|
|
const [selectedSlotType, setSelectedSlotType] = 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;
|
|
|
|
/**
|
|
* Dynamische API-URL-Erstellung für Entwicklung und Produktion
|
|
* @param mode - DIA0, DIA1 oder DIA2
|
|
* @param slotIndex - Slot für die Abfrage
|
|
*/
|
|
const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2") => {
|
|
return process.env.NODE_ENV === "development"
|
|
? `/CPLmockData/kuesChartData/${mode}.json`
|
|
: `/CPL?seite.ACP&${mode}=${vonDatum};${bisDatum};${slotIndex}`;
|
|
};
|
|
|
|
/**
|
|
* Funktion zum Laden der Messwerte
|
|
*/
|
|
const handleFetchData = async () => {
|
|
try {
|
|
const apiUrl = getApiUrl(selectedMode);
|
|
console.log("Mock JSON laden von:", apiUrl);
|
|
|
|
const response = await fetch(apiUrl);
|
|
if (!response.ok) throw new Error(`Fehler: ${response.status}`);
|
|
|
|
const jsonData = await response.json();
|
|
console.log("Geladene Daten:", jsonData);
|
|
|
|
if (Array.isArray(jsonData)) {
|
|
dispatch(setChartData(jsonData));
|
|
} else {
|
|
console.error("Erwartetes Array, aber erhalten:", jsonData);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Mock-Daten:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
|
{/* Datumsauswahl */}
|
|
<DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
|
|
|
|
{/* Dropdown für DIA-Modus */}
|
|
<select
|
|
value={selectedMode}
|
|
onChange={(e) =>
|
|
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) =>
|
|
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>
|
|
|
|
{/* Daten abrufen */}
|
|
<button
|
|
onClick={handleFetchData}
|
|
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
|
|
>
|
|
Daten Laden
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoopChartActionBar;
|