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/components/MapComponent.js b/components/MapComponent.js index f8bd17234..7e810b3a4 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -1,74 +1,77 @@ // components/MapComponent.js -import { - React, - useEffect, - useRef, - useState, - L, - config, - urls, - OverlappingMarkerSpiderfier, - DataSheet, - useRecoilValue, - useSetRecoilState, - gisStationsStaticDistrictState, - gisSystemStaticState, - mapLayersState, - selectedAreaState, - zoomTriggerState, - AddPoiModalWindow, - poiReadFromDbTriggerAtom, - InformationCircleIcon, - PoiUpdateModal, - selectedPoiState, - currentPoiState, - ToastContainer, - toast, - mapIdState, - userIdState, - poiLayerVisibleState, - plusRoundIcon, - createAndSetDevices, - restoreMapSettings, - checkOverlappingMarkers, - fetchGisStatusStations, - fetchPoiData, - fetchUserRights, - MAP_VERSION, - layers, - initializeMap, - addItemsToMapContextMenu, - useGmaMarkersLayer, - useTalasMarkersLayer, - useEciMarkersLayer, - useGsmModemMarkersLayer, - useCiscoRouterMarkersLayer, - useWagoMarkersLayer, - useSiemensMarkersLayer, - useOtdrMarkersLayer, - useWdmMarkersLayer, - useMessstellenMarkersLayer, - useTalasiclMarkersLayer, - useDauzMarkersLayer, - useSmsfunkmodemMarkersLayer, - useUlafMarkersLayer, - useSonstigeMarkersLayer, - fetchGisStationsStaticDistrict, - fetchGisStationsStatusDistrict, - fetchGisStationsMeasurements, - fetchGisSystemStatic, - setupPolylines, - setupPOIs, - VersionInfoModal, - useFetchPoiData, - usePoiTypData, - useLayerVisibility, - useLineData, -} from "./imports.js"; +import React, { useEffect, useRef, useState, useCallback } from "react"; +import L, { marker } from "leaflet"; +import "leaflet/dist/leaflet.css"; +import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; +import "leaflet-contextmenu"; +import * as config from "../config/config.js"; +import * as urls from "../config/urls.js"; +import "leaflet.smooth_marker_bouncing"; +import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; +import DataSheet from "./DataSheet.js"; +import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; +import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js"; +import { gisSystemStaticState } from "../store/atoms/gisSystemState.js"; +import { mapLayersState } from "../store/atoms/mapLayersState.js"; +import { selectedAreaState } from "../store/atoms/selectedAreaState.js"; +import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js"; +import { poiTypState } from "../store/atoms/poiTypState.js"; +import AddPoiModalWindow from "./pois/AddPoiModalWindow.js"; +import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js"; +import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline' +import PoiUpdateModal from "./pois/PoiUpdateModal.js"; +import { selectedPoiState } from "../store/atoms/poiState.js"; +import { currentPoiState } from "../store/atoms/currentPoiState.js"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js"; +import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js"; +import plusRoundIcon from "./PlusRoundIcon.js"; +import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js"; +import { insertNewPOI, removePOI, handleEditPoi } from "../utils/poiUtils.js"; +import { createAndSetDevices } from "../utils/createAndSetDevices.js"; +import { redrawPolyline, restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js"; +import circleIcon from "./gisPolylines/icons/CircleIcon.js"; +import startIcon from "./gisPolylines/icons/StartIcon.js"; +import endIcon from "./gisPolylines/icons/EndIcon.js"; +import { fetchGisStatusStations, fetchPriorityConfig, fetchPoiData, updateLocationInDatabase, fetchUserRights, fetchDeviceNameById } from "../services/apiService.js"; +import { addContextMenuToMarker } from "../utils/contextMenuUtils.js"; +import { MAP_VERSION } from "../config/settings.js"; +import * as layers from "../config/layers.js"; +import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js"; +import { initializeMap } from "../utils/initializeMap.js"; +import { addItemsToMapContextMenu } from "./useMapContextMenu.js"; +import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook +import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook +import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js"; +import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js"; +import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js"; +import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js"; +import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js"; +import useOtdrMarkersLayer from "../hooks/layers/useOtdrMarkersLayer.js"; +import useWdmMarkersLayer from "../hooks/layers/useWdmMarkersLayer.js"; +import useMessstellenMarkersLayer from "../hooks/layers/useMessstellenMarkersLayer.js"; +import useTalasiclMarkersLayer from "../hooks/layers/useTalasiclMarkersLayer.js"; +import useDauzMarkersLayer from "../hooks/layers/useDauzMarkersLayer.js"; +import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js"; +import useUlafMarkersLayer from "../hooks/layers/useUlafMarkersLayer.js"; +import useSonstigeMarkersLayer from "../hooks/layers/useSonstigeMarkersLayer.js"; +import handlePoiSelect from "../utils/handlePoiSelect.js"; +import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js"; +import { setupPolylines } from "../utils/setupPolylines.js"; +import { setupPOIs } from "../utils/setupPOIs.js"; +import VersionInfoModal from "./VersionInfoModal.js"; +//-------------------------------------------- +import PoiUpdateModalWrapper from "./pois/PoiUpdateModalWrapper"; +import AddPoiModalWindowWrapper from "./pois/AddPoiModalWindowWrapper"; +import useFetchPoiData from "../hooks/useFetchPoiData"; +import usePoiTypData from "../hooks/usePoiTypData"; +import useMarkerLayers from "../hooks/useMarkerLayers"; +import useLayerVisibility from "../hooks/useLayerVisibility"; +import useLineData from "../hooks/useLineData.js"; import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices"; //import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices"; import { useMapComponentState } from "../hooks/useMapComponentState"; -import { useRecoilState } from "recoil"; import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState"; import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; @@ -190,6 +193,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return [53.111111, 8.4625]; } }); + const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State + //--------------------------------------------------------------- useEffect(() => { fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484 @@ -523,11 +528,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }, [zoomTrigger, map]); - useEffect(() => { + /* useEffect(() => { if (mapRef.current && !map) { initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights); } - }, [mapRef, map, hasRights, addItemsToMapContextMenu]); + }, [mapRef, map, hasRights, addItemsToMapContextMenu]); */ useEffect(() => { if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) { @@ -565,6 +570,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setPolylines(newPolylines); }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, currentZoom, currentCenter]); // Ensure currentZoom and currentCenter are included in the dependency array */ //-------------------------------------------- + useEffect(() => { + if (mapRef.current && !map) { + initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled); + } + }, [mapRef, map, hasRights, setPolylineEventsDisabled]); + + useEffect(() => { + if (map) { + if (polylineEventsDisabled) { + disablePolylineEvents(window.polylines); + } else { + enablePolylineEvents(window.polylines, window.lineColors); + } + } + }, [map, polylineEventsDisabled]); return ( <> diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index bdf4cedfb..46321a33a 100644 --- a/utils/createAndSetDevices.js +++ b/utils/createAndSetDevices.js @@ -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 ${station.Area_Short} (${station.Area_Name})
${station.Location_Short} (${station.Location_Name})
${statusInfo}
+ ${BASE_URL}${station.Link} `); diff --git a/utils/initializeMap.js b/utils/initializeMap.js index 34bf5e712..925c2ad54 100644 --- a/utils/initializeMap.js +++ b/utils/initializeMap.js @@ -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: '© OpenStreetMap 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(() => { diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index 1ac42ecdb..0b05ed5ca 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -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 }); });