b53fe1b3f1
- Split utils.js into three separate files to enhance modularity and maintainability: 1. geometryUtils.js: Contains geometry-related functions like parsePoint and findClosestPoints. 2. mapUtils.js: Contains functions related to map operations such as redrawPolyline and saveLineData. 3. markerUtils.js: Contains functions related to marker operations like insertNewMarker and handleEditPoi. - Updated import statements in the relevant files to reflect the new structure. - Ensured that each utility module is self-contained and has clear responsibilities. This refactor improves the separation of concerns, making the codebase more organized and easier to navigate. Future maintenance and enhancements can now be more easily localized to the appropriate utility module.
2421 lines
85 KiB
JavaScript
2421 lines
85 KiB
JavaScript
// components/MapComponent.js
|
|
|
|
import React, {
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
useMemo,
|
|
useCallback,
|
|
use,
|
|
} from "react";
|
|
import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
|
|
|
|
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 dynamic from "next/dynamic";
|
|
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 ShowAddStationPopup from "./ShowAddStationPopup.js";
|
|
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
|
|
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
|
|
import PoiUpdateModal from "./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 { 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 { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
|
|
import { handleEditPoi, insertNewMarker } from "../utils/markerUtils.js";
|
|
import { saveLineData, redrawPolyline } from "../utils/mapUtils.js";
|
|
import circleIcon from "./CircleIcon";
|
|
import startIcon from "./StartIcon";
|
|
import endIcon from "./EndIcon";
|
|
import {
|
|
fetchGisStatusStations,
|
|
fetchPriorityConfig,
|
|
fetchPoiData,
|
|
updateLocationInDatabase,
|
|
checkInternet,
|
|
fetchUserRights,
|
|
fetchDeviceNameById,
|
|
} from "../services/apiService.js";
|
|
|
|
//---------------------------------------------------------------------
|
|
//-------------------- MapComponent -----------------------------------
|
|
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
|
const [currentZoom, setCurrentZoom] = useState(12);
|
|
const [currentCenter, setCurrentCenter] = useState(() => {
|
|
const storedCenter = localStorage.getItem("mapCenter");
|
|
return storedCenter ? JSON.parse(storedCenter) : [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);
|
|
});
|
|
}, []); // Lade die Berechtigungen beim Initialisieren der Komponente
|
|
|
|
const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
|
|
const zoomTrigger = useRecoilValue(zoomTriggerState);
|
|
const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
|
|
//const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
|
|
//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
|
const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
|
|
//const onlineTileLayer = "http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
|
|
// Create map layers
|
|
const TALAS = new L.layerGroup();
|
|
const ECI = new L.layerGroup();
|
|
const ULAF = new L.layerGroup();
|
|
const GSMModem = new L.layerGroup();
|
|
const CiscoRouter = new L.layerGroup();
|
|
const WAGO = new L.layerGroup();
|
|
const Siemens = new L.layerGroup();
|
|
const OTDR = new L.layerGroup();
|
|
const WDM = new L.layerGroup();
|
|
const GMA = new L.layerGroup();
|
|
const Sonstige = new L.layerGroup();
|
|
const TALASICL = new L.layerGroup();
|
|
const lineLayer = new L.LayerGroup();
|
|
|
|
const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
|
|
|
|
const baseUrl = "http://10.10.0.13/talas5/devices/"; // für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame
|
|
//const baseUrl = "http://localhost:3000/talas5/devices/";
|
|
//const baseUrl = "http://192.168.10.14/talas5/devices/";
|
|
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) => {
|
|
// Station-Daten speichern oder API-Aufruf durchführen
|
|
//console.log("Neue Station:", userRights.includes(56));
|
|
|
|
//console.log("Neue Station:", stationData);
|
|
setShowAddStationPopup(false);
|
|
closePopup(); // Schließt das Popup nach dem Hinzufügen
|
|
};
|
|
// Beispiel zum Öffnen des Popups mit bestimmten Koordinaten
|
|
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
|
|
|
|
// Konstanten für die URLs
|
|
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);
|
|
};
|
|
|
|
//----------------------------------------------------
|
|
//-----Kontextmenu----------------
|
|
function addContextMenuToMarker(marker) {
|
|
marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
|
|
|
|
marker.bindContextMenu({
|
|
contextmenu: true,
|
|
contextmenuWidth: 140,
|
|
contextmenuItems: [
|
|
/* {
|
|
text: "Station öffnen (Tab)",
|
|
icon: "/img/screen_new.png",
|
|
callback: (e) => openInNewTab(e, marker),
|
|
},
|
|
{
|
|
text: "Station öffnen",
|
|
icon: "/img/screen_same.png",
|
|
callback: (e) => openInSameWindow(e, marker),
|
|
}, */
|
|
],
|
|
});
|
|
}
|
|
// Funktion zum Öffnen in einem neuen Tab
|
|
function openInNewTab(e, marker) {
|
|
if (marker && marker.options && marker.options.link) {
|
|
//console.log("Marker data:", baseUrl + marker.options.link);
|
|
window.open(baseUrl + marker.options.link, "_blank");
|
|
} else {
|
|
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
|
|
}
|
|
}
|
|
|
|
// Funktion zum Öffnen im gleichen Fenster
|
|
function openInSameWindow(e, marker) {
|
|
if (marker && marker.options && marker.options.link) {
|
|
//console.log("Marker data:", baseUrl + marker.options.link);
|
|
window.location.href = baseUrl + marker.options.link;
|
|
} else {
|
|
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
|
|
}
|
|
}
|
|
|
|
const zoomIn = (e) => {
|
|
initMap.flyTo(e.latlng, 12);
|
|
//console.log("ZoomIn koordinaten in MapComponent", e.latlng);
|
|
};
|
|
|
|
const zoomOut = (e) => {
|
|
fly();
|
|
};
|
|
const centerHere = (e) => {
|
|
initMap.panTo(e.latlng);
|
|
};
|
|
|
|
// Funktion zum Anzeigen der Koordinaten
|
|
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();
|
|
};
|
|
|
|
// Kontextmenü Callback für "POI hinzufügen"
|
|
const addStationCallback = useCallback(
|
|
(event) => {
|
|
//console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", 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]
|
|
); // Abhängigkeit zu hasRights hinzufügen
|
|
|
|
//-----Kontextmenu----ende------------
|
|
//------------------------------------------ */
|
|
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 = [];
|
|
//-----------------------------------------------------------------
|
|
// TALAS Marker hinzufügen
|
|
//-----------------------------------------------------------------
|
|
// Reihenfolge nach API sortiert mit der Attribute "System"
|
|
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([]); //----------------station.System === 1
|
|
const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
|
|
const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
|
|
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
|
|
const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
|
|
const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
|
|
const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
|
|
const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
|
|
const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
|
|
const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
|
|
const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
|
|
const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
|
|
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
|
|
const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
|
|
const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
|
|
//--------------------------------------------------------------------------------
|
|
const determinePriority = (iconPath) => {
|
|
for (let priority of priorityConfig) {
|
|
if (iconPath.includes(priority.name.toLowerCase())) {
|
|
return priority.level;
|
|
}
|
|
}
|
|
return 5; // Default priority (lowest)
|
|
};
|
|
|
|
// Daten von einer externen Quelle laden
|
|
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])
|
|
);
|
|
//console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
|
|
|
|
if (jsonResponse.Points && statusResponse.Statis) {
|
|
const statisMap = new Map(
|
|
statusResponse.Statis.map((s) => [s.IdLD, s])
|
|
);
|
|
let markersData = jsonResponse.Points.filter(
|
|
(station) =>
|
|
station.System === systemId &&
|
|
getIdSystemAndAllowValueMap.get(station.System) === 1
|
|
).map((station) => {
|
|
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); // Adjusted for simplicity and positive values
|
|
|
|
/* console.log(
|
|
`Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
|
|
); */
|
|
|
|
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, // Stelle sicher, dass dieser Bereich gesetzt wird
|
|
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 selectedArea = useRecoilValue(selectedAreaState);
|
|
|
|
// Combine all markers into a single array
|
|
const allMarkers = [
|
|
...talasMarkers,
|
|
...eciMarkers,
|
|
...gsmModemMarkers,
|
|
...ciscoRouterMarkers,
|
|
...wagoMarkers,
|
|
...siemensMarkers,
|
|
...otdrMarkers,
|
|
...wdmMarkers,
|
|
...gmaMarkers,
|
|
...messstellenMarkers,
|
|
...talasiclMarkers,
|
|
...dauzMarkers,
|
|
...smsfunkmodemMarkers,
|
|
...sonstigeMarkers,
|
|
...ulafMarkers,
|
|
];
|
|
|
|
// Function to find a marker by areaName across all groups
|
|
const findMyMarker = (areaName) => {
|
|
return allMarkers.find((marker) => marker.options.areaName === areaName);
|
|
};
|
|
//--------------------------------------------------------------
|
|
//---------------------------------------------------------
|
|
// Now update checkOverlappingMarkers to check if oms is initialized
|
|
function checkOverlappingMarkers(map, markers, plusIcon) {
|
|
// Ensure markers is always an array
|
|
if (!Array.isArray(markers)) {
|
|
//console.error("The `markers` argument is not an array:", markers);
|
|
return;
|
|
}
|
|
|
|
const overlappingGroups = {};
|
|
|
|
// Group markers by coordinates as strings
|
|
markers.forEach((marker) => {
|
|
const latlngStr = marker.getLatLng().toString();
|
|
if (overlappingGroups[latlngStr]) {
|
|
overlappingGroups[latlngStr].push(marker);
|
|
} else {
|
|
overlappingGroups[latlngStr] = [marker];
|
|
}
|
|
});
|
|
|
|
// Add plus markers at coordinates where overlaps occur
|
|
for (const coords in overlappingGroups) {
|
|
if (overlappingGroups[coords].length > 1) {
|
|
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
|
|
const plusMarker = L.marker(latLng, { icon: plusIcon });
|
|
plusMarker.addTo(map);
|
|
|
|
//console.log("Adding plus icon marker at", latLng);
|
|
}
|
|
}
|
|
}
|
|
//---------------------------------------------------------
|
|
const handleMarkerClick = (markerData) => {
|
|
// Setze die aktuellen Daten im State, um sie im Formular vorzubelegen
|
|
setCurrentMarkerData(markerData);
|
|
setShowEditModal(true);
|
|
};
|
|
// In der Marker-Erstellungsfunktion
|
|
//---------------------------------------------------------
|
|
//-----------------------------------------------------------
|
|
// Funktion um die Benutzerrechte zu überprüfen
|
|
// serverIP 10.10.0.13 idMap=10 idUser=485
|
|
//const serverURL = "http://10.10.0.13";
|
|
|
|
const url = new URL(window.location.href);
|
|
const hostname = url.hostname; // Gibt den Hostnamen (IP oder Domain) zurück
|
|
const port = url.port; // Gibt den Port zurück, leer wenn Standardport verwendet wird
|
|
const protocol = url.protocol; // "http:" oder "https:"
|
|
//const serverURL = `${protocol}//${hostname}`;
|
|
const serverURL = "http://10.10.0.13"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte
|
|
//const serverURL = "http://localhost:3000"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte
|
|
|
|
const params = new URL(window.location.href).searchParams;
|
|
//const serverURL = `${protocol}//${hostname}${port ? `:${port}` : ""}`;
|
|
|
|
const c = params.get("m"); // Beispielwert für idMap
|
|
const user = params.get("u"); // Beispielwert für idUser
|
|
//console.log("serverURL:", serverURL);
|
|
useEffect(() => {
|
|
//console.log("Aktualisierter Status von hasRights: ", hasRights);
|
|
}, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert.
|
|
|
|
// Überprüfen der Benutzerrechte beim Initialisieren der Komponente
|
|
useEffect(() => {
|
|
fetchUserRights();
|
|
}, []);
|
|
|
|
// Anzeigen von Modals basierend auf Benutzerrechten
|
|
useEffect(() => {
|
|
if (userRights !== 56) {
|
|
setShowPoiUpdateModal(false);
|
|
setShowAddStationPopup(false);
|
|
}
|
|
}, [userRights]);
|
|
//-----------------------------------------------------------
|
|
//---------------------------------------------------------
|
|
useEffect(() => {
|
|
//console.log("useEffect current Data:", currentPoiData);
|
|
}, [currentPoiData]);
|
|
//---------------------------------------------------------
|
|
//------------------------------------------
|
|
// API-Daten laden für GisStationsStaticDistrict
|
|
//http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisStationsStaticDistrictUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Points) {
|
|
setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf '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();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
|
|
//GisStationsStaticDistrict Daten laden
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisStationsStaticDistrictUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Points) {
|
|
setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf '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();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
//------------------------------------------
|
|
//GisStationsStatusDistrict Daten laden
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisStationsStatusDistrictUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Statis) {
|
|
setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf '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();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
//------------------------------------------
|
|
//GisStationsMeasurements Daten laden
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisStationsMeasurementsUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Statis) {
|
|
setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf '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();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
//------------------------------------------
|
|
|
|
//GisSystemStatic Daten laden
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisSystemStaticUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
if (jsonResponse && jsonResponse.Systems) {
|
|
setGisSystemStatic(jsonResponse.Systems);
|
|
setGisSystemStaticLoaded(true); // Setze den Zustand auf geladen
|
|
} 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);
|
|
}
|
|
}, []);
|
|
|
|
// Initialisierung der karte und hinzuügen der Layers
|
|
useEffect(() => {
|
|
if (mapRef.current && !map) {
|
|
initMap = L.map(mapRef.current, {
|
|
//center: [53.111111, 8.4625],
|
|
center: currentCenter,
|
|
//zoom: 8,
|
|
zoom: currentZoom,
|
|
layers: [
|
|
TALAS,
|
|
ECI,
|
|
ULAF,
|
|
GSMModem,
|
|
CiscoRouter,
|
|
WAGO,
|
|
Siemens,
|
|
OTDR,
|
|
WDM,
|
|
GMA,
|
|
Sonstige,
|
|
TALASICL,
|
|
],
|
|
minZoom: 5, // Minimale Zoomstufe
|
|
maxZoom: 15, // Maximale Zoomstufe
|
|
zoomControl: false,
|
|
contextmenu: true,
|
|
contextmenuItems: [
|
|
{
|
|
text: "Station öffnen (Tab)",
|
|
icon: "/img/screen_new.png",
|
|
callback: (e) => {
|
|
const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
|
|
openInNewTab(e, clickedMarker);
|
|
},
|
|
},
|
|
"-", // Divider
|
|
|
|
{
|
|
text: "Koordinaten anzeigen",
|
|
icon: "img/not_listed_location.png",
|
|
callback: showCoordinates,
|
|
},
|
|
"-", // Divider
|
|
{ text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
|
|
{ text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut },
|
|
{
|
|
text: "Hier zentrieren",
|
|
icon: "img/center_focus.png",
|
|
callback: centerHere,
|
|
},
|
|
"-", // Divider
|
|
],
|
|
});
|
|
|
|
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 () {
|
|
// Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
|
|
if (initMap.getZoom() > 15) {
|
|
initMap.setZoom(15);
|
|
} else if (initMap.getZoom() < 5) {
|
|
initMap.setZoom(5);
|
|
}
|
|
});
|
|
|
|
// Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
|
|
initMap.whenReady(() => {
|
|
console.log("Karte ist jetzt bereit und initialisiert.");
|
|
// Rufe hier Funktionen auf, die eine initialisierte Karte benötigen.
|
|
});
|
|
}
|
|
//console.log("trigger in MapComponent.js:", poiReadTrigger);
|
|
}, [mapRef, map, poiReadTrigger, contextMenuItems]); // Prüfe die Abhängigkeiten sorgfältig
|
|
|
|
// poiTyp Daten hinzufügen
|
|
//------------------------------------------
|
|
// Funktion zum Abrufen der poiTyp Daten
|
|
|
|
useEffect(() => {
|
|
const fetchPoiTypData = async () => {
|
|
try {
|
|
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
|
|
const data = await response.json();
|
|
setPoiTypData(data); // Daten im Recoil State speichern
|
|
} catch (error) {
|
|
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
|
|
}
|
|
};
|
|
/* console.log(
|
|
"trigger in MapComponent.js in fetchPoiTypData:",
|
|
poiReadTrigger
|
|
); */
|
|
fetchPoiTypData();
|
|
}, []);
|
|
|
|
// Effekt zum Loggen der poiTypData, wenn sie sich ändern
|
|
useEffect(() => {
|
|
//console.log("poiTypData aktualisiert:", poiTypData);
|
|
}, [poiTypData]);
|
|
|
|
//---------------------------------------
|
|
|
|
// Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
|
|
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); // Daten wurden erfolgreich geladen
|
|
//console.log("poiTypMap:", map);
|
|
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) {
|
|
// Schicht für Datenbank-Marker, sicherstellen, dass map nicht null ist
|
|
dbLayer = new L.LayerGroup().addTo(map);
|
|
|
|
// Fügen Sie Ihre Marker hier innerhalb dieser useEffect hinzu, da map nicht null ist
|
|
|
|
return () => {
|
|
// Bereinigung, entfernt dbLayer, wenn die Komponente unmountet
|
|
dbLayer.remove();
|
|
};
|
|
}
|
|
}, [map]);
|
|
|
|
//------------------------------------------
|
|
|
|
useEffect(() => {
|
|
// Initialisierung der dbLayer, wenn die Karte verfügbar ist
|
|
if (map && !poiLayerRef.current) {
|
|
poiLayerRef.current = new L.LayerGroup().addTo(map);
|
|
}
|
|
|
|
return () => {
|
|
if (map && poiLayerRef.current) {
|
|
// Entfernen der dbLayer bei Unmount
|
|
map.removeLayer(poiLayerRef.current);
|
|
poiLayerRef.current = new L.LayerGroup().addTo(map);
|
|
}
|
|
locations.forEach((location) => {
|
|
// Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
|
|
});
|
|
};
|
|
//console.log("trigger in MapComponent.js:", poiReadTrigger);
|
|
}, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
|
|
//------------------------------------------
|
|
function editPoi(marker) {
|
|
// Zugriff auf die Markerdaten
|
|
const markerId = marker.options.id;
|
|
//console.log("Bearbeiten des POI mit ID:", markerId);
|
|
|
|
// Hier könnte ein Modal mit Formular geöffnet werden
|
|
// Beispiel: openEditModal(markerId);
|
|
}
|
|
|
|
//------------------------------------------
|
|
//--------------------------------------------------
|
|
|
|
const addItemsToMapContextMenu = () => {
|
|
if (!menuItemAdded) {
|
|
//console.log("contextMenuItems hasRights:", hasRights);
|
|
|
|
map.contextmenu.addItem({
|
|
text: "POI hinzufügen",
|
|
icon: "img/add_station.png",
|
|
className: "background-red",
|
|
callback: (event) => addStationCallback(event, hasRights),
|
|
});
|
|
|
|
setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {
|
|
addItemsToMapContextMenu();
|
|
}
|
|
}, [
|
|
map,
|
|
poiLayerRef,
|
|
isPoiTypLoaded,
|
|
menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
|
|
]);
|
|
//------------------------------------------
|
|
|
|
// poiLayerRef(poiDbLayer) POI hinzufügen
|
|
//--------------------------------------------
|
|
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); // Das ist in Modal POI hinzufügen
|
|
|
|
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),
|
|
},
|
|
],
|
|
});
|
|
|
|
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, // Add poiData as a dependency
|
|
]);
|
|
|
|
//---------------------------------------------
|
|
|
|
//-------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (gisSystemStaticLoaded && map) {
|
|
createAndSetMarkers(1, setTalasMarkers); // TALAS-System
|
|
createAndSetMarkers(2, setEciMarkers); // ECI-System
|
|
createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
|
|
createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
|
|
createAndSetMarkers(7, setWagoMarkers); // WAGO-System
|
|
createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
|
|
createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
|
|
createAndSetMarkers(10, setWdmMarkers); // WDM-System
|
|
createAndSetMarkers(11, setGmaMarkers); // GMA-System
|
|
createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
|
|
createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
|
|
createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
|
|
createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
|
|
createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
|
|
createAndSetMarkers(0, setUlafMarkers); // ULAF-System
|
|
}
|
|
}, [gisSystemStaticLoaded, map]);
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && talasMarkers.length) {
|
|
talasMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(TALAS);
|
|
//console.log("map", map);
|
|
//console.log("oms", oms);
|
|
//disable map contextmenu
|
|
map.options.contextmenu = false;
|
|
map.options.contextmenuItems = [];
|
|
|
|
oms.map.options.contextmenu = false;
|
|
oms.map.options.contextmenuItems = [];
|
|
|
|
// Call the function here
|
|
checkOverlappingMarkers(oms, map, plusRoundIcon);
|
|
}
|
|
}, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
|
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && eciMarkers.length) {
|
|
eciMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(ECI);
|
|
}
|
|
}, [map, eciMarkers]);
|
|
|
|
//console.log("eciMarkers", eciMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && gsmModemMarkers.length) {
|
|
gsmModemMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(GSMModem);
|
|
}
|
|
}, [map, gsmModemMarkers]);
|
|
|
|
//console.log("gsmModemMarkers", gsmModemMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && ciscoRouterMarkers.length) {
|
|
ciscoRouterMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(CiscoRouter);
|
|
}
|
|
}, [map, ciscoRouterMarkers]);
|
|
|
|
//console.log("ciscoRouterMarkers", ciscoRouterMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && wagoMarkers.length) {
|
|
wagoMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(WAGO);
|
|
|
|
//toggleLayer(mapLayersVisibility.WAGO);
|
|
}
|
|
// }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
|
|
}, [map, wagoMarkers]);
|
|
//console.log("wagoMarkers", wagoMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && siemensMarkers.length) {
|
|
siemensMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(Siemens);
|
|
}
|
|
}, [map, siemensMarkers]);
|
|
|
|
//console.log("siemensMarkers", siemensMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && otdrMarkers.length) {
|
|
otdrMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(OTDR);
|
|
}
|
|
}, [map, otdrMarkers]);
|
|
|
|
//console.log("otdrMarkers", otdrMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && wdmMarkers.length) {
|
|
wdmMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(WDM);
|
|
}
|
|
}, [map, wdmMarkers]);
|
|
|
|
//console.log("wdmMarkers", wdmMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && gmaMarkers.length) {
|
|
// Filtern des Arrays um nur "GMA" Messungen zu erhalten
|
|
const gmaMeasurements = GisStationsMeasurements.filter(
|
|
(m) => m.Gr === "GMA"
|
|
);
|
|
let area_name = "";
|
|
let measurements = {};
|
|
|
|
gmaMeasurements.forEach((m) => {
|
|
//console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`);
|
|
area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array
|
|
measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt
|
|
});
|
|
|
|
// Zugriff auf die Werte über die Codes
|
|
let measurementLT = measurements["LT"];
|
|
let measurementFTP = measurements["FTP"];
|
|
let measurementGT = measurements["GT"];
|
|
let measurementRLF = measurements["RLF"];
|
|
|
|
gmaMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Tooltip beim Überfahren mit der Maus anzeigen
|
|
marker.bindTooltip(
|
|
`
|
|
<div class="p-0 rounded-lg bg-white bg-opacity-90">
|
|
<div class="font-bold text-sm text-black">
|
|
<span>${area_name}</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-blue-700">
|
|
<span>LT : ${measurements.LT} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-red-700">
|
|
<span>FBT : ${measurements.FBT} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-yellow-500">
|
|
<span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-green-700">
|
|
<span>RLF : ${measurements.RLF} %</span>
|
|
</div>
|
|
</div>
|
|
`,
|
|
{
|
|
permanent: true, // Tooltip wird ständig angezeigt
|
|
direction: "auto", // Automatische Ausrichtung
|
|
offset: [20, 0], // Offset-Werte
|
|
}
|
|
);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(GMA);
|
|
}
|
|
}, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken
|
|
|
|
//console.log("gmaMarkers", gmaMarkers);
|
|
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && messstellenMarkers.length) {
|
|
messstellenMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(GMA);
|
|
}
|
|
}, [map, messstellenMarkers]);
|
|
|
|
//console.log("messstellenMarkers", messstellenMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && talasiclMarkers.length) {
|
|
talasiclMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(TALASICL);
|
|
}
|
|
}, [map, talasiclMarkers]);
|
|
|
|
//console.log("talasiclMarkers", talasiclMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && dauzMarkers.length) {
|
|
dauzMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
}
|
|
}, [map, dauzMarkers]);
|
|
|
|
//console.log("dauzMarkers", dauzMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && smsfunkmodemMarkers.length) {
|
|
smsfunkmodemMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
}
|
|
}, [map, smsfunkmodemMarkers]);
|
|
|
|
//console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && ulafMarkers.length) {
|
|
ulafMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
}
|
|
}, [map, ulafMarkers]);
|
|
|
|
//console.log("ulafMarkers", ulafMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && sonstigeMarkers.length) {
|
|
sonstigeMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
}
|
|
}, [map, sonstigeMarkers]);
|
|
|
|
//console.log("sonstige", sonstigeMarkers);
|
|
//-------------------------------------------
|
|
|
|
// Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
|
|
|
|
useEffect(() => {
|
|
if (!map || !talasMarkers) return;
|
|
/* const someLineCoordinatesforTalas = [
|
|
[53.111111, 8.4625],
|
|
[53.111111, 8.4625],
|
|
[53.111111, 8.4625],
|
|
[53.111111, 8.4625],
|
|
]; */
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
//console.log("talasMarkers", talasMarkers);
|
|
//console.log("talasMarkers.color", talasMarkers.color);
|
|
//talasMarkers.forEach((marker) => map.removeLayer(marker));
|
|
/* console.log("talasMarkers linePositions ", linePositions);
|
|
const polyline = L.polyline(someLineCoordinatesforTalas, {
|
|
color: "green",
|
|
}).addTo(
|
|
//Linien-Farbe /Farbe für die Strecke zwischen den Markern
|
|
TALAS
|
|
); */
|
|
} else {
|
|
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
|
|
// Apply visibility state to the TALAS layer
|
|
toggleLayer(mapLayersVisibility.TALAS);
|
|
}, [map, talasMarkers, mapLayersVisibility.TALAS]);
|
|
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der ECI-Marker basierend auf dem Zustand von mapLayersVisibility.ECI
|
|
|
|
useEffect(() => {
|
|
if (!map || !eciMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
eciMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
eciMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility state to the ECI layer
|
|
toggleLayer(mapLayersVisibility.ECI);
|
|
}, [map, eciMarkers, mapLayersVisibility.ECI]);
|
|
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der ULAF-Marker basierend auf dem Zustand von mapLayersVisibility.ULAF
|
|
|
|
useEffect(() => {
|
|
if (!map || !ulafMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
ulafMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
ulafMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.ULAF);
|
|
}, [map, ulafMarkers, mapLayersVisibility.ULAF]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der GSMModem-Marker basierend auf dem Zustand von mapLayersVisibility.GSMModem
|
|
|
|
useEffect(() => {
|
|
if (!map || !gsmModemMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
gsmModemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
gsmModemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.GSMModem);
|
|
}, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
|
|
|
|
//------------------------------------------ */
|
|
|
|
// Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
|
|
|
|
useEffect(() => {
|
|
if (!map || !ciscoRouterMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
ciscoRouterMarkers.forEach((marker) => marker.addTo(map));
|
|
} else {
|
|
ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker));
|
|
}
|
|
};
|
|
// Nutzt die Map, um den internen Namen zu bekommen
|
|
const internalName = layerNames["Cisco Router"] || "CiscoRouter";
|
|
toggleLayer(mapLayersVisibility[internalName]);
|
|
//console.log("internalName Cisco Router: ", internalName);
|
|
}, [map, ciscoRouterMarkers, mapLayersVisibility]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der WAGO-Marker basierend auf dem Zustand von mapLayersVisibility.WAGO
|
|
|
|
useEffect(() => {
|
|
if (!map || !wagoMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
wagoMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
wagoMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.WAGO);
|
|
}, [map, wagoMarkers, mapLayersVisibility.WAGO]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der Siemens-Marker basierend auf dem Zustand von mapLayersVisibility.Siemens
|
|
|
|
useEffect(() => {
|
|
if (!map || !siemensMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
siemensMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
siemensMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.Siemens);
|
|
}, [map, siemensMarkers, mapLayersVisibility.Siemens]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der OTDR-Marker basierend auf dem Zustand von mapLayersVisibility.OTDR
|
|
|
|
useEffect(() => {
|
|
if (!map || !otdrMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
otdrMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
otdrMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.OTDR);
|
|
}, [map, otdrMarkers, mapLayersVisibility.OTDR]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der WDM-Marker basierend auf dem Zustand von mapLayersVisibility.WDM
|
|
|
|
useEffect(() => {
|
|
if (!map || !wdmMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
wdmMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
wdmMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.WDM);
|
|
}, [map, wdmMarkers, mapLayersVisibility.WDM]);
|
|
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der GMA-Marker basierend auf dem Zustand von mapLayersVisibility.GMA
|
|
|
|
useEffect(() => {
|
|
if (!map || !gmaMarkers) return;
|
|
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
gmaMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
gmaMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.GMA);
|
|
}, [map, gmaMarkers, mapLayersVisibility.GMA]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der Sonstige-Marker basierend auf dem Zustand von mapLayersVisibility.Sonstige
|
|
|
|
useEffect(() => {
|
|
if (!map || !sonstigeMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
sonstigeMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
sonstigeMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.Sonstige);
|
|
}, [map, sonstigeMarkers, mapLayersVisibility.Sonstige]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der TALASICL-Marker basierend auf dem Zustand von mapLayersVisibility.TALASICL
|
|
|
|
useEffect(() => {
|
|
if (!map || !talasiclMarkers) return;
|
|
//console.log("talasiclMarkers", talasiclMarkers);
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
|
|
// Verwendung der Map, um den internen Namen zu bekommen, und Fallback auf "TALASICL", falls nicht gefunden
|
|
const internalName =
|
|
layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers ";
|
|
toggleLayer(mapLayersVisibility[internalName]);
|
|
//console.log("internalName for TALAS ICL in MapComponent: ", internalName);
|
|
}, [map, talasiclMarkers, mapLayersVisibility]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der DAUZ-Marker basierend auf dem Zustand von mapLayersVisibility.DAUZ
|
|
|
|
useEffect(() => {
|
|
if (!map || !dauzMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
dauzMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
dauzMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.DAUZ);
|
|
}, [map, dauzMarkers, mapLayersVisibility.DAUZ]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem
|
|
|
|
useEffect(() => {
|
|
if (!map || !smsfunkmodemMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
smsfunkmodemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
smsfunkmodemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.SMSFunkmodem);
|
|
}, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen
|
|
|
|
useEffect(() => {
|
|
if (!map || !messstellenMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
messstellenMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
messstellenMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.Messstellen);
|
|
}, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
|
|
|
|
//------------------------------------------ */
|
|
|
|
// Effect to handle navigation to selected area
|
|
useEffect(() => {
|
|
if (selectedArea && map) {
|
|
const marker = findMyMarker(selectedArea);
|
|
if (marker) {
|
|
map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
|
|
}
|
|
}
|
|
}, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
|
|
|
|
//------------------------------------------
|
|
|
|
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");
|
|
} // Ihre bereits existierende Funktion, die Zoom-Out ausführt
|
|
}
|
|
}, [map, zoomTrigger]);
|
|
|
|
//---------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map) {
|
|
// Combine all markers from different layers
|
|
const allMarkers = [
|
|
...talasMarkers,
|
|
...eciMarkers,
|
|
...gsmModemMarkers,
|
|
...ciscoRouterMarkers,
|
|
...wagoMarkers,
|
|
...siemensMarkers,
|
|
...otdrMarkers,
|
|
...wdmMarkers,
|
|
...gmaMarkers,
|
|
...messstellenMarkers,
|
|
...talasiclMarkers,
|
|
...dauzMarkers,
|
|
...smsfunkmodemMarkers,
|
|
...sonstigeMarkers,
|
|
...ulafMarkers,
|
|
];
|
|
|
|
// Call the function to check for overlaps and add plus icons
|
|
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
|
|
}
|
|
}, [
|
|
map,
|
|
talasMarkers,
|
|
eciMarkers,
|
|
gsmModemMarkers,
|
|
ciscoRouterMarkers,
|
|
wagoMarkers,
|
|
siemensMarkers,
|
|
otdrMarkers,
|
|
wdmMarkers,
|
|
gmaMarkers,
|
|
messstellenMarkers,
|
|
talasiclMarkers,
|
|
dauzMarkers,
|
|
smsfunkmodemMarkers,
|
|
sonstigeMarkers,
|
|
ulafMarkers,
|
|
]);
|
|
//---------------------------------------------------------
|
|
//LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
|
|
const [linePositions, setLinePositions] = useState([]);
|
|
// ------------Linien zeichnen----------------
|
|
useEffect(() => {
|
|
const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
|
|
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) => {
|
|
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);
|
|
});
|
|
}, []);
|
|
//--------------------------- Linien färben ------------------------------
|
|
const [lineColors, setLineColors] = useState({});
|
|
const [tooltipContents, setTooltipContents] = useState({});
|
|
const [polylines, setPolylines] = useState([]);
|
|
const [markers, setMarkers] = useState([]);
|
|
|
|
// API-Aufruf, um Farben der Linien abzurufen
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
|
const data1 = await response1.json();
|
|
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
|
|
const data2 = await response2.json();
|
|
|
|
const colorsByModule = {};
|
|
const newTooltipContents = {};
|
|
|
|
data1.Statis.forEach((stat) => {
|
|
const matchingLine = data2.find(
|
|
(item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
|
|
);
|
|
if (matchingLine) {
|
|
colorsByModule[matchingLine.idModul] = stat.PrioColor;
|
|
newTooltipContents[matchingLine.idModul] = `
|
|
<div class="bg-white rounded-lg m-0 p-2 w-[210px]">
|
|
<span class="text-lg font-semibold text-gray-900">${stat.ModulName || "Unknown"}</span>
|
|
<br>
|
|
<span class="text-md font-bold text-gray-800">${stat.ModulTyp || "N/A"}</span>
|
|
<br>
|
|
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
|
|
<span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${stat.PrioColor || "#000000"};"></span>
|
|
<span class="inline-block text-gray-800">${stat.Message || "N/A"}</span>
|
|
</div>
|
|
<span class="text-gray-800" style="color: ${stat.PrioColor || "#000000"};">(${stat.PrioName || "N/A"})</span>
|
|
<br>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
|
|
setLineColors(colorsByModule);
|
|
setTooltipContents(newTooltipContents);
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
// Überwachen des lineColors Zustandes
|
|
useEffect(() => {
|
|
//console.log("Aktualisierte lineColors", lineColors);
|
|
}, [lineColors]);
|
|
|
|
//---------------------------------------------------------
|
|
//----------------------- Update lines----------------------------------
|
|
const [lineStatusData, setLineStatusData] = useState([]);
|
|
const [linesData, setLinesData] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
|
const data1 = await response1.json();
|
|
setLineStatusData(data1.Statis);
|
|
|
|
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
|
|
const data2 = await response2.json();
|
|
|
|
const colorsByModule = {};
|
|
data1.Statis.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();
|
|
}, []);
|
|
//---------------------------------------------------------
|
|
useEffect(() => {
|
|
console.log("lineStatusData", lineStatusData);
|
|
console.log("lineData:", linesData);
|
|
}, [lineStatusData, linesData]);
|
|
//---------------------------------------------------------
|
|
const [newPoint, setNewPoint] = useState(null);
|
|
const [newCoords, setNewCoords] = useState(null);
|
|
const [tempMarker, setTempMarker] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (!map) return;
|
|
|
|
// Entfernen alter Marker und Polylines
|
|
markers.forEach((marker) => marker.remove());
|
|
polylines.forEach((polyline) => polyline.remove());
|
|
|
|
const newMarkers = [];
|
|
const newPolylines = [];
|
|
|
|
linePositions.forEach((lineData, lineIndex) => {
|
|
const lineMarkers = [];
|
|
lineData.coordinates.forEach((coord, index) => {
|
|
let icon = circleIcon; // Standard-Icon für mittlere Punkte
|
|
if (index === 0) {
|
|
icon = startIcon; // Start-Icon für den ersten Punkt
|
|
} else if (index === lineData.coordinates.length - 1) {
|
|
icon = endIcon; // End-Icon für den letzten Punkt
|
|
}
|
|
|
|
const marker = L.marker(coord, {
|
|
icon: icon,
|
|
draggable: true,
|
|
contextmenu: true,
|
|
contextmenuInheritItems: false,
|
|
contextmenuItems: [], // Starte mit einem leeren Menü
|
|
}).addTo(map);
|
|
|
|
marker.on("dragend", () => {
|
|
const newCoords = marker.getLatLng();
|
|
setNewCoords(newCoords); // Aktualisieren Sie den Zustand
|
|
const newCoordinates = [...lineData.coordinates];
|
|
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
|
|
|
const updatedPolyline = L.polyline(newCoordinates, {
|
|
color: lineColors[lineData.idModul] || "#000000",
|
|
}).addTo(map);
|
|
|
|
updatedPolyline.bindTooltip(
|
|
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
|
|
{
|
|
permanent: false,
|
|
direction: "auto",
|
|
}
|
|
);
|
|
|
|
updatedPolyline.on("mouseover", () => {
|
|
updatedPolyline.setStyle({ weight: 10 });
|
|
updatedPolyline.bringToFront();
|
|
});
|
|
updatedPolyline.on("mouseout", () => {
|
|
updatedPolyline.setStyle({ weight: 5 });
|
|
});
|
|
|
|
newPolylines[lineIndex].remove();
|
|
newPolylines[lineIndex] = updatedPolyline;
|
|
lineData.coordinates = newCoordinates;
|
|
|
|
const requestData = {
|
|
idModul: lineData.idModul,
|
|
idLD: lineData.idLD,
|
|
newCoordinates,
|
|
};
|
|
|
|
console.log("Sending to API:", requestData);
|
|
// API-Aufruf, um die neuen Koordinaten zu speichern
|
|
fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(requestData),
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
return response.json().then((data) => {
|
|
throw new Error(data.error || "Unbekannter Fehler");
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
console.log("Koordinaten erfolgreich aktualisiert:", data);
|
|
})
|
|
.catch((error) => {
|
|
console.error(
|
|
"Fehler beim Aktualisieren der Koordinaten:",
|
|
error.message
|
|
);
|
|
});
|
|
});
|
|
|
|
// Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist
|
|
marker.on("mouseover", function () {
|
|
this.bindContextMenu({
|
|
contextmenuItems: [
|
|
{
|
|
text: "Marker entfernen",
|
|
callback: () => {
|
|
const newCoords = marker.getLatLng();
|
|
const newCoordinates = [...lineData.coordinates];
|
|
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
|
|
|
removeMarker(marker, lineData);
|
|
newPolylines[lineIndex].remove();
|
|
lineData.coordinates = newCoordinates;
|
|
},
|
|
},
|
|
],
|
|
});
|
|
});
|
|
|
|
// Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt
|
|
marker.on("mouseout", function () {
|
|
this.unbindContextMenu();
|
|
});
|
|
|
|
lineMarkers.push(marker);
|
|
});
|
|
|
|
const polyline = L.polyline(lineData.coordinates, {
|
|
color: lineColors[lineData.idModul] || "#000000",
|
|
contextmenu: true,
|
|
contextmenuItems: [
|
|
{
|
|
text: "Marker hier hinzufügen",
|
|
callback: (e) => {
|
|
if (tempMarker) {
|
|
tempMarker.remove(); // Entfernen des Platzhalter-Icons
|
|
}
|
|
//------------
|
|
const newPoint = e.latlng;
|
|
setNewPoint(newPoint); // Aktualisieren Sie den Zustand
|
|
const closestPoints = findClosestPoints(
|
|
lineData.coordinates,
|
|
newPoint
|
|
);
|
|
insertNewMarker(closestPoints, newPoint, lineData, map);
|
|
redrawPolyline(lineData);
|
|
//Browser aktualisieren
|
|
localStorage.setItem("mapZoom", currentZoom);
|
|
localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
|
|
window.location.reload();
|
|
},
|
|
},
|
|
],
|
|
}).addTo(map);
|
|
|
|
polyline.on("mouseover", (e) => {
|
|
// Optional: Visualisiere, dass die Linie interaktiv ist
|
|
polyline.setStyle({ color: "blue", weight: 10 });
|
|
});
|
|
|
|
polyline.on("mouseout", (e) => {
|
|
// Setze die ursprüngliche Farbe zurück
|
|
polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
|
|
});
|
|
|
|
polyline.bindTooltip(
|
|
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
|
|
{
|
|
permanent: false,
|
|
direction: "auto",
|
|
}
|
|
);
|
|
|
|
newPolylines.push(polyline);
|
|
newMarkers.push(...lineMarkers);
|
|
});
|
|
|
|
setMarkers(newMarkers);
|
|
setPolylines(newPolylines);
|
|
}, [
|
|
map,
|
|
linePositions,
|
|
lineColors,
|
|
tooltipContents,
|
|
newPoint,
|
|
newCoords,
|
|
tempMarker,
|
|
]);
|
|
|
|
//---------------------------------------------------------
|
|
//-------------------------Funktionen--------------------------------
|
|
|
|
function addMarkerAt(e, lineData) {
|
|
const newCoord = [e.latlng.lat, e.latlng.lng];
|
|
lineData.coordinates.push(newCoord); // neuen Punkt hinzufügen
|
|
drawPolyline(lineData); // Polylinie neu zeichnen
|
|
|
|
const marker = L.marker(newCoord, { draggable: true }).addTo(map);
|
|
marker.on("drag", (event) => {
|
|
updateMarkerPosition(event.target.getLatLng(), lineData, marker);
|
|
});
|
|
}
|
|
|
|
function drawPolyline(lineData) {
|
|
if (lineData.polyline) map.removeLayer(lineData.polyline);
|
|
lineData.polyline = L.polyline(lineData.coordinates, {
|
|
color: "red",
|
|
}).addTo(map);
|
|
}
|
|
//---------------------------------------------------------
|
|
function removeMarker(marker, lineData) {
|
|
// Save zoom and center to localStorage
|
|
localStorage.setItem("mapZoom", currentZoom);
|
|
localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
|
|
|
|
// Find the index of the coordinate that matches the marker's position
|
|
const index = lineData.coordinates.findIndex((coord) =>
|
|
L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
|
|
);
|
|
|
|
if (index !== -1) {
|
|
// Remove the coordinate from the line data
|
|
lineData.coordinates.splice(index, 1);
|
|
|
|
// Redraw the polyline with the updated coordinates
|
|
redrawPolyline(lineData);
|
|
|
|
// Remove the marker from the map
|
|
marker.remove();
|
|
|
|
// Save the updated line data
|
|
saveLineData(lineData);
|
|
|
|
// Refresh the browser
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
// Call this function on page load to restore zoom and center
|
|
function restoreMapSettings() {
|
|
const savedZoom = localStorage.getItem("mapZoom");
|
|
const savedCenter = localStorage.getItem("mapCenter");
|
|
|
|
if (savedZoom && savedCenter) {
|
|
const centerCoords = JSON.parse(savedCenter);
|
|
map.setView(centerCoords, parseInt(savedZoom));
|
|
}
|
|
}
|
|
|
|
// Call restoreMapSettings when the map is initialized
|
|
useEffect(() => {
|
|
if (map) {
|
|
restoreMapSettings();
|
|
}
|
|
}, [map]);
|
|
|
|
//---------------------------------------------------------
|
|
|
|
function updateMarkerPosition(newLatLng, lineData, marker) {
|
|
const index = lineData.coordinates.findIndex((coord) =>
|
|
L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
|
|
);
|
|
if (index !== -1) {
|
|
lineData.coordinates[index] = [newLatLng.lat, newLatLng.lng];
|
|
redrawPolyline(lineData);
|
|
saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
|
|
}
|
|
}
|
|
|
|
function findClosestPoints(coordinates, newPoint) {
|
|
let minDist = Infinity;
|
|
let closestPair = [];
|
|
for (let i = 1; i < coordinates.length; i++) {
|
|
const dist = L.LineUtil.pointToSegmentDistance(
|
|
map.latLngToLayerPoint(newPoint),
|
|
map.latLngToLayerPoint(coordinates[i - 1]),
|
|
map.latLngToLayerPoint(coordinates[i])
|
|
);
|
|
if (dist < minDist) {
|
|
minDist = dist;
|
|
closestPair = [coordinates[i - 1], coordinates[i], i];
|
|
}
|
|
}
|
|
return closestPair;
|
|
}
|
|
//---------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map) {
|
|
const handleMapMoveEnd = (event) => {
|
|
const newCenter = map.getCenter();
|
|
const newZoom = map.getZoom();
|
|
|
|
setCurrentCenter([newCenter.lat, newCenter.lng]);
|
|
setCurrentZoom(newZoom);
|
|
|
|
// Save to localStorage
|
|
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]);
|
|
|
|
//---------------------------------------------------------
|
|
//---------------------------------------------------------
|
|
|
|
return (
|
|
<>
|
|
<ToastContainer />
|
|
<div>
|
|
{/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
|
|
{showPoiUpdateModal && (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
|
|
onClick={closePoiUpdateModal} // Schließt das Popup bei einem Klick außerhalb
|
|
>
|
|
<div
|
|
className="relative bg-white p-6 rounded-lg shadow-lg"
|
|
onClick={(e) => e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
|
|
>
|
|
{/* Schließen-Button oben rechts */}
|
|
<button
|
|
onClick={closePoiUpdateModal}
|
|
className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
|
|
aria-label="Close"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Formular-Komponente zum Hinzufügen einer Station */}
|
|
<PoiUpdateModal
|
|
onClose={() => setShowPoiUpdateModal(false)}
|
|
poiData={currentPoiData}
|
|
onSubmit={handleAddStation}
|
|
latlng={popupCoordinates}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Rest of your component */}
|
|
<div>
|
|
{/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
|
|
{showPopup && (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
|
|
onClick={closePopup} // Schließt das Popup bei einem Klick außerhalb
|
|
>
|
|
<div
|
|
className="relative bg-white p-6 rounded-lg shadow-lg"
|
|
onClick={(e) => e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
|
|
>
|
|
{/* Schließen-Button oben rechts */}
|
|
<button
|
|
onClick={closePopup}
|
|
className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
|
|
aria-label="Close"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Formular-Komponente zum Hinzufügen einer Station */}
|
|
<ShowAddStationPopup
|
|
onClose={closePopup}
|
|
onSubmit={handleAddStation}
|
|
latlng={popupCoordinates}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DataSheet className="z-50" />
|
|
|
|
<div
|
|
id="map"
|
|
ref={mapRef}
|
|
className="z-0"
|
|
style={{ height: "100vh", width: "100vw" }}
|
|
></div>
|
|
|
|
<div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<span className="text-black text-lg font-semibold">
|
|
{" "}
|
|
TALAS.Map{" "}
|
|
</span>
|
|
|
|
<br />
|
|
<span className="text-black text-lg">Version 1.0.0</span>
|
|
</div>
|
|
<div>
|
|
<button onClick={openVersionInfoModal}>
|
|
<InformationCircleIcon
|
|
className="text-blue-900 h-8 w-8 pr-1"
|
|
title="Weitere Infos"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{showVersionInfoModal && (
|
|
<div className="fixed inset-0 flex items-center justify-center z-50">
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50"
|
|
onClick={closeVersionInfoModal}
|
|
></div>
|
|
<div className="bg-white p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
|
|
<img
|
|
src="img/Logo_TALAS.png"
|
|
alt="TALAS V5 Logo"
|
|
className="w-1/2 mx-auto my-4"
|
|
/>
|
|
<div className="bg-white border p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
|
|
<h2 className="text-xl font-bold mb-6 text-start leading-tight">
|
|
Littwin Systemtechnik GmbH & Co. KG
|
|
</h2>
|
|
<h4 className="text-lg font-bold mb-2 text-start leading-tight">
|
|
Bürgermeister-Brötje Str. 28
|
|
</h4>
|
|
<h4 className="text-lg font-bold mb-2 text-start leading-tight">
|
|
D-26180 Rastede
|
|
</h4>
|
|
<h5 className="text-md mb-2 text-start leading-snug">
|
|
T: +49 4402 9725 77-0
|
|
</h5>
|
|
<h5 className="text-md mb-2 text-start leading-snug">
|
|
E: kontakt@littwin-systemtechnik.de
|
|
</h5>
|
|
</div>
|
|
<p className="text-gray-700 text-center font-bold mt-4 leading-relaxed">
|
|
TALAS.Map Version 1.0.0
|
|
</p>
|
|
<button
|
|
onClick={closeVersionInfoModal}
|
|
className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 mx-auto block"
|
|
>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MapComponent;
|