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

Refacoring, but links for polylines and devices in progress

Browse Source
This commit is contained in:
ISA
2024-09-04 08:08:10 +02:00
parent 193d1e2f2f
commit 5ed41642da
5 changed files with 129 additions and 127 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"

158
components/MapComponent.js
View File

@@ -1,74 +1,77 @@
// components/MapComponent.js // components/MapComponent.js
import { import React, { useEffect, useRef, useState, useCallback } from "react";
React, import L, { marker } from "leaflet";
useEffect, import "leaflet/dist/leaflet.css";
useRef, import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
useState, import "leaflet-contextmenu";
L, import * as config from "../config/config.js";
config, import * as urls from "../config/urls.js";
urls, import "leaflet.smooth_marker_bouncing";
OverlappingMarkerSpiderfier, import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
DataSheet, import DataSheet from "./DataSheet.js";
useRecoilValue, import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
useSetRecoilState, import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
gisStationsStaticDistrictState, import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
gisSystemStaticState, import { mapLayersState } from "../store/atoms/mapLayersState.js";
mapLayersState, import { selectedAreaState } from "../store/atoms/selectedAreaState.js";
selectedAreaState, import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
zoomTriggerState, import { poiTypState } from "../store/atoms/poiTypState.js";
AddPoiModalWindow, import AddPoiModalWindow from "./pois/AddPoiModalWindow.js";
poiReadFromDbTriggerAtom, import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
InformationCircleIcon, import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
PoiUpdateModal, import PoiUpdateModal from "./pois/PoiUpdateModal.js";
selectedPoiState, import { selectedPoiState } from "../store/atoms/poiState.js";
currentPoiState, import { currentPoiState } from "../store/atoms/currentPoiState.js";
ToastContainer, import { ToastContainer, toast } from "react-toastify";
toast, import "react-toastify/dist/ReactToastify.css";
mapIdState, import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
userIdState, import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js";
poiLayerVisibleState, import plusRoundIcon from "./PlusRoundIcon.js";
plusRoundIcon, import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
createAndSetDevices, import { insertNewPOI, removePOI, handleEditPoi } from "../utils/poiUtils.js";
restoreMapSettings, import { createAndSetDevices } from "../utils/createAndSetDevices.js";
checkOverlappingMarkers, import { redrawPolyline, restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js";
fetchGisStatusStations, import circleIcon from "./gisPolylines/icons/CircleIcon.js";
fetchPoiData, import startIcon from "./gisPolylines/icons/StartIcon.js";
fetchUserRights, import endIcon from "./gisPolylines/icons/EndIcon.js";
MAP_VERSION, import { fetchGisStatusStations, fetchPriorityConfig, fetchPoiData, updateLocationInDatabase, fetchUserRights, fetchDeviceNameById } from "../services/apiService.js";
layers, import { addContextMenuToMarker } from "../utils/contextMenuUtils.js";
initializeMap, import { MAP_VERSION } from "../config/settings.js";
addItemsToMapContextMenu, import * as layers from "../config/layers.js";
useGmaMarkersLayer, import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";
useTalasMarkersLayer, import { initializeMap } from "../utils/initializeMap.js";
useEciMarkersLayer, import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
useGsmModemMarkersLayer, import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
useCiscoRouterMarkersLayer, import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook
useWagoMarkersLayer, import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js";
useSiemensMarkersLayer, import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
useOtdrMarkersLayer, import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js";
useWdmMarkersLayer, import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js";
useMessstellenMarkersLayer, import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js";
useTalasiclMarkersLayer, import useOtdrMarkersLayer from "../hooks/layers/useOtdrMarkersLayer.js";
useDauzMarkersLayer, import useWdmMarkersLayer from "../hooks/layers/useWdmMarkersLayer.js";
useSmsfunkmodemMarkersLayer, import useMessstellenMarkersLayer from "../hooks/layers/useMessstellenMarkersLayer.js";
useUlafMarkersLayer, import useTalasiclMarkersLayer from "../hooks/layers/useTalasiclMarkersLayer.js";
useSonstigeMarkersLayer, import useDauzMarkersLayer from "../hooks/layers/useDauzMarkersLayer.js";
fetchGisStationsStaticDistrict, import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js";
fetchGisStationsStatusDistrict, import useUlafMarkersLayer from "../hooks/layers/useUlafMarkersLayer.js";
fetchGisStationsMeasurements, import useSonstigeMarkersLayer from "../hooks/layers/useSonstigeMarkersLayer.js";
fetchGisSystemStatic, import handlePoiSelect from "../utils/handlePoiSelect.js";
setupPolylines, import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js";
setupPOIs, import { setupPolylines } from "../utils/setupPolylines.js";
VersionInfoModal, import { setupPOIs } from "../utils/setupPOIs.js";
useFetchPoiData, import VersionInfoModal from "./VersionInfoModal.js";
usePoiTypData, //--------------------------------------------
useLayerVisibility, import PoiUpdateModalWrapper from "./pois/PoiUpdateModalWrapper";
useLineData, import AddPoiModalWindowWrapper from "./pois/AddPoiModalWindowWrapper";
} from "./imports.js"; import useFetchPoiData from "../hooks/useFetchPoiData";
import usePoiTypData from "../hooks/usePoiTypData";
import useMarkerLayers from "../hooks/useMarkerLayers";
import useLayerVisibility from "../hooks/useLayerVisibility";
import useLineData from "../hooks/useLineData.js";
import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices"; import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
//import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices"; //import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
import { useMapComponentState } from "../hooks/useMapComponentState"; import { useMapComponentState } from "../hooks/useMapComponentState";
import { useRecoilState } from "recoil";
import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState"; import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
@@ -190,6 +193,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return [53.111111, 8.4625]; return [53.111111, 8.4625];
} }
}); });
const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State
//---------------------------------------------------------------
useEffect(() => { useEffect(() => {
fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484 fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
@@ -523,11 +528,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
} }
}, [zoomTrigger, map]); }, [zoomTrigger, map]);
useEffect(() => { /* useEffect(() => {
if (mapRef.current && !map) { if (mapRef.current && !map) {
initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights); initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights);
} }
}, [mapRef, map, hasRights, addItemsToMapContextMenu]); }, [mapRef, map, hasRights, addItemsToMapContextMenu]); */
useEffect(() => { useEffect(() => {
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) { if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
@@ -565,6 +570,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setPolylines(newPolylines); setPolylines(newPolylines);
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, currentZoom, currentCenter]); // Ensure currentZoom and currentCenter are included in the dependency array */ }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, currentZoom, currentCenter]); // Ensure currentZoom and currentCenter are included in the dependency array */
//-------------------------------------------- //--------------------------------------------
useEffect(() => {
if (mapRef.current && !map) {
initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
}
}, [mapRef, map, hasRights, setPolylineEventsDisabled]);
useEffect(() => {
if (map) {
if (polylineEventsDisabled) {
disablePolylineEvents(window.polylines);
} else {
enablePolylineEvents(window.polylines, window.lineColors);
}
}
}, [map, polylineEventsDisabled]);
return ( return (
<> <>

2
utils/createAndSetDevices.js
View File

@@ -24,6 +24,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
const jsonResponse = await response1.json(); const jsonResponse = await response1.json();
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
const statusResponse = await response2.json(); const statusResponse = await response2.json();
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow])); const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
@@ -105,6 +106,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
<span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br> <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span> <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
<div class="mt-2">${statusInfo}</div> <div class="mt-2">${statusInfo}</div>
<a href="${station.Link}" target="_blank" style="color: blue;">${BASE_URL}${station.Link}</a>
</div> </div>
`); `);

43
utils/initializeMap.js
View File

@@ -1,4 +1,4 @@
// /utils/initializeMap.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";
@@ -6,29 +6,14 @@ 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 "./contextMenuUtils.js"; import { addContextMenuToMarker, openInNewTab } from "./contextMenuUtils.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js"; // Importiere die Funktionen import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js";
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
const onlineTileLayer = urls.ONLINE_TILE_LAYER;
const TALAS = layers.MAP_LAYERS.TALAS;
const ECI = layers.MAP_LAYERS.ECI;
const ULAF = layers.MAP_LAYERS.ULAF;
const GSMModem = layers.MAP_LAYERS.GSMModem;
const CiscoRouter = layers.MAP_LAYERS.CiscoRouter;
const WAGO = layers.MAP_LAYERS.WAGO;
const Siemens = layers.MAP_LAYERS.Siemens;
const OTDR = layers.MAP_LAYERS.OTDR;
const WDM = layers.MAP_LAYERS.WDM;
const GMA = layers.MAP_LAYERS.GMA;
const Sonstige = layers.MAP_LAYERS.Sonstige;
const TALASICL = layers.MAP_LAYERS.TALASICL;
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
if (mapRef.current) { if (mapRef.current) {
const initMap = L.map(mapRef.current, { const initMap = L.map(mapRef.current, {
center: [53.111111, 8.4625], center: [53.111111, 8.4625],
zoom: 12, zoom: 12,
layers: [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL], layers: [layers.MAP_LAYERS.TALAS, layers.MAP_LAYERS.ECI, layers.MAP_LAYERS.ULAF, layers.MAP_LAYERS.GSMModem],
minZoom: 5, minZoom: 5,
maxZoom: 15, maxZoom: 15,
zoomControl: false, zoomControl: false,
@@ -39,17 +24,14 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
icon: "/img/screen_new.png", icon: "/img/screen_new.png",
callback: (e) => { callback: (e) => {
const lastElementType = localStorage.getItem("lastElementType"); const lastElementType = localStorage.getItem("lastElementType");
if (lastElementType === "polyline") { if (lastElementType === "polyline") {
const storedLink = localStorage.getItem("polylineLink"); const storedLink = localStorage.getItem("polylineLink");
if (storedLink) { if (storedLink) {
console.log("Opening polyline link:", storedLink);
window.open(storedLink, "_blank"); window.open(storedLink, "_blank");
} }
} else { } else {
const clickedMarker = e.relatedTarget; const clickedMarker = e.relatedTarget;
openInNewTab(e, clickedMarker); openInNewTab(e, clickedMarker);
console.log("Opening marker link:", clickedMarker.options.link);
} }
}, },
}, },
@@ -57,7 +39,7 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
], ],
}); });
L.tileLayer(onlineTileLayer, { L.tileLayer(urls.ONLINE_TILE_LAYER, {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(initMap); }).addTo(initMap);
@@ -68,17 +50,14 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
setMap(initMap); setMap(initMap);
setOms(overlappingMarkerSpiderfier); setOms(overlappingMarkerSpiderfier);
// Polyline-Ereignisse aktivieren, wenn das Kontextmenü geschlossen wird // Polyline-Ereignisse deaktivieren, wenn das Kontextmenü geöffnet wird
initMap.on("contextmenu.close", function () { initMap.on("contextmenu.show", function () {
enablePolylineEvents(window.polylines, window.lineColors); //setPolylineEventsDisabled(true);
}); });
initMap.on("zoomend", function () { // Polyline-Ereignisse aktivieren, wenn das Kontextmenü geschlossen wird
if (initMap.getZoom() > 15) { initMap.on("contextmenu.hide", function () {
initMap.setZoom(15); //setPolylineEventsDisabled(false);
} else if (initMap.getZoom() < 5) {
initMap.setZoom(5);
}
}); });
initMap.whenReady(() => { initMap.whenReady(() => {

11
utils/setupPolylines.js
View File

@@ -22,7 +22,7 @@ export function disablePolylineEvents(polylines) {
export function enablePolylineEvents(polylines, lineColors) { export function enablePolylineEvents(polylines, lineColors) {
polylines.forEach((polyline) => { polylines.forEach((polyline) => {
polyline.on("mouseover", (e) => { polyline.on("mouseover", (e) => {
console.log("Mouseover on polyline", polyline.options); //console.log("Mouseover on polyline", polyline.options);
polyline.setStyle({ weight: 14 }); polyline.setStyle({ weight: 14 });
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`; const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
localStorage.setItem("lastElementType", "polyline"); localStorage.setItem("lastElementType", "polyline");
@@ -30,7 +30,7 @@ export function enablePolylineEvents(polylines, lineColors) {
}); });
polyline.on("mouseout", (e) => { polyline.on("mouseout", (e) => {
console.log("Mouseout from polyline", polyline.options); //console.log("Mouseout from polyline", polyline.options);
polyline.setStyle({ weight: 3 }); polyline.setStyle({ weight: 3 });
}); });
}); });
@@ -172,15 +172,16 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
}); });
polyline.on("mouseover", (e) => { polyline.on("mouseover", (e) => {
console.log("Mouseover on polyline", lineData); //console.log("Mouseover on polyline", lineData);
polyline.setStyle({ weight: 14 }); polyline.setStyle({ weight: 14 });
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`; const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
console.log("Link der Linie:", link);
localStorage.setItem("lastElementType", "polyline"); localStorage.setItem("lastElementType", "polyline");
localStorage.setItem("polylineLink", link); localStorage.setItem("polylineLink", link);
}); });
polyline.on("mouseout", (e) => { polyline.on("mouseout", (e) => {
console.log("Mouseout from polyline", lineData); // console.log("Mouseout from polyline", lineData);
polyline.setStyle({ weight: 3 }); polyline.setStyle({ weight: 3 });
}); });