47a663f4d2
- API-URL passt sich automatisch an die Umgebung an: - In Development (`npm run dev`) wird `http://localhost:3001/kabelueberwachung` genutzt. - In Production (`npm run build && npm start`) wird `window.location.origin/CPL` verwendet. - Verbesserte Fehlerbehandlung für JSON-Antworten implementiert. - **Hinweis:** Für die lokale Entwicklung wird `json-server` benötigt. Installation: `npm install -g json-server` Starten: `json-server --watch mockData.json --port 3001`
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import DateRangePicker from "./DateRangePicker";
|
|
|
|
const LoopTDRChartActionBar: React.FC = () => {
|
|
// Dynamische Basis-URL
|
|
const BASE_URL =
|
|
process.env.NODE_ENV === "development"
|
|
? process.env.NEXT_PUBLIC_MOCK_API ||
|
|
"http://localhost:3001/kabelueberwachung"
|
|
: `${window.location.origin}/CPL`; // Automatische Anpassung in Production
|
|
|
|
const [vonDatum, setVonDatum] = useState<Date | null>(null);
|
|
const [bisDatum, setBisDatum] = useState<Date | null>(null);
|
|
|
|
const handleAktualisieren = () => {
|
|
if (!vonDatum || !bisDatum) {
|
|
console.error("❌ Bitte wählen Sie ein gültiges Datum aus.");
|
|
return;
|
|
}
|
|
|
|
// Datum formatieren
|
|
const von = vonDatum.toISOString().split("T")[0];
|
|
const bis = bisDatum.toISOString().split("T")[0];
|
|
|
|
const [vonJahr, vonMonat, vonTag] = von.split("-");
|
|
const [bisJahr, bisMonat, bisTag] = bis.split("-");
|
|
|
|
// **Dynamische API-URL für Production und Development**
|
|
const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${vonJahr};${vonMonat};${vonTag};${bisJahr};${bisMonat};${bisTag};2;4`;
|
|
|
|
console.log("📡 API URL:", apiUrl);
|
|
|
|
fetch(apiUrl)
|
|
.then((res) => {
|
|
if (!res.ok) {
|
|
throw new Error(`HTTP Fehler! Status: ${res.status}`);
|
|
}
|
|
return res.text();
|
|
})
|
|
.then((text) => {
|
|
console.log("⬇️ API Antwort (Rohdaten):", text);
|
|
try {
|
|
const data = JSON.parse(text);
|
|
console.log("✅ API Antwort (JSON):", data);
|
|
} catch (error) {
|
|
console.error("❌ Fehler: Antwort ist kein JSON!", text);
|
|
}
|
|
})
|
|
.catch((err) => console.error("❌ Fehler beim Abrufen der Daten:", err));
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
|
|
<DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
|
|
|
|
<button
|
|
onClick={handleAktualisieren}
|
|
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
|
|
>
|
|
Aktualisieren
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoopTDRChartActionBar;
|