From 193d1e2f2f177556c47f9f1b62f51ea2c8524ed9 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 3 Sep 2024 22:55:57 +0200 Subject: [PATCH] Refactoring --- .env.local | 42 ++++++------ components/MapComponent.js | 68 ++++++++++++++----- components/imports.js | 2 +- hooks/layers/useTalasMarkersLayer.js | 22 ++---- hooks/useLayerVisibility.js | 12 ++-- ...{mapInitialization.js => initializeMap.js} | 6 +- 6 files changed, 88 insertions(+), 64 deletions(-) rename utils/{mapInitialization.js => initializeMap.js} (95%) diff --git a/.env.local b/.env.local index 426f51759..0be25a82f 100644 --- a/.env.local +++ b/.env.local @@ -18,30 +18,30 @@ ######################### -DB_HOST=10.10.0.70 -DB_USER=root -DB_PASSWORD="root#$" -DB_NAME=talas_v5 -DB_PORT=3306 - - -######################### - -NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" -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="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" -######################### - -#DB_HOST=192.168.10.167 +#DB_HOST=10.10.0.70 #DB_USER=root #DB_PASSWORD="root#$" #DB_NAME=talas_v5 #DB_PORT=3306 + + +######################### + +#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" +#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="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" +######################### + +DB_HOST=192.168.10.167 +DB_USER=root +DB_PASSWORD="root#$" +DB_NAME=talas_v5 +DB_PORT=3306 ######################### #URLs für den Client (clientseitig) -#NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/" -#NEXT_PUBLIC_SERVER_URL="http://192.168.10.167" -#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" +NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/" +NEXT_PUBLIC_SERVER_URL="http://192.168.10.167" +NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167" +NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" diff --git a/components/MapComponent.js b/components/MapComponent.js index adc96ab44..f8bd17234 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -111,6 +111,7 @@ 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 @@ -124,8 +125,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { 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 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([]); + const [eciMarkers, setEciMarkers] = useState([]); + const [gsmModemMarkers, setGsmModemMarkers] = 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 [lineStatusData, setLineStatusData] = useState([]); const [linesData, setLinesData] = useState([]); const mapLayersVisibility = useRecoilValue(mapLayersState); @@ -330,6 +348,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //console.log("priorityConfig in MapComponent2: ", priorityConfig); useEffect(() => { if (gisSystemStaticLoaded && map) { + /* createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System @@ -338,33 +357,48 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System - createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-System + */ + 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 + 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]); //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig); - useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS"); - useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI"); - useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem"); - useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter"); - useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO"); - useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens"); - useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR"); - useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM"); - useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA"); - useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige"); - useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL"); - useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ"); - useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem"); - useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen"); - useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF"); + useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms); + useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms); + useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms); + useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", 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, talasiclMarkers, mapLayersVisibility, "TALASICL", oms); + useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms); + useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem", oms); + useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms); + useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms); useEffect(() => { if (map) { diff --git a/components/imports.js b/components/imports.js index ae2398101..5cb01e387 100644 --- a/components/imports.js +++ b/components/imports.js @@ -39,7 +39,7 @@ import { addContextMenuToMarker } from "../utils/contextMenuUtils.js"; import { MAP_VERSION } from "../config/settings.js"; import * as layers from "../config/layers.js"; import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js"; -import { initializeMap } from "../utils/mapInitialization.js"; +import { initializeMap } from "../utils/initializeMap.js"; 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 diff --git a/hooks/layers/useTalasMarkersLayer.js b/hooks/layers/useTalasMarkersLayer.js index d19fcceaf..e00ce81ce 100644 --- a/hooks/layers/useTalasMarkersLayer.js +++ b/hooks/layers/useTalasMarkersLayer.js @@ -1,8 +1,6 @@ import { useEffect, useState } from "react"; -import L from "leaflet"; import { createAndSetDevices } from "../../utils/createAndSetDevices"; import { addContextMenuToMarker } from "../../utils/contextMenuUtils"; -import { checkOverlappingMarkers } from "../../utils/mapUtils"; const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { const [talasMarkers, setTalasMarkers] = useState([]); @@ -14,12 +12,11 @@ const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { }, [GisSystemStatic, map, priorityConfig]); useEffect(() => { - if (map && talasMarkers.length) { + if (map && talasMarkers.length && oms) { talasMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); + oms.addMarker(marker); // Erst zu OMS hinzufügen + marker.addTo(map); // Dann zum Map hinzufügen - // Popup beim Überfahren mit der Maus öffnen und schließen marker.on("mouseover", function () { this.openPopup(); }); @@ -27,19 +24,10 @@ const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { this.closePopup(); }); - addContextMenuToMarker(marker); + addContextMenuToMarker(marker); // Kontextmenü-Event hinzufügen }); - // 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, talasMarkers]); + }, [map, talasMarkers, oms]); return talasMarkers; }; diff --git a/hooks/useLayerVisibility.js b/hooks/useLayerVisibility.js index 4b4ab7851..42046aea1 100644 --- a/hooks/useLayerVisibility.js +++ b/hooks/useLayerVisibility.js @@ -1,24 +1,26 @@ // hooks/useLayerVisibility.js import { useEffect } from "react"; -import { useRecoilValue } from "recoil"; -import { mapLayersState } from "../store/atoms/mapLayersState"; +import { addContextMenuToMarker } from "../utils/contextMenuUtils"; -const useLayerVisibility = (map, markers, mapLayersVisibility, layerKey) => { +const useLayerVisibility = (map, markers, mapLayersVisibility, layerKey, oms) => { useEffect(() => { - if (!map || !markers) return; + if (!map || !markers || !oms) return; const toggleLayer = (isVisible) => { markers.forEach((marker) => { if (isVisible) { marker.addTo(map); + oms.addMarker(marker); + addContextMenuToMarker(marker); // Kontextmenü hinzufügen } else { map.removeLayer(marker); + oms.removeMarker(marker); } }); }; toggleLayer(mapLayersVisibility[layerKey]); - }, [map, markers, mapLayersVisibility, layerKey]); + }, [map, markers, mapLayersVisibility, layerKey, oms]); }; export default useLayerVisibility; diff --git a/utils/mapInitialization.js b/utils/initializeMap.js similarity index 95% rename from utils/mapInitialization.js rename to utils/initializeMap.js index ace2394c5..34bf5e712 100644 --- a/utils/mapInitialization.js +++ b/utils/initializeMap.js @@ -1,12 +1,12 @@ -// /utils/mapInitialization.js +// /utils/initializeMap.js import L from "leaflet"; import "leaflet-contextmenu"; import "leaflet/dist/leaflet.css"; import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; import * as urls from "../config/urls.js"; import * as layers from "../config/layers.js"; -import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils"; -import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktionen +import { addContextMenuToMarker, openInNewTab } from "./contextMenuUtils.js"; +import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js"; // Importiere die Funktionen export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { const offlineTileLayer = urls.OFFLINE_TILE_LAYER;