From 8c495fa83081d110c39cecb157f35cb370cac252 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 9 Dec 2024 13:58:07 +0100 Subject: [PATCH] feat: Added TK component to MapComponent.js --- .env.local | 4 +- components/MapComponent.js | 60 +++++++++------------ hooks/layers/useTkComponentsMarkersLayer.js | 48 +++++++++++++++++ 3 files changed, 75 insertions(+), 37 deletions(-) create mode 100644 hooks/layers/useTkComponentsMarkersLayer.js diff --git a/.env.local b/.env.local index 583cbd45b..b64e0e010 100644 --- a/.env.local +++ b/.env.local @@ -28,7 +28,7 @@ DB_PORT=3306 #NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" #NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" -NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png" +#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png" ######################### #DB_HOST=192.168.10.168 @@ -44,4 +44,4 @@ NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png" #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" ######################### online -#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" \ No newline at end of file +NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" \ No newline at end of file diff --git a/components/MapComponent.js b/components/MapComponent.js index a95788daf..464e96f88 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -44,6 +44,7 @@ import { addItemsToMapContextMenu } from "./useMapContextMenu.js"; import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js"; +import useTkComponentsMarkersLayer from "../hooks/layers/useTkComponentsMarkersLayer.js"; import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js"; import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js"; //import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer"; @@ -119,22 +120,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl; //console.log("priorityConfig in MapComponent1: ", priorityConfig); - /* - const talasMarkers = useTalasMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const eciMarkers = useEciMarkersLayer(map, eciMarkers, oms, layers.MAP_LAYERS.ECI); - const gsmModemMarkers = useGsmModemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const ciscoRouterMarkers = useCiscoRouterMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const wagoMarkers = useWagoMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const siemensMarkers = useSiemensMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const otdrMarkers = useOtdrMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const wdmMarkers = useWdmMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const messstellenMarkers = useMessstellenMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const talasiclMarkers = useTalasiclMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const dauzMarkers = useDauzMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const smsfunkmodemMarkers = useSmsfunkmodemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const ulafMarkers = useUlafMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const sonstigeMarkers = useSonstigeMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - */ const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern const [talasMarkers, setTalasMarkers] = useState([]); @@ -151,6 +136,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); const [ulafMarkers, setUlafMarkers] = useState([]); const [sonstigeMarkers, setSonstigeMarkers] = useState([]); + const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]); //const [lteModemMarkers, setLteModemMarkers] = useState([]); const [lineStatusData, setLineStatusData] = useState([]); @@ -407,24 +393,6 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat //console.log("priorityConfig in MapComponent2: ", priorityConfig); useEffect(() => { if (gisSystemStaticLoaded && map) { - /* damit nich doppelt vorkommen - createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System - createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System - createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System - createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System---LTE Modem und GSM Modem sind gleich - //createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem----------LTE Modem und GSM Modem sind gleich - createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System - createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System - createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System - createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR-System - createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM-System - createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen-System - createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL-System - createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ-System - createAndSetDevices(111, setSmsfunkmodemMarkers, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System - createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige-System - createAndSetDevices(0, setUlafMarkers, GisSystemStatic, priorityConfig); // ULAF-System - */ } }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]); @@ -442,6 +410,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms); useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms); useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms); + useLayerVisibility(map, tkComponentsMarkers, mapLayersVisibility, "TKComponents", oms); useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms); useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms); useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSModem", oms); @@ -481,12 +450,31 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat ...dauzMarkers, ...smsfunkmodemMarkers, ...sonstigeMarkers, + ...tkComponentsMarkers, ...ulafMarkers, ]; // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu checkOverlappingMarkers(map, allMarkers, plusRoundIcon); } - }, [map, talasMarkers, eciMarkers, gsmModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]); + }, [ + map, + talasMarkers, + eciMarkers, + gsmModemMarkers, + ciscoRouterMarkers, + wagoMarkers, + siemensMarkers, + otdrMarkers, + wdmMarkers, + gmaMarkers, + messstellenMarkers, + talasiclMarkers, + dauzMarkers, + smsfunkmodemMarkers, + sonstigeMarkers, + tkComponentsMarkers, + ulafMarkers, + ]); //-------------------------------------------- useEffect(() => { @@ -746,6 +734,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat const smsfunkmodemMarkersLayerRef = useRef(null); const ulafMarkersLayerRef = useRef(null); const sonstigeMarkersLayerRef = useRef(null); + const tkComponentsMarkersRef = useRef(null); useEffect(() => { if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind @@ -765,6 +754,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat { 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 diff --git a/hooks/layers/useTkComponentsMarkersLayer.js b/hooks/layers/useTkComponentsMarkersLayer.js new file mode 100644 index 000000000..100d65e30 --- /dev/null +++ b/hooks/layers/useTkComponentsMarkersLayer.js @@ -0,0 +1,48 @@ +// /hooks/layers/useTkComponentsMarkersLayer.js +import { useEffect, useState } from "react"; +import L from "leaflet"; +import { createAndSetDevices } from "../../utils/createAndSetDevices"; +import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; +import { checkOverlappingMarkers } from "../../utils/mapUtils"; + +const useTkComponentsMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { + const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]); + + useEffect(() => { + if (GisSystemStatic && GisSystemStatic.length && map) { + createAndSetDevices(2, setTkComponentsMarkers, GisSystemStatic, priorityConfig); // ECI-System + } + }, [GisSystemStatic, map, priorityConfig]); + + useEffect(() => { + if (map && tkComponentsMarkers.length) { + tkComponentsMarkers.forEach((marker) => { + marker.addTo(map); + oms.addMarker(marker); + + // Popup beim Überfahren mit der Maus öffnen und schließen + marker.on("mouseover", function () { + this.openPopup(); + }); + marker.on("mouseout", function () { + this.closePopup(); + }); + + addContextMenuToMarker(marker); + }); + // Disable map context menu + map.options.contextmenu = false; + map.options.contextmenuItems = []; + + oms.map.options.contextmenu = false; + oms.map.options.contextmenuItems = []; + + // Call the function to check for overlapping markers + checkOverlappingMarkers(oms, map); + } + }, [map, tkComponentsMarkers]); + + return tkComponentsMarkers; +}; + +export default useTkComponentsMarkersLayer;