From de4a9bc7c04093042eec52ca2003e0814d424e41 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 2 Sep 2024 12:22:11 +0200 Subject: [PATCH 1/5] =?UTF-8?q?TypeError:=20Cannot=20read=20properties=20o?= =?UTF-8?q?f=20null=20(reading=20'contextmenu')=20in=20useLineData=20->=20?= =?UTF-8?q?einmal=20zur=C3=BCck=20dann=20ist=20die=20Fehler=20weg?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hooks/useLineData.js | 57 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/hooks/useLineData.js b/hooks/useLineData.js index 4dd0c7cc5..4ec4d83ee 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -1,4 +1,3 @@ -// /hooks/useLineData.js import { useEffect, useState } from "react"; import { SERVER_URL } from "../config/urls"; @@ -12,23 +11,43 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { console.log("Daten werden abgerufen..."); const response1 = await fetch(webserviceGisLinesStatusUrl); const data1 = await response1.json(); - console.log("Daten vom Webservice:", data1); const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`); const data2 = await response2.json(); - console.log("GIS Linien Daten:", data2); - - // Abrufen der Namen basierend auf idLD const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/station/getAllStationsNames`); const namesData = await response3.json(); - console.log("Namen der Linien:", namesData); const colorsByModule = {}; const newTooltipContents = {}; const valueMap = {}; + // Logik zur Gruppierung der Daten logGroupedData(data1.Statis); - data1.Statis.forEach((statis) => { + // 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); + + // Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level + const filteredStatis = []; + const seenKeys = new Set(); + + sortedStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; + + if (statis.Level > 0) { + if (!seenKeys.has(key)) { + seenKeys.add(key); + filteredStatis.push(statis); // Behalte das Objekt mit dem niedrigsten Level (höchste Priorität) + } + } else { + // Für Level -1 oder nicht relevante Meldungen einfach hinzufügen + filteredStatis.push(statis); + } + }); + + console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis); + + filteredStatis.forEach((statis) => { const key = `${statis.IdLD}-${statis.Modul}`; if (!valueMap[key]) { valueMap[key] = { @@ -37,6 +56,8 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { schleifenwert: undefined, }; } + + // Sammle Messwert und Schleifenwert if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) { valueMap[key].messwert = statis.Value; } @@ -48,22 +69,26 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }); - data1.Statis.reverse().forEach((statis) => { + // Jetzt durch alle Prioritätslevel gehen und die Farben sowie Meldungen korrekt setzen + filteredStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); + if (matchingLine) { const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor; - const key = `${matchingLine.idLD}-${matchingLine.idModul}`; // Sicherstellen, dass der Key eindeutig ist const values = valueMap[key]; if (!values) { - console.error(`No values found for key: ${key}`); // Debug: Überprüfe, ob Werte existieren + console.error(`Keine Werte gefunden für Key: ${key}`); return; } + // Nachrichtenanzeige const messageDisplay = values.messages.map((msg) => (msg ? `${msg}
` : "")).join(""); const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; - colorsByModule[key] = prioColor; // Stelle sicher, dass der Key richtig verwendet wird + // Setze die Farbe und Tooltip für jede Linie (für alle Prioritätslevel) + colorsByModule[key] = prioColor; newTooltipContents[key] = `
${statis.ModulName || "Unknown"} @@ -72,7 +97,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
Slot: ${statis.Modul || "N/A"}
- Station: ${namesData[matchingLine.idLD] || "N/A"} + Station: ${namesData[matchingLine.idLD] || "N/A"}
@@ -87,6 +112,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }); + // Setze die Farben und Tooltip-Inhalte setLineColors(colorsByModule); setTooltipContents(newTooltipContents); setLineStatusData(data1.Statis); @@ -96,11 +122,18 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { }; fetchData(); + + // Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen + const intervalId = setInterval(fetchData, 20000); + + // Räumt das Intervall auf, wenn die Komponente entladen wird + return () => clearInterval(intervalId); }, [webserviceGisLinesStatusUrl, setLineStatusData]); return { lineColors, tooltipContents }; }; +// Funktion zur Gruppierung der Daten function logGroupedData(statisList) { const grouped = statisList.reduce((acc, item) => { const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item; From 1ffca34cdcabde35668565f8b8ecee6ec03c7e40 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 2 Sep 2024 12:30:25 +0200 Subject: [PATCH 2/5] ohne contextmenu Fehler in useLineData --- hooks/useLineData.js | 57 ++++++++++---------------------------------- 1 file changed, 12 insertions(+), 45 deletions(-) diff --git a/hooks/useLineData.js b/hooks/useLineData.js index 4ec4d83ee..4dd0c7cc5 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -1,3 +1,4 @@ +// /hooks/useLineData.js import { useEffect, useState } from "react"; import { SERVER_URL } from "../config/urls"; @@ -11,43 +12,23 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { console.log("Daten werden abgerufen..."); const response1 = await fetch(webserviceGisLinesStatusUrl); const data1 = await response1.json(); + console.log("Daten vom Webservice:", data1); const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`); const data2 = await response2.json(); + console.log("GIS Linien Daten:", data2); + + // Abrufen der Namen basierend auf idLD const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/station/getAllStationsNames`); const namesData = await response3.json(); + console.log("Namen der Linien:", namesData); const colorsByModule = {}; const newTooltipContents = {}; const valueMap = {}; - // Logik zur Gruppierung der Daten logGroupedData(data1.Statis); - // 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); - - // Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level - const filteredStatis = []; - const seenKeys = new Set(); - - sortedStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; - - if (statis.Level > 0) { - if (!seenKeys.has(key)) { - seenKeys.add(key); - filteredStatis.push(statis); // Behalte das Objekt mit dem niedrigsten Level (höchste Priorität) - } - } else { - // Für Level -1 oder nicht relevante Meldungen einfach hinzufügen - filteredStatis.push(statis); - } - }); - - console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis); - - filteredStatis.forEach((statis) => { + data1.Statis.forEach((statis) => { const key = `${statis.IdLD}-${statis.Modul}`; if (!valueMap[key]) { valueMap[key] = { @@ -56,8 +37,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { schleifenwert: undefined, }; } - - // Sammle Messwert und Schleifenwert if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) { valueMap[key].messwert = statis.Value; } @@ -69,26 +48,22 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }); - // Jetzt durch alle Prioritätslevel gehen und die Farben sowie Meldungen korrekt setzen - filteredStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; + data1.Statis.reverse().forEach((statis) => { const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); - if (matchingLine) { const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor; + const key = `${matchingLine.idLD}-${matchingLine.idModul}`; // Sicherstellen, dass der Key eindeutig ist const values = valueMap[key]; if (!values) { - console.error(`Keine Werte gefunden für Key: ${key}`); + console.error(`No values found for key: ${key}`); // Debug: Überprüfe, ob Werte existieren return; } - // Nachrichtenanzeige const messageDisplay = values.messages.map((msg) => (msg ? `${msg}
` : "")).join(""); const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; - // Setze die Farbe und Tooltip für jede Linie (für alle Prioritätslevel) - colorsByModule[key] = prioColor; + colorsByModule[key] = prioColor; // Stelle sicher, dass der Key richtig verwendet wird newTooltipContents[key] = `
${statis.ModulName || "Unknown"} @@ -97,7 +72,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
Slot: ${statis.Modul || "N/A"}
- Station: ${namesData[matchingLine.idLD] || "N/A"} + Station: ${namesData[matchingLine.idLD] || "N/A"}
@@ -112,7 +87,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }); - // Setze die Farben und Tooltip-Inhalte setLineColors(colorsByModule); setTooltipContents(newTooltipContents); setLineStatusData(data1.Statis); @@ -122,18 +96,11 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { }; fetchData(); - - // Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen - const intervalId = setInterval(fetchData, 20000); - - // Räumt das Intervall auf, wenn die Komponente entladen wird - return () => clearInterval(intervalId); }, [webserviceGisLinesStatusUrl, setLineStatusData]); return { lineColors, tooltipContents }; }; -// Funktion zur Gruppierung der Daten function logGroupedData(statisList) { const grouped = statisList.reduce((acc, item) => { const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item; From 9724c886b2598dca41149748a58a395ea97adc38 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 2 Sep 2024 13:58:59 +0200 Subject: [PATCH 3/5] =?UTF-8?q?Station=20=C3=B6ffnen=20zweimal=20sichtbar?= =?UTF-8?q?=20f=C3=BCr=20Marker=20und=20polyline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hooks/useLineData.js | 57 ++++++++++++++++++++++++++++++++++---------- utils/mapFeatures.js | 8 +++---- 2 files changed, 49 insertions(+), 16 deletions(-) diff --git a/hooks/useLineData.js b/hooks/useLineData.js index 4dd0c7cc5..46c530e6d 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -1,4 +1,3 @@ -// /hooks/useLineData.js import { useEffect, useState } from "react"; import { SERVER_URL } from "../config/urls"; @@ -12,23 +11,43 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { console.log("Daten werden abgerufen..."); const response1 = await fetch(webserviceGisLinesStatusUrl); const data1 = await response1.json(); - console.log("Daten vom Webservice:", data1); const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`); const data2 = await response2.json(); - console.log("GIS Linien Daten:", data2); - - // Abrufen der Namen basierend auf idLD const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/station/getAllStationsNames`); const namesData = await response3.json(); - console.log("Namen der Linien:", namesData); const colorsByModule = {}; const newTooltipContents = {}; const valueMap = {}; + // Logik zur Gruppierung der Daten logGroupedData(data1.Statis); - data1.Statis.forEach((statis) => { + // 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); + + // Filtere Objekte mit gleichem IdLD und Modul, und Level > 0, und entferne die Objekte mit dem höchsten Level + const filteredStatis = []; + const seenKeys = new Set(); + + sortedStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; + + if (statis.Level > 0) { + if (!seenKeys.has(key)) { + seenKeys.add(key); + filteredStatis.push(statis); // Behalte das Objekt mit dem niedrigsten Level (höchste Priorität) + } + } else { + // Für Level -1 oder nicht relevante Meldungen einfach hinzufügen + filteredStatis.push(statis); + } + }); + + console.log("Gefilterte Daten (Objekte mit höchstem Level entfernt):", filteredStatis); + + filteredStatis.forEach((statis) => { const key = `${statis.IdLD}-${statis.Modul}`; if (!valueMap[key]) { valueMap[key] = { @@ -37,6 +56,8 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { schleifenwert: undefined, }; } + + // Sammle Messwert und Schleifenwert if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) { valueMap[key].messwert = statis.Value; } @@ -48,22 +69,26 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }); - data1.Statis.reverse().forEach((statis) => { + // Jetzt durch alle Prioritätslevel gehen und die Farben sowie Meldungen korrekt setzen + filteredStatis.forEach((statis) => { + const key = `${statis.IdLD}-${statis.Modul}`; const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); + if (matchingLine) { const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor; - const key = `${matchingLine.idLD}-${matchingLine.idModul}`; // Sicherstellen, dass der Key eindeutig ist const values = valueMap[key]; if (!values) { - console.error(`No values found for key: ${key}`); // Debug: Überprüfe, ob Werte existieren + console.error(`Keine Werte gefunden für Key: ${key}`); return; } + // Nachrichtenanzeige const messageDisplay = values.messages.map((msg) => (msg ? `${msg}
` : "")).join(""); const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; - colorsByModule[key] = prioColor; // Stelle sicher, dass der Key richtig verwendet wird + // Setze die Farbe und Tooltip für jede Linie (für alle Prioritätslevel) + colorsByModule[key] = prioColor; newTooltipContents[key] = `
${statis.ModulName || "Unknown"} @@ -72,7 +97,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
Slot: ${statis.Modul || "N/A"}
- Station: ${namesData[matchingLine.idLD] || "N/A"} + Station: ${namesData[matchingLine.idLD] || "N/A"}
@@ -87,6 +112,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }); + // Setze die Farben und Tooltip-Inhalte setLineColors(colorsByModule); setTooltipContents(newTooltipContents); setLineStatusData(data1.Statis); @@ -96,11 +122,18 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { }; fetchData(); + + // Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen + //const intervalId = setInterval(fetchData, 20000); + + // Räumt das Intervall auf, wenn die Komponente entladen wird + //return () => clearInterval(intervalId); }, [webserviceGisLinesStatusUrl, setLineStatusData]); return { lineColors, tooltipContents }; }; +// Funktion zur Gruppierung der Daten function logGroupedData(statisList) { const grouped = statisList.reduce((acc, item) => { const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item; diff --git a/utils/mapFeatures.js b/utils/mapFeatures.js index e877098e3..859f2f8c0 100644 --- a/utils/mapFeatures.js +++ b/utils/mapFeatures.js @@ -135,8 +135,8 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, const checkMouseOverMenu = () => { if (!isMouseOverMenuItem) { - showContextMenuItemByIndex(map, 0); - showContextMenuItemByIndex(map, 1); + //showContextMenuItemByIndex(map, 0); + //showContextMenuItemByIndex(map, 1); closeContextMenu(); // Kontextmenü schließen, wenn die Maus nicht mehr darüber ist } }; @@ -300,8 +300,8 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, polyline.on("mouseover", (e) => { polyline.setStyle({ weight: 20 }); - hideContextMenuItemByIndex(map, 0); - hideContextMenuItemByIndex(map, 1); + //hideContextMenuItemByIndex(map, 0); + //hideContextMenuItemByIndex(map, 1); }); polyline.on("mousedown", (e) => { From 17a8075d739134a060378450dc6e34961d3be712 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 2 Sep 2024 15:58:42 +0200 Subject: [PATCH 4/5] =?UTF-8?q?Station=20=C3=B6ffnen=20(Tab)=20f=C3=BCr=20?= =?UTF-8?q?polylines=20ok,=20aber=20f=C3=BCr=20marker=20muss=20noch=20opti?= =?UTF-8?q?on.link=20nehmen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/geometryUtils.js | 17 +++++ utils/mapFeatures.js | 137 +++++++------------------------------ utils/mapInitialization.js | 21 ++++-- 3 files changed, 55 insertions(+), 120 deletions(-) diff --git a/utils/geometryUtils.js b/utils/geometryUtils.js index 35bfdd668..7e2b0d5c3 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 859f2f8c0..89006586c 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, @@ -74,12 +65,12 @@ export const setupMarkers = async ( }); marker.bindPopup(` -
- ${location.description || "Unbekannt"}
- ${deviceName}
- ${poiTypName}
-
- `); +
+ ${location.description || "Unbekannt"}
+ ${deviceName}
+ ${poiTypName}
+
+ `); marker.on("mouseover", function () { handlePoiSelect( @@ -98,6 +89,8 @@ export const setupMarkers = async ( ); setCurrentPoi(location); this.openPopup(); + + localStorage.setItem("lastElementType", "marker"); }); marker.on("mouseout", function () { @@ -110,7 +103,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,48 +119,14 @@ export const setupMarkers = async ( } } }; -//---------------------------------- export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => { const markers = []; const polylines = []; - let isMouseOverMenuItem = false; - - const checkMouseOverMenu = () => { - if (!isMouseOverMenuItem) { - //showContextMenuItemByIndex(map, 0); - //showContextMenuItemByIndex(map, 1); - closeContextMenu(); // Kontextmenü schließen, wenn die Maus nicht mehr darüber ist - } - }; - - const handleMouseOverMenuItem = () => { - isMouseOverMenuItem = true; - }; - - const handleMouseOutMenuItem = () => { - isMouseOverMenuItem = false; - setTimeout(checkMouseOverMenu, 500); // kleine Verzögerung, um sicherzustellen, dass es keine schnellen Bewegungen sind - }; - - const closeContextMenu = () => { - const contextMenuElement = document.querySelector(".leaflet-contextmenu"); - if (contextMenuElement) { - contextMenuElement.style.display = "none"; // Kontextmenü ausblenden - } - }; - - const handleOutsideClick = (event) => { - const contextMenuElement = document.querySelector(".leaflet-contextmenu"); - if (contextMenuElement && !contextMenuElement.contains(event.target)) { - closeContextMenu(); // Kontextmenü schließen, wenn der Klick außerhalb stattfindet - } - }; - - document.addEventListener("mousedown", handleOutsideClick); linePositions.forEach((lineData, lineIndex) => { const lineMarkers = []; + lineData.coordinates.forEach((coord, index) => { let icon = circleIcon; if (index === 0) { @@ -200,9 +159,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 }); }); @@ -269,18 +229,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", @@ -299,63 +250,21 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }).addTo(map); polyline.on("mouseover", (e) => { - polyline.setStyle({ weight: 20 }); - //hideContextMenuItemByIndex(map, 0); - //hideContextMenuItemByIndex(map, 1); - }); - - polyline.on("mousedown", (e) => { - polyline.setStyle({ weight: 20 }); - }); - - polyline.on("mouseup", (e) => { - polyline.setStyle({ weight: 20 }); + 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" }); - setTimeout(checkMouseOverMenu, 500); - }); - - polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { - permanent: false, - direction: "auto", }); polylines.push(polyline); markers.push(...lineMarkers); }); - // Add listeners to the context menu items - const contextMenuElement = document.querySelector(".leaflet-contextmenu"); // Assuming the context menu class is 'leaflet-contextmenu' - - if (contextMenuElement) { - contextMenuElement.addEventListener("mouseover", handleMouseOverMenuItem); - contextMenuElement.addEventListener("mouseout", handleMouseOutMenuItem); - } - return { markers, polylines }; }; - -// Funktion zum Ausblenden eines Kontextmenüelements nach Index -const hideContextMenuItemByIndex = (map, index) => { - const items = map.contextmenu._items; - if (index >= 0 && index < items.length) { - const itemElement = items[index].el; - if (itemElement) { - itemElement.style.display = "none"; // Verstecke das Element - } - } -}; - -// Funktion zum Einblenden eines Kontextmenüelements nach Index -const showContextMenuItemByIndex = (map, index) => { - const items = map.contextmenu._items; - if (index >= 0 && index < items.length) { - const itemElement = items[index].el; - if (itemElement) { - itemElement.style.display = ""; // Zeige das Element wieder an - } - } -}; diff --git a/utils/mapInitialization.js b/utils/mapInitialization.js index 47105a1d7..5ec1d6030 100644 --- a/utils/mapInitialization.js +++ b/utils/mapInitialization.js @@ -1,18 +1,15 @@ // /utils/mapInitialization.js import L from "leaflet"; -//import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; import "leaflet-contextmenu"; 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 { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils.js"; +import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils"; export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { const offlineTileLayer = urls.OFFLINE_TILE_LAYER; - //const offlineTileLayer = process.env.OFFLINE_TILE_LAYER; const onlineTileLayer = urls.ONLINE_TILE_LAYER; - //const onlineTileLayer = process.env.ONLINE_TILE_LAYER; const TALAS = layers.MAP_LAYERS.TALAS; const ECI = layers.MAP_LAYERS.ECI; const ULAF = layers.MAP_LAYERS.ULAF; @@ -40,8 +37,20 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems text: "Station öffnen (Tab)", icon: "/img/screen_new.png", callback: (e) => { - const clickedMarker = e.relatedTarget; - openInNewTab(e, clickedMarker); + 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 if (lastElementType === "marker") { + const clickedItem = e.relatedTarget; + if (clickedItem instanceof L.Marker) { + openInNewTab(e, clickedItem); + } + } }, }, "-", From 8500be8d5a4adcebd44fd051270a0d5080eef5ee Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 2 Sep 2024 20:20:22 +0200 Subject: [PATCH 5/5] =?UTF-8?q?Station=20=C3=B6ffnen=20(Tab)=20funktionier?= =?UTF-8?q?t=20f=C3=BCr=20polylines=20und=20Stationen(Markers)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.local | 42 +++++++++++++++++++------------------- utils/mapFeatures.js | 2 ++ utils/mapInitialization.js | 9 ++++---- 3 files changed, 27 insertions(+), 26 deletions(-) diff --git a/.env.local b/.env.local index bda81a792..96139ffad 100644 --- a/.env.local +++ b/.env.local @@ -17,30 +17,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 89006586c..1d5e6a539 100644 --- a/utils/mapFeatures.js +++ b/utils/mapFeatures.js @@ -52,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, @@ -91,6 +92,7 @@ export const setupMarkers = async ( this.openPopup(); localStorage.setItem("lastElementType", "marker"); + localStorage.setItem("markerLink", this.options.link); // Store the marker-specific link }); marker.on("mouseout", function () { diff --git a/utils/mapInitialization.js b/utils/mapInitialization.js index 5ec1d6030..f4c0b5946 100644 --- a/utils/mapInitialization.js +++ b/utils/mapInitialization.js @@ -45,11 +45,10 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems console.log("Opening polyline link:", storedLink); window.open(storedLink, "_blank"); } - } else if (lastElementType === "marker") { - const clickedItem = e.relatedTarget; - if (clickedItem instanceof L.Marker) { - openInNewTab(e, clickedItem); - } + //} else if (lastElementType === "marker") { + } else { + const clickedMarker = e.relatedTarget; + openInNewTab(e, clickedMarker); } }, },