806347f0dd
- `GisStationsStaticDistrict` wird jetzt korrekt aus Redux gelesen und verwendet `Points` als Array.
- Fehler `find is not a function` behoben durch Zugriff auf `GisStationsStaticDistrict.Points`.
- Sicherstellung, dass `Points` existiert, bevor darauf zugegriffen wird.
- Konsole-Logs für Debugging hinzugefügt, um leere oder ungültige Daten zu erkennen.
- Bereichsauswahl im Dropdown funktioniert jetzt korrekt und fliegt zur gewählten Station auf der Karte.
✅ Tested: Dropdown zeigt jetzt die `Area_Name`-Werte und `map.flyTo()` funktioniert korrekt.
101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
// hooks/useMapComponentState.js
|
|
// POI -> Kontextmenü -> POI bearbeiten -> Dropdown Geräteauswahl
|
|
import { useState, useEffect } from "react";
|
|
import { useRecoilValue } from "recoil";
|
|
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
|
|
import { isMockMode } from "../config/config";
|
|
|
|
export const useMapComponentState = () => {
|
|
const [poiTypData, setPoiTypData] = useState([]);
|
|
const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
|
|
const [deviceName, setDeviceName] = useState("");
|
|
const [locationDeviceData, setLocationDeviceData] = useState([]);
|
|
const [priorityConfig, setPriorityConfig] = useState([]);
|
|
const [menuItemAdded, setMenuItemAdded] = useState(false);
|
|
const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
|
|
|
|
useEffect(() => {
|
|
const fetchPoiTypData = async () => {
|
|
if (isMockMode()) {
|
|
console.log("⚠️ Mock-API: POI Typen geladen (Mock)");
|
|
|
|
const mockData = [
|
|
{ idPoiTyp: 1, name: "Mock Zähleranschlusskasten", icon: 4, onlySystemTyp: 0 },
|
|
{ idPoiTyp: 2, name: "Mock Geräteschrank", icon: 2, onlySystemTyp: 0 },
|
|
{ idPoiTyp: 4, name: "Mock Parkplatz", icon: 3, onlySystemTyp: 0 },
|
|
{ idPoiTyp: 6, name: "Mock Zufahrt", icon: 4, onlySystemTyp: 0 },
|
|
{ idPoiTyp: 20, name: "Mock Zählgerät", icon: 5, onlySystemTyp: 110 },
|
|
{ idPoiTyp: 21, name: "Mock Messschleife", icon: 6, onlySystemTyp: 110 },
|
|
{ idPoiTyp: 25, name: "Mock Sonstige", icon: 0, onlySystemTyp: 0 },
|
|
{ idPoiTyp: 33, name: "Mock Autobahnauffahrt", icon: 4, onlySystemTyp: null },
|
|
];
|
|
|
|
setPoiTypData(mockData);
|
|
setIsPoiTypLoaded(true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
|
|
const data = await response.json();
|
|
setPoiTypData(data);
|
|
setIsPoiTypLoaded(true);
|
|
} catch (error) {
|
|
console.error("❌ Fehler beim Abrufen der POI-Typen:", error);
|
|
setPoiTypData([]);
|
|
setIsPoiTypLoaded(true);
|
|
}
|
|
};
|
|
|
|
const fetchDeviceData = async () => {
|
|
try {
|
|
const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
|
|
|
|
// URL-Parameter aus der aktuellen Browser-URL holen
|
|
const params = new URLSearchParams(window.location.search);
|
|
const idMap = params.get("idMap") || "12"; // Fallback auf "12" falls nicht gesetzt
|
|
|
|
const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`;
|
|
|
|
//console.log("📡 API Request URL:", url);
|
|
|
|
const response = await fetch(url);
|
|
|
|
//console.log("📡 API Response Status:", response.status);
|
|
// console.log("📡 API Response Headers:", response.headers.get("content-type"));
|
|
|
|
const text = await response.text();
|
|
//console.log("📡 API Response Text:", text);
|
|
|
|
// JSON manuell parsen, falls die API keinen JSON-Header sendet
|
|
const data = JSON.parse(text);
|
|
|
|
setLocationDeviceData(data.Points || []);
|
|
|
|
if (data.Points && data.Points.length > 0) {
|
|
setDeviceName(data.Points[0].LD_Name);
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Fehler beim Abrufen der Gerätedaten:", error);
|
|
}
|
|
};
|
|
|
|
fetchPoiTypData();
|
|
fetchDeviceData();
|
|
}, []);
|
|
|
|
return {
|
|
poiTypData,
|
|
isPoiTypLoaded,
|
|
deviceName,
|
|
setDeviceName,
|
|
locationDeviceData,
|
|
setLocationDeviceData,
|
|
priorityConfig,
|
|
setPriorityConfig,
|
|
menuItemAdded,
|
|
setMenuItemAdded,
|
|
poiLayerVisible,
|
|
};
|
|
};
|