diff --git a/.env.local b/.env.local index 0be25a82f..426f51759 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/utils/mapFeatures.js b/utils/mapFeatures.js index 1d5e6a539..a92d1d1ee 100644 --- a/utils/mapFeatures.js +++ b/utils/mapFeatures.js @@ -3,14 +3,39 @@ import { findClosestPoints } from "./geometryUtils"; import handlePoiSelect from "./handlePoiSelect"; import { updateLocationInDatabase } from "../services/apiService"; import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; -import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier +import { parsePoint } from "./geometryUtils"; import circleIcon from "../components/gisPolylines/icons/CircleIcon"; import startIcon from "../components/gisPolylines/icons/StartIcon"; import endIcon from "../components/gisPolylines/icons/EndIcon"; -import { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons"; import { redrawPolyline } from "./mapUtils"; import { openInNewTab } from "../utils/contextMenuUtils"; +// Funktion zum Deaktivieren der Polyline-Ereignisse +export function disablePolylineEvents(polylines) { + polylines.forEach((polyline) => { + polyline.off("mouseover"); + polyline.off("mouseout"); + }); +} + +// Funktion zum Aktivieren der Polyline-Ereignisse +export function enablePolylineEvents(polylines, lineColors) { + polylines.forEach((polyline) => { + polyline.on("mouseover", (e) => { + 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"); + localStorage.setItem("polylineLink", link); + }); + + polyline.on("mouseout", (e) => { + console.log("Mouseout from polyline", polyline.options); + polyline.setStyle({ weight: 3 }); + }); + }); +} + export const setupMarkers = async ( map, locations, @@ -52,7 +77,7 @@ export const setupMarkers = async ( id: location.idPoi, name: location.name, description: location.description, - link: location.link, // Marker-specific link + link: location.link, }).bindContextMenu({ contextmenu: true, contextmenuWidth: 140, @@ -91,8 +116,11 @@ export const setupMarkers = async ( setCurrentPoi(location); this.openPopup(); + // Deaktiviere Polyline-Ereignisse beim Öffnen des Kontextmenüs des Markers + disablePolylineEvents(window.polylines); + localStorage.setItem("lastElementType", "marker"); - localStorage.setItem("markerLink", this.options.link); // Store the marker-specific link + localStorage.setItem("markerLink", this.options.link); }); marker.on("mouseout", function () { @@ -104,9 +132,7 @@ export const setupMarkers = async ( const newLat = e.target.getLatLng().lat; const newLng = e.target.getLatLng().lng; const markerId = e.target.options.id; - updateLocationInDatabase(markerId, newLat, newLng).then(() => { - // Optional: Update UI or state after dragging - }); + updateLocationInDatabase(markerId, newLat, newLng).then(() => {}); } else { console.error("Drag operation not allowed"); } @@ -231,7 +257,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, const polyline = L.polyline(lineData.coordinates, { color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", - weight: 3, // Standard weight for better recognition + weight: 3, contextmenu: true, contextmenuItems: [ { @@ -251,6 +277,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, ], }).addTo(map); + // Hier wird der Tooltip hinzugefügt + polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { + permanent: false, + direction: "auto", + }); + polyline.on("mouseover", (e) => { console.log("Mouseover on polyline", lineData); polyline.setStyle({ weight: 14 }); @@ -268,5 +300,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, markers.push(...lineMarkers); }); + // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen + window.polylines = polylines; + window.lineColors = lineColors; + return { markers, polylines }; }; diff --git a/utils/mapInitialization.js b/utils/mapInitialization.js index f4c0b5946..7559b0425 100644 --- a/utils/mapInitialization.js +++ b/utils/mapInitialization.js @@ -6,6 +6,7 @@ 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 "./mapFeatures"; // Importiere die Funktionen export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { const offlineTileLayer = urls.OFFLINE_TILE_LAYER; @@ -45,10 +46,10 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems console.log("Opening polyline link:", storedLink); window.open(storedLink, "_blank"); } - //} else if (lastElementType === "marker") { } else { const clickedMarker = e.relatedTarget; openInNewTab(e, clickedMarker); + console.log("Opening marker link:", clickedMarker.options.link); } }, }, @@ -67,6 +68,11 @@ 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); + }); + initMap.on("zoomend", function () { if (initMap.getZoom() > 15) { initMap.setZoom(15);