Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring

Browse Source
This commit is contained in:
ISA
2024-09-03 22:55:57 +02:00
parent e60ce2b354
commit 193d1e2f2f
6 changed files with 88 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
.env.local
View File

@@ -18,30 +18,30 @@
######################### #########################
DB_HOST=10.10.0.70 #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_USER=root
#DB_PASSWORD="root#$" #DB_PASSWORD="root#$"
#DB_NAME=talas_v5 #DB_NAME=talas_v5
#DB_PORT=3306 #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) #URLs für den Client (clientseitig)
#NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/" NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/"
#NEXT_PUBLIC_SERVER_URL="http://192.168.10.167" NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
#NEXT_PUBLIC_PROXY_TARGET="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_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"

68
components/MapComponent.js
View File

@@ -111,6 +111,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl; const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
//console.log("priorityConfig in MapComponent1: ", priorityConfig); //console.log("priorityConfig in MapComponent1: ", priorityConfig);
/*
const talasMarkers = useTalasMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook const talasMarkers = useTalasMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
const eciMarkers = useEciMarkersLayer(map, eciMarkers, oms, layers.MAP_LAYERS.ECI); const eciMarkers = useEciMarkersLayer(map, eciMarkers, oms, layers.MAP_LAYERS.ECI);
const gsmModemMarkers = useGsmModemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook 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 dauzMarkers = useDauzMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
const smsfunkmodemMarkers = useSmsfunkmodemMarkersLayer(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 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 [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 [lineStatusData, setLineStatusData] = useState([]);
const [linesData, setLinesData] = useState([]); const [linesData, setLinesData] = useState([]);
const mapLayersVisibility = useRecoilValue(mapLayersState); const mapLayersVisibility = useRecoilValue(mapLayersState);
@@ -330,6 +348,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//console.log("priorityConfig in MapComponent2: ", priorityConfig); //console.log("priorityConfig in MapComponent2: ", priorityConfig);
useEffect(() => { useEffect(() => {
if (gisSystemStaticLoaded && map) { if (gisSystemStaticLoaded && map) {
/*
createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System
createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System
createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System
@@ -338,33 +357,48 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System
createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System
createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System
createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System
createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System
createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System
createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System
createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-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]); }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
//useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig); //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig);
useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS"); useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI"); useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms);
useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem"); useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter"); useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms);
useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO"); useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms);
useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens"); useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms);
useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR"); useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms);
useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM"); useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms);
useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA"); useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms);
useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige"); useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms);
useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL"); useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms);
useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ"); useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms);
useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem"); useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem", oms);
useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen"); useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms);
useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF"); useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms);
useEffect(() => { useEffect(() => {
if (map) { if (map) {

2
components/imports.js
View File

@@ -39,7 +39,7 @@ import { addContextMenuToMarker } from "../utils/contextMenuUtils.js";
import { MAP_VERSION } from "../config/settings.js"; import { MAP_VERSION } from "../config/settings.js";
import * as layers from "../config/layers.js"; import * as layers from "../config/layers.js";
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.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 { addItemsToMapContextMenu } from "./useMapContextMenu.js";
import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook

22
hooks/layers/useTalasMarkersLayer.js
View File

@@ -1,8 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices"; import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/contextMenuUtils"; import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [talasMarkers, setTalasMarkers] = useState([]); const [talasMarkers, setTalasMarkers] = useState([]);
@@ -14,12 +12,11 @@ const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
}, [GisSystemStatic, map, priorityConfig]); }, [GisSystemStatic, map, priorityConfig]);
useEffect(() => { useEffect(() => {
if (map && talasMarkers.length) { if (map && talasMarkers.length && oms) {
talasMarkers.forEach((marker) => { talasMarkers.forEach((marker) => {
marker.addTo(map); oms.addMarker(marker); // Erst zu OMS hinzufügen
oms.addMarker(marker); marker.addTo(map); // Dann zum Map hinzufügen
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () { marker.on("mouseover", function () {
this.openPopup(); this.openPopup();
}); });
@@ -27,19 +24,10 @@ const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
this.closePopup(); 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; return talasMarkers;
}; };

12
hooks/useLayerVisibility.js
View File

@@ -1,24 +1,26 @@
// hooks/useLayerVisibility.js // hooks/useLayerVisibility.js
import { useEffect } from "react"; import { useEffect } from "react";
import { useRecoilValue } from "recoil"; import { addContextMenuToMarker } from "../utils/contextMenuUtils";
import { mapLayersState } from "../store/atoms/mapLayersState";
const useLayerVisibility = (map, markers, mapLayersVisibility, layerKey) => { const useLayerVisibility = (map, markers, mapLayersVisibility, layerKey, oms) => {
useEffect(() => { useEffect(() => {
if (!map || !markers) return; if (!map || !markers || !oms) return;
const toggleLayer = (isVisible) => { const toggleLayer = (isVisible) => {
markers.forEach((marker) => { markers.forEach((marker) => {
if (isVisible) { if (isVisible) {
marker.addTo(map); marker.addTo(map);
oms.addMarker(marker);
addContextMenuToMarker(marker); // Kontextmenü hinzufügen
} else { } else {
map.removeLayer(marker); map.removeLayer(marker);
oms.removeMarker(marker);
} }
}); });
}; };
toggleLayer(mapLayersVisibility[layerKey]); toggleLayer(mapLayersVisibility[layerKey]);
}, [map, markers, mapLayersVisibility, layerKey]); }, [map, markers, mapLayersVisibility, layerKey, oms]);
}; };
export default useLayerVisibility; export default useLayerVisibility;

6
utils/mapInitialization.js → utils/initializeMap.js
View File

@@ -1,12 +1,12 @@
// /utils/mapInitialization.js // /utils/initializeMap.js
import L from "leaflet"; import L from "leaflet";
import "leaflet-contextmenu"; import "leaflet-contextmenu";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import * as urls from "../config/urls.js"; import * as urls from "../config/urls.js";
import * as layers from "../config/layers.js"; import * as layers from "../config/layers.js";
import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils"; import { addContextMenuToMarker, openInNewTab } from "./contextMenuUtils.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktionen import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js"; // Importiere die Funktionen
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
const offlineTileLayer = urls.OFFLINE_TILE_LAYER; const offlineTileLayer = urls.OFFLINE_TILE_LAYER;