Merge branch 'temp-branch2' into feature/main-contextmenu-line

.env.local

@@ -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_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_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"

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 };

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.");

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 { redrawPolyline } from "./mapUtils";
-import { openInNewTab } from "../utils/contextMenuUtils"; // Importiere die Funktion, wenn nicht schon vorhanden
+import { openInNewTab } from "../utils/contextMenuUtils";
-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) };
-};
 
-//----------------------------------
 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(`
-              <div>
+          <div>
-                <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
+            <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
-                ${deviceName}<br>
+            ${deviceName}<br>
-                ${poiTypName}<br>
+            ${poiTypName}<br>
-              </div>
+          </div>
-            `);
+        `);
 
         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);

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 { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils";
-import { findNearestPolyline } from "./geometryUtils"; // Importiere die Funktion zur Suche der nächsten Linie
-
-let lastClickedTarget = null; // Variable zur Zwischenspeicherung des Ziels
 
 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) {
+            if (lastElementType === "polyline") {
-              console.error("Kein gültiges Ziel im Kontextmenü");
+              const storedLink = localStorage.getItem("polylineLink");
-              return;
+              if (storedLink) {
-            }
+                console.log("Opening polyline link:", storedLink);
-
+                window.open(storedLink, "_blank");
-            // Prüfen, ob das Element eine Station (Marker) oder Linie (Polyline) ist
+              }
-            if (clickedTarget instanceof L.Marker) {
+              //} else if (lastElementType === "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);
             } 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);