diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index ada4bacc0..18a74c18f 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -28,7 +28,6 @@ import { setupPolylines } from "../../utils/polylines/setupPolylines.js"; import { setupPOIs } from "../../utils/setupPOIs.js"; import VersionInfoModal from "../VersionInfoModal.js"; import useDrawLines from "../../hooks/layers/useDrawLines.js"; -import useFetchPoiData from "../../hooks/useFetchPoiData.js"; import usePoiTypData from "../../hooks/usePoiTypData.js"; import useLayerVisibility from "../../hooks/useLayerVisibility.js"; import useLineData from "../../hooks/useLineData.js"; @@ -83,6 +82,9 @@ import { updateCountdown, closePolylineContextMenu, forceCloseContextMenu } from //-------------------MapComponent.js hooks-------------------- import useInitializeMap from "./hooks/useInitializeMap"; import useLoadUserRights from "./hooks/useLoadUserRights"; +import useFetchWebServiceMap from "./hooks/useFetchWebServiceMap"; +import useFetchPoiData from "./hooks/useFetchPoiData.js"; +import useRestoreMapSettings from "./hooks/useRestoreMapSettings"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); @@ -176,7 +178,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [linesData, setLinesData] = useState([]); const mapLayersVisibility = useRecoilValue(mapLayersState); const selectedArea = useRecoilValue(selectedAreaState); - const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons"); + const [linePositions, setLinePositions] = useState([]); const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData); const [polylines, setPolylines] = useState([]); @@ -255,50 +257,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setUserId(params.get("u")); }, [setMapId, setUserId]); //--------------------------------------------------------------- - useEffect(() => { - const fetchWebServiceMap = async () => { - try { - // Zähler für externe API-Aufrufe in localStorage speichern - let requestCount = localStorage.getItem("fetchWebServiceMap") || 0; - requestCount = parseInt(requestCount, 10); - - const fetchOptions = { - method: "GET", - headers: { - Connection: "close", // Keep-Alive-Header hinzufügen - }, - }; - - // Fetch GIS Stations Static District - /* await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, dispatch, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); */ - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - - // Fetch GIS Stations Status District - await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - - // Fetch GIS Stations Measurements - await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - - // Fetch GIS System Static - await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - - fetchWebServiceMap(); - }, [dispatch, mapGisStationsStaticDistrictUrl]); + useFetchWebServiceMap(mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl, setGisStationsStatusDistrict, setGisStationsMeasurements, setGisSystemStatic, setGisSystemStaticLoaded); + //Test in useEffect + /* useEffect(() => { + console.log("📌 Alle Marker in MapComponent in useFetchWebServiceMap:", allMarkers); + }, [allMarkers]); */ //-------------------------------------------------------- useEffect(() => { const endpoint = "/api/talas_v5_DB/gisLines/readGisLines"; @@ -330,38 +293,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, []); //-------------------------------------------- + const [poiData, setPoiData] = useState([]); // POIs Popup Informationen anzeigen - useEffect(() => { - const fetchPoiTypData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"); - const data = await response.json(); - if (!Array.isArray(data)) { - console.warn(`Unerwartetes Format: ${JSON.stringify(data)}`); - throw new Error("Daten sind kein Array"); - } - const map = new Map(); - data.forEach((item) => map.set(item.idPoiTyp, item.name)); - setPoiTypMap(map); - } catch (error) { - console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error); - } - }; - const fetchPoiData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/pois/poi-icons"); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const data = await response.json(); - } catch (error) { - console.error("Fehler beim Abrufen der poiData-2:", error); - } - }; + useFetchPoiData(setPoiTypMap, setPoiData); + //Test in useEffect + /* useEffect(() => { + console.log("📌 POI-Typ Map in MapComponent:", poiTypMap); + console.log("📌 POI-Daten in MapComponent:", poiData); + }, [poiTypMap, poiData]); */ - fetchPoiTypData(); - fetchPoiData(); - }, []); //-------------------------------------------- // POIs auf die Karte zeichnen useEffect(() => { @@ -562,8 +502,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //-------------------------------------------- //-------------------------------------------- + useRestoreMapSettings(map); + //Test in useEffect useEffect(() => { if (map) { + console.log("🗺️ Map-Einstellungen werden wiederhergestellt..."); restoreMapSettings(map); } }, [map]); diff --git a/components/mainComponent/hooks/useFetchPoiData.js b/components/mainComponent/hooks/useFetchPoiData.js new file mode 100644 index 000000000..4c757dee6 --- /dev/null +++ b/components/mainComponent/hooks/useFetchPoiData.js @@ -0,0 +1,51 @@ +// /components/mainComponent/hooks/useFetchWebServiceMap.js +import { useEffect, useState } from "react"; + +const API_BASE_URL = process.env.NEXT_PUBLIC_API_PORT_3000; // API-URL aus .env.local + +const useFetchPoiData = (setPoiTypMap, setPoiData) => { + useEffect(() => { + //console.log(`🌍 API_BASE_URL aus .env.local: ${API_BASE_URL}`); + + //console.log("✅ useFetchPoiData wurde gestartet..."); + // console.log(`🌍 API_BASE_URL: ${API_BASE_URL}`); // Debugging: Prüfen, ob die Umgebungsvariable korrekt geladen wird + + const fetchPoiTypData = async () => { + try { + console.log("📡 Lade POI-Typ-Daten..."); + const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`); + const data = await response.json(); + if (!Array.isArray(data)) { + console.warn(`⚠️ Unerwartetes Format: ${JSON.stringify(data)}`); + throw new Error("Daten sind kein Array"); + } + const map = new Map(); + data.forEach((item) => map.set(item.idPoiTyp, item.name)); + setPoiTypMap(map); + //console.log("✅ POI-Typ-Daten erfolgreich geladen!"); + } catch (error) { + console.error("❌ Fehler beim Abrufen der POI-Typ-Daten:", error); + } + }; + + const fetchPoiData = async () => { + try { + //console.log("📡 Lade POI-Icons..."); + const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/pois/poi-icons`); + if (!response.ok) { + throw new Error(`Netzwerkantwort war nicht ok, Status: ${response.status}`); + } + const data = await response.json(); + setPoiData(data); + //console.log("✅ POI-Icons erfolgreich geladen!", data); + } catch (error) { + console.error("❌ Fehler beim Abrufen der POI-Daten:", error); + } + }; + + fetchPoiTypData(); + fetchPoiData(); + }, [setPoiTypMap, setPoiData]); +}; + +export default useFetchPoiData; diff --git a/components/mainComponent/hooks/useFetchWebServiceMap.js b/components/mainComponent/hooks/useFetchWebServiceMap.js new file mode 100644 index 000000000..80c06089d --- /dev/null +++ b/components/mainComponent/hooks/useFetchWebServiceMap.js @@ -0,0 +1,52 @@ +// /components/mainComponent/hooks/useFetchWebServiceMap.js +import { useEffect } from "react"; +import { fetchGisStationsStatusDistrict } from "../../../services/api/fetchGisStationsStatusDistrict"; +import { fetchGisStationsMeasurements } from "../../../services/api/fetchGisStationsMeasurements"; +import { fetchGisSystemStatic } from "../../../services/api/fetchGisSystemStatic"; + +const useFetchWebServiceMap = (mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl, setGisStationsStatusDistrict, setGisStationsMeasurements, setGisSystemStatic, setGisSystemStaticLoaded) => { + useEffect(() => { + //console.log("✅ useFetchWebServiceMap wurde ausgeführt!"); + + const fetchWebServiceMap = async () => { + try { + let requestCount = localStorage.getItem("fetchWebServiceMap") || 0; + requestCount = parseInt(requestCount, 10); + + console.log("📡 Starte API-Anfragen..."); + + const fetchOptions = { + method: "GET", + headers: { Connection: "close" }, + }; + + // GIS Stations Status District abrufen + //console.log("⏳ Abrufen von GIS Stations Status District..."); + await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions); + // console.log("✅ fetchGisStationsStatusDistrict erfolgreich!"); + requestCount++; + localStorage.setItem("fetchWebServiceMap", requestCount); + + // GIS Stations Measurements abrufen + //console.log("⏳ Abrufen von GIS Stations Measurements..."); + await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); + // console.log("✅ fetchGisStationsMeasurements erfolgreich!"); + requestCount++; + localStorage.setItem("fetchWebServiceMap", requestCount); + + // GIS System Static abrufen + //console.log("⏳ Abrufen von GIS System Static..."); + await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions); + //console.log("✅ fetchGisSystemStatic erfolgreich!"); + requestCount++; + localStorage.setItem("fetchWebServiceMap", requestCount); + } catch (error) { + console.error("❌ Fehler beim Abrufen der WebService-Daten:", error); + } + }; + + fetchWebServiceMap(); + }, [mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl]); +}; + +export default useFetchWebServiceMap; diff --git a/components/mainComponent/hooks/useRestoreMapSettings.js b/components/mainComponent/hooks/useRestoreMapSettings.js new file mode 100644 index 000000000..387958d43 --- /dev/null +++ b/components/mainComponent/hooks/useRestoreMapSettings.js @@ -0,0 +1,12 @@ +import { useEffect } from "react"; +import { restoreMapSettings } from "../../../utils/mapUtils.js"; // Stelle sicher, dass der Pfad korrekt ist + +const useRestoreMapSettings = (map) => { + useEffect(() => { + if (map) { + restoreMapSettings(map); + } + }, [map]); +}; + +export default useRestoreMapSettings; diff --git a/components/useMapContextMenu.js b/components/useMapContextMenu.js index 8f60c18fd..31ad629ef 100644 --- a/components/useMapContextMenu.js +++ b/components/useMapContextMenu.js @@ -72,7 +72,7 @@ const addItemsToMapContextMenu = ( const editMode = localStorage.getItem("editMode") === "true"; if (editMode) { console.log("editMode localStorage:", localStorage.getItem("editMode")); - console.log("editMode:", editMode); + //console.log("editMode:", editMode); map.contextmenu.addItem({ text: "POI hinzufügen", diff --git a/config/appVersion.js b/config/appVersion.js index 874bfaaf7..a03bfcf9c 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.49"; +export const APP_VERSION = "1.1.53"; diff --git a/hooks/useFetchPoiData.js b/hooks/useFetchPoiData.js deleted file mode 100644 index 8683c4d7c..000000000 --- a/hooks/useFetchPoiData.js +++ /dev/null @@ -1,25 +0,0 @@ -// hooks/useFetchPoiData.js -import { useState, useEffect } from "react"; - -const useFetchPoiData = (url) => { - const [poiData, setPoiData] = useState([]); - - useEffect(() => { - const fetchPoiData = async () => { - try { - const response = await fetch(url); - if (!response.ok) throw new Error("Network response was not ok"); - const data = await response.json(); - setPoiData(data); - } catch (error) { - console.error("Fehler beim Abrufen der poiData:", error); - } - }; - - fetchPoiData(); - }, [url]); - - return poiData; -}; - -export default useFetchPoiData; diff --git a/utils/initializeMap.js b/utils/initializeMap.js index 90b0e6879..27703a01d 100644 --- a/utils/initializeMap.js +++ b/utils/initializeMap.js @@ -38,6 +38,7 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems text: "Station öffnen (Tab)", icon: "/img/screen_new.png", callback: (e) => { + const editMode = localStorage.getItem("editMode") === "true"; const clickedElement = e.relatedTarget; if (!clickedElement) { @@ -45,12 +46,18 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems return; } + // Prüfen, ob es ein POI ist (POIs haben idPoi in den Optionen) + if (clickedElement instanceof L.Marker && clickedElement.options?.idPoi) { + console.log("POI erkannt - Station öffnen deaktiviert."); + return; // Keine Aktion ausführen + } + try { if (clickedElement instanceof L.Marker || clickedElement?.options?.link) { const link = "http://" + window.location.hostname + "/talas5/devices/" + clickedElement.options.link; if (link) { console.log("Opening link in a new tab:", link); - window.open(link, "_blank"); + //window.open(link, "_blank"); POI-Link öffnen in neuem Tab } else { console.error("No link found in the Marker options."); }