-
-
diff --git a/components/EditModeToggle.js b/components/EditModeToggle.js
new file mode 100644
index 000000000..289a5e8fc
--- /dev/null
+++ b/components/EditModeToggle.js
@@ -0,0 +1,38 @@
+// /components/EditModeToggle.js
+import React, { useState, useEffect } from "react";
+import EditOffIcon from "@mui/icons-material/EditOff";
+import ModeEditIcon from "@mui/icons-material/ModeEdit";
+import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
+
+function EditModeToggle() {
+ const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
+
+ const toggleEditMode = () => {
+ const newEditMode = !editMode;
+ setEditMode(newEditMode);
+ localStorage.setItem("editMode", newEditMode);
+ //Browser neu laden, um die Änderungen anzuwenden
+ window.location.reload();
+ };
+
+ useEffect(() => {
+ const storedMode = localStorage.getItem("editMode") === "true";
+ setEditMode(storedMode);
+ }, []);
+
+ return (
+
+ {editMode ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ );
+}
+
+export default EditModeToggle;
diff --git a/components/MapComponent.js b/components/MapComponent.js
index 4b88cfd0f..99460c2ec 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -1,22 +1,11 @@
-// components/MapComponent.js
-// test für Jenkins
-import React, {
- useEffect,
- useRef,
- useState,
- useMemo,
- useCallback,
- use,
-} from "react";
-import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
-
+// components/MapComponent.js
+import React, { useEffect, useRef, useState, useCallback } from "react";
import L, { marker } from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu";
import * as config from "../config/config.js";
import * as urls from "../config/urls.js";
-import dynamic from "next/dynamic";
import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
import DataSheet from "./DataSheet.js";
@@ -27,62 +16,175 @@ 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 AddPoiModalWindow from "./pois/AddPoiModalWindow.js";
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
-import PoiUpdateModal from "./PoiUpdateModal.js";
+import PoiUpdateModal from "./pois/PoiUpdateModal.js";
import { selectedPoiState } from "../store/atoms/poiState.js";
import { currentPoiState } from "../store/atoms/currentPoiState.js";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
-import { has, set } from "lodash";
-import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
-import { data } from "autoprefixer";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js";
import plusRoundIcon from "./PlusRoundIcon.js";
-import {} from //parsePoint,
-//handleEditPoi,
-//insertNewMarker,
-//redrawPolyline,
-//saveLineData,
-"../utils/utils.js";
import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
-import {
- //handleEditPoi,
- insertNewMarker,
- removeMarker,
-} from "../utils/markerUtils.js";
-import {
- saveLineData,
- redrawPolyline,
- restoreMapSettings,
- checkOverlappingMarkers,
-} 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";
-import {
- addContextMenuToMarker,
- openInNewTab,
-} from "../utils/contextMenuUtils.js";
-import { MAP_VERSION } from "../config/settings";
+import { insertNewPOI, removePOI, handleEditPoi } from "../utils/poiUtils.js";
+import { createAndSetDevices } from "../utils/createAndSetDevices.js";
+import { redrawPolyline, restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js";
+import circleIcon from "./gisPolylines/icons/CircleIcon.js";
+import startIcon from "./gisPolylines/icons/StartIcon.js";
+import endIcon from "./gisPolylines/icons/EndIcon.js";
+import { fetchGisStatusStations, fetchPriorityConfig, fetchPoiData, updateLocationInDatabase, fetchUserRights, fetchDeviceNameById } from "../services/apiService.js";
+import { addContextMenuToMarker } from "../utils/addContextMenuToMarker.js";
+import { MAP_VERSION } from "../config/settings.js";
import * as layers from "../config/layers.js";
-import useMapContextMenu from "./useMapContextMenu.js";
-import { openInSameWindow } from "../utils/openInSameWindow";
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";
-//---------------------------------------------------------------------
-//-------------------- MapComponent -----------------------------------
+import { initializeMap } from "../utils/initializeMap.js";
+import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
+import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
+import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook
+import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js";
+import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
+import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js";
+//import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer";
+
+import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js";
+import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js";
+import useOtdrMarkersLayer from "../hooks/layers/useOtdrMarkersLayer.js";
+import useWdmMarkersLayer from "../hooks/layers/useWdmMarkersLayer.js";
+import useMessstellenMarkersLayer from "../hooks/layers/useMessstellenMarkersLayer.js";
+import useTalasiclMarkersLayer from "../hooks/layers/useTalasiclMarkersLayer.js";
+import useDauzMarkersLayer from "../hooks/layers/useDauzMarkersLayer.js";
+import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js";
+import useUlafMarkersLayer from "../hooks/layers/useUlafMarkersLayer.js";
+import useSonstigeMarkersLayer from "../hooks/layers/useSonstigeMarkersLayer.js";
+import handlePoiSelect from "../utils/handlePoiSelect.js";
+import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js";
+import { setupPolylines } from "../utils/setupPolylines.js";
+import { setupPOIs } from "../utils/setupPOIs.js";
+import VersionInfoModal from "./VersionInfoModal.js";
+//--------------------------------------------
+import PoiUpdateModalWrapper from "./pois/PoiUpdateModalWrapper";
+import AddPoiModalWindowWrapper from "./pois/AddPoiModalWindowWrapper";
+import useFetchPoiData from "../hooks/useFetchPoiData";
+import usePoiTypData from "../hooks/usePoiTypData";
+import useMarkerLayers from "../hooks/useMarkerLayers";
+import useLayerVisibility from "../hooks/useLayerVisibility";
+import useLineData from "../hooks/useLineData.js";
+import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
+//import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
+import { useMapComponentState } from "../hooks/useMapComponentState";
+import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
+import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
+import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
+
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
- const [loading, setLoading] = useState(true); // Ladezustand hinzufügen
+ const polylineVisible = useRecoilValue(polylineLayerVisibleState);
+ const [editMode, setEditMode] = useState(false); // editMode Zustand
+ const { deviceName, setDeviceName } = useMapComponentState();
+ const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
+ //const [deviceName, setDeviceName] = useState("");
+ const [locationDeviceData, setLocationDeviceData] = useState([]);
+ const [priorityConfig, setPriorityConfig] = useState([]);
+ const [menuItemAdded, setMenuItemAdded] = useState(false);
+ const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
+ const [isRightsLoaded, setIsRightsLoaded] = useState(false);
+ const [hasRights, setHasRights] = useState(false);
+ const [mapId, setMapId] = useRecoilState(mapIdState);
+ const [userId, setUserId] = useRecoilState(userIdState);
+ const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
+ const [userRights, setUserRights] = useState(null);
+ const setSelectedPoi = useSetRecoilState(selectedPoiState);
+ const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
+ const [currentPoiData, setCurrentPoiData] = useState(null);
+ const setCurrentPoi = useSetRecoilState(currentPoiState);
+ const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
+ const zoomTrigger = useRecoilValue(zoomTriggerState);
+ const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
+ const [poiTypMap, setPoiTypMap] = useState(new Map());
+ const [showPopup, setShowPopup] = useState(false);
+ const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
+ const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
+ const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
+ const [map, setMap] = useState(null); // Zustand der Karteninstanz
+ const [oms, setOms] = useState(null); // State für OMS-Instanz
+ const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState);
+ const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState([]); // Zustand für Statusdaten
+ const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
+ const [GisSystemStatic, setGisSystemStatic] = useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
+ // Konstanten für die URLs
+ const mapGisStationsStaticDistrictUrl = config.mapGisStationsStaticDistrictUrl;
+ const mapGisStationsStatusDistrictUrl = config.mapGisStationsStatusDistrictUrl;
+ const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
+ const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
+ const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
+ //console.log("priorityConfig in MapComponent1: ", priorityConfig);
+ /*
+ const talasMarkers = useTalasMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const eciMarkers = useEciMarkersLayer(map, eciMarkers, oms, layers.MAP_LAYERS.ECI);
+ const gsmModemMarkers = useGsmModemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const ciscoRouterMarkers = useCiscoRouterMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const wagoMarkers = useWagoMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
+ const siemensMarkers = useSiemensMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
+ const otdrMarkers = useOtdrMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const wdmMarkers = useWdmMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const messstellenMarkers = useMessstellenMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const talasiclMarkers = useTalasiclMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
+ const dauzMarkers = useDauzMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const smsfunkmodemMarkers = useSmsfunkmodemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ const ulafMarkers = useUlafMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
+ const sonstigeMarkers = useSonstigeMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
+ */
+
+ const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
+ const [talasMarkers, setTalasMarkers] = useState([]);
+ const [eciMarkers, setEciMarkers] = useState([]);
+ const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
+ const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
+ const [wagoMarkers, setWagoMarkers] = useState([]);
+ const [siemensMarkers, setSiemensMarkers] = useState([]);
+ const [otdrMarkers, setOtdrMarkers] = useState([]);
+ const [wdmMarkers, setWdmMarkers] = useState([]);
+ const [messstellenMarkers, setMessstellenMarkers] = useState([]);
+ const [talasiclMarkers, setTalasiclMarkers] = useState([]);
+ const [dauzMarkers, setDauzMarkers] = useState([]);
+ const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
+ const [ulafMarkers, setUlafMarkers] = useState([]);
+ const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
+ //const [lteModemMarkers, setLteModemMarkers] = useState([]);
+
+ const [lineStatusData, setLineStatusData] = useState([]);
+ const [linesData, setLinesData] = useState([]);
+ const mapLayersVisibility = useRecoilValue(mapLayersState);
+ const selectedArea = useRecoilValue(selectedAreaState);
+ const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
+ const [linePositions, setLinePositions] = useState([]);
+ const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
+ const [polylines, setPolylines] = useState([]);
+ const [markers, setMarkers] = useState([]);
+ const closePopup = () => setShowPopup(false);
+ const [newPoint, setNewPoint] = useState(null);
+ const [newCoords, setNewCoords] = useState(null);
+ const [tempMarker, setTempMarker] = useState(null);
+
+ const [popupCoordinates, setPopupCoordinates] = useState({
+ lat: 52.52,
+ lng: 13.405,
+ });
+
+ const handleAddStation = (stationData) => {
+ setAddPoiModalWindowState(false);
+ closePopup(); // Schließt das Popup nach dem Hinzufügen
+ };
+
+ const openVersionInfoModal = () => {
+ setShowVersionInfoModal(true);
+ };
+
+ const closeVersionInfoModal = () => {
+ setShowVersionInfoModal(false);
+ };
+
const [currentZoom, setCurrentZoom] = useState(() => {
const storedZoom = localStorage.getItem("mapZoom");
return storedZoom ? parseInt(storedZoom, 10) : 12;
@@ -97,264 +199,23 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return [53.111111, 8.4625];
}
});
+ const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State
- const [priorityConfig, setPriorityConfig] = useState([]);
+ //---------------------------------------------------------------
- useEffect(() => {
- fetchPriorityConfig();
- }, []);
-
- /* useEffect(() => {
- console.log("Aktualisierte Prioritätskonfiguration:", priorityConfig);
- }, [priorityConfig]); */
- //---------------------------------------------------------------------
-
- useEffect(() => {
+ /* 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) => {
- // 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);
- };
- //----------------------------------------------------
- //----------------------------------------------------
- // Kontextmenü Callback für "Reinzoomen"
- const zoomInCallback = (e, map) => {
- zoomIn(e, map);
- };
-
- // Kontextmenü Callback für "Rauszoomen"
- const zoomOutCallback = (map) => {
- zoomOut(map);
- };
-
- // Kontextmenü Callback für "Hier zentrieren"
- const centerHereCallback = (e, map) => {
- centerHere(e, map);
- };
- //----------------------------------------------------
- //-----Kontextmenu----------------
- // 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, hasRights) => {
- 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.");
- }
- });
-
- //-----Kontextmenu----ende------------
-
- const addItemsToMapContextMenu = (hasRights) => {
- if (!menuItemAdded && map) {
- map.contextmenu.addItem({
- text: "Koordinaten anzeigen",
- icon: "img/not_listed_location.png",
- callback: showCoordinates,
- });
-
- map.contextmenu.addItem({ separator: true }); // Divider
-
- 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 }); // Another Divider
-
- 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 &&
- isRightsLoaded
- ) {
- console.log(
- "Überprüfung der Berechtigung vor addItemsToMapContextMenu: ",
- hasRights
- );
+ if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
+ //console.log("Überprüfung der Berechtigung vor addItemsToMapContextMenu: ", hasRights);
addItemsToMapContextMenu(hasRights);
}
}, [
@@ -369,614 +230,102 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useEffect(() => {
const fetchAndSetUserRights = async () => {
const rights = await fetchUserRights();
- //console.log("Benutzerrechte in server URL:", rights);
setUserRights(rights);
setIsRightsLoaded(true);
- setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
- //console.log("Benutzerrechte in useEffect in MapComponent:", rights);
+
+ // Sicherstellen, dass `rights` ein Array ist, bevor `.includes()` aufgerufen wird
+ setHasRights(localStorage.getItem("editMode") && Array.isArray(rights) && rights.includes(56));
};
fetchAndSetUserRights();
- }, [urls.SERVER_URL]); // Lade die Berechtigungen beim Initialisieren der Komponente
+ }, []);
- //----------------------------------------------------
- //------------------------------------------ */
- 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;
+ useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook
- 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);
+ useEffect(() => {
+ const fetchWebServiceMap = async () => {
+ try {
+ // Zähler für externe API-Aufrufe in localStorage speichern
+ let requestCount = localStorage.getItem("fetchWebServiceMap") || 0;
+ requestCount = parseInt(requestCount, 10);
- const [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;
+ const fetchOptions = {
+ method: "GET",
+ headers: {
+ Connection: "close", // Keep-Alive-Header hinzufügen
+ },
+ };
+
+ /*
+await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
+await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
+ await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
+ await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
+ */
+ // Fetch GIS Stations Static District
+ await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
+ requestCount++; // Zähler erhöhen
+ localStorage.setItem("fetchWebServiceMap", requestCount);
+ //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+
+ // Fetch GIS Stations Status District
+ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
+ requestCount++; // Zähler erhöhen
+ localStorage.setItem("fetchWebServiceMap", requestCount);
+ //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+
+ // Fetch GIS Stations Measurements
+ await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
+ requestCount++; // Zähler erhöhen
+ localStorage.setItem("fetchWebServiceMap", requestCount);
+ //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+
+ // Fetch GIS System Static
+ await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
+ requestCount++; // Zähler erhöhen
+ localStorage.setItem("fetchWebServiceMap", requestCount);
+ //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+ } catch (error) {
+ console.error("Error fetching data:", error);
}
- }
- 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();
+ fetchWebServiceMap();
+ }, []);
- const getIdSystemAndAllowValueMap = new Map(
- GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
- );
- //console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
+ //--------------------------------------------------------
+ useEffect(() => {
+ const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
+ //const endpoint = "http://localhost/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=10";
+ fetch(endpoint)
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ return response.json();
+ })
+ .then((data) => {
+ const newLinePositions = data.map((item) => {
+ //console.log("item.idLD", item.idLD);
+ //console.log("item.idModul", item.idModul);
- if (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));
+ 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");
}
-
- const statusInfo = statusResponse.Statis.filter(
- (status) => status.IdLD === station.IdLD
- )
- .reverse()
- .map(
- (status) => `
-
-
- ${status.Me}
(${status.Na})
-
- `
- )
- .join("");
-
- marker.bindPopup(`
-
-
${station.LD_Name}
-
${station.Device}
-
${station.Area_Short} (${station.Area_Name})
-
${station.Location_Short} (${station.Location_Name})
-
${statusInfo}
-
- `);
-
- return marker;
});
-
- setMarkersFunction(markersData);
- }
- } catch (error) {
- console.error("Error fetching data: ", error);
- }
- };
- //--------------------------------------------------------------------------------
-
- const mapLayersVisibility = useRecoilValue(mapLayersState);
- //----------------------------------------------
- const handleEditPoi = (selectedPoi) => {
- // Prüfung, ob der Benutzer die notwendigen Rechte hat
- if (!userRights || !userRights.includes(56)) {
- toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
- position: "top-center",
- autoClose: 5000,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
+ setLinePositions(newLinePositions);
+ })
+ .catch((error) => {
+ console.error("Error fetching data:", error.message);
});
- console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
- return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
- }
-
- //console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
- console.log(
- "Selected Marker Description:",
- selectedPoi.options.description
- );
- console.log("Selected Marker :", selectedPoi.options);
-
- setCurrentPoiData({
- idPoi: selectedPoi.options.id,
- name: selectedPoi.options.name,
- description: selectedPoi.options.description,
- });
- //console.log("POI-Daten1:", currentPoiData);
-
- fetchPoiData(selectedPoi.options.id);
- fetchPoiData(selectedPoi.options.name);
- //fetchPoiData(selectedPoi.options);
-
- setShowPoiUpdateModal(true);
- };
- //----------------------------------------------
-
- //------------------------------------------
- //------------------------------------------ */
- const selectedArea = useRecoilValue(selectedAreaState);
- const setSelectedArea = useSetRecoilState(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);
- };
- //--------------------------------------------------------------
- //---------------------------------------------------------
- /* 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 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 = urls.SERVER_URL; // 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 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();
- }, []); */
- /* useEffect(() => {
- console.log(
- "Server URL ist verfügbar:",
- config.url.origin,
- "idMap:",
- config.idMap,
- "idUser:",
- config.idUser
- );
- fetchUserRights().then((rights) => {
- // console.log("Benutzerrechte in server URL:", rights);
- setUserRights(rights);
- setIsRightsLoaded(true);
- setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
- console.log("Benutzerrechte in useEffect in MapComponent:", hasRights);
- });
- }, []); */
-
- // 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: () => zoomOutCallback(map),
- },
- {
- text: "Hier zentrieren",
- icon: "img/center_focus.png",
- callback: (e) => centerHere(e, map),
- },
- "-", // Divider */
- ],
- });
-
- L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
- attribution:
- '©
OpenStreetMap contributors',
- //tileSize: 250, // oder 512, je nach Kachelgröße
- //detectRetina: true,
- }).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
-
- /* 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);
- }; */
-
- /* useEffect(() => {
- if (map) {
- map.on("contextmenu", (e) => {
- const contextMenuItems = [
- {
- text: "Reinzoomen",
- icon: "img/zoom_in.png",
- callback: (e) => zoomIn(e, map),
- },
- {
- text: "Rauszoomen",
- icon: "img/zoom_out.png",
- callback: () => zoomOut(map),
- },
- {
- text: "Hier zentrieren",
- icon: "img/center_focus.png",
- callback: (e) => centerHere(e, map),
- },
- "-",
- ];
- L.DomEvent.stopPropagation(e);
- const contextMenu = L.popup()
- .setLatLng(e.latlng)
- .setContent(
- '"
- )
- .openOn(map);
- });
- }
- }, [map]); */
-
- // 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 {
@@ -985,98 +334,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
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);
+ console.error("Fehler beim Abrufen der poiTyp-Daten-1:", 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");
@@ -1084,812 +346,92 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
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);
+ console.error("Fehler beim Abrufen der poiData-2:", error);
}
};
+ //--------------------------------------------
+ fetchPoiTypData();
fetchPoiData();
}, []);
+
+ useEffect(() => {
+ if (map) {
+ const dbLayer = new L.LayerGroup().addTo(map); // Define dbLayer here
+
+ return () => {
+ dbLayer.remove();
+ };
+ }
+ }, [map]);
+
+ useEffect(() => {
+ if (map && !poiLayerRef.current) {
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+ }
+
+ return () => {
+ if (map && poiLayerRef.current) {
+ map.removeLayer(poiLayerRef.current);
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+ }
+ locations.forEach((location) => {});
+ };
+ //console.log("trigger in MapComponent.js:", poiReadTrigger);
+ }, [map, locations, poiReadTrigger]);
+
//--------------------------------------------
useEffect(() => {
if (poiData.length === 0) return;
- 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,
- name: location.name,
- description: location.description,
- }).bindContextMenu({
- contextmenu: true,
- contextmenuWidth: 140,
- contextmenuItems: [
- {
- text: "POI Bearbeiten",
- icon: "/img/poi-edit.png",
- callback: () =>
- handleEditPoi(
- marker,
- userRights,
- setCurrentPoiData,
- setShowPoiUpdateModal,
- fetchPoiData,
- toast
- ),
- },
- ],
- });
-
- marker.bindPopup(`
-
- ${location.description || "Unbekannt"}
- ${deviceName}
- ${poiTypName}
-
- `);
-
- marker.on("mouseover", function () {
- this.openPopup();
- handlePoiSelect({
- id: location.idPoi,
- deviceId: location.idLD,
- typ: poiTypName,
- description: location.description,
- });
- setCurrentPoi(location);
- });
-
- marker.on("mouseout", function () {
- this.closePopup();
- });
-
- marker.on("dragend", (e) => {
- if (canDrag) {
- const newLat = e.target.getLatLng().lat;
- const newLng = e.target.getLatLng().lng;
- const markerId = e.target.options.id;
- updateLocationInDatabase(markerId, newLat, newLng).then(() => {
- onLocationUpdate(markerId, newLat, newLng);
- });
- } else {
- console.error("Drag operation not allowed");
- }
- });
-
- if (poiLayerVisible) {
- marker.addTo(poiLayerRef.current);
- }
- } catch (innerError) {
- console.error("Error processing a location:", innerError);
- }
- });
- }
- } catch (error) {
- console.error("Error in useEffect:", error);
- }
- }, [
- map,
- locations,
- onLocationUpdate,
- poiReadTrigger,
- isPoiTypLoaded,
- userRights,
- poiLayerVisible,
- poiData, // Add poiData as a dependency
- ]);
+ setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName);
+ }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]);
//---------------------------------------------
-
- //-------------------------------------------------------------------------------
+ //console.log("priorityConfig in MapComponent2: ", priorityConfig);
useEffect(() => {
if (gisSystemStaticLoaded && map) {
- 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
+ /* damit nich doppelt vorkommen
+ createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
+ createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
+ createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
+ createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System---LTE Modem und GSM Modem sind gleich
+ //createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem----------LTE Modem und GSM Modem sind gleich
+ createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System
+ createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System
+ createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System
+ createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR-System
+ createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM-System
+ createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen-System
+ createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL-System
+ createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ-System
+ createAndSetDevices(111, setSmsfunkmodemMarkers, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
+ createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige-System
+ createAndSetDevices(0, setUlafMarkers, GisSystemStatic, priorityConfig); // ULAF-System
+ */
}
- }, [gisSystemStaticLoaded, map]);
- //--------------------------------------------------------------------------------
- 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(
- `
-
-
- ${area_name}
-
-
- LT : ${measurements.LT} °C
-
-
- FBT : ${measurements.FBT} °C
-
-
- GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}
-
-
- RLF : ${measurements.RLF} %
-
-
- `,
- {
- 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 toggleLayer = (isVisible) => {
- if (isVisible) {
- talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
- } 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 */
-
- //------------------------------------------
+ }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
+
+ //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig);
+
+ useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
+ useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms);
+ useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
+ useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms);
+ //useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);
+
+ useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms);
+ useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms);
+ useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms);
+ useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms);
+ useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms);
+ useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms);
+ useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms);
+ useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms);
+ useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem", oms);
+ useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms);
+ useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms);
useEffect(() => {
if (map) {
@@ -1901,14 +443,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
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
+ // Sammle alle Marker in einer einzigen Liste
const allMarkers = [
...talasMarkers,
...eciMarkers,
@@ -1926,385 +468,113 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
...sonstigeMarkers,
...ulafMarkers,
];
-
- // Call the function to check for overlaps and add plus icons
- checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
+ // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu
+ // 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) => {
- console.log("item.idLD", item.idLD);
- console.log("item.idModul", item.idModul);
-
- if (item.points && Array.isArray(item.points)) {
- //console.log("item.points in MapComponent", 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
+ }, [map, talasMarkers, eciMarkers, gsmModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]);
+ //--------------------------------------------
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 response2 = await fetch(
- "http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=10&u=484"
- ); */
- 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] = `
-
-
${stat.ModulName || "Unknown"}
-
-
${stat.ModulTyp || "N/A"}
-
-
-
- ${stat.Message || "N/A"}
-
-
(${stat.PrioName || "N/A"})
-
-
- `;
- }
- });
-
- 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);
+ //console.log("data1.Statis", data1.Statis);
+ const reversedData = data1.Statis.reverse();
+ setLineStatusData(reversedData);
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
const data2 = await response2.json();
const colorsByModule = {};
- data1.Statis.forEach((stat) => {
- const matchingLine = data2.find(
- (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
- );
+ reversedData.forEach((stat) => {
+ const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul);
if (matchingLine) {
colorsByModule[matchingLine.idModul] = stat.PrioColor;
//console.log("Übereinstimmung gefunden für: ", stat);
setLinesData(matchingLine);
}
});
- setLineColors(colorsByModule);
+ //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);
-
+ //--------------------------------------------
+ //Tooltip an mouse position anzeigen für die Linien
useEffect(() => {
if (!map) return;
- // Entfernen alter Marker und Polylines
+ // Entferne alte Marker und Polylinien
markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove());
- const newMarkers = [];
- const newPolylines = [];
+ // Setze neue Marker und Polylinien mit den aktuellen Daten
+ const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
+ map,
+ linePositions,
+ lineColors,
+ tooltipContents,
+ setNewCoords,
+ tempMarker,
+ polylineVisible // polylineVisible wird jetzt korrekt übergeben
+ );
- 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
- }
+ newPolylines.forEach((polyline, index) => {
+ const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
- 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
- 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: 3 });
- console.log("Mouse out");
- });
-
- 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: "Stützpunkt entfernen",
- callback: () => {
- const newCoords = marker.getLatLng();
- const newCoordinates = [...lineData.coordinates];
- newCoordinates[index] = [newCoords.lat, newCoords.lng];
-
- removeMarker(marker, lineData, currentZoom, currentCenter);
- 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);
+ polyline.bindTooltip(tooltipContent, {
+ permanent: false,
+ direction: "auto",
+ sticky: true,
+ offset: [20, 0],
+ pane: "tooltipPane",
});
- const polyline = L.polyline(lineData.coordinates, {
- color: lineColors[lineData.idModul] || "#000000",
- contextmenu: true,
- contextmenuItems: [
- {
- text: "Stützpunkt hinzufügen",
- callback: (e) => {
- if (tempMarker) {
- tempMarker.remove(); // Entfernen des Platzhalter-Icons
- }
- //------------
- if (tempMarker) {
- tempMarker.remove(); // Entfernen des Platzhalter-Icons
- }
- //------------
- const newPoint = e.latlng;
- setNewPoint(newPoint); // Aktualisieren Sie den Zustand
- setNewPoint(newPoint); // Aktualisieren Sie den Zustand
- const closestPoints = findClosestPoints(
- lineData.coordinates,
- newPoint
- );
- insertNewMarker(closestPoints, newPoint, lineData, map);
- redrawPolyline(lineData);
- redrawPolyline(lineData);
- //Browser aktualisieren
- window.location.reload();
- },
- },
- ],
- }).addTo(map);
-
polyline.on("mouseover", (e) => {
- // Optional: Visualisiere, dass die Linie interaktiv ist
- //polyline.setStyle({ color: "blue", weight: 10 });
- polyline.setStyle({ weight: 10 });
- });
+ const tooltip = polyline.getTooltip();
+ if (tooltip) {
+ const mousePos = e.containerPoint;
+ const mapSize = map.getSize();
- polyline.on("mouseout", (e) => {
- //polyline.setStyle({ color: "blue", weight: 3 });
- polyline.setStyle({ weight: 3 });
+ let direction = "right";
- // Setze die ursprüngliche Farbe zurück
- polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
- });
+ if (mousePos.x > mapSize.x - 100) {
+ direction = "left";
+ } else if (mousePos.x < 100) {
+ direction = "right";
+ }
- polyline.bindTooltip(
- tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
- {
- permanent: false,
- direction: "auto",
+ if (mousePos.y > mapSize.y - 100) {
+ direction = "top";
+ } else if (mousePos.y < 100) {
+ direction = "bottom";
+ }
+
+ tooltip.options.direction = direction;
+ polyline.openTooltip(e.latlng);
}
- );
+ });
- newPolylines.push(polyline);
- newMarkers.push(...lineMarkers);
+ polyline.on("mouseout", () => {
+ polyline.closeTooltip();
+ });
});
setMarkers(newMarkers);
setPolylines(newPolylines);
- }, [
- map,
- linePositions,
- lineColors,
- tooltipContents,
- newPoint,
- newCoords,
- tempMarker,
- ]);
+ }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
- //---------------------------------------------------------
- //-------------------------Funktionen--------------------------------
+ //--------------------------------------------
- // Call restoreMapSettings when the map is initialized
useEffect(() => {
if (map) {
restoreMapSettings(map);
}
}, [map]);
- 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) => {
@@ -2314,11 +584,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setCurrentCenter([newCenter.lat, newCenter.lng]);
setCurrentZoom(newZoom);
- // Save to localStorage
- localStorage.setItem(
- "mapCenter",
- JSON.stringify([newCenter.lat, newCenter.lng])
- );
+ localStorage.setItem("mapCenter", JSON.stringify([newCenter.lat, newCenter.lng]));
localStorage.setItem("mapZoom", newZoom);
};
@@ -2331,26 +597,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
};
}
}, [map]);
+ //--------------------------------------------
- //------------------------------------------ */hier ist das Bug
-
- // 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 */
-
- //------------------------------------------
- //--------------------------------------------------------- Kein Bug
useEffect(() => {
if (selectedArea && map) {
- const station = GisStationsStaticDistrict.find(
- (s) => s.Area_Name === selectedArea
- );
+ const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
if (station) {
map.flyTo([station.X, station.Y], 14);
}
@@ -2362,111 +613,219 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
map.flyTo([51.41321407879154, 7.739617925303934], 7);
}
}, [zoomTrigger, map]);
- //---------------------------------------------------------
- //---------------------------------------------------------zoomen in kontextmenü
- // Beispiel für die Verwendung von fetchPoiData mit Recoil Zustand
- /* useEffect(() => {
- if (selectedPoi) {
- fetchPoiData(selectedPoi.idPoi)
- .then((data) => {
- console.log("Fetched POI data:", data);
- })
- .catch((error) => {
- console.error("Fehler beim Abrufen der POI-Daten:", error);
- });
+
+ useEffect(() => {
+ if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
+ addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
}
- }, [selectedPoi]); */
- //---------------------------------------------------------
- //---------------------------------------------------------
+ }, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]);
+ //--------------------------------------------
+ // rote Marker ganz oben wenn überlappen sind
+ useEffect(() => {
+ const fetchPriorityConfig = async () => {
+ try {
+ const res = await fetch("/api/talas_v5_DB/priorityConfig");
+ if (!res.ok) {
+ throw new Error(`HTTP error! status: ${res.status}`);
+ }
+ const data = await res.json();
+ setPriorityConfig(data);
+ } catch (error) {
+ console.error("Failed to load priority configuration:", error);
+ }
+ };
+
+ fetchPriorityConfig();
+ }, []);
+ //--------------------------------------------
+ useEffect(() => {
+ if (mapRef.current && !map) {
+ initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
+ }
+ }, [mapRef, map, hasRights, setPolylineEventsDisabled]);
+
+ useEffect(() => {
+ if (map) {
+ if (polylineEventsDisabled) {
+ disablePolylineEvents(window.polylines);
+ } else {
+ enablePolylineEvents(window.polylines, window.lineColors);
+ }
+ }
+ }, [map, polylineEventsDisabled]);
+ useEffect(() => {
+ if (map) {
+ console.log("6- Karteninstanz (map) wurde jetzt erfolgreich initialisiert");
+
+ // Setze die Karteninstanz in den Recoil-Atom
+ }
+ }, [map]);
+ //--------------------------------------------
+ useEffect(() => {
+ const initializeContextMenu = () => {
+ if (map) {
+ map.whenReady(() => {
+ setTimeout(() => {
+ if (map.contextmenu) {
+ //console.log("Contextmenu ist vorhanden");
+ } else {
+ console.warn("Contextmenu ist nicht verfügbar.");
+ }
+ }, 500);
+ });
+ }
+ };
+
+ initializeContextMenu();
+ }, [map]);
+ //--------------------------------------------
+
+ useEffect(() => {
+ if (!map) return; // Stelle sicher, dass die Karte initialisiert ist
+
+ const updateGmaData = async () => {
+ try {
+ const fetchOptions = {
+ method: "GET",
+ headers: {
+ Connection: "close",
+ },
+ };
+
+ // Aktualisiere die Messdaten
+ await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
+
+ // Aktualisiere die Marker-Layer
+ useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms);
+ } catch (error) {
+ console.error("Fehler beim Aktualisieren der GMA-Daten:", error);
+ }
+ };
+
+ // Initialer Datenabruf
+ updateGmaData();
+
+ // Setze ein Intervall, um die Daten alle 5 Sekunden zu aktualisieren
+ const intervalId = setInterval(() => {
+ updateGmaData();
+ }, 5000);
+
+ // Cleanup-Funktion, um das Intervall zu entfernen, wenn die Komponente entladen wird
+ return () => clearInterval(intervalId);
+ }, [map, gmaMarkers, layers.MAP_LAYERS.GMA, oms, mapGisStationsMeasurementsUrl]);
+
+ //---------------------------------
+
+ const gmaLayerRef = useRef(null);
+ const talasLayerRef = useRef(null);
+ const eciMarkersLayerRef = useRef(null);
+ const gsmModemMarkersLayerRef = useRef(null);
+ const ciscoRouterMarkersLayerRef = useRef(null);
+ const wagoMarkersLayerRef = useRef(null);
+ const siemensMarkersLayerRef = useRef(null);
+ const otdrMarkersLayerRef = useRef(null);
+ const wdmMarkersLayerRef = useRef(null);
+ const messstellenMarkersLayerRef = useRef(null);
+ const talasiclMarkersLayerRef = useRef(null);
+ const dauzMarkersLayerRef = useRef(null);
+ const smsfunkmodemMarkersLayerRef = useRef(null);
+ const ulafMarkersLayerRef = useRef(null);
+ const sonstigeMarkersLayerRef = useRef(null);
+ useEffect(() => {
+ if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind
+
+ const layerGroups = [
+ { ref: gmaLayerRef, id: 11, setState: setGmaMarkers },
+ { ref: talasLayerRef, id: 1, setState: setTalasMarkers },
+ { ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers },
+ { ref: gsmModemMarkersLayerRef, id: 5, setState: setGsmModemMarkers },
+ { ref: ciscoRouterMarkersLayerRef, id: 6, setState: setCiscoRouterMarkers },
+ { ref: wagoMarkersLayerRef, id: 7, setState: setWagoMarkers },
+ { ref: siemensMarkersLayerRef, id: 8, setState: setSiemensMarkers },
+ { ref: otdrMarkersLayerRef, id: 9, setState: setOtdrMarkers },
+ { ref: wdmMarkersLayerRef, id: 10, setState: setWdmMarkers },
+ { ref: messstellenMarkersLayerRef, id: 13, setState: setMessstellenMarkers },
+ { ref: talasiclMarkersLayerRef, id: 100, setState: setTalasiclMarkers },
+ { ref: dauzMarkersLayerRef, id: 110, setState: setDauzMarkers },
+ { ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers },
+ { ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers },
+ { ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers },
+ ];
+
+ // Initialisiere LayerGroups nur einmal
+ layerGroups.forEach(({ ref }) => {
+ if (!ref.current) {
+ ref.current = new L.LayerGroup().addTo(map);
+ }
+ });
+
+ const updateMarkers = ({ ref, id, setState }) => {
+ if (ref.current) {
+ ref.current.clearLayers(); // Entferne alte Marker
+ }
+
+ // Erstelle und füge neue Marker hinzu
+ createAndSetDevices(
+ id,
+ (newMarkers) => {
+ setState(newMarkers); // Zustand aktualisieren
+ newMarkers.forEach((marker) => ref.current.addLayer(marker)); // Marker zur LayerGroup hinzufügen
+
+ // Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu
+ checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
+ },
+ GisSystemStatic,
+ priorityConfig
+ );
+ };
+
+ // Aktualisiere alle Marker-Gruppen
+ const updateAllMarkers = () => {
+ layerGroups.forEach(updateMarkers);
+ };
+
+ // Initiales Update
+ updateAllMarkers();
+
+ // Setze ein Intervall für regelmäßige Updates
+ const intervalId = setInterval(() => {
+ updateAllMarkers();
+ }, 20000); // 20 Sekunden
+
+ // Aufräumen bei Komponentenentladung
+ return () => {
+ clearInterval(intervalId); // Entferne Intervall
+
+ // LayerGroups leeren
+ layerGroups.forEach(({ ref }) => {
+ if (ref.current) {
+ ref.current.clearLayers();
+ }
+ });
+ };
+ }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
+
+ //---------------------------------------
+
+ //----------------------------------
+
+ //---------------------------------------
return (
<>
-
- {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
- {showPoiUpdateModal && (
-
-
e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
- >
- {/* Schließen-Button oben rechts */}
-
+
{showPoiUpdateModal &&
setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}
- {/* Formular-Komponente zum Hinzufügen einer Station */}
-
setShowPoiUpdateModal(false)}
- poiData={currentPoiData}
- onSubmit={handleAddStation}
- latlng={popupCoordinates}
- />
-
-
- )}
-
-
- {/* Rest of your component */}
- {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
{showPopup && (
-
-
e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
- >
- {/* Schließen-Button oben rechts */}
-
-