diff --git a/.env.local b/.env.local index 583cbd45b..328c5ab2b 100644 --- a/.env.local +++ b/.env.local @@ -1,47 +1,17 @@ #.env.local #je nach dem Mysql Server, ob localhost freigegeben ist oder die IP Adresse des Servers, manchmal die beide und manchmal nur eine -#DB_HOST=10.10.0.13 -#DB_USER=root -#DB_PASSWORD="root#$" -#DB_NAME=talas_v5 -#DB_PORT=3306 -######################### - -#NEXT_PUBLIC_BASE_URL="http://10.10.0.13/talas5/devices/" -#NEXT_PUBLIC_SERVER_URL="http://10.10.0.13" -#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.13" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" -######################### - - -#DB_HOST=10.10.0.70 -DB_HOST=127.0.0.1 +DB_HOST=192.168.10.33 DB_USER=root DB_PASSWORD="root#$" DB_NAME=talas_v5 DB_PORT=3306 - -######################### -#device nur Verlinkung wenn die gleiche DB ist -#NEXT_PUBLIC_BASE_URL="http://10.10.0.70/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="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png" ######################### -#DB_HOST=192.168.10.168 -#DB_USER=root -#DB_PASSWORD="root#$" -#DB_NAME=talas_v5 -#DB_PORT=3306 +NEXT_PUBLIC_BASE_URL="http://192.168.10.33/talas5/devices/" +NEXT_PUBLIC_SERVER_URL="http://192.168.10.33" +NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.33" +NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.33/talas5/TileMap/mapTiles/{z}/{x}/{y}.png" ######################### -#URLs für den Client (clientseitig) -#NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/" -#NEXT_PUBLIC_SERVER_URL="http://192.168.10.168" -#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" -######################### online -#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" \ No newline at end of file + diff --git a/components/MapComponent - Kopie.js b/components/MapComponent - Kopie.js new file mode 100644 index 000000000..53b86cf72 --- /dev/null +++ b/components/MapComponent - Kopie.js @@ -0,0 +1,732 @@ +// 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/PoiUpdateModal.js b/components/PoiUpdateModal.js index d24cab7ad..09940017b 100644 --- a/components/PoiUpdateModal.js +++ b/components/PoiUpdateModal.js @@ -1,5 +1,5 @@ // pages/api/poiUpdateModal.js - +// import React, { useState, useEffect } from "react"; import { useRecoilValue } from "recoil"; import { selectedPoiState } from "../store/atoms/poiState"; @@ -15,22 +15,50 @@ const PoiUpdateModal = ({ onClose, poiData }) => { const [locationDeviceData, setLocationDeviceData] = useState([]); const [deviceName, setDeviceName] = useState(""); const [idLD, setIdLD] = useState(poiData ? poiData.idLD : ""); + const [idLocationDevice, setIdLocationDevice] = useState(""); const [description, setDescription] = useState(poiData ? poiData.description : ""); + // Log the initial POI data useEffect(() => { if (poiData) { - console.log("Initial poiData:", poiData); setPoiId(poiData.idPoi); setName(poiData.name); setPoiTypeId(poiData.idPoiTyp); setIdLD(poiData.idLD); + setDescription(poiData.description); setDeviceName(poiData.idLD); console.log("Loaded POI Data for editing:", poiData); + console.log("POI ID:", poiData.idPoi); + console.log("POI Name:", poiData.name); + console.log("POI Typ ID:", poiData.idPoiTyp); + console.log("POI Beschreibung:", poiData.description); + console.log("POI Geräte-ID:", poiData.idLD); } }, [poiData]); + /* const fetchDeviceNameById = async (idLD) => { + try { + const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`); + const data = await response.json(); + setDeviceName(data.deviceName); + } catch (error) { + console.error("Error fetching device name:", error); + } + }; */ + + /* const fetchDeviceNameById = async (idLD) => { + try { + const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`); + const data = await response.json(); + setDeviceName(data.deviceName); + } catch (error) { + console.error("Error fetching device name:", error); + } + }; */ + + // Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden useEffect(() => { const fetchDeviceId = async () => { if (poiData && poiData.idLD) { @@ -47,6 +75,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => { fetchDeviceId(); }, [poiData]); + // Function to handle deleting a POI const handleDeletePoi = async () => { if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) { try { @@ -55,7 +84,8 @@ const PoiUpdateModal = ({ onClose, poiData }) => { }); if (response.ok) { alert("POI wurde erfolgreich gelöscht."); - onClose(); + onClose(); // Close the modal + //Browser neu laden, um die aktualisierte Liste anzuzeigen window.location.reload(); } else { throw new Error("Fehler beim Löschen des POI."); @@ -67,6 +97,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => { } }; + // Fetch POI types useEffect(() => { const fetchPoiTypData = async () => { try { @@ -86,15 +117,15 @@ const PoiUpdateModal = ({ onClose, poiData }) => { fetchPoiTypData(); }, [selectedPoi]); + // Fetch device data um den Gerät Namen in den dropdown menu anzuzeigen also erstmal die Liste der Geräte abrufen useEffect(() => { const fetchData = async () => { try { - // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device" - const response = await fetch( - "/api/talas_v5_DB/locationDevice/locationDevices" - ); + const response = await fetch("/api/talas_v5/location_device"); const data = await response.json(); + //console.log("Standort- und Gerätedaten:", data); setLocationDeviceData(data); + console.log("Standort- und Gerätedaten poiData:", poiData); if (poiData && poiData.idLD) { const selectedDevice = data.find((device) => device.id === poiData.idLD); setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); // Hier wird die ID als initialer Zustand gesetzt @@ -107,8 +138,11 @@ const PoiUpdateModal = ({ onClose, poiData }) => { }; fetchData(); }, []); + //-------------------------------------------------------------------------------------------- + // Fetch device name basierend auf der Geräte-ID useEffect(() => { + console.log("currentPoi von PoiUpdateModal.js : ", currentPoi.idLD); fetch("/api/talas_v5_DB/locationDevice/locationDevices") .then((response) => response.json()) .then((data) => { @@ -127,6 +161,10 @@ const PoiUpdateModal = ({ onClose, poiData }) => { }); }, [poiData?.idLD, currentPoi]); + //-------------------------------------------------------------------------------------------- + // Angenommen, deviceName enthält die Geräte-ID + //const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name + const handleSubmit = async (event) => { event.preventDefault(); const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`); @@ -144,6 +182,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => { description: description, idPoiTyp: poiTypeId, idLD: idLD, + //idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl }), }); @@ -208,7 +247,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {