// components/mainComponent/MapComponent.js import React, { useEffect, useRef, useState, useCallback } from "react"; import L from "leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; import "leaflet-contextmenu"; import * as config from "../../config/config.js"; import "leaflet.smooth_marker_bouncing"; import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; //sieht deaktiviert aber ist das nicht so und wird benötigt import "react-toastify/dist/ReactToastify.css"; import MapLayersControlPanel from "../MapLayersControlPanel.js"; import { InformationCircleIcon } from "@heroicons/react/20/solid"; import PoiUpdateModal from "../pois/PoiUpdateModal.js"; import { ToastContainer, toast } from "react-toastify"; import plusRoundIcon from "../PlusRoundIcon.js"; import { createAndSetDevices } from "../../utils/devices/createAndSetDevices.js"; import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js"; import { APP_VERSION } from "../../config/appVersion.js"; import * as layers from "../../config/layers.js"; import addItemsToMapContextMenu from "../useMapContextMenu.js"; import useGmaMarkersLayer from "../../hooks/layers/useGmaMarkersLayer.js"; import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarkersLayer.js"; import useBereicheMarkersLayer from "../../hooks/layers/useBereicheMarkersLayer.js"; import { setupPolylines } from "../../utils/polylines/setupPolylines.js"; import { setupPOIs } from "../../utils/setupPOIs.js"; import VersionInfoModal from "../VersionInfoModal.js"; import useLayerVisibility from "../../hooks/useLayerVisibility.js"; import useLineData from "../../hooks/useLineData.js"; import { useMapComponentState } from "../../hooks/useMapComponentState.js"; import { updateLocation } from "../../utils/updateBereichUtil.js"; import { selectMapLayersState } from "../../redux/slices/mapLayersSlice"; import { useSelector, useDispatch } from "react-redux"; import { setCurrentPoi } from "../../redux/slices/currentPoiSlice.js"; import CoordinateInput from "../CoordinateInput.js"; import CoordinateModal from "../CoordinateModal.js"; import CoordinatePopup from "../CoordinatePopup.js"; //------------------------Daten aus API-------------------- import { fetchPoiDataService } from "../../services/database/fetchPoiDataService.js"; import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js"; import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js"; import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js"; import ShowAddStationPopup from "../AddPOIModal.js"; import AddPOIOnPolyline from "../AddPOIOnPolyline"; import { enablePolylineEvents, disablePolylineEvents } from "../../utils/polylines/eventHandlers"; import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/polylineContextMenuSlice"; //-------------------MapComponent.js hooks-------------------- import useInitializeMap from "./hooks/useInitializeMap"; import useFetchPoiData from "./hooks/useFetchPoiData.js"; import useRestoreMapSettings from "./hooks/useRestoreMapSettings"; import { setSelectedPoi } from "../../redux/slices/selectedPoiSlice"; import { setDisabled } from "../../redux/slices/polylineEventsDisabledSlice"; import { setMapId, setUserId } from "../../redux/slices/urlParameterSlice"; import { fetchPoiTypes } from "../../redux/slices/database/poiTypesSlice"; //-----------Redux-Thunks------------------- import { fetchGisStationsMeasurementsThunk } from "../../redux/thunks/webservice/fetchGisStationsMeasurementsThunk"; import { fetchGisSystemStaticThunk } from "../../redux/thunks/webservice/fetchGisSystemStaticThunk"; import { fetchGisStationsStaticDistrictThunk } from "../../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk"; import { fetchGisStationsStatusDistrictThunk } from "../../redux/thunks/webservice/fetchGisStationsStatusDistrictThunk"; import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk"; import { fetchPriorityConfigThunk } from "../../redux/thunks/database/fetchPriorityConfigThunk"; import { selectPriorityConfig } from "../../redux/slices/database/priorityConfigSlice"; import { fetchGisLinesThunk } from "../../redux/thunks/database/fetchGisLinesThunk"; import { fetchGisLinesStatusThunk } from "../../redux/thunks/webservice/fetchGisLinesStatusThunk"; import { fetchUserRightsThunk } from "../../redux/thunks/webservice/fetchUserRightsThunk"; import { selectGisLines } from "../../redux/slices/database/gisLinesSlice"; import { selectGisLinesStatus } from "../../redux/slices/webservice/gisLinesStatusSlice"; import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice"; import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //------------------------------- const dispatch = useDispatch(); const countdown = useSelector((state) => state.polylineContextMenu.countdown); const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive); const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen); const polylineVisible = useSelector(selectPolylineVisible); const poiTypStatus = useSelector((state) => state.poiTypes.status); const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded"); const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status); const statusSystem = useSelector((state) => state.gisSystemStatic.status); const statusStaticDistrict = useSelector((state) => state.gisStationsStaticDistrict.status); const statusStatusDistrict = useSelector((state) => state.gisStationsStatusDistrict.status); const priorityConfig = useSelector(selectPriorityConfig); const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible); const zoomTrigger = useSelector((state) => state.zoomTrigger.trigger); const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger); const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict); const GisSystemStatic = useSelector(selectGisSystemStatic); const gisSystemStaticStatus = useSelector((state) => state.gisSystemStatic.status); const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled); const mapLayersVisibility = useSelector(selectMapLayersState) || {}; const selectedArea = useSelector((state) => state.selectedArea.area); const linesData = useSelector((state) => state.gisLinesFromDatabase.data); const gisLinesStatus = useSelector((state) => state.gisLinesStatusFromWebservice.status); const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice); useEffect(() => { console.log("✅ Redux: gisLinesStatusData:", gisLinesStatusData); }, [gisLinesStatusData]); //------------------------------- const { deviceName, setDeviceName } = useMapComponentState(); const [locationDeviceData, setLocationDeviceData] = useState([]); const [menuItemAdded, setMenuItemAdded] = useState(false); const [isPopupOpen, setIsPopupOpen] = useState(false); const closePopup = () => setIsPopupOpen(false); const [currentCoordinates, setCurrentCoordinates] = useState(""); const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false); const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false); const [currentPoiData, setCurrentPoiData] = useState(null); const [showVersionInfoModal, setShowVersionInfoModal] = useState(false); const [poiTypMap, setPoiTypMap] = useState(new Map()); const [showPopup, setShowPopup] = useState(false); const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const [map, setMap] = useState(null); // Zustand der Karteninstanz const [oms, setOms] = useState(null); // State für OMS-Instanz const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten //-----userRights---------------- const isRightsLoaded = useSelector((state) => state.gisUserRightsFromWebservice.status === "succeeded"); const userRights = useSelector(selectGisUserRightsFromWebservice); const hasRights = userRights.includes(56); //----------------------------- const openPopupWithCoordinates = (e) => { const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`; setCurrentCoordinates(coordinates); setIsPopupOpen(true); setPopupCoordinates(e.latlng); setPopupVisible(true); }; // Konstanten für die URLs //console.log("priorityConfig in MapComponent1: ", priorityConfig); //----------------------------------------- const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern const [talasMarkers, setTalasMarkers] = useState([]); const [eciMarkers, setEciMarkers] = useState([]); const [lteModemMarkers, setlteModemMarkers] = useState([]); const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); const [wagoMarkers, setWagoMarkers] = useState([]); const [siemensMarkers, setSiemensMarkers] = useState([]); const [otdrMarkers, setOtdrMarkers] = useState([]); const [wdmMarkers, setWdmMarkers] = useState([]); const [messstellenMarkers, setMessstellenMarkers] = useState([]); const [talasiclMarkers, setTalasiclMarkers] = useState([]); const [dauzMarkers, setDauzMarkers] = useState([]); const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); const [ulafMarkers, setUlafMarkers] = useState([]); const [sonstigeMarkers, setSonstigeMarkers] = useState([]); const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]); //-------------------------------------------- const [linePositions, setLinePositions] = useState([]); const { lineColors, tooltipContents } = useLineData(); const [polylines, setPolylines] = useState([]); const [markers, setMarkers] = useState([]); const [newPoint, setNewPoint] = useState(null); const [newCoords, setNewCoords] = useState(null); const [tempMarker, setTempMarker] = useState(null); const [showPoiModal, setShowPoiModal] = useState(false); const [showCoordinatesModal, setShowCoordinatesModal] = useState(false); const [popupCoordinates, setPopupCoordinates] = useState(null); const [popupVisible, setPopupVisible] = useState(false); const openVersionInfoModal = () => { setShowVersionInfoModal(true); }; const closeVersionInfoModal = () => { setShowVersionInfoModal(false); }; const [currentZoom, setCurrentZoom] = useState(() => { const storedZoom = localStorage.getItem("mapZoom"); return storedZoom ? parseInt(storedZoom, 10) : 12; }); const [currentCenter, setCurrentCenter] = useState(() => { const storedCenter = localStorage.getItem("mapCenter"); try { return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625]; } catch (e) { console.error("Error parsing stored map center:", e); return [53.111111, 8.4625]; } }); const allMarkers = [ ...talasMarkers, ...eciMarkers, ...lteModemMarkers, ...ciscoRouterMarkers, ...wagoMarkers, ...siemensMarkers, ...otdrMarkers, ...wdmMarkers, ...gmaMarkers, ...messstellenMarkers, ...talasiclMarkers, ...dauzMarkers, ...smsfunkmodemMarkers, ...sonstigeMarkers, ...tkComponentsMarkers, ...ulafMarkers, ]; //-------------------------------------------- const gmaLayerRef = useRef(null); const talasLayerRef = useRef(null); const eciMarkersLayerRef = useRef(null); const lteModemMarkersLayerRef = useRef(null); const ciscoRouterMarkersLayerRef = useRef(null); const wagoMarkersLayerRef = useRef(null); const siemensMarkersLayerRef = useRef(null); const otdrMarkersLayerRef = useRef(null); const wdmMarkersLayerRef = useRef(null); const messstellenMarkersLayerRef = useRef(null); const talasiclMarkersLayerRef = useRef(null); const dauzMarkersLayerRef = useRef(null); const smsfunkmodemMarkersLayerRef = useRef(null); const ulafMarkersLayerRef = useRef(null); const sonstigeMarkersLayerRef = useRef(null); const tkComponentsMarkersRef = useRef(null); useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value))); useEffect(() => { if (linesData && Array.isArray(linesData)) { const transformed = linesData.map((item) => ({ coordinates: item.points.map((point) => [point.x, point.y]), idModul: item.idModul, idLD: item.idLD, })); setLinePositions(transformed); } }, [linesData]); //-------------------------------------------- const [poiData, setPoiData] = useState([]); // POIs Popup Informationen anzeigen useFetchPoiData(setPoiTypMap, setPoiData); //-------------------------------------------- // POIs auf die Karte zeichnen useEffect(() => { if (map && !poiLayerRef.current) { poiLayerRef.current = new L.LayerGroup().addTo(map); } return () => { if (map && poiLayerRef.current) { map.removeLayer(poiLayerRef.current); poiLayerRef.current = new L.LayerGroup().addTo(map); } locations.forEach((location) => {}); }; //console.log("trigger in MapComponent.js:", poiReadTrigger); }, [map, locations, poiReadTrigger]); //-------------------------------------------- // POIs auf die Karte zeichnen useEffect(() => { if (poiData.length === 0) return; setupPOIs( map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiDataService, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName, dispatch ); }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap, dispatch]); //--------------------------------------------- //console.log("priorityConfig in MapComponent2: ", priorityConfig); useEffect(() => { if (map) { } }, [map, GisSystemStatic, priorityConfig]); //-------------------------------------------- useEffect(() => { if (map) { var x = 51.41321407879154; var y = 7.739617925303934; var zoom = 7; if (map && map.flyTo) { map.flyTo([x, y], zoom); } else { console.error("Map object is not ready or does not have flyTo method"); } } }, [map, zoomTrigger]); //-------------------------------------------- useEffect(() => { if (map) { // Sammle alle Marker in einer einzigen Liste const editMode = localStorage.getItem("editMode") === "true"; // EditMode prüfen const visibility = mapLayersVisibility || {}; allMarkers.forEach((marker) => { const layerKey = marker.options?.layerKey; // Layer-Key aus den Marker-Optionen const isVisible = visibility[layerKey]; // Sichtbarkeitsstatus prüfen if (!layerKey || isVisible === undefined) return; if (editMode || !isVisible) { // Entferne Marker, wenn EditMode aktiv ist oder Layer unsichtbar if (map.hasLayer(marker)) map.removeLayer(marker); } else { // Füge Marker hinzu, wenn EditMode deaktiviert ist und Layer sichtbar if (!map.hasLayer(marker)) marker.addTo(map); } }); // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu checkOverlappingMarkers(map, allMarkers, plusRoundIcon); } }, [ map, talasMarkers, eciMarkers, lteModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, tkComponentsMarkers, ulafMarkers, mapLayersVisibility, // Neu: Abhängigkeit für Sichtbarkeitsstatus ]); //----------------------------------------------------------------- //Tooltip an mouse position anzeigen für die Linien useEffect(() => { if (!map) return; // Entferne alte Marker und Polylinien markers.forEach((marker) => marker.remove()); polylines.forEach((polyline) => polyline.remove()); // Setze neue Marker und Polylinien mit den aktuellen Daten const { markers: newMarkers, polylines: newPolylines } = setupPolylines( map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible // kommt aus Redux ); newPolylines.forEach((polyline, index) => { //console.log("polyline: ", polyline); const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten"; polyline.bindTooltip(tooltipContent, { permanent: false, direction: "auto", sticky: true, offset: [20, 0], pane: "tooltipPane", }); polyline.on("mouseover", (e) => { const tooltip = polyline.getTooltip(); if (tooltip) { const mousePos = e.containerPoint; const mapSize = map.getSize(); let direction = "right"; if (mousePos.x > mapSize.x - 100) { direction = "left"; } else if (mousePos.x < 100) { direction = "right"; } if (mousePos.y > mapSize.y - 100) { direction = "top"; } else if (mousePos.y < 100) { direction = "bottom"; } tooltip.options.direction = direction; polyline.openTooltip(e.latlng); } }); polyline.on("mouseout", () => { polyline.closeTooltip(); }); }); setMarkers(newMarkers); setPolylines(newPolylines); }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]); //-------------------------------------------- useRestoreMapSettings(map); //Test in useEffect useEffect(() => { if (map) { console.log("🗺️ Map-Einstellungen werden wiederhergestellt..."); restoreMapSettings(map); } }, [map]); //-------------------------------------------- useEffect(() => { if (map) { console.log("map in MapComponent: ", map); const handleMapMoveEnd = (event) => { const newCenter = map.getCenter(); const newZoom = map.getZoom(); setCurrentCenter([newCenter.lat, newCenter.lng]); setCurrentZoom(newZoom); localStorage.setItem("mapCenter", JSON.stringify([newCenter.lat, newCenter.lng])); localStorage.setItem("mapZoom", newZoom); }; map.on("moveend", handleMapMoveEnd); map.on("zoomend", handleMapMoveEnd); return () => { map.off("moveend", handleMapMoveEnd); map.off("zoomend", handleMapMoveEnd); }; } }, [map]); //-------------------------------------------- // Bereich in DataSheet ->dropdownmenu useEffect(() => { //console.log("🔍 GisStationsStaticDistrict Inhalt:", GisStationsStaticDistrict); // Sicherstellen, dass `Points` existiert und ein Array ist const points = GisStationsStaticDistrict?.Points; if (selectedArea && map) { const station = points.find((s) => s.Area_Name === selectedArea); if (station) { console.log("📌 Gefundene Station:", station); map.flyTo([station.X, station.Y], 14); } else { console.warn("⚠️ Keine passende Station für die Area gefunden:", selectedArea); } } }, [selectedArea, map, GisStationsStaticDistrict]); //------------------------------------- useEffect(() => { if (zoomTrigger && map) { map.flyTo([51.41321407879154, 7.739617925303934], 7); } }, [zoomTrigger, map]); //-------------------------------------------- useEffect(() => { if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) { addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates); } }, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]); //-------------------------------------------- // rote Marker ganz oben wenn überlappen sind //-------------------------------------------- useEffect(() => { if (map) { if (polylineEventsDisabled) { disablePolylineEvents(window.polylines); } else { enablePolylineEvents(window.polylines, window.lineColors); } } }, [map, polylineEventsDisabled]); //-------------------------------------------- useEffect(() => { if (map) { console.log("6- Karteninstanz (map) wurde jetzt erfolgreich initialisiert"); } }, [map]); //-------------------------------------------- useEffect(() => { const initializeContextMenu = () => { if (map) { map.whenReady(() => { setTimeout(() => { if (map.contextmenu) { //console.log("Contextmenu ist vorhanden"); } else { console.warn("Contextmenu ist nicht verfügbar."); } }, 500); }); } }; initializeContextMenu(); }, [map]); //-------------------------------------------- //Tooltip Werte aktualisieren useEffect(() => { if (!map) return; // Stelle sicher, dass die Karte initialisiert ist const updateGmaData = async () => { try { const fetchOptions = { method: "GET", headers: { Connection: "close", }, }; // Aktualisiere die Messdaten await fetchGisStationsMeasurements(setGisStationsMeasurements, fetchOptions); // Aktualisiere die Marker-Layer // useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); } catch (error) { console.error("Fehler beim Aktualisieren der GMA-Daten:", error); } }; // Initialer Datenabruf updateGmaData(); // Setze ein Intervall, um die Daten alle 5 Sekunden zu aktualisieren /* const intervalId = setInterval(() => { updateGmaData(); }, 5000); // Cleanup-Funktion, um das Intervall zu entfernen, wenn die Komponente entladen wird return () => clearInterval(intervalId); */ }, [map, gmaMarkers, layers.MAP_LAYERS.GMA, oms]); //--------------------------------- //--------------hokks------------------------------------------- useGmaMarkersLayer( map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms, mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter ); //-------------------------------------------- //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig); useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms); useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms); useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms); useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms); //useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms); useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms); useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms); useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms); useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms); useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms); useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms); useLayerVisibility(map, tkComponentsMarkers, mapLayersVisibility, "TKKomponenten", oms); useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms); useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms); useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSModem", oms); useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms); useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms); //-------------------------------------------- useEffect(() => { if (gisSystemStaticStatus !== "succeeded" || !map) return; const layerGroups = [ { ref: gmaLayerRef, id: 11, setState: setGmaMarkers }, { ref: talasLayerRef, id: 1, setState: setTalasMarkers }, { ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers }, { ref: lteModemMarkersLayerRef, id: 5, setState: setlteModemMarkers }, { ref: ciscoRouterMarkersLayerRef, id: 6, setState: setCiscoRouterMarkers }, { ref: wagoMarkersLayerRef, id: 7, setState: setWagoMarkers }, { ref: siemensMarkersLayerRef, id: 8, setState: setSiemensMarkers }, { ref: otdrMarkersLayerRef, id: 9, setState: setOtdrMarkers }, { ref: wdmMarkersLayerRef, id: 10, setState: setWdmMarkers }, { ref: messstellenMarkersLayerRef, id: 13, setState: setMessstellenMarkers }, { ref: talasiclMarkersLayerRef, id: 100, setState: setTalasiclMarkers }, { ref: dauzMarkersLayerRef, id: 110, setState: setDauzMarkers }, { ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers }, { ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers }, { ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers }, { ref: tkComponentsMarkersRef, id: 30, setState: setTkComponentsMarkers }, ]; // Initialisiere LayerGroups nur einmal layerGroups.forEach(({ ref }) => { if (!ref.current) { ref.current = new L.LayerGroup().addTo(map); } }); //-------------------------------------------- const updateMarkers = ({ ref, id, setState }) => { if (ref.current) { ref.current.clearLayers(); // Entferne alte Marker } // Erstelle und füge neue Marker hinzu createAndSetDevices( id, (newMarkers) => { setState(newMarkers); // Zustand aktualisieren newMarkers.forEach((marker) => ref.current.addLayer(marker)); // Marker zur LayerGroup hinzufügen // Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu checkOverlappingMarkers(map, newMarkers, plusRoundIcon); }, GisSystemStatic, priorityConfig ); }; // Aktualisiere alle Marker-Gruppen const updateAllMarkers = () => { layerGroups.forEach(updateMarkers); }; // Initiales Update updateAllMarkers(); // Setze ein Intervall für regelmäßige Updates const intervalId = setInterval(() => { updateAllMarkers(); if (map) { // console.log("🔥 Automatischer Klick-Event ausgelöst, um Spiderfy zu aktualisieren."); map.fire("click"); } if (isPolylineContextMenuOpen) { dispatch(closePolylineContextMenu()); // Schließe das Kontextmenü, bevor das nächste Update passiert } if (map) { // console.log("🔥 nochmal klick."); map.fire("click"); } }, 20000); // Aufräumen bei Komponentenentladung return () => { clearInterval(intervalId); // Entferne Intervall // LayerGroups leeren layerGroups.forEach(({ ref }) => { if (ref.current) { ref.current.clearLayers(); } }); }; }, [map, GisSystemStatic, priorityConfig]); //--------------------------------------- // Initialisiere Leaflet-Karte // Rufe useBereicheMarkersLayer direkt auf //const [bereichUrl, setBereichUrl] = useState(null); const urlParams = new URLSearchParams(window.location.search); // URL-Parameter parsen const mValue = urlParams.get("m"); // Wert von "m" holen const hostname = window.location.hostname; // Dynamischer Hostname const port = 3000; // Definiere den gewünschten Port const bereichUrl = `http://${hostname}:${port}/api/talas_v5_DB/bereich/readBereich?m=${mValue}`; // Dynamischer Hostname und Port // Bereichs-Marker basierend auf dynamischer URL laden const handleLocationUpdate = async (idLocation, idMap, newCoords) => { try { const result = await updateLocation(idLocation, idMap, newCoords); // Update-API console.log("Koordinaten erfolgreich aktualisiert:", result); } catch (error) { console.error("Fehler beim Aktualisieren der Location:", error); } }; // Bereichs-Marker basierend auf dynamischer URL laden const bereicheMarkers = useBereicheMarkersLayer(map, oms, bereichUrl, handleLocationUpdate); /* Bereichsmarker werden jetzt nur angezeigt, wenn der editMode aktiviert ist. Marker werden bei deaktiviertem editMode aus der Karte entfernt. Dynamische Überwachung von Änderungen im editMode über localStorage und Event Listener implementiert. Dragging für Marker im editMode aktiviert und Z-Index angepasst. */ useEffect(() => { const editMode = localStorage.getItem("editMode") === "true"; // Prüfe, ob der editMode deaktiviert ist if (!editMode) { // Entferne alle Marker aus der Karte if (!map) return; // Sicherstellen, dass map existiert bereicheMarkers.forEach((marker) => { if (map.hasLayer(marker)) { map.removeLayer(marker); } }); } else { // Wenn editMode aktiviert ist, füge die Marker hinzu und aktiviere Dragging bereicheMarkers.forEach((marker) => { if (!map.hasLayer(marker)) { marker.addTo(map); // Layer hinzufügen } marker.dragging.enable(); marker.setZIndexOffset(1000); // Marker nach oben setzen }); } }, [bereicheMarkers, map]); //---------------------------------- useEffect(() => { const handleVisibilityChange = () => { // Erneut die Marker-Überprüfung auslösen checkOverlappingMarkers(map, allMarkers, plusRoundIcon); }; window.addEventListener("visibilityChanged", handleVisibilityChange); return () => { window.removeEventListener("visibilityChanged", handleVisibilityChange); }; }, [map, allMarkers]); //--------------------------------------- useEffect(() => { if (map) { // initGeocoderFeature(map); // Geocoder-Feature initialisieren, kann von .env.local ausgeschaltet werden } }, [map]); //-------------------------------------------- const handleCoordinatesSubmit = (coords) => { const [lat, lng] = coords.split(",").map(Number); if (map && lat && lng) { map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten } }; //-------------------------------------------- useEffect(() => { if (map && !menuItemAdded) { addItemsToMapContextMenu( map, menuItemAdded, setMenuItemAdded, setShowCoordinatesModal, setShowPoiModal, setPopupCoordinates, openPopupWithCoordinates // Diese Funktion wird jetzt übergeben! ); } }, [map, menuItemAdded]); //-------------------------------------------- useEffect(() => { dispatch(fetchUserRightsThunk()); }, [dispatch]); //-------------------------------------------- // Beim ersten Client-Render den Wert aus localStorage laden useEffect(() => { const storedPolylineVisible = localStorage.getItem("polylineVisible") === "true"; dispatch(setPolylineVisible(storedPolylineVisible)); }, [dispatch]); //-------------------------------------------- useEffect(() => { if (statusStaticDistrict === "idle") { dispatch(fetchGisStationsStaticDistrictThunk()); } }, [statusStaticDistrict, dispatch]); useEffect(() => { if (statusStatusDistrict === "idle") { dispatch(fetchGisStationsStatusDistrictThunk()); } }, [statusStatusDistrict, dispatch]); useEffect(() => { if (statusMeasurements === "idle") { dispatch(fetchGisStationsMeasurementsThunk()); } }, [statusMeasurements, dispatch]); useEffect(() => { if (statusSystem === "idle") { dispatch(fetchGisSystemStaticThunk()); } }, [statusSystem, dispatch]); useEffect(() => { dispatch(fetchLocationDevicesThunk()); }, [dispatch]); //--------------------------------------------------------------- useEffect(() => { const params = new URL(window.location.href).searchParams; dispatch(setMapId(params.get("m"))); dispatch(setUserId(params.get("u"))); }, [dispatch]); //--------------------------------------------------------------- useEffect(() => { dispatch(fetchPriorityConfigThunk()); }, [dispatch]); //-------------------------------------------------------- useEffect(() => { if (gisLinesStatus === "idle") { dispatch(fetchGisLinesThunk()); } }, [gisLinesStatus, dispatch]); //-------------------------------------------------------- useEffect(() => { dispatch(fetchGisLinesStatusThunk()); }, [dispatch]); //--------------------------------------------------------- const rights = useSelector((state) => state.gisUserRightsFromWebservice.rights); useEffect(() => { dispatch(fetchUserRightsThunk()); }, [dispatch]); //---------------------------------------------------- useEffect(() => { if (poiTypStatus === "idle") { dispatch(fetchPoiTypes()); } }, [poiTypStatus, dispatch]); //-------------------------------------- useEffect(() => { if (isPolylineContextMenuOpen && countdownActive) { //console.log("🔄 Starte Redux-Countdown für Kontextmenü!"); const interval = setInterval(() => { dispatch(updateCountdown()); // console.log(`⏳ Redux Countdown: ${countdown} Sekunden`); if (countdown <= 2) { console.log("🚀 Kontextmenü wird wegen Countdown < 2 geschlossen."); dispatch(closePolylineContextMenu()); if (window.map?.contextmenu) { window.map.contextmenu.hide(); } clearInterval(interval); } }, 1000); return () => { clearInterval(interval); }; } }, [isPolylineContextMenuOpen, countdown, countdownActive, dispatch, window.map]); //---------------------------------- // map in window setzen für mehr Debugging useEffect(() => { if (map) { window.map = map; console.log("✅ window.map wurde gesetzt:", window.map); } }, [map]); //--------------------------------------- // **Fehlerbehandlung für `contextmenu`** // damit den Fehler mit contextmenu nicht angezeigt wird und überspringt wird und die Seite neu geladen wird useEffect(() => { window.onerror = function (message, source, lineno, colno, error) { if (message.includes("Cannot read properties of null (reading 'contextmenu')")) { console.warn("⚠️ Fehler mit `contextmenu` erkannt - Neuladen der Seite."); setTimeout(() => { window.location.reload(); }, 0); // **Seite nach Sekunde neu laden** return true; // **Fehler unterdrücken, damit React ihn nicht anzeigt** } }; return () => { window.onerror = null; // **Fehlerbehandlung entfernen, wenn Komponente unmounted wird** }; }, []); //--------------------------------------------- //-------------------------------------------- return ( <> {useSelector((state) => state.addPoiOnPolyline.isOpen) && } {/* Zeigt das Koordinaten-Modal, wenn `showCoordinatesModal` true ist */} {showCoordinatesModal && setShowCoordinatesModal(false)} />} {/* Zeigt das POI-Modal, wenn `showPoiModal` true ist */} {showPoiModal && setShowPoiModal(false)} />}
{showPoiUpdateModal && setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}
{showPopup && (
e.stopPropagation()}>
)}
{GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && }
TALAS.Map
Version {APP_VERSION}
); }; export default MapComponent;