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

2
utils/createAndSetDevices.js
View File

@@ -24,6 +24,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
const jsonResponse = await response1.json();
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
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]));
@@ -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.Location_Short} </strong> (${station.Location_Name})</span>
<div class="mt-2">${statusInfo}</div>
<a href="${station.Link}" target="_blank" style="color: blue;">${BASE_URL}${station.Link}</a>
</div>
`);

43
utils/initializeMap.js
View File

@@ -1,4 +1,4 @@
// /utils/initializeMap.js
// utils/initializeMap.js
import L from "leaflet";
import "leaflet-contextmenu";
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 layers from "../config/layers.js";
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;
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;
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js";
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
if (mapRef.current) {
const initMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
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,
maxZoom: 15,
zoomControl: false,
@@ -39,17 +24,14 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
icon: "/img/screen_new.png",
callback: (e) => {
const lastElementType = localStorage.getItem("lastElementType");
if (lastElementType === "polyline") {
const storedLink = localStorage.getItem("polylineLink");
if (storedLink) {
console.log("Opening polyline link:", storedLink);
window.open(storedLink, "_blank");
}
} else {
const clickedMarker = e.relatedTarget;
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',
}).addTo(initMap);
@@ -68,17 +50,14 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
setMap(initMap);
setOms(overlappingMarkerSpiderfier);
// Polyline-Ereignisse aktivieren, wenn das Kontextmenü geschlossen wird
initMap.on("contextmenu.close", function () {
enablePolylineEvents(window.polylines, window.lineColors);
// Polyline-Ereignisse deaktivieren, wenn das Kontextmenü geöffnet wird
initMap.on("contextmenu.show", function () {
//setPolylineEventsDisabled(true);
});
initMap.on("zoomend", function () {
if (initMap.getZoom() > 15) {
initMap.setZoom(15);
} else if (initMap.getZoom() < 5) {
initMap.setZoom(5);
}
// Polyline-Ereignisse aktivieren, wenn das Kontextmenü geschlossen wird
initMap.on("contextmenu.hide", function () {
//setPolylineEventsDisabled(false);
});
initMap.whenReady(() => {

11
utils/setupPolylines.js
View File

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