1036 lines
32 KiB
JavaScript
1036 lines
32 KiB
JavaScript
// 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) => `
|
|
<div class="flex items-center my-1">
|
|
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
|
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
|
</div>
|
|
`
|
|
)
|
|
.join("");
|
|
|
|
marker.bindPopup(`
|
|
<div class=" bg-white rounded-lg ">
|
|
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
|
<span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
|
|
<span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
|
|
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
|
|
<div class="mt-2">${statusInfo}</div>
|
|
</div>
|
|
`);
|
|
|
|
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:
|
|
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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(`
|
|
<div>
|
|
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
|
|
${deviceName}<br>
|
|
${poiTypName}<br>
|
|
</div>
|
|
`);
|
|
|
|
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();
|
|
});
|
|
|