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/hooks/useLineData.js b/hooks/useLineData.js index be5ebae98..129e32ae9 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -25,7 +25,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { // Sortiere die Meldungen nach Level, damit die höchste Priorität (kleinster Level) zuerst kommt const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); - //console.log("Sortierte Daten:", sortedStatis); + console.log("Sortierte Daten:", sortedStatis); // Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level const filteredStatis = []; @@ -45,7 +45,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }); - //console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis); + console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis); filteredStatis.forEach((statis) => { const key = `${statis.IdLD}-${statis.Modul}`; @@ -147,10 +147,10 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { fetchData(); // Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen - const intervalId = setInterval(fetchData, 20000); + //const intervalId = setInterval(fetchData, 20000); // Räumt das Intervall auf, wenn die Komponente entladen wird - return () => clearInterval(intervalId); + //return () => clearInterval(intervalId); }, [webserviceGisLinesStatusUrl, setLineStatusData]); return { lineColors, tooltipContents }; diff --git a/utils/geometryUtils.js b/utils/geometryUtils.js index b66774c01..893e0bec7 100644 --- a/utils/geometryUtils.js +++ b/utils/geometryUtils.js @@ -1,5 +1,22 @@ // utils/geometryUtils.js +/** + * Parses a point string in the format "POINT (longitude latitude)" and returns an object with latitude and longitude as numbers. + * @param {string} position - The position string in the format "POINT (longitude latitude)". + * @returns {{latitude: number, longitude: number}} An object containing the latitude and longitude as numbers. + */ +export const parsePoint = (position) => { + const [longitude, latitude] = position.slice(6, -1).split(" "); + return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; +}; + +/** + * Finds the closest points on a polyline to a new point. + * @param {Array} coordinates - The coordinates of the polyline. + * @param {Object} newPoint - The new point (with latitude and longitude). + * @param {Object} map - The map object. + * @returns {Array} The closest pair of points on the polyline. + */ export const findClosestPoints = (coordinates, newPoint, map) => { if (!map) { console.error("Map is not defined. Cannot find closest points."); diff --git a/utils/mapFeatures.js b/utils/mapFeatures.js index 09b98b36f..1d5e6a539 100644 --- a/utils/mapFeatures.js +++ b/utils/mapFeatures.js @@ -2,22 +2,15 @@ import { findClosestPoints } from "./geometryUtils"; import handlePoiSelect from "./handlePoiSelect"; import { updateLocationInDatabase } from "../services/apiService"; -import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; // Import removeMarker here +import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; +import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier 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 redrawPolyline here -import { openInNewTab } from "../utils/contextMenuUtils"; // Importiere die Funktion, wenn nicht schon vorhanden -import { useState } from "react"; -//---------------------------------- -// geometryUtils.js -export const parsePoint = (position) => { - const [longitude, latitude] = position.slice(6, -1).split(" "); - return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; -}; +import { redrawPolyline } from "./mapUtils"; +import { openInNewTab } from "../utils/contextMenuUtils"; -//---------------------------------- export const setupMarkers = async ( map, locations, @@ -48,8 +41,6 @@ export const setupMarkers = async ( const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi); const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png"; - //console.log("Setting up marker for location:", location); - const marker = L.marker([latitude, longitude], { icon: L.icon({ iconUrl: iconUrl, @@ -61,6 +52,7 @@ export const setupMarkers = async ( id: location.idPoi, name: location.name, description: location.description, + link: location.link, // Marker-specific link }).bindContextMenu({ contextmenu: true, contextmenuWidth: 140, @@ -74,12 +66,12 @@ export const setupMarkers = async ( }); marker.bindPopup(` -
- ${location.description || "Unbekannt"}
- ${deviceName}
- ${poiTypName}
-
- `); +
+ ${location.description || "Unbekannt"}
+ ${deviceName}
+ ${poiTypName}
+
+ `); marker.on("mouseover", function () { handlePoiSelect( @@ -98,6 +90,9 @@ export const setupMarkers = async ( ); setCurrentPoi(location); this.openPopup(); + + localStorage.setItem("lastElementType", "marker"); + localStorage.setItem("markerLink", this.options.link); // Store the marker-specific link }); marker.on("mouseout", function () { @@ -110,7 +105,7 @@ export const setupMarkers = async ( const newLng = e.target.getLatLng().lng; const markerId = e.target.options.id; updateLocationInDatabase(markerId, newLat, newLng).then(() => { - //onLocationUpdate(markerId, newLat, newLng); + // Optional: Update UI or state after dragging }); } else { console.error("Drag operation not allowed"); @@ -126,7 +121,6 @@ export const setupMarkers = async ( } } }; -//---------------------------------- export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => { const markers = []; @@ -134,6 +128,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, linePositions.forEach((lineData, lineIndex) => { const lineMarkers = []; + lineData.coordinates.forEach((coord, index) => { let icon = circleIcon; if (index === 0) { @@ -166,9 +161,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }); updatedPolyline.on("mouseover", () => { - updatedPolyline.setStyle({ weight: 10 }); + updatedPolyline.setStyle({ weight: 20 }); updatedPolyline.bringToFront(); }); + updatedPolyline.on("mouseout", () => { updatedPolyline.setStyle({ weight: 3 }); }); @@ -235,18 +231,9 @@ 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 contextmenu: true, contextmenuItems: [ - { - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: (e) => { - console.log("lineData idLD:", lineData.idLD); - const idLD = lineData.idLD; // Angenommen, die ID der Station ist in lineData vorhanden - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${idLD}`; - window.open(link, "_blank"); // Öffne direkt den Link in einem neuen Tab - }, - }, { text: "Stützpunkt hinzufügen", icon: "/img/icons/gisLines/add-support-point.svg", @@ -265,17 +252,16 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }).addTo(map); polyline.on("mouseover", (e) => { - polyline.setStyle({ weight: 10 }); + console.log("Mouseover on polyline", lineData); + polyline.setStyle({ weight: 14 }); + const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`; + localStorage.setItem("lastElementType", "polyline"); + localStorage.setItem("polylineLink", link); }); polyline.on("mouseout", (e) => { + console.log("Mouseout from polyline", lineData); polyline.setStyle({ weight: 3 }); - polyline.setStyle({ color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000" }); - }); - - polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { - permanent: false, - direction: "auto", }); polylines.push(polyline); diff --git a/utils/mapInitialization.js b/utils/mapInitialization.js index ffbc761b5..f4c0b5946 100644 --- a/utils/mapInitialization.js +++ b/utils/mapInitialization.js @@ -5,10 +5,7 @@ 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 { openInNewTab } from "../utils/contextMenuUtils.js"; -import { findNearestPolyline } from "./geometryUtils"; // Importiere die Funktion zur Suche der nächsten Linie - -let lastClickedTarget = null; // Variable zur Zwischenspeicherung des Ziels +import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils"; export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { const offlineTileLayer = urls.OFFLINE_TILE_LAYER; @@ -37,43 +34,24 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems contextmenu: true, contextmenuItems: [ { - text: "Station Öffnen (Tab)", + text: "Station öffnen (Tab)", icon: "/img/screen_new.png", callback: (e) => { - const clickedTarget = lastClickedTarget || e.relatedTarget || e.layer; + const lastElementType = localStorage.getItem("lastElementType"); - if (!clickedTarget) { - console.error("Kein gültiges Ziel im Kontextmenü"); - return; - } - - // Prüfen, ob das Element eine Station (Marker) oder Linie (Polyline) ist - if (clickedTarget instanceof L.Marker) { - console.log("Marker angeklickt"); - openInNewTab(e, clickedTarget); - } else if (clickedTarget instanceof L.Polyline) { - console.log("Linie angeklickt:", clickedTarget.options.idLD); // Hier kannst du die ID oder andere Optionen der Polyline verwenden - // Optional: Funktion zum Öffnen der Linie implementieren - openInNewTab(e, clickedTarget); + if (lastElementType === "polyline") { + const storedLink = localStorage.getItem("polylineLink"); + if (storedLink) { + console.log("Opening polyline link:", storedLink); + window.open(storedLink, "_blank"); + } + //} else if (lastElementType === "marker") { } else { - console.error("Unbekanntes Element"); + const clickedMarker = e.relatedTarget; + openInNewTab(e, clickedMarker); } }, }, - - /* callback: (e) => { - //Wenn Kein Station oder ein Station ist - const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat - openInNewTab(e, clickedMarker); - //wenn Linie ist (polyline) - const clickedTarget = lastClickedTarget || findNearestPolyline(initMap, e.latlng); // Verwende zwischengespeichertes Ziel oder die nächstgelegene Linie - if (clickedTarget) { - openInNewTab(e, clickedTarget); // Gemeinsame Funktion für Linien und Stationen - } else { - console.error("Kein gültiges Ziel im Kontextmenü"); - } - }, - }, */ "-", ], }); @@ -97,31 +75,6 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems } }); - // Speichere das Ziel, wenn die Maus über eine Linie oder einen Marker fährt - initMap.on("mouseover", function (e) { - if (e.layer instanceof L.Polyline || e.layer instanceof L.Marker) { - lastClickedTarget = e.layer; // Speichere das zuletzt überfahrene Element - } - }); - - // Kontextmenü-Event - initMap.on("contextmenu", function (e) { - const clickedTarget = lastClickedTarget || findNearestPolyline(initMap, e.latlng) || e.relatedTarget || e.layer; // Verwende entweder das zwischengespeicherte Ziel oder die nächstgelegene Linie - if (!clickedTarget) { - console.error("Kein gültiges Ziel im Kontextmenü"); - return; - } - - if (clickedTarget instanceof L.Polyline) { - console.log("ID der Linie (idLD):", clickedTarget.options.idLD); - // Das Kontextmenü wird nun geöffnet und beim Klicken wird `openInNewTab` ausgeführt - } else if (clickedTarget instanceof L.Marker) { - openInNewTab(e, clickedTarget); - } else { - console.error("Fehler: Ungültiges Ziel."); - } - }); - initMap.whenReady(() => { console.log("Karte ist jetzt bereit und initialisiert."); addItemsToMapContextMenu(hasRights);