feat: Dynamische API-URL für Production & Development + JSON-Server Hinweis

- 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`
This commit is contained in:
ISA
2025-02-11 13:10:04 +01:00
parent bbc26e5c3b
commit 47a663f4d2
4 changed files with 44 additions and 11 deletions

View File

@@ -1,4 +1,4 @@
NEXT_PUBLIC_NODE_ENV=development NEXT_PUBLIC_NODE_ENV=development
NEXT_PUBLIC_ENCRYPTION_KEY=1 NEXT_PUBLIC_ENCRYPTION_KEY=1
NEXT_PUBLIC_ENCRYPTION_IV=1 NEXT_PUBLIC_ENCRYPTION_IV=1
NEXT_PUBLIC_CPL_API_URL=http://localhost:3000/api/mockCPL

View File

@@ -1,3 +1,4 @@
NEXT_PUBLIC_NODE_ENV=production NEXT_PUBLIC_NODE_ENV=production
NEXT_PUBLIC_ENCRYPTION_KEY=1 NEXT_PUBLIC_ENCRYPTION_KEY=1
NEXT_PUBLIC_ENCRYPTION_IV=1 NEXT_PUBLIC_ENCRYPTION_IV=1
NEXT_PUBLIC_CPL_API_PATH=/CPL

View File

@@ -2,19 +2,51 @@ import React, { useState } from "react";
import DateRangePicker from "./DateRangePicker"; import DateRangePicker from "./DateRangePicker";
const LoopTDRChartActionBar: React.FC = () => { const LoopTDRChartActionBar: React.FC = () => {
const [vonDatum, setVonDatum] = useState(new Date()); // Dynamische Basis-URL
const [bisDatum, setBisDatum] = useState(new Date()); 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 = () => { const handleAktualisieren = () => {
const von = vonDatum.toISOString().split("T")[0]; // Format: YYYY-MM-DD 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 bis = bisDatum.toISOString().split("T")[0];
console.log(`Daten abrufen für Zeitraum: ${von} bis ${bis}`); const [vonJahr, vonMonat, vonTag] = von.split("-");
// API-Call hier mit den neuen Daten (z.B. location.href="...&DIA1=von;bis") const [bisJahr, bisMonat, bisTag] = bis.split("-");
const host = window.location.host;
//const testUrl = `https://${host}?DIA1=${von};${bis}`; // **Dynamische API-URL für Production und Development**
const testUrl = const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${vonJahr};${vonMonat};${vonTag};${bisJahr};${bisMonat};${bisTag};2;4`;
"https://10.10.0.118/CPL?kabelueberwachung&DIA1=2025;01;01;2025;07;31;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 ( return (

View File

@@ -5,5 +5,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/ */
const webVersion = "1.0.6.5"; const webVersion = "1.0.6.6";
export default webVersion; export default webVersion;