diff --git a/components/MapComponent - Kopie.js b/components/MapComponent - Kopie.js deleted file mode 100644 index 53b86cf72..000000000 --- a/components/MapComponent - Kopie.js +++ /dev/null @@ -1,732 +0,0 @@ -// components/MapComponent.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/addContextMenuToMarker.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 useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer"; - -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 { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState"; -import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; -import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; - -const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { - const polylineVisible = useRecoilValue(polylineLayerVisibleState); - const [editMode, setEditMode] = useState(false); // editMode Zustand - const { deviceName, setDeviceName } = useMapComponentState(); - const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp"); - //const [deviceName, setDeviceName] = useState(""); - const [locationDeviceData, setLocationDeviceData] = useState([]); - const [priorityConfig, setPriorityConfig] = useState([]); - const [menuItemAdded, setMenuItemAdded] = useState(false); - const poiLayerVisible = useRecoilValue(poiLayerVisibleState); - const [isRightsLoaded, setIsRightsLoaded] = useState(false); - const [hasRights, setHasRights] = useState(false); - const [mapId, setMapId] = useRecoilState(mapIdState); - const [userId, setUserId] = useRecoilState(userIdState); - const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false); - const [userRights, setUserRights] = useState(null); - const setSelectedPoi = useSetRecoilState(selectedPoiState); - const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false); - const [currentPoiData, setCurrentPoiData] = useState(null); - const setCurrentPoi = useSetRecoilState(currentPoiState); - const [showVersionInfoModal, setShowVersionInfoModal] = useState(false); - const zoomTrigger = useRecoilValue(zoomTriggerState); - const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false); - const [poiTypMap, setPoiTypMap] = useState(new Map()); - const [showPopup, setShowPopup] = useState(false); - const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom); - const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker - const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte - const [map, setMap] = useState(null); // Zustand der Karteninstanz - const [oms, setOms] = useState(null); // State für OMS-Instanz - const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState); - const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState([]); // Zustand für Statusdaten - const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten - const [GisSystemStatic, setGisSystemStatic] = useRecoilState(gisSystemStaticState); // Zustand für Systemdaten - // Konstanten für die URLs - const mapGisStationsStaticDistrictUrl = config.mapGisStationsStaticDistrictUrl; - const mapGisStationsStatusDistrictUrl = config.mapGisStationsStatusDistrictUrl; - const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl; - const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; - const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl; - //console.log("priorityConfig in MapComponent1: ", priorityConfig); - /* - const talasMarkers = useTalasMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const eciMarkers = useEciMarkersLayer(map, eciMarkers, oms, layers.MAP_LAYERS.ECI); - const gsmModemMarkers = useGsmModemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const ciscoRouterMarkers = useCiscoRouterMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const wagoMarkers = useWagoMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const siemensMarkers = useSiemensMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const otdrMarkers = useOtdrMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const wdmMarkers = useWdmMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const messstellenMarkers = useMessstellenMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const talasiclMarkers = useTalasiclMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const dauzMarkers = useDauzMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const smsfunkmodemMarkers = useSmsfunkmodemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - const ulafMarkers = useUlafMarkersLayer(map, oms, GisSystemStatic, priorityConfig); - const sonstigeMarkers = useSonstigeMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook - */ - - const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern - const [talasMarkers, setTalasMarkers] = useState([]); - const [eciMarkers, setEciMarkers] = useState([]); - const [gsmModemMarkers, setGsmModemMarkers] = useState([]); - const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); - const [wagoMarkers, setWagoMarkers] = useState([]); - const [siemensMarkers, setSiemensMarkers] = useState([]); - const [otdrMarkers, setOtdrMarkers] = useState([]); - const [wdmMarkers, setWdmMarkers] = useState([]); - const [messstellenMarkers, setMessstellenMarkers] = useState([]); - const [talasiclMarkers, setTalasiclMarkers] = useState([]); - const [dauzMarkers, setDauzMarkers] = useState([]); - const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); - const [ulafMarkers, setUlafMarkers] = useState([]); - const [sonstigeMarkers, setSonstigeMarkers] = useState([]); - const [lteModemMarkers, setLteModemMarkers] = useState([]); - - const [lineStatusData, setLineStatusData] = useState([]); - const [linesData, setLinesData] = useState([]); - const mapLayersVisibility = useRecoilValue(mapLayersState); - const selectedArea = useRecoilValue(selectedAreaState); - const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons"); - const [linePositions, setLinePositions] = useState([]); - const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData); - const [polylines, setPolylines] = useState([]); - const [markers, setMarkers] = useState([]); - const closePopup = () => setShowPopup(false); - const [newPoint, setNewPoint] = useState(null); - const [newCoords, setNewCoords] = useState(null); - const [tempMarker, setTempMarker] = useState(null); - - const [popupCoordinates, setPopupCoordinates] = useState({ - lat: 52.52, - lng: 13.405, - }); - - const handleAddStation = (stationData) => { - setAddPoiModalWindowState(false); - closePopup(); // Schließt das Popup nach dem Hinzufügen - }; - - const openVersionInfoModal = () => { - setShowVersionInfoModal(true); - }; - - const closeVersionInfoModal = () => { - setShowVersionInfoModal(false); - }; - - const [currentZoom, setCurrentZoom] = useState(() => { - const storedZoom = localStorage.getItem("mapZoom"); - return storedZoom ? parseInt(storedZoom, 10) : 12; - }); - - const [currentCenter, setCurrentCenter] = useState(() => { - const storedCenter = localStorage.getItem("mapCenter"); - try { - return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625]; - } catch (e) { - console.error("Error parsing stored map center:", e); - return [53.111111, 8.4625]; - } - }); - const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State - - //--------------------------------------------------------------- - - /* useEffect(() => { - fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484 - }, []); */ - - useEffect(() => { - const params = new URL(window.location.href).searchParams; - setMapId(params.get("m")); - setUserId(params.get("u")); - }, [setMapId, setUserId]); - - useEffect(() => { - if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) { - //console.log("Überprüfung der Berechtigung vor addItemsToMapContextMenu: ", hasRights); - addItemsToMapContextMenu(hasRights); - } - }, [ - map, - poiLayerRef, - isPoiTypLoaded, - menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern - hasRights, // Sicherstellen, dass hasRights berücksichtigt wird - isRightsLoaded, // Überprüfung, ob die Rechte geladen sind - ]); - - useEffect(() => { - const fetchAndSetUserRights = async () => { - const rights = await fetchUserRights(); - setUserRights(rights); - setIsRightsLoaded(true); - - // Sicherstellen, dass `rights` ein Array ist, bevor `.includes()` aufgerufen wird - setHasRights(localStorage.getItem("editMode") && Array.isArray(rights) && rights.includes(56)); - }; - - fetchAndSetUserRights(); - }, []); - - useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook - - useEffect(() => { - const fetchWebServiceMap = async () => { - try { - // Zähler für externe API-Aufrufe in localStorage speichern - let requestCount = localStorage.getItem("fetchWebServiceMap") || 0; - requestCount = parseInt(requestCount, 10); - - const fetchOptions = { - method: "GET", - headers: { - Connection: "close", // Keep-Alive-Header hinzufügen - }, - }; - - // Fetch GIS Stations Static District - await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - - // Fetch GIS Stations Status District - await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - - // Fetch GIS Stations Measurements - await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - - // Fetch GIS System Static - await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions); - requestCount++; // Zähler erhöhen - localStorage.setItem("fetchWebServiceMap", requestCount); - //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - - fetchWebServiceMap(); - }, []); - - //-------------------------------------------------------- - useEffect(() => { - const endpoint = "/api/talas_v5_DB/gisLines/readGisLines"; - //const endpoint = "http://localhost/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=10"; - fetch(endpoint) - .then((response) => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return response.json(); - }) - .then((data) => { - const newLinePositions = data.map((item) => { - //console.log("item.idLD", item.idLD); - //console.log("item.idModul", item.idModul); - - if (item.points && Array.isArray(item.points)) { - return { - coordinates: item.points.map((point) => [point.x, point.y]), - idModul: item.idModul, - idLD: item.idLD, - }; - } else { - throw new Error("Points missing or not an array"); - } - }); - setLinePositions(newLinePositions); - }) - .catch((error) => { - console.error("Error fetching data:", error.message); - }); - }, []); - //-------------------------------------------- - useEffect(() => { - const fetchPoiTypData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"); - const data = await response.json(); - const map = new Map(); - data.forEach((item) => map.set(item.idPoiTyp, item.name)); - setPoiTypMap(map); - } catch (error) { - console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error); - } - }; - //-------------------------------------------- - const fetchPoiData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/pois/poi-icons"); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const data = await response.json(); - } catch (error) { - console.error("Fehler beim Abrufen der poiData-2:", error); - } - }; - //-------------------------------------------- - - fetchPoiTypData(); - fetchPoiData(); - }, []); - - useEffect(() => { - if (map) { - const dbLayer = new L.LayerGroup().addTo(map); // Define dbLayer here - - return () => { - dbLayer.remove(); - }; - } - }, [map]); - - useEffect(() => { - if (map && !poiLayerRef.current) { - poiLayerRef.current = new L.LayerGroup().addTo(map); - } - - return () => { - if (map && poiLayerRef.current) { - map.removeLayer(poiLayerRef.current); - poiLayerRef.current = new L.LayerGroup().addTo(map); - } - locations.forEach((location) => {}); - }; - //console.log("trigger in MapComponent.js:", poiReadTrigger); - }, [map, locations, poiReadTrigger]); - - //-------------------------------------------- - useEffect(() => { - if (poiData.length === 0) return; - - setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName); - }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]); - - //--------------------------------------------- - //console.log("priorityConfig in MapComponent2: ", priorityConfig); - useEffect(() => { - if (gisSystemStaticLoaded && map) { - /* - createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System - createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System - createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System - createAndSetDevices(6, GisSystemStatic, priorityConfig); // Cisco-Router-System - createAndSetDevices(7, GisSystemStatic, priorityConfig); // WAGO-System - createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System - createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System - createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System - createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System - createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System - createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System - createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System - createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System - createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-System - */ - createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System - createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System - createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System - createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System - createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem - createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System - createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System - createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System - createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR-System - createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM-System - createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen-System - createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL-System - createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ-System - createAndSetDevices(111, setSmsfunkmodemMarkers, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System - createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige-System - createAndSetDevices(0, setUlafMarkers, GisSystemStatic, priorityConfig); // ULAF-System - } - }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]); - - //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig); - - useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms); - useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms); - useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms); - useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms); - useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms); - - useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms); - useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms); - useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms); - useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms); - useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms); - useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms); - useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms); - useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms); - useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem", oms); - useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms); - useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms); - - useEffect(() => { - if (map) { - var x = 51.41321407879154; - var y = 7.739617925303934; - var zoom = 7; - - if (map && map.flyTo) { - map.flyTo([x, y], zoom); - } else { - console.error("Map object is not ready or does not have flyTo method"); - } - } - }, [map, zoomTrigger]); - - useEffect(() => { - if (map) { - const allMarkers = [ - ...talasMarkers, - ...eciMarkers, - ...gsmModemMarkers, - ...ciscoRouterMarkers, - ...wagoMarkers, - ...siemensMarkers, - ...otdrMarkers, - ...wdmMarkers, - ...gmaMarkers, - ...messstellenMarkers, - ...talasiclMarkers, - ...dauzMarkers, - ...smsfunkmodemMarkers, - ...sonstigeMarkers, - ...ulafMarkers, - ...lteModemMarkers, - ]; - - checkOverlappingMarkers(map, allMarkers, plusRoundIcon); - } - }, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers, lteModemMarkers]); - - useEffect(() => { - const fetchData = async () => { - try { - const response1 = await fetch(webserviceGisLinesStatusUrl); - const data1 = await response1.json(); - //console.log("data1.Statis", data1.Statis); - const reversedData = data1.Statis.reverse(); - setLineStatusData(reversedData); - - const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines"); - const data2 = await response2.json(); - - const colorsByModule = {}; - reversedData.forEach((stat) => { - const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul); - if (matchingLine) { - colorsByModule[matchingLine.idModul] = stat.PrioColor; - //console.log("Übereinstimmung gefunden für: ", stat); - setLinesData(matchingLine); - } - }); - //setLineColors(colorsByModule); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - fetchData(); - }, []); - //-------------------------------------------- - //Tooltip an mouse position anzeigen für die Linien - useEffect(() => { - if (!map) return; - - // Entferne alte Marker und Polylinien - markers.forEach((marker) => marker.remove()); - polylines.forEach((polyline) => polyline.remove()); - - // Setze neue Marker und Polylinien mit den aktuellen Daten - const { markers: newMarkers, polylines: newPolylines } = setupPolylines( - map, - linePositions, - lineColors, - tooltipContents, - setNewCoords, - tempMarker, - polylineVisible // polylineVisible wird jetzt korrekt übergeben - ); - - newPolylines.forEach((polyline, index) => { - const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt"; - - polyline.bindTooltip(tooltipContent, { - permanent: false, - direction: "auto", - sticky: true, - offset: [20, 0], - pane: "tooltipPane", - }); - - polyline.on("mouseover", (e) => { - const tooltip = polyline.getTooltip(); - if (tooltip) { - const mousePos = e.containerPoint; - const mapSize = map.getSize(); - - let direction = "right"; - - if (mousePos.x > mapSize.x - 100) { - direction = "left"; - } else if (mousePos.x < 100) { - direction = "right"; - } - - if (mousePos.y > mapSize.y - 100) { - direction = "top"; - } else if (mousePos.y < 100) { - direction = "bottom"; - } - - tooltip.options.direction = direction; - polyline.openTooltip(e.latlng); - } - }); - - polyline.on("mouseout", () => { - polyline.closeTooltip(); - }); - }); - - setMarkers(newMarkers); - setPolylines(newPolylines); - }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]); - - //-------------------------------------------- - - useEffect(() => { - if (map) { - restoreMapSettings(map); - } - }, [map]); - - useEffect(() => { - if (map) { - const handleMapMoveEnd = (event) => { - const newCenter = map.getCenter(); - const newZoom = map.getZoom(); - - setCurrentCenter([newCenter.lat, newCenter.lng]); - setCurrentZoom(newZoom); - - localStorage.setItem("mapCenter", JSON.stringify([newCenter.lat, newCenter.lng])); - localStorage.setItem("mapZoom", newZoom); - }; - - map.on("moveend", handleMapMoveEnd); - map.on("zoomend", handleMapMoveEnd); - - return () => { - map.off("moveend", handleMapMoveEnd); - map.off("zoomend", handleMapMoveEnd); - }; - } - }, [map]); - //-------------------------------------------- - - useEffect(() => { - if (selectedArea && map) { - const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea); - if (station) { - map.flyTo([station.X, station.Y], 14); - } - } - }, [selectedArea, map, GisStationsStaticDistrict]); - - useEffect(() => { - if (zoomTrigger && map) { - map.flyTo([51.41321407879154, 7.739617925303934], 7); - } - }, [zoomTrigger, map]); - - useEffect(() => { - if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) { - addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates); - } - }, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]); - //-------------------------------------------- - // rote Marker ganz oben wenn überlappen sind - useEffect(() => { - const fetchPriorityConfig = async () => { - try { - const res = await fetch("/api/talas_v5_DB/priorityConfig"); - if (!res.ok) { - throw new Error(`HTTP error! status: ${res.status}`); - } - const data = await res.json(); - setPriorityConfig(data); - } catch (error) { - console.error("Failed to load priority configuration:", error); - } - }; - - fetchPriorityConfig(); - }, []); - //-------------------------------------------- - 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]); - useEffect(() => { - if (map) { - console.log("6- Karteninstanz (map) wurde jetzt erfolgreich initialisiert"); - - // Setze die Karteninstanz in den Recoil-Atom - } - }, [map]); - //-------------------------------------------- - useEffect(() => { - const initializeContextMenu = () => { - if (map) { - map.whenReady(() => { - setTimeout(() => { - if (map.contextmenu) { - //console.log("Contextmenu ist vorhanden"); - } else { - console.warn("Contextmenu ist nicht verfügbar."); - } - }, 500); - }); - } - }; - - initializeContextMenu(); - }, [map]); - //-------------------------------------------- - - return ( - <> - -
{showPoiUpdateModal && setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}
- -
- {showPopup && ( -
-
e.stopPropagation()}> - - -
-
- )} -
- - - -
- -
-
-
- TALAS.Map -
- Version {MAP_VERSION} -
-
- -
-
-
- - - ); -}; - -export default MapComponent; diff --git a/components/MapComponent.js b/components/MapComponent.js index 90b10a004..0c817e3ec 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -542,7 +542,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat ); newPolylines.forEach((polyline, index) => { - const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt"; + const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || `idLD: ${linePositions[index].idLD} in DB gis_lines aber in WebService GisLinesStatus nicht gefunden`; polyline.bindTooltip(tooltipContent, { permanent: false, diff --git a/config/config.js b/config/config.js index f6ea0a555..e456522a3 100644 --- a/config/config.js +++ b/config/config.js @@ -4,9 +4,7 @@ import * as urls from "../config/urls.js"; const mapVersion = "0.5.3"; // Die Version der verwendeten Karte const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird const fullSideMenu = false; // Einstellung, ob ein vollständiges Seitenmenü verwendet wird -//const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen werden -//const serverURL = "http://10.10.0.13"; -//const serverURL = "http://10.10.0.70"; + const serverURL = process.env.NEXT_PUBLIC_SERVER_URL; if (!serverURL) { throw new Error("Die Umgebungsvariable NEXT_PUBLIC_SERVER_URL ist nicht gesetzt!"); @@ -44,27 +42,12 @@ if (typeof window !== "undefined") { mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; //webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`; - //webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`; - //webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`; - //webserviceGisLinesStatusUrl = `${"serverURL"}:3000/api/linesColorApi`; + // webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`; //webserviceGisLinesStatusUrl = `http://192.168.10.14/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`; webserviceGisLinesStatusUrl = `${serverURL}/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`; //http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484 - - /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`; - mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`; - mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`; - mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`; - mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */ - - /* mapGisStationsStaticDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`; - mapGisStationsStatusDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`; - mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsMeasurements?idMap=${idMap}`; - mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/gisStationsMeasurementsSQL?idMap=${idMap}`; - mapGisSystemStaticUrl = `${serverURL}/api/talas5/webserviceMap/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`; - mapDataIconUrl = `${serverURL}/api/talas5/webserviceMap/GetIconsStatic`; */ } // Export der definierten Variablen und URLs, damit sie in anderen Teilen der Anwendung verwendet werden können diff --git a/hooks/useLineData-back.js b/hooks/useLineData-back.js deleted file mode 100644 index d1934e36e..000000000 --- a/hooks/useLineData-back.js +++ /dev/null @@ -1,124 +0,0 @@ -import { useEffect, useState } from "react"; -import { SERVER_URL } from "../config/urls"; -import { useDispatch, useSelector } from "react-redux"; - -const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { - const dispatch = useDispatch(); - const messages = useSelector((state) => state.messages); - const [lineColors, setLineColors] = useState({}); - const [tooltipContents, setTooltipContents] = useState({}); - - useEffect(() => { - let isCancelled = false; - - const fetchData = async () => { - try { - const response1 = await fetch(webserviceGisLinesStatusUrl); - const data1 = await response1.json(); - - const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`); - const data2 = await response2.json(); - - const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`); - const namesData = await response3.json(); - - if (!isCancelled) { - const colorsByModule = {}; - const newTooltipContents = {}; - const valueMap = {}; - - const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); - - sortedStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; - - if (!valueMap[key]) { - valueMap[key] = { - messages: [], - messwert: undefined, - schleifenwert: undefined, - }; - } - - if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) { - valueMap[key].messwert = statis.Value; - } - if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) { - valueMap[key].schleifenwert = statis.Value; - } - - if (statis.Message && statis.Message !== "?") { - valueMap[key].messages.push({ - message: statis.Message, - prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green", - }); - } - }); - - sortedStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; - const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); - - if (matchingLine) { - const values = valueMap[key]; - - const messageDisplay = values.messages.map((msg) => `${msg.message}
`).join(""); - - const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; - - colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green"; - - newTooltipContents[key] = ` -
- ${statis.ModulName || "Unknown"} -
- ${statis.ModulTyp || "N/A"} -
- Slot: ${statis.Modul || "N/A"} -
- Station: ${namesData[matchingLine.idLD] || "N/A"} -
-
- ${messageDisplay} -
-
- ${values.messwert ? `Messwert: ${values.messwert}
` : ""} - ${values.schleifenwert ? `Schleifenwert: ${values.schleifenwert}` : ""} -
- `; - } - }); - - setLineColors(colorsByModule); - setTooltipContents(newTooltipContents); - setLineStatusData(data1.Statis); - } - } catch (error) { - console.error("Fehler beim Abrufen der Daten:", error); - try { - window.location.reload(); - } catch (reloadError) { - console.error("Fehler beim Neuladen der Seite:", reloadError); - } - } - }; - - const scheduleNextFetch = () => { - if (!isCancelled) { - fetchData(); - setTimeout(scheduleNextFetch, 30000); - } - }; - - fetchData(); - scheduleNextFetch(); - - return () => { - isCancelled = true; - }; - }, [webserviceGisLinesStatusUrl, setLineStatusData]); - - return { lineColors, tooltipContents }; -}; - -export default useLineData; diff --git a/utils/mapUtils.js b/utils/mapUtils.js index 56e344cdf..1fc664bf5 100644 --- a/utils/mapUtils.js +++ b/utils/mapUtils.js @@ -1,41 +1,6 @@ // /utils/mapUtils.js import L from "leaflet"; -export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => { - if (!lineData || !lineColors || !tooltipContents || !map) { - console.error("Invalid parameters for redrawPolyline"); - return; - } - - if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) { - console.error("Invalid coordinates in lineData"); - return; - } - - const color = lineColors[lineData.idModul] || "#000000"; - const tooltipContent = tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt"; - - if (lineData.polyline) map.removeLayer(lineData.polyline); - - lineData.polyline = L.polyline(lineData.coordinates, { - color: color, - }).addTo(map); - - lineData.polyline.bindTooltip(tooltipContent, { - permanent: false, - direction: "auto", - }); - - lineData.polyline.on("mouseover", () => { - lineData.polyline.setStyle({ weight: 10 }); - lineData.polyline.bringToFront(); - }); - - lineData.polyline.on("mouseout", () => { - lineData.polyline.setStyle({ weight: 5 }); - }); -}; - export const saveLineData = (lineData) => { fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", { method: "POST", diff --git a/utils/setupPolylines-back.js b/utils/setupPolylines-back.js deleted file mode 100644 index 3b666e340..000000000 --- a/utils/setupPolylines-back.js +++ /dev/null @@ -1,341 +0,0 @@ -// utils/setupPolylines.js -import { findClosestPoints } from "./geometryUtils"; -import handlePoiSelect from "./handlePoiSelect"; -import { updateLocationInDatabase } from "../services/apiService"; -import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils"; -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 { redrawPolyline } from "./mapUtils"; -import { openInNewTab } from "./openInNewTab"; -import { toast } from "react-toastify"; -import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; -import { useRecoilValue } from "recoil"; - -// 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) { - // Überprüfe, ob polylines definiert ist und ob es Elemente enthält - if (!polylines || polylines.length === 0) { - //console.warn("Keine Polylinien vorhanden oder polylines ist undefined."); - return; - } - - // Falls Polylinien vorhanden sind, wende die Events an - 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 setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => { - if (localStorage.getItem("polylineVisible") === null) { - localStorage.setItem("polylineVisible", "true"); // Standardwert setzen - polylineVisible = true; // Wert in der Funktion initialisieren - } else { - polylineVisible = localStorage.getItem("polylineVisible") === "true"; - } - - if (!polylineVisible) { - // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen - if (window.polylines) { - window.polylines.forEach((polyline) => { - if (map.hasLayer(polyline)) { - map.removeLayer(polyline); - } - }); - } - return { markers: [], polylines: [] }; - } - const markers = []; - const polylines = []; - const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist - - linePositions.forEach((lineData, lineIndex) => { - const lineMarkers = []; - - lineData.coordinates.forEach((coord, index) => { - let icon = circleIcon; - if (index === 0) { - icon = startIcon; - } else if (index === lineData.coordinates.length - 1) { - icon = endIcon; - } - - // Nur Marker mit circleIcon ausblenden, wenn Bearbeitungsmodus deaktiviert ist - if (icon !== circleIcon || editMode) { - const marker = L.marker(coord, { - icon: icon, - draggable: editMode, // Nur verschiebbar, wenn Bearbeitungsmodus aktiv ist - contextmenu: true, - contextmenuInheritItems: false, - contextmenuItems: [], - }).addTo(map); - - marker.on("dragend", () => { - console.log("Marker wurde verschoben in setupPolylines.js"); - if (editMode) { - const newCoords = marker.getLatLng(); - setNewCoords(newCoords); - const newCoordinates = [...lineData.coordinates]; - newCoordinates[index] = [newCoords.lat, newCoords.lng]; - - const updatedPolyline = L.polyline(newCoordinates, { - color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", - }).addTo(map); - - updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { - permanent: false, - direction: "auto", - }); - - updatedPolyline.on("mouseover", () => { - updatedPolyline.setStyle({ weight: 20 }); - updatedPolyline.bringToFront(); - }); - - updatedPolyline.on("mouseout", () => { - updatedPolyline.setStyle({ weight: 3 }); - }); - - polylines[lineIndex].remove(); - polylines[lineIndex] = updatedPolyline; - lineData.coordinates = newCoordinates; - - const requestData = { - idModul: lineData.idModul, - idLD: lineData.idLD, - newCoordinates, - }; - - fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(requestData), - }) - .then((response) => { - if (!response.ok) { - return response.json().then((data) => { - throw new Error(data.error || "Unbekannter Fehler"); - }); - } - return response.json(); - }) - .then((data) => { - console.log("Koordinaten erfolgreich aktualisiert:", data); - }) - .catch((error) => { - console.error("Fehler beim Aktualisieren der Koordinaten:", error.message); - }); - } else { - toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", { - position: "top-center", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - } - }); - - marker.on("mouseover", function () { - this.bindContextMenu({ - contextmenuItems: [ - { - text: "Stützpunkt entfernen", - icon: "/img/icons/gisLines/remove-support-point.svg", - callback: () => { - if (editMode) { - const newCoords = marker.getLatLng(); - const newCoordinates = [...lineData.coordinates]; - newCoordinates[index] = [newCoords.lat, newCoords.lng]; - - removePOI(marker, lineData, currentZoom, currentCenter); - polylines[lineIndex].remove(); - lineData.coordinates = newCoordinates; - } else { - toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", { - position: "top-center", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - } - }, - }, - ], - }); - }); - - marker.on("mouseout", function () { - this.unbindContextMenu(); - }); - - lineMarkers.push(marker); - } - }); - - const polyline = L.polyline(lineData.coordinates, { - color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", - weight: 3, - contextmenu: true, - contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren - contextmenuItems: [], - }).addTo(map); - - // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist - if (editMode) { - polyline.options.contextmenuItems.push( - { - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: (e) => { - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; - window.open(link, "_blank"); - }, - }, - { separator: true }, - - { - text: "Koordinaten anzeigen", - icon: "/img/not_listed_location.png", - callback: (e) => { - alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)); - }, - }, - { separator: true }, - { - text: "Reinzoomen", - icon: "/img/zoom_in.png", - callback: (e) => map.zoomIn(), - }, - { - text: "Rauszoomen", - icon: "/img/zoom_out.png", - callback: (e) => map.zoomOut(), - }, - { - text: "Hier zentrieren", - icon: "/img/center_focus.png", - callback: (e) => map.panTo(e.latlng), - }, - { separator: true }, - { - text: "POI hinzufügen", - icon: "/img/add_station.png", - callback: (e) => { - // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren - alert("POI hinzufügen an: " + e.latlng); - }, - }, - { - text: "Stützpunkt hinzufügen", - icon: "/img/icons/gisLines/add-support-point.svg", - callback: (e) => { - if (tempMarker) { - tempMarker.remove(); - } - const newPoint = e.latlng; - const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map); - insertNewPOI(closestPoints, newPoint, lineData, map); - redrawPolyline(lineData, lineColors, tooltipContents, map); - window.location.reload(); - }, - } - ); - } - - // Hier wird der Tooltip hinzugefügt - polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { - permanent: false, - direction: "auto", - }); - - polyline.on("mouseover", (e) => { - const startTime = Date.now(); // Startzeit erfassen - localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage - - // Starte einen Intervall-Timer, um die Differenz zu berechnen - const countdownInterval = setInterval(() => { - const currentTime = Date.now(); - const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden - - // Speichern der abgelaufenen Zeit in localStorage - localStorage.setItem("contextMenuCountdown", elapsedTime); - - // Wenn die Zeit 17 Sekunden erreicht, schließe das Menü - if (elapsedTime >= 17) { - clearInterval(countdownInterval); - const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü - contextMenu.hide(); // Kontextmenü schließen - } - }, 1000); // Jede Sekunde - //console.log("Mouseover on polyline", lineData); - polyline.setStyle({ weight: 14 }); - 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); - polyline.setStyle({ weight: 3 }); - // Setze den Countdown auf 0, wenn mouseout ausgelöst wird - localStorage.setItem("contextMenuCountdown", 0); - }); - // Speichere den Link bei einem Rechtsklick (Kontextmenü) - /* - polyline.on("contextmenu", (e) => { - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; - console.log("Link der Linie (via Rechtsklick):", link); - localStorage.setItem("lastElementType", "polyline"); - localStorage.setItem("polylineLink", link); - }); - */ - // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden - polyline.on("contextmenu", function (e) { - const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü - const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs - - const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 30); - if (countdown >= 28) { - closeMenu(); - } - }); - - polylines.push(polyline); - 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/setupPolylines.js b/utils/setupPolylines.js index 7e28edeeb..809c44e70 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -137,7 +137,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", }).addTo(map); - updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { + updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup 1", { permanent: false, direction: "auto", }); @@ -352,7 +352,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, } // Hier wird der Tooltip hinzugefügt - polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { + polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup", { permanent: false, direction: "auto", }); diff --git a/utils/utils.js b/utils/utils.js index 66153dbdd..b5d4407c2 100644 --- a/utils/utils.js +++ b/utils/utils.js @@ -25,22 +25,14 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => { const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); const statusResponse = await response2.json(); - const getIdSystemAndAllowValueMap = new Map( - GisSystemStatic.map((system) => [system.IdSystem, system.Allow]) - ); + const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow])); //console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap); if (jsonResponse.Points && statusResponse.Statis) { const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s])); - let markersData = jsonResponse.Points.filter( - (station) => - station.System === systemId && - getIdSystemAndAllowValueMap.get(station.System) === 1 - ).map((station) => { + let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => { const statis = statisMap.get(station.IdLD); - const iconPath = statis - ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` - : `img/icons/marker-icon-${station.Icon}.png`; + const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`; const priority = determinePriority(iconPath); const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values @@ -62,9 +54,7 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => { marker.on("add", () => marker.bounce(3)); } - const statusInfo = statusResponse.Statis.filter( - (status) => status.IdLD === station.IdLD - ) + const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD) .reverse() .map( (status) => ` @@ -108,9 +98,7 @@ export const fetchPriorityConfig = async () => { //---------------------------------------------- export const fetchGisStatusStations = async (idMap, idUser) => { try { - const response = await fetch( - `/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}` - ); + const response = await fetch(`/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`); if (!response.ok) { throw new Error(`Error: ${response.statusText}`); } @@ -158,10 +146,7 @@ export const insertNewMarker = (closestPoints, newPoint, lineData, map) => { icon: circleIcon, draggable: true, }).addTo(map); - lineData.coordinates.splice(closestPoints[2], 0, [ - newPoint.lat, - newPoint.lng, - ]); + lineData.coordinates.splice(closestPoints[2], 0, [newPoint.lat, newPoint.lng]); // Hier direkt speichern nach Einfügen saveLineData(lineData); @@ -224,42 +209,3 @@ export const saveLineData = (lineData) => { }); }; //---------------------------------------------- -/* export const redrawPolyline = (lineData) => { - const [lineColors, setLineColors] = useState({}); */ -import L from "leaflet"; - -export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => { - if (!lineData || !lineColors || !tooltipContents || !map) { - console.error("Invalid parameters for redrawPolyline"); - return; - } - - if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) { - console.error("Invalid coordinates in lineData"); - return; - } - - const color = lineColors[lineData.idModul] || "#000000"; - const tooltipContent = - tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt"; - - if (lineData.polyline) map.removeLayer(lineData.polyline); - - lineData.polyline = L.polyline(lineData.coordinates, { - color: color, - }).addTo(map); - - lineData.polyline.bindTooltip(tooltipContent, { - permanent: false, - direction: "auto", - }); - - lineData.polyline.on("mouseover", () => { - lineData.polyline.setStyle({ weight: 10 }); - lineData.polyline.bringToFront(); - }); - - lineData.polyline.on("mouseout", () => { - lineData.polyline.setStyle({ weight: 5 }); - }); -};