diff --git a/components/MapComponent.js b/components/MapComponent.js index 0e5c42bb6..d48600e94 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -40,16 +40,15 @@ import { set } from "lodash"; import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js"; import { data } from "autoprefixer"; import plusRoundIcon from "./PlusRoundIcon.js"; -/* import { - parsePoint, - handleEditPoi, - insertNewMarker, - redrawPolyline, - saveLineData, -} from "../utils/utils.js"; */ +import {} from //parsePoint, +//handleEditPoi, +//insertNewMarker, +//redrawPolyline, +//saveLineData, +"../utils/utils.js"; import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js"; import { - handleEditPoi, + //handleEditPoi, insertNewMarker, removeMarker, } from "../utils/markerUtils.js"; @@ -487,6 +486,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
${statusInfo}
`); + return marker; }); @@ -499,6 +499,44 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //-------------------------------------------------------------------------------- const mapLayersVisibility = useRecoilValue(mapLayersState); + //---------------------------------------------- + const handleEditPoi = (selectedPoi) => { + // Prüfung, ob der Benutzer die notwendigen Rechte hat + if (!userRights || !userRights.includes(56)) { + toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.log("Benutzer hat keine Berechtigung zum Bearbeiten."); + return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt + } + + //console.log("Selected Marker ID (idPoi):", marker.options.idPoi); + console.log( + "Selected Marker Description:", + selectedPoi.options.description + ); + console.log("Selected Marker :", selectedPoi.options); + + setCurrentPoiData({ + idPoi: selectedPoi.options.id, + name: selectedPoi.options.name, + description: selectedPoi.options.description, + }); + //console.log("POI-Daten1:", currentPoiData); + + fetchPoiData(selectedPoi.options.id); + fetchPoiData(selectedPoi.options.name); + //fetchPoiData(selectedPoi.options); + + setShowPoiUpdateModal(true); + }; + //---------------------------------------------- //------------------------------------------ //------------------------------------------ */ @@ -1051,6 +1089,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }), draggable: canDrag, id: location.idPoi, + name: location.name, + description: location.description, }).bindContextMenu({ contextmenu: true, contextmenuWidth: 140, @@ -2280,7 +2320,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, [zoomTrigger, map]); //--------------------------------------------------------- //---------------------------------------------------------zoomen in kontextmenü - + // Beispiel für die Verwendung von fetchPoiData mit Recoil Zustand + /* useEffect(() => { + if (selectedPoi) { + fetchPoiData(selectedPoi.idPoi) + .then((data) => { + console.log("Fetched POI data:", data); + }) + .catch((error) => { + console.error("Fehler beim Abrufen der POI-Daten:", error); + }); + } + }, [selectedPoi]); */ //--------------------------------------------------------- //--------------------------------------------------------- diff --git a/components/MapComponent2.js b/components/MapComponent2.js new file mode 100644 index 000000000..235f2e2cc --- /dev/null +++ b/components/MapComponent2.js @@ -0,0 +1,1035 @@ +// components/MapComponent.js + +import React, { useEffect, useRef, useState, useCallback } from "react"; +import { MapContainer, TileLayer, LayerGroup } from "react-leaflet"; +import L from "leaflet"; +import "leaflet/dist/leaflet.css"; +import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; +import "leaflet-contextmenu"; +import dynamic from "next/dynamic"; +import "leaflet.smooth_marker_bouncing"; +import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { InformationCircleIcon } from "@heroicons/react/20/solid"; +import PoiUpdateModal from "./PoiUpdateModal"; +import ShowAddStationPopup from "./ShowAddStationPopup"; +import DataSheet from "./DataSheet"; +import { + fetchGisStatusStations, + fetchPriorityConfig, + fetchPoiData, + updateLocationInDatabase, + checkInternet, + fetchUserRights, + fetchDeviceNameById, +} from "../services/apiService"; +import { + selectedPoiState, + currentPoiState, + poiTypState, + poiReadFromDbTriggerAtom, + gisStationsStaticDistrictState, + gisSystemStaticState, + mapLayersState, + selectedAreaState, + zoomTriggerState, + mapIdState, + userIdState, + poiLayerVisibleState, +} from "../store/atoms"; +import { parsePoint, findClosestPoints } from "../utils/geometryUtils"; +import { + insertNewMarker, + removeMarker, +} from "../utils/markerUtils"; +import { + saveLineData, + redrawPolyline, + restoreMapSettings, + checkOverlappingMarkers, +} from "../utils/mapUtils"; +import { + addContextMenuToMarker, + openInNewTab, +} from "../utils/contextMenuUtils"; +import { MAP_VERSION } from "../config/settings"; +import * as layers from "../config/layers"; +import { urls, config } from "../config"; +import circleIcon from "./CircleIcon"; +import startIcon from "./StartIcon"; +import endIcon from "./EndIcon"; +import useMapContextMenu from "./useMapContextMenu"; +import { openInSameWindow } from "../utils/openInSameWindow"; +import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; +import plusRoundIcon from "./PlusRoundIcon"; + +const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { + const [loading, setLoading] = useState(true); // Ladezustand hinzufügen + 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 [priorityConfig, setPriorityConfig] = useState([]); + + useEffect(() => { + fetchPriorityConfig(); + }, []); + + useEffect(() => { + console.log("Aktualisierte Prioritätskonfiguration:", priorityConfig); + }, [priorityConfig]); + + useEffect(() => { + fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484 + }, []); + + const [menuItemAdded, setMenuItemAdded] = useState(false); + + const poiLayerVisible = useRecoilValue(poiLayerVisibleState); + + const [contextMenuItems, setContextMenuItems] = useState([]); + const [isRightsLoaded, setIsRightsLoaded] = useState(false); + const [hasRights, setHasRights] = useState(false); + const [mapId, setMapId] = useRecoilState(mapIdState); + const [userId, setUserId] = useRecoilState(userIdState); + + const [showAddStationPopup, setShowAddStationPopup] = useState(false); + const [userRights, setUserRights] = useState(null); + const setSelectedPoi = useSetRecoilState(selectedPoiState); + const openPoiUpdateModal = () => setShowPoiUpdateModal(true); + const closePoiUpdateModal = () => setShowPoiUpdateModal(false); + const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false); + const [currentPoiData, setCurrentPoiData] = useState(null); + const setCurrentPoi = useSetRecoilState(currentPoiState); + const currentPoi = useRecoilValue(currentPoiState); + const handlePoiSelect = (poiData) => { + setSelectedPoi(poiData); // poiData should be the data of the selected POI + // Open the modal or any other logic + }; + + useEffect(() => { + const params = new URL(window.location.href).searchParams; + setMapId(params.get("m")); + setUserId(params.get("u")); + }, [setMapId, setUserId]); + + useEffect(() => { + fetchUserRights().then(() => { + setIsRightsLoaded(true); + console.log("Benutzerrechte in useEffect in MapComponent:", userRights); + }); + }, [urls.SERVER_URL]); // Lade die Berechtigungen beim Initialisieren der Komponente + + const [showVersionInfoModal, setShowVersionInfoModal] = useState(false); + const zoomTrigger = useRecoilValue(zoomTriggerState); + const offlineTileLayer = urls.OFFLINE_TILE_LAYER; + const onlineTileLayer = urls.ONLINE_TILE_LAYER; //Talas_v5 Server + + // Create map layers + 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; + const lineLayer = layers.MAP_LAYERS.lineLayer; + + const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false); + + const baseUrl = urls.BASE_URL; // für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame + + const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false); + const [poiTypMap, setPoiTypMap] = useState(new Map()); + const [showPopup, setShowPopup] = useState(false); + const [popupCoordinates, setPopupCoordinates] = useState({ + lat: 52.52, + lng: 13.405, + }); // Beispielkoordinaten + const openPopup = () => setShowPopup(true); + const closePopup = () => setShowPopup(false); + + const handleAddStation = (stationData) => { + setShowAddStationPopup(false); + closePopup(); // Schließt das Popup nach dem Hinzufügen + }; + + const openAddStationPopupWithCoordinates = (lat, lng) => { + setPopupCoordinates({ lat, lng }); + setShowPopup(true); + }; + + const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom); + const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden + 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 [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung + 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 + const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten + + const mapGisStationsStaticDistrictUrl = + config.mapGisStationsStaticDistrictUrl; + const mapGisStationsStatusDistrictUrl = + config.mapGisStationsStatusDistrictUrl; + const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl; + const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; + const mapDataIconUrl = config.mapDataIconUrl; + const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl; + + const openVersionInfoModal = () => { + setShowVersionInfoModal(true); + }; + + const closeVersionInfoModal = () => { + setShowVersionInfoModal(false); + }; + + const zoomInCallback = (e, map) => { + zoomIn(e, map); + }; + + const zoomOutCallback = (map) => { + zoomOut(map); + }; + + const centerHereCallback = (e, map) => { + centerHere(e, map); + }; + + const showCoordinates = (e) => { + alert( + "Breitengrad: " + + e.latlng.lat.toFixed(5) + + "\nLängengrad: " + + e.latlng.lng.toFixed(5) + ); + }; + + const showData = (e) => {}; + const showTalas = (e) => { + map.addLayer(TALAS); + loadData(); + }; + const hideTalas = (e) => { + map.removeLayer(TALAS); + loadData(); + }; + const showGSM = (e) => { + map.addLayer(GMA); + loadData(); + }; + const hideGSM = (e) => { + map.removeLayer(GMA); + loadData(); + }; + + const addStationCallback = useCallback( + (event) => { + console.log( + "Überprüfung der Berechtigung in addStationCallback: ", + hasRights + ); + if (hasRights) { + setPopupCoordinates(event.latlng); + setShowPopup(true); + } else { + toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.error("Benutzer hat keine Berechtigung zum Hinzufügen."); + } + }, + [hasRights] + ); + + const addItemsToMapContextMenu = () => { + if (!menuItemAdded) { + map.contextmenu.addItem({ + text: "Koordinaten anzeigen", + icon: "img/not_listed_location.png", + callback: showCoordinates, + }); + + map.contextmenu.addItem({ separator: true }); + + map.contextmenu.addItem({ + text: "Reinzoomen", + icon: "img/zoom_in.png", + callback: (e) => zoomInCallback(e, map), + }); + + map.contextmenu.addItem({ + text: "Rauszoomen", + icon: "img/zoom_out.png", + callback: () => zoomOutCallback(map), + }); + + map.contextmenu.addItem({ + text: "Hier zentrieren", + icon: "img/center_focus.png", + callback: (e) => centerHereCallback(e, map), + }); + + map.contextmenu.addItem({ separator: true }); + + map.contextmenu.addItem({ + text: "POI hinzufügen", + icon: "img/add_station.png", + className: "background-red", + callback: (event) => addStationCallback(event, hasRights), + }); + + setMenuItemAdded(true); + } + }; + + const layerNames = { + "GSM Modem": "GSMMODEM", + "Cisco Router": "CiscoRouter", + "TALAS ICL": "TALASICL", + "SMS-Funkmodem": "GSMModem", + }; + + function fly(stationValue) { + var x = 51.41321407879154; + var y = 7.739617925303934; + var zoom = 7; + + initMap.flyTo([x, y], zoom); + } + + let initMap = []; + + const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState); + const [eciVisible, setEciVisible] = useRecoilState(mapLayersState); + const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState); + const [ciscoRouterVisible, setCiscoRouterVisible] = + useRecoilState(mapLayersState); + const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState); + const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState); + const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState); + const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState); + const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState); + const [messstellenVisible, setMessstellenVisible] = + useRecoilState(mapLayersState); + const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState); + const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState); + const [smsfunkmodemVisible, setSmsfunkmodemVisible] = + useRecoilState(mapLayersState); + const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState); + const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState); + + 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 [gmaMarkers, setGmaMarkers] = useState([]); + const [messstellenMarkers, setMessstellenMarkers] = useState([]); + const [talasiclMarkers, setTalasiclMarkers] = useState([]); + const [dauzMarkers, setDauzMarkers] = useState([]); + const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); + const [sonstigeMarkers, setSonstigeMarkers] = useState([]); + const [ulafMarkers, setUlafMarkers] = useState([]); + + const determinePriority = (iconPath) => { + for (let priority of priorityConfig) { + if (iconPath.includes(priority.name.toLowerCase())) { + return priority.level; + } + } + return 5; + }; + + const createAndSetMarkers = async (systemId, setMarkersFunction) => { + try { + const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); + const jsonResponse = await response1.json(); + const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); + const statusResponse = await response2.json(); + + const getIdSystemAndAllowValueMap = new Map( + GisSystemStatic.map((system) => [system.IdSystem, system.Allow]) + ); + + 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) => { + 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 priority = determinePriority(iconPath); + const zIndexOffset = 100 * (5 - priority); + + const marker = L.marker([station.X, station.Y], { + icon: L.icon({ + iconUrl: iconPath, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + }), + areaName: station.Area_Name, + link: station.Link, + zIndexOffset: zIndexOffset, + bounceOnAdd: !!statis, + }); + + if (statis) { + marker.on("add", () => marker.bounce(3)); + } + + const statusInfo = statusResponse.Statis.filter( + (status) => status.IdLD === station.IdLD + ) + .reverse() + .map( + (status) => ` +
+
+ ${status.Me} (${status.Na}) +
+ ` + ) + .join(""); + + marker.bindPopup(` +
+ ${station.LD_Name} + ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name}) +
${statusInfo}
+
+ `); + + return marker; + }); + + setMarkersFunction(markersData); + } + } catch (error) { + console.error("Error fetching data: ", error); + } + }; + + const mapLayersVisibility = useRecoilValue(mapLayersState); + + const handleEditPoi = (marker) => { + if (!userRights || !userRights.includes(56)) { + toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.log("Benutzer hat keine Berechtigung zum Bearbeiten."); + return; + } + + console.log("Selected Marker Description:", marker.options.description); + console.log("Selected Marker :", marker); + + setCurrentPoiData({ + idPoi: marker.options.id, + name: marker.options.name, + description: marker.options.description, + }); + + fetchPoiData(marker.options.id); + + setShowPoiUpdateModal(true); + }; + + const selectedArea = useRecoilValue(selectedAreaState); + + const allMarkers = [ + ...talasMarkers, + ...eciMarkers, + ...gsmModemMarkers, + ...ciscoRouterMarkers, + ...wagoMarkers, + ...siemensMarkers, + ...otdrMarkers, + ...wdmMarkers, + ...gmaMarkers, + ...messstellenMarkers, + ...talasiclMarkers, + ...dauzMarkers, + ...smsfunkmodemMarkers, + ...sonstigeMarkers, + ...ulafMarkers, + ]; + + const findMyMarker = (areaName) => { + return allMarkers.find((marker) => marker.options.areaName === areaName); + }; + + useEffect(() => { + const params = new URL(window.location.href).searchParams; + setMapId(params.get("m")); + setUserId(params.get("u")); + }, [setMapId, setUserId]); + + useEffect(() => { + fetchUserRights().then(() => { + setIsRightsLoaded(true); + console.log("Benutzerrechte in useEffect in MapComponent:", userRights); + }); + }, [urls.SERVER_URL]); + + const url = new URL(window.location.href); + const serverURL = urls.SERVER_URL; + + useEffect(() => { + if (userRights !== 56) { + setShowPoiUpdateModal(false); + setShowAddStationPopup(false); + } + }, [userRights]); + + useEffect(() => { + console.log("useEffect current Data:", currentPoiData); + }, [currentPoiData]); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch(mapGisStationsStaticDistrictUrl); + const jsonResponse = await response.json(); + + if (jsonResponse && jsonResponse.Points) { + setGisStationsStaticDistrict(jsonResponse.Points); + } else { + console.error( + 'Erwartete Daten im "Points"-Array nicht gefunden', + jsonResponse + ); + setGisStationsStaticDistrict([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 1: ", error); + setGisStationsStaticDistrict([]); + } + }; + + fetchData(); + }, []); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch(mapGisStationsStaticDistrictUrl); + const jsonResponse = await response.json(); + + if (jsonResponse && jsonResponse.Points) { + setGisStationsStaticDistrict(jsonResponse.Points); + } else { + console.error( + 'Erwartete Daten im "Points"-Array nicht gefunden', + jsonResponse + ); + setGisStationsStaticDistrict([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 1: ", error); + setGisStationsStaticDistrict([]); + } + }; + + fetchData(); + }, []); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch(mapGisStationsStatusDistrictUrl); + const jsonResponse = await response.json(); + + if (jsonResponse && jsonResponse.Statis) { + setGisStationsStatusDistrict(jsonResponse.Statis); + } else { + console.error( + 'Erwartete Daten im "Statis"-Array nicht gefunden', + jsonResponse + ); + setGisStationsStatusDistrict([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 2: ", error); + setGisStationsStatusDistrict([]); + } + }; + + fetchData(); + }, []); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch(mapGisStationsMeasurementsUrl); + const jsonResponse = await response.json(); + + if (jsonResponse && jsonResponse.Statis) { + setGisStationsMeasurements(jsonResponse.Statis); + } else { + console.error( + 'Erwartete Daten im "Statis"-Array nicht gefunden', + jsonResponse + ); + setGisStationsMeasurements([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 3: ", error); + setGisStationsMeasurements([]); + } + }; + + fetchData(); + }, []); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch(mapGisSystemStaticUrl); + const jsonResponse = await response.json(); + + if (jsonResponse && jsonResponse.Systems) { + setGisSystemStatic(jsonResponse.Systems); + setGisSystemStaticLoaded(true); + } else { + console.error( + 'Erwartete Daten im "Systems"-Array nicht gefunden', + jsonResponse + ); + setGisSystemStatic([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 4: ", error); + setGisSystemStatic([]); + } + }; + + fetchData(); + }, []); + + useEffect(() => { + if (typeof window !== "undefined") { + console.log("Window height from config:", config.windowHeight); + } + }, []); + + useEffect(() => { + if (mapRef.current && !map) { + initMap = L.map(mapRef.current, { + center: currentCenter, + zoom: currentZoom, + layers: [ + TALAS, + ECI, + ULAF, + GSMModem, + CiscoRouter, + WAGO, + Siemens, + OTDR, + WDM, + GMA, + Sonstige, + TALASICL, + ], + minZoom: 5, + maxZoom: 15, + zoomControl: false, + contextmenu: true, + contextmenuItems: [ + { + text: "Station öffnen (Tab)", + icon: "/img/screen_new.png", + callback: (e) => { + const clickedMarker = e.relatedTarget; + openInNewTab(e, clickedMarker); + }, + }, + ], + }); + + L.tileLayer(online ? onlineTileLayer : offlineTileLayer, { + attribution: + '© OpenStreetMap contributors', + }).addTo(initMap); + + const overlappingMarkerSpiderfier = + new window.OverlappingMarkerSpiderfier(initMap, { + nearbyDistance: 20, + }); + + setMap(initMap); + setOms(overlappingMarkerSpiderfier); + + initMap.on("zoomend", function () { + if (initMap.getZoom() > 15) { + initMap.setZoom(15); + } else if (initMap.getZoom() < 5) { + initMap.setZoom(5); + } + }); + + initMap.whenReady(() => { + console.log("Karte ist jetzt bereit und initialisiert."); + }); + } + console.log("trigger in MapComponent.js:", poiReadTrigger); + }, [mapRef, map, poiReadTrigger, contextMenuItems]); + + useEffect(() => { + const fetchPoiTypData = async () => { + try { + const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"); + const data = await response.json(); + setPoiTypData(data); + } catch (error) { + console.error("Fehler beim Abrufen der poiTyp Daten:", error); + } + }; + console.log( + "trigger in MapComponent.js in fetchPoiTypData:", + poiReadTrigger + ); + fetchPoiTypData(); + }, []); + + useEffect(() => { + console.log("poiTypData aktualisiert:", poiTypData); + }, [poiTypData]); + + 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); + setIsPoiTypLoaded(true); + const poiTypName = poiTypMap.get(0) || "Unbekannt"; + console.log("poiTypName:", poiTypName); + } catch (error) { + console.error("Fehler beim Abrufen der poiTyp-Daten:", error); + } + }; + + fetchPoiTypData(); + }, []); + + let dbLayer = null; + useEffect(() => { + if (map) { + dbLayer = new L.LayerGroup().addTo(map); + + 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]); + + function editPoi(marker) { + const markerId = marker.options.id; + console.log("Bearbeiten des POI mit ID:", markerId); + } + + useEffect(() => { + if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) { + addItemsToMapContextMenu(); + } + }, [ + map, + poiLayerRef, + isPoiTypLoaded, + menuItemAdded, + ]); + + const [poiData, setPoiData] = useState([]); + + useEffect(() => { + 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(); + setPoiData(data); + console.log("poiData data:", data); + console.log("poiData icons:", poiData); + } catch (error) { + console.error("Fehler beim Abrufen der poiData:", error); + } + }; + + fetchPoiData(); + }, []); + + useEffect(() => { + if (poiData.length === 0) return; + + try { + if (map && poiLayerRef.current && isPoiTypLoaded) { + map.removeLayer(poiLayerRef.current); + poiLayerRef.current = new L.LayerGroup().addTo(map); + + locations.forEach(async (location) => { + try { + const { latitude, longitude } = parsePoint(location.position); + const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt"; + const deviceName = await fetchDeviceNameById(location.idLD); + console.log("deviceName:", deviceName); + + const canDrag = userRights ? userRights.includes(56) : false; + const matchingIcon = poiData.find( + (poi) => poi.idPoi === location.idPoi + ); + const iconUrl = matchingIcon + ? `/img/icons/pois/${matchingIcon.path}` + : "/img/icons/pois/default-icon.png"; + + const marker = L.marker([latitude, longitude], { + icon: L.icon({ + iconUrl: iconUrl, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + }), + draggable: canDrag, + id: location.idPoi, + }).bindContextMenu({ + contextmenu: true, + contextmenuWidth: 140, + contextmenuItems: [ + { + text: "POI Bearbeiten", + icon: "/img/poi-edit.png", + callback: () => + handleEditPoi( + marker, + userRights, + setCurrentPoiData, + setShowPoiUpdateModal, + fetchPoiData, + toast + ), + }, + ], + }); + + marker.bindPopup(` +
+ ${location.description || "Unbekannt"}
+ ${deviceName}
+ ${poiTypName}
+
+ `); + + marker.on("mouseover", function () { + this.openPopup(); + handlePoiSelect({ + id: location.idPoi, + deviceId: location.idLD, + typ: poiTypName, + description: location.description, + }); + setCurrentPoi(location); + }); + + marker.on("mouseout", function () { + this.closePopup(); + }); + + marker.on("dragend", (e) => { + if (canDrag) { + const newLat = e.target.getLatLng().lat; + const newLng = e.target.getLatLng().lng; + const markerId = e.target.options.id; + updateLocationInDatabase(markerId, newLat, newLng).then(() => { + onLocationUpdate(markerId, newLat, newLng); + }); + } else { + console.error("Drag operation not allowed"); + } + }); + + if (poiLayerVisible) { + marker.addTo(poiLayerRef.current); + } + } catch (innerError) { + console.error("Error processing a location:", innerError); + } + }); + } + } catch (error) { + console.error("Error in useEffect:", error); + } + }, [ + map, + locations, + onLocationUpdate, + poiReadTrigger, + isPoiTypLoaded, + userRights, + poiLayerVisible, + poiData, + ]); + + useEffect(() => { + if (gisSystemStaticLoaded && map) { + createAndSetMarkers(1, setTalasMarkers); + createAndSetMarkers(2, setEciMarkers); + createAndSetMarkers(5, setGsmModemMarkers); + createAndSetMarkers(6, setCiscoRouterMarkers); + createAndSetMarkers(7, setWagoMarkers); + createAndSetMarkers(8, setSiemensMarkers); + createAndSetMarkers(9, setOtdrMarkers); + createAndSetMarkers(10, setWdmMarkers); + createAndSetMarkers(11, setGmaMarkers); + createAndSetMarkers(13, setMessstellenMarkers); + createAndSetMarkers(100, setTalasiclMarkers); + createAndSetMarkers(110, setDauzMarkers); + createAndSetMarkers(111, setSmsfunkmodemMarkers); + createAndSetMarkers(200, setSonstigeMarkers); + createAndSetMarkers(0, setUlafMarkers); + } + }, [gisSystemStaticLoaded, map]); + + useEffect(() => { + if (map && talasMarkers.length) { + talasMarkers.forEach((marker) => { + marker.addTo(map); + oms.addMarker(marker); + + marker.on("mouseover", function () { + this.openPopup(); + }); + marker.on("mouseout", function () { + this.closePopup(); + }); + + addContextMenuToMarker(marker); + }); + map.addLayer(TALAS); + + map.options.contextmenu = false; + map.options.contextmenuItems = []; + + oms.map.options.contextmenu = false; + oms.map.options.contextmenuItems = []; + + checkOverlappingMarkers(oms, map, plusRoundIcon); + } + }, [map, talasMarkers]); + + useEffect(() => { + if (map && eciMarkers.length) { + eciMarkers.forEach((marker) => { + marker.addTo(map); + oms.addMarker(marker); + + marker.on("mouseover", function () { + this.openPopup(); + }); + marker.on("mouseout", function () { + this.closePopup(); + }); + addContextMenuToMarker(marker); + }); + map.addLayer(ECI); + } + }, [map, eciMarkers]); + + useEffect(() => { + if (map && gsmModemMarkers.length) { + gsmModemMarkers.forEach((marker) => { + marker.addTo(map); + oms.addMarker(marker); + + marker.on("mouseover", function () { + this.openPopup(); + }); + marker.on("mouseout", function () { + this.closePopup(); + }); + addContextMenuToMarker(marker); + }); + map.addLayer(GSMModem); + } + }, [map, gsmModemMarkers]); + + useEffect(() => { + if (map && ciscoRouterMarkers.length) { + ciscoRouterMarkers.forEach((marker) => { + marker.addTo(map); + oms.addMarker(marker); + + marker.on("mouseover", function () { + this.openPopup(); + }); + diff --git a/components/PoiUpdateModal.js b/components/PoiUpdateModal.js index 162d7fb57..47eebc438 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,52 +15,24 @@ 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) { @@ -82,7 +54,6 @@ 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 { @@ -94,8 +65,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => { ); if (response.ok) { alert("POI wurde erfolgreich gelöscht."); - onClose(); // Close the modal - //Browser neu laden, um die aktualisierte Liste anzuzeigen + onClose(); window.location.reload(); } else { throw new Error("Fehler beim Löschen des POI."); @@ -107,7 +77,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => { } }; - // Fetch POI types useEffect(() => { const fetchPoiTypData = async () => { try { @@ -127,22 +96,20 @@ 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"); + // 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 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 - console.log("Selected Device:", selectedDevice); - console.log("Selected devciceName:", deviceName); + setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); } } catch (error) { console.error( @@ -153,18 +120,12 @@ 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) => { setLocationDeviceData(data); - console.log("Standort- und Gerätedaten 3:", data); - console.log("Standort- und Gerätedaten 3 poiData:", poiData); - // Findet das Gerät, das der aktuellen IDLD entspricht const currentDevice = data.find( (device) => device.idLD === currentPoi.idLD ); @@ -178,10 +139,6 @@ 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( @@ -201,7 +158,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => { description: description, idPoiTyp: poiTypeId, idLD: idLD, - //idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl }), }); @@ -220,19 +176,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => { } }; - //ausgewählte poi Informationen in Console anzeigen - console.log("Selected POI:", selectedPoi); - console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id); - console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ); //als Typ in dropdown menu - console.log( - "Selected POI Beschreibung in poiUpdateModal.js:", - selectedPoi.description - ); - console.log( - "Selected POI Gerät deviceId in poiUpdateModal.js:", - selectedPoi.deviceId - ); - return (
@@ -261,16 +204,11 @@ const PoiUpdateModal = ({ onClose, poiData }) => { onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" > - {locationDeviceData.map( - (device, index) => ( - console.log("device.id und name:", device), - ( - - ) - ) - )} + {locationDeviceData.map((device, index) => ( + + ))}
@@ -294,7 +232,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {