diff --git a/components/MapComponent.js b/components/MapComponent.js
new file mode 100644
index 000000000..a964d0a4e
--- /dev/null
+++ b/components/MapComponent.js
@@ -0,0 +1,2553 @@
+// components/MapComponent.js
+
+import React, {
+ useEffect,
+ useRef,
+ useState,
+ useMemo,
+ useCallback,
+ use,
+} from "react";
+import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
+
+import L, { marker } from "leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
+import "leaflet-contextmenu";
+import * as config from "../config/config.js";
+import dynamic from "next/dynamic";
+import "leaflet.smooth_marker_bouncing";
+import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
+import DataSheet from "./DataSheet.js";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
+import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
+import { mapLayersState } from "../store/atoms/mapLayersState.js";
+import { selectedAreaState } from "../store/atoms/selectedAreaState.js";
+import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
+import { poiTypState } from "../store/atoms/poiTypState.js";
+import ShowAddStationPopup from "./ShowAddStationPopup";
+import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
+import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
+import PoiUpdateModal from "./PoiUpdateModal.js";
+import { selectedPoiState } from "../store/atoms/poiState.js";
+import { currentPoiState } from "../store/atoms/currentPoiState";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { mapIdState, userIdState } from "../store/atoms/urlParameterState";
+import { set } from "lodash";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
+import { data } from "autoprefixer";
+
+//import { createRoot } from "react-dom/client";
+
+const plusRoundIcon = L.icon({
+ //iconUrl: "/img/plus_round.png", // Update with your actual path
+ iconUrl: "/img/plus_round.png", // Update with your actual path
+ iconSize: [22, 22],
+ iconAnchor: [25, 55],
+ className: "absolute top-0 left-0 z-10", // Adjust with Tailwind CSS classes
+});
+//---------------------------------------------------------------------
+//-------------------- MapComponent -----------------------------------
+const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+ const [priorityConfig, setPriorityConfig] = useState([]);
+
+ const fetchPriorityConfig = async () => {
+ try {
+ const response = await fetch("/api/talas_v5_DB/priorityConfig");
+ const data = await response.json();
+ console.log("Prioritätskonfiguration:", data);
+ setPriorityConfig(data);
+ } catch (error) {
+ console.error("Fehler beim Laden der Prioritätskonfiguration:", error);
+ }
+ };
+
+ useEffect(() => {
+ fetchPriorityConfig();
+ }, []);
+
+ useEffect(() => {
+ console.log("Aktualisierte Prioritätskonfiguration:", priorityConfig);
+ }, [priorityConfig]);
+ //---------------------------------------------------------------------
+ const fetchGisStatusStations = async (idMap, idUser) => {
+ try {
+ const response = await fetch(
+ `/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`
+ );
+ if (!response.ok) {
+ throw new Error(`Error: ${response.statusText}`);
+ }
+ const data = await response.json();
+ console.log("GisStatusStations:", data);
+ return data;
+ } catch (error) {
+ console.error("Fehler beim Abrufen der Daten:", error);
+ }
+ };
+
+ useEffect(() => {
+ fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
+ }, []);
+
+ //---------------------------------------------------------------------
+ /*
+ path.includes("critical") || // Priorität 1
+ path.includes("major") || // Priorität 2
+ path.includes("minor") || // Priorität 3
+ path.includes("system") // Priorität 4
+ */
+ /* const priorityColors = {
+ 1: "#ba0000", // High priority, red, critical
+ 2: "#ed7b00", // Medium priority orange major
+ 3: "#d1ca00", // priority minor senfgelb
+ 4: "#8602ab", // priority system Violett
+ // 5: "#298a00", // normal priority green
+ }; */
+ const [menuItemAdded, setMenuItemAdded] = useState(false);
+
+ const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
+
+ const [contextMenuItems, setContextMenuItems] = useState([]);
+ const [isRightsLoaded, setIsRightsLoaded] = useState(false);
+ const [hasRights, setHasRights] = useState(false);
+ const [mapId, setMapId] = useRecoilState(mapIdState);
+ const [userId, setUserId] = useRecoilState(userIdState);
+
+ const [showAddStationPopup, setShowAddStationPopup] = useState(false);
+ const [userRights, setUserRights] = useState(null);
+ const setSelectedPoi = useSetRecoilState(selectedPoiState);
+ const openPoiUpdateModal = () => setShowPoiUpdateModal(true);
+ const closePoiUpdateModal = () => setShowPoiUpdateModal(false);
+ const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
+ const [currentPoiData, setCurrentPoiData] = useState(null);
+ const setCurrentPoi = useSetRecoilState(currentPoiState);
+ const currentPoi = useRecoilValue(currentPoiState);
+ const handlePoiSelect = (poiData) => {
+ setSelectedPoi(poiData); // poiData should be the data of the selected POI
+ // Open the modal or any other logic
+ };
+
+ useEffect(() => {
+ const params = new URL(window.location.href).searchParams;
+ setMapId(params.get("m"));
+ setUserId(params.get("u"));
+ }, [setMapId, setUserId]);
+ useEffect(() => {
+ fetchUserRights().then(() => {
+ setIsRightsLoaded(true);
+ });
+ }, []); // Lade die Berechtigungen beim Initialisieren der Komponente
+
+ const handleEditPoi = (marker) => {
+ // Prüfung, ob der Benutzer die notwendigen Rechte hat
+ if (!userRights || !userRights.includes(56)) {
+ toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
+ position: "top-center",
+ autoClose: 5000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ });
+ console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
+ return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
+ }
+
+ //console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
+ //console.log("Selected Marker Description:", marker.options.description);
+
+ setCurrentPoiData({
+ idPoi: marker.options.id,
+ name: marker.options.name,
+ description: marker.options.description,
+ });
+ //console.log("POI-Daten1:", currentPoiData);
+
+ fetchPoiData(marker.options.id);
+
+ setShowPoiUpdateModal(true);
+ };
+
+ const fetchPoiData = async (idPoi) => {
+ const response = await fetch(
+ `/api/talas_v5_DB/pois/getPoiById?idPoi=${idPoi}`
+ );
+ if (!response.ok) {
+ console.error("Fehler beim Abrufen der POI-Daten");
+ return;
+ }
+ const data = await response.json();
+ setCurrentPoiData({
+ idPoi,
+ name: data.name,
+ description: data.description,
+ });
+ //console.log("POI-Daten2:", currentPoiData);
+ setShowPoiUpdateModal(true);
+ };
+
+ const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
+ const zoomTrigger = useRecoilValue(zoomTriggerState);
+ const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
+ //const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
+ //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+ const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
+ //const onlineTileLayer = "http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
+ // Create map layers
+ const TALAS = new L.layerGroup();
+ const ECI = new L.layerGroup();
+ const ULAF = new L.layerGroup();
+ const GSMModem = new L.layerGroup();
+ const CiscoRouter = new L.layerGroup();
+ const WAGO = new L.layerGroup();
+ const Siemens = new L.layerGroup();
+ const OTDR = new L.layerGroup();
+ const WDM = new L.layerGroup();
+ const GMA = new L.layerGroup();
+ const Sonstige = new L.layerGroup();
+ const TALASICL = new L.layerGroup();
+ const lineLayer = new L.LayerGroup();
+
+ const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
+
+ const baseUrl = "http://10.10.0.13/talas5/devices/"; // für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame
+ //const baseUrl = "http://localhost:3000/talas5/devices/";
+ //const baseUrl = "http://192.168.10.14/talas5/devices/";
+ const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
+ const [poiTypMap, setPoiTypMap] = useState(new Map());
+ const [showPopup, setShowPopup] = useState(false);
+ const [popupCoordinates, setPopupCoordinates] = useState({
+ lat: 52.52,
+ lng: 13.405,
+ }); // Beispielkoordinaten
+ const openPopup = () => setShowPopup(true);
+ const closePopup = () => setShowPopup(false);
+
+ const handleAddStation = (stationData) => {
+ // Station-Daten speichern oder API-Aufruf durchführen
+ //console.log("Neue Station:", userRights.includes(56));
+
+ //console.log("Neue Station:", stationData);
+ setShowAddStationPopup(false);
+ closePopup(); // Schließt das Popup nach dem Hinzufügen
+ };
+ // Beispiel zum Öffnen des Popups mit bestimmten Koordinaten
+ const openAddStationPopupWithCoordinates = (lat, lng) => {
+ setPopupCoordinates({ lat, lng });
+ setShowPopup(true);
+ };
+
+ const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
+ const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden
+ const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
+ const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
+ const [map, setMap] = useState(null); // Zustand der Karteninstanz
+ const [oms, setOms] = useState(null); // State für OMS-Instanz
+ const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
+ const [GisStationsStaticDistrict, setGisStationsStaticDistrict] =
+ useRecoilState(gisStationsStaticDistrictState);
+ const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState(
+ []
+ ); // Zustand für Statusdaten
+ const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
+ const [GisSystemStatic, setGisSystemStatic] =
+ useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
+ const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten
+
+ // Konstanten für die URLs
+ const mapGisStationsStaticDistrictUrl =
+ config.mapGisStationsStaticDistrictUrl;
+ const mapGisStationsStatusDistrictUrl =
+ config.mapGisStationsStatusDistrictUrl;
+ const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
+ const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
+ const mapDataIconUrl = config.mapDataIconUrl;
+ const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
+
+ const openVersionInfoModal = () => {
+ setShowVersionInfoModal(true);
+ };
+
+ const closeVersionInfoModal = () => {
+ setShowVersionInfoModal(false);
+ };
+ // Funktion zum Aktualisieren der Position in der Datenbank
+ const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
+ const response = await fetch("/api/talas_v5_DB/pois/updateLocation", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ id,
+ latitude: newLatitude,
+ longitude: newLongitude,
+ }),
+ });
+
+ if (response.ok) {
+ //schreib die neue Kooridnaten in die Console
+ //akuellisiere die Position in der Datenbank mit den neuen Koordinaten mit updateLocation mit SQL Anweisung UPDATE
+ } else {
+ console.error("Fehler beim Aktualisieren der Position");
+ }
+ };
+ //---------------------------------------------
+
+ //----------------------------------------------------
+ //-----Kontextmenu----------------
+ function addContextMenuToMarker(marker) {
+ marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
+
+ marker.bindContextMenu({
+ contextmenu: true,
+ contextmenuWidth: 140,
+ contextmenuItems: [
+ /* {
+ text: "Station öffnen (Tab)",
+ icon: "/img/screen_new.png",
+ callback: (e) => openInNewTab(e, marker),
+ },
+ {
+ text: "Station öffnen",
+ icon: "/img/screen_same.png",
+ callback: (e) => openInSameWindow(e, marker),
+ }, */
+ ],
+ });
+ }
+ // Funktion zum Öffnen in einem neuen Tab
+ function openInNewTab(e, marker) {
+ if (marker && marker.options && marker.options.link) {
+ //console.log("Marker data:", baseUrl + marker.options.link);
+ window.open(baseUrl + marker.options.link, "_blank");
+ } else {
+ console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
+ }
+ }
+
+ // Funktion zum Öffnen im gleichen Fenster
+ function openInSameWindow(e, marker) {
+ if (marker && marker.options && marker.options.link) {
+ //console.log("Marker data:", baseUrl + marker.options.link);
+ window.location.href = baseUrl + marker.options.link;
+ } else {
+ console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
+ }
+ }
+
+ const zoomIn = (e) => {
+ initMap.flyTo(e.latlng, 12);
+ //console.log("ZoomIn koordinaten in MapComponent", e.latlng);
+ };
+
+ const zoomOut = (e) => {
+ fly();
+ };
+ const centerHere = (e) => {
+ initMap.panTo(e.latlng);
+ };
+
+ // Funktion zum Anzeigen der Koordinaten
+ const showCoordinates = (e) => {
+ alert(
+ "Breitengrad: " +
+ e.latlng.lat.toFixed(5) +
+ "\nLängengrad: " +
+ e.latlng.lng.toFixed(5)
+ );
+ };
+ const showData = (e) => {};
+ const showTalas = (e) => {
+ map.addLayer(TALAS);
+ loadData();
+ };
+ const hideTalas = (e) => {
+ map.removeLayer(TALAS);
+ loadData();
+ };
+ const showGSM = (e) => {
+ map.addLayer(GMA);
+ loadData();
+ };
+ const hideGSM = (e) => {
+ map.removeLayer(GMA);
+ loadData();
+ };
+
+ // Kontextmenü Callback für "POI hinzufügen"
+ /* const addStationCallback = useCallback(
+ (event, hasRights) => {
+ console.log("Kontextmenü-Callback für 'POI hinzufügen' aufgerufen");
+ console.log(event);
+ console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
+
+ if (hasRights) {
+ setPopupCoordinates(event.latlng);
+ setShowPopup(true);
+ } else {
+ toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
+ position: "top-center",
+ autoClose: 5000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ });
+ console.log("Benutzer hat keine Berechtigung zum Hinzufügen.");
+ }
+ },
+ [hasRights, isRightsLoaded]
+ ); // Keine Abhängigkeiten, da `hasRights` als Parameter übergeben wird */
+ const addStationCallback = useCallback(
+ (event) => {
+ //console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
+ if (hasRights) {
+ setPopupCoordinates(event.latlng);
+ setShowPopup(true);
+ } else {
+ toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
+ position: "top-center",
+ autoClose: 5000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ });
+ console.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
+ }
+ },
+ [hasRights]
+ ); // Abhängigkeit zu hasRights hinzufügen
+
+ //-----Kontextmenu----ende------------
+ //--------------------------------------------------------------------------------
+
+ // Verwende useMemo, um die Kontextmenü-Items nur zu initialisieren, wenn notwendig
+ /* const contextMenuItems = useMemo(
+ () => [
+ {
+ 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);
+ },
+ },
+ {
+ text: "Station öffnen",
+ icon: "/img/screen_same.png",
+ //callback: (e) => openInSameWindow(e, marker),
+ callback: (e) => {
+ const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
+ openInSameWindow(e, clickedMarker);
+ },
+ },
+ "-", // Divider
+ {
+ text: "POI hinzufügen",
+ icon: "img/add_station.png",
+ className: "background-red",
+ callback: (event) => addStationCallback(event, hasRights),
+ },
+
+ {
+ text: "Koordinaten anzeigen",
+ icon: "img/not_listed_location.png",
+ callback: showCoordinates,
+ },
+ "-", // Divider
+ { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
+ { text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut },
+ {
+ text: "Hier zentrieren",
+ icon: "img/center_focus.png",
+ callback: centerHere,
+ },
+ ],
+ [hasRights]
+ ); */
+ /* useEffect(() => {
+ if (hasRights) {
+ setContextMenuItems([
+ {
+ text: "POI hinzufügen test",
+ icon: "img/add_station.png",
+ className: "background-red",
+ callback: (event) => addStationCallback(event),
+ },
+ // Weitere Menüpunkte...
+ ]);
+ }
+ }, [isRightsLoaded, hasRights]);
+ */
+ //----------------------------------------------------------------------------------
+ //------------------------------------------ */
+ const layerNames = {
+ "GSM Modem": "GSMMODEM",
+ "Cisco Router": "CiscoRouter",
+ "TALAS ICL": "TALASICL",
+ "SMS-Funkmodem": "GSMModem",
+ };
+ //------------------------------------------ */
+ function fly(stationValue) {
+ var x = 51.41321407879154;
+ var y = 7.739617925303934;
+ var zoom = 7;
+
+ initMap.flyTo([x, y], zoom);
+ }
+ //------------------------------------------
+ //------------------------------------------
+ // Funktionen zur Überwachung der Internetverbindung
+ const checkInternet = () => {
+ fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
+ .then((response) => setOnline(response.ok))
+ .catch(() => setOnline(false));
+ };
+ let initMap = [];
+ //------------------------------------------
+ //------------------------------------------
+ function parsePoint(pointString) {
+ const match = pointString.match(
+ /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
+ );
+ if (match) {
+ return {
+ longitude: parseFloat(match[1]),
+ latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
+ };
+ } else {
+ // Handle the error or return a default/fallback value
+ console.error("Invalid POINT format:", pointString);
+ return null; // Oder eine sinnvolle Standardantwort
+ }
+ }
+ //----------------------------------
+ //------------------------------------------
+
+ function parsePoint(position) {
+ const [longitude, latitude] = position.slice(6, -1).split(" ");
+ return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
+ }
+ //-----------------------------------------------------------------
+ // TALAS Marker hinzufügen
+ //-----------------------------------------------------------------
+ // Reihenfolge nach API sortiert mit der Attribute "System"
+ const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
+ const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
+ const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
+ const [ciscoRouterVisible, setCiscoRouterVisible] =
+ useRecoilState(mapLayersState);
+ const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
+ const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
+ const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
+ const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
+ const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
+ const [messstellenVisible, setMessstellenVisible] =
+ useRecoilState(mapLayersState);
+ const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
+ const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
+ const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
+ useRecoilState(mapLayersState);
+ const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
+ const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
+
+ const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
+ const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
+ const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
+ const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
+ const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
+ const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
+ const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
+ const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
+ const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
+ const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
+ const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
+ const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
+ const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
+ const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
+ const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
+ //--------------------------------------------------------------------------------
+ const determinePriority = (iconPath) => {
+ for (let priority of priorityConfig) {
+ if (iconPath.includes(priority.name.toLowerCase())) {
+ return priority.level;
+ }
+ }
+ return 5; // Default priority (lowest)
+ };
+ /* function determinePriority(iconPath) {
+ if (iconPath.includes("critical")) return 1; // Highest priority
+ if (iconPath.includes("critical")) {
+ console.log(
+ "iconPath.includes('critical'):",
+ iconPath.includes("critical")
+ );
+ }
+
+ if (iconPath.includes("major")) return 2;
+ if (iconPath.includes("minor")) {
+ console.log("iconPath.includes('minor'):", iconPath.includes("minor"));
+ }
+ if (iconPath.includes("minor")) return 3;
+ if (iconPath.includes("system")) {
+ console.log("iconPath.includes('system'):", iconPath.includes("system"));
+ }
+ if (iconPath.includes("system")) return 4;
+ if (iconPath.includes("system")) {
+ console.log("iconPath.includes('system'):", iconPath.includes("system"));
+ }
+ return 5; // Default priority (lowest)
+ } */
+ // Daten von einer externen Quelle laden
+ const createAndSetMarkers = async (systemId, setMarkersFunction) => {
+ try {
+ const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
+ const jsonResponse = await response1.json();
+ const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
+ const statusResponse = await response2.json();
+
+ const getIdSystemAndAllowValueMap = new Map(
+ GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
+ );
+ //console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
+
+ if (jsonResponse.Points && statusResponse.Statis) {
+ const statisMap = new Map(
+ statusResponse.Statis.map((s) => [s.IdLD, s])
+ );
+ let markersData = jsonResponse.Points.filter(
+ (station) =>
+ station.System === systemId &&
+ getIdSystemAndAllowValueMap.get(station.System) === 1
+ ).map((station) => {
+ const statis = statisMap.get(station.IdLD);
+ const iconPath = statis
+ ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
+ : `img/icons/marker-icon-${station.Icon}.png`;
+
+ const priority = determinePriority(iconPath);
+ const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
+
+ /* console.log(
+ `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
+ ); */
+
+ const marker = L.marker([station.X, station.Y], {
+ icon: L.icon({
+ iconUrl: iconPath,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ }),
+ areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
+ link: station.Link,
+ zIndexOffset: zIndexOffset,
+ bounceOnAdd: !!statis,
+ });
+
+ if (statis) {
+ marker.on("add", () => marker.bounce(3));
+ }
+
+ const statusInfo = statusResponse.Statis.filter(
+ (status) => status.IdLD === station.IdLD
+ )
+ .reverse()
+ .map(
+ (status) => `
+
+
+ ${status.Me}
(${status.Na})
+
+
${station.LD_Name}
+
${station.Device}
+
${station.Area_Short} (${station.Area_Name})
+
${station.Location_Short} (${station.Location_Name})
+
${statusInfo}
+
OpenStreetMap contributors',
+ }).addTo(initMap);
+
+ const overlappingMarkerSpiderfier =
+ new window.OverlappingMarkerSpiderfier(initMap, {
+ nearbyDistance: 20,
+ });
+
+ setMap(initMap);
+ setOms(overlappingMarkerSpiderfier);
+
+ initMap.on("zoomend", function () {
+ // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
+ if (initMap.getZoom() > 15) {
+ initMap.setZoom(15);
+ } else if (initMap.getZoom() < 5) {
+ initMap.setZoom(5);
+ }
+ });
+
+ // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
+ initMap.whenReady(() => {
+ console.log("Karte ist jetzt bereit und initialisiert.");
+ // Rufe hier Funktionen auf, die eine initialisierte Karte benötigen.
+ });
+ }
+ //console.log("trigger in MapComponent.js:", poiReadTrigger);
+ }, [mapRef, map, poiReadTrigger, contextMenuItems]); // Prüfe die Abhängigkeiten sorgfältig
+
+ // poiTyp Daten hinzufügen
+ //------------------------------------------
+ // Funktion zum Abrufen der poiTyp Daten
+
+ useEffect(() => {
+ const fetchPoiTypData = async () => {
+ try {
+ const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
+ const data = await response.json();
+ setPoiTypData(data); // Daten im Recoil State speichern
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poiTyp Daten:", error);
+ }
+ };
+ /* console.log(
+ "trigger in MapComponent.js in fetchPoiTypData:",
+ poiReadTrigger
+ ); */
+ fetchPoiTypData();
+ }, []);
+
+ // Effekt zum Loggen der poiTypData, wenn sie sich ändern
+ useEffect(() => {
+ //console.log("poiTypData aktualisiert:", poiTypData);
+ }, [poiTypData]);
+
+ //---------------------------------------
+
+ // Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
+ useEffect(() => {
+ const fetchPoiTypData = async () => {
+ try {
+ const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
+ const data = await response.json();
+ const map = new Map();
+ data.forEach((item) => map.set(item.idPoiTyp, item.name));
+ setPoiTypMap(map);
+ setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen
+ //console.log("poiTypMap:", map);
+ const poiTypName = poiTypMap.get(0) || "Unbekannt";
+ //console.log("poiTypName:", poiTypName);
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
+ }
+ };
+
+ fetchPoiTypData();
+ }, []);
+ //------------------------------------------
+ let dbLayer = null;
+ useEffect(() => {
+ if (map) {
+ // Schicht für Datenbank-Marker, sicherstellen, dass map nicht null ist
+ dbLayer = new L.LayerGroup().addTo(map);
+
+ // Fügen Sie Ihre Marker hier innerhalb dieser useEffect hinzu, da map nicht null ist
+
+ return () => {
+ // Bereinigung, entfernt dbLayer, wenn die Komponente unmountet
+ dbLayer.remove();
+ };
+ }
+ }, [map]);
+
+ //------------------------------------------
+
+ useEffect(() => {
+ // Initialisierung der dbLayer, wenn die Karte verfügbar ist
+ if (map && !poiLayerRef.current) {
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+ }
+
+ return () => {
+ if (map && poiLayerRef.current) {
+ // Entfernen der dbLayer bei Unmount
+ map.removeLayer(poiLayerRef.current);
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+ }
+ locations.forEach((location) => {
+ // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
+ });
+ };
+ //console.log("trigger in MapComponent.js:", poiReadTrigger);
+ }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
+ //------------------------------------------
+ function editPoi(marker) {
+ // Zugriff auf die Markerdaten
+ const markerId = marker.options.id;
+ //console.log("Bearbeiten des POI mit ID:", markerId);
+
+ // Hier könnte ein Modal mit Formular geöffnet werden
+ // Beispiel: openEditModal(markerId);
+ }
+
+ //------------------------------------------
+
+ const fetchDeviceNameById = async (idLD) => {
+ try {
+ const response = await fetch(
+ `/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`
+ );
+ const data = await response.json();
+ if (response.ok) {
+ return data.name;
+ } else {
+ throw new Error(data.error || "Gerät nicht gefunden");
+ }
+ } catch (error) {
+ console.error(
+ "Fehler beim Abrufen des Gerätenamens in MapComponent.js:",
+ error
+ );
+ return "Unbekannt";
+ }
+ };
+ //--------------------------------------------------
+ /* useEffect(() => {
+ fetchUserRights().then(() => {
+ setIsRightsLoaded(true); // Stellen Sie sicher, dass Sie diesen Status verwenden, um die Initialisierung zu kontrollieren.
+ });
+}, []); */
+
+ /* useEffect(() => {
+ if (map && !map.contextmenu) {
+ map.contextmenu = new L.Control.ContextMenu({
+ contextmenu: true,
+ contextmenuWidth: 140,
+ contextmenuItems: [], // Starten mit einem leeren Array oder initialen Einträgen
+ }).addTo(map);
+ }
+ }, [map]); */
+
+ const addItemsToMapContextMenu = () => {
+ if (!menuItemAdded) {
+ //console.log("contextMenuItems hasRights:", hasRights);
+
+ map.contextmenu.addItem({
+ text: "POI hinzufügen",
+ icon: "img/add_station.png",
+ className: "background-red",
+ callback: (event) => addStationCallback(event, hasRights),
+ });
+
+ setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
+ }
+ };
+
+ useEffect(() => {
+ if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {
+ addItemsToMapContextMenu();
+ }
+ }, [
+ map,
+ poiLayerRef,
+ isPoiTypLoaded,
+ menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
+ ]);
+ //------------------------------------------
+
+ // poiLayerRef(poiDbLayer) POI hinzufügen
+ //--------------------------------------------
+ const [poiData, setPoiData] = useState([]);
+
+ useEffect(() => {
+ const fetchPoiData = async () => {
+ try {
+ const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
+ if (!response.ok) {
+ throw new Error("Network response was not ok");
+ }
+ const data = await response.json();
+ setPoiData(data);
+ //console.log("poiData data:", data);
+ //console.log("poiData icons:", poiData);
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poiData:", error);
+ }
+ };
+
+ fetchPoiData();
+ }, []);
+ //--------------------------------------------
+ useEffect(() => {
+ if (poiData.length === 0) return;
+
+ try {
+ if (map && poiLayerRef.current && isPoiTypLoaded) {
+ map.removeLayer(poiLayerRef.current);
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+
+ locations.forEach(async (location) => {
+ try {
+ const { latitude, longitude } = parsePoint(location.position);
+ const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
+ const deviceName = await fetchDeviceNameById(location.idLD);
+ //console.log("deviceName:", deviceName); // Das ist in Modal POI hinzufügen
+
+ const canDrag = userRights ? userRights.includes(56) : false;
+ const matchingIcon = poiData.find(
+ (poi) => poi.idPoi === location.idPoi
+ );
+ const iconUrl = matchingIcon
+ ? `/img/icons/pois/${matchingIcon.path}`
+ : "/img/icons/pois/default-icon.png";
+
+ const marker = L.marker([latitude, longitude], {
+ icon: L.icon({
+ iconUrl: iconUrl,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ }),
+ draggable: canDrag,
+ id: location.idPoi,
+ }).bindContextMenu({
+ contextmenu: true,
+ contextmenuWidth: 140,
+ contextmenuItems: [
+ {
+ text: "POI Bearbeiten",
+ icon: "/img/poi-edit.png",
+ callback: () => handleEditPoi(marker),
+ },
+ ],
+ });
+
+ marker.bindPopup(`
+
+ ${location.description || "Unbekannt"}
+ `);
+
+ marker.on("mouseover", function () {
+ this.openPopup();
+ handlePoiSelect({
+ id: location.idPoi,
+ deviceId: location.idLD,
+ typ: poiTypName,
+ description: location.description,
+ });
+ setCurrentPoi(location);
+ });
+
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+
+ marker.on("dragend", (e) => {
+ if (canDrag) {
+ const newLat = e.target.getLatLng().lat;
+ const newLng = e.target.getLatLng().lng;
+ const markerId = e.target.options.id;
+ updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+ onLocationUpdate(markerId, newLat, newLng);
+ });
+ } else {
+ console.error("Drag operation not allowed");
+ }
+ });
+
+ if (poiLayerVisible) {
+ marker.addTo(poiLayerRef.current);
+ }
+ } catch (innerError) {
+ console.error("Error processing a location:", innerError);
+ }
+ });
+ }
+ } catch (error) {
+ console.error("Error in useEffect:", error);
+ }
+ }, [
+ map,
+ locations,
+ onLocationUpdate,
+ poiReadTrigger,
+ isPoiTypLoaded,
+ userRights,
+ poiLayerVisible,
+ poiData, // Add poiData as a dependency
+ ]);
+
+ //---------------------------------------------
+
+ //-------------------------------------------------------------------------------
+ useEffect(() => {
+ if (gisSystemStaticLoaded && map) {
+ createAndSetMarkers(1, setTalasMarkers); // TALAS-System
+ createAndSetMarkers(2, setEciMarkers); // ECI-System
+ createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
+ createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
+ createAndSetMarkers(7, setWagoMarkers); // WAGO-System
+ createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
+ createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
+ createAndSetMarkers(10, setWdmMarkers); // WDM-System
+ createAndSetMarkers(11, setGmaMarkers); // GMA-System
+ createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
+ createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
+ createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
+ createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
+ createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
+ createAndSetMarkers(0, setUlafMarkers); // ULAF-System
+ }
+ }, [gisSystemStaticLoaded, map]);
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && talasMarkers.length) {
+ talasMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(TALAS);
+ //console.log("map", map);
+ //console.log("oms", oms);
+ //disable map contextmenu
+ map.options.contextmenu = false;
+ map.options.contextmenuItems = [];
+
+ oms.map.options.contextmenu = false;
+ oms.map.options.contextmenuItems = [];
+
+ // Call the function here
+ checkOverlappingMarkers(oms, map, plusRoundIcon);
+ }
+ }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && eciMarkers.length) {
+ eciMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(ECI);
+ }
+ }, [map, eciMarkers]);
+
+ //console.log("eciMarkers", eciMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && gsmModemMarkers.length) {
+ gsmModemMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(GSMModem);
+ }
+ }, [map, gsmModemMarkers]);
+
+ //console.log("gsmModemMarkers", gsmModemMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && ciscoRouterMarkers.length) {
+ ciscoRouterMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(CiscoRouter);
+ }
+ }, [map, ciscoRouterMarkers]);
+
+ //console.log("ciscoRouterMarkers", ciscoRouterMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && wagoMarkers.length) {
+ wagoMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(WAGO);
+
+ //toggleLayer(mapLayersVisibility.WAGO);
+ }
+ // }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
+ }, [map, wagoMarkers]);
+ //console.log("wagoMarkers", wagoMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && siemensMarkers.length) {
+ siemensMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(Siemens);
+ }
+ }, [map, siemensMarkers]);
+
+ //console.log("siemensMarkers", siemensMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && otdrMarkers.length) {
+ otdrMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(OTDR);
+ }
+ }, [map, otdrMarkers]);
+
+ //console.log("otdrMarkers", otdrMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && wdmMarkers.length) {
+ wdmMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(WDM);
+ }
+ }, [map, wdmMarkers]);
+
+ //console.log("wdmMarkers", wdmMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && gmaMarkers.length) {
+ // Filtern des Arrays um nur "GMA" Messungen zu erhalten
+ const gmaMeasurements = GisStationsMeasurements.filter(
+ (m) => m.Gr === "GMA"
+ );
+ let area_name = "";
+ let measurements = {};
+
+ gmaMeasurements.forEach((m) => {
+ //console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`);
+ area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array
+ measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt
+ });
+
+ // Zugriff auf die Werte über die Codes
+ let measurementLT = measurements["LT"];
+ let measurementFTP = measurements["FTP"];
+ let measurementGT = measurements["GT"];
+ let measurementRLF = measurements["RLF"];
+
+ /* console.log(
+ "area_name",
+ area_name,
+ "------measurementLT",
+ measurements.LT,
+ "-------measurementFBT",
+ measurements.FBT,
+ "------measurementGT",
+ measurements.GT,
+ "------measurementRLF",
+ measurements.RLF
+ );
+ console.log("measurements", measurements); */
+ 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} %
+
+
+ ${stat.ModulName || "Unknown"}
+ ModulName : ${stat.ModulTyp || "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]);
+
+ //---------------------------------------------------------
+ // Custom circle icon for draggable markers
+ const circleIcon = L.divIcon({
+ className: "custom-div-icon",
+ html: "
",
+ iconSize: [25, 25],
+ iconAnchor: [5, 5],
+ });
+ //----------------------- Update lines----------------------------------
+ const [lineStatusData, setLineStatusData] = useState([]);
+ const [linesData, setLinesData] = useState([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response1 = await fetch(webserviceGisLinesStatusUrl);
+ const data1 = await response1.json();
+ setLineStatusData(data1.Statis);
+
+ const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
+ const data2 = await response2.json();
+
+ const colorsByModule = {};
+ data1.Statis.forEach((stat) => {
+ const matchingLine = data2.find(
+ (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
+ );
+ if (matchingLine) {
+ colorsByModule[matchingLine.idModul] = stat.PrioColor;
+ console.log("Übereinstimmung gefunden für: ", stat);
+ setLinesData(matchingLine);
+ }
+ });
+
+ setLineColors(colorsByModule);
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ }
+ };
+ fetchData();
+ }, []);
+ //---------------------------------------------------------
+ useEffect(() => {
+ console.log("lineStatusData", lineStatusData);
+ console.log("lineData:", linesData);
+ }, [lineStatusData, linesData]);
+ //---------------------------------------------------------
+ // Function to initialize markers and polylines
+ // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
+ useEffect(() => {
+ if (!map) return;
+
+ // Entfernen alter Marker und Polylines
+ markers.forEach((marker) => marker.remove());
+ polylines.forEach((polyline) => polyline.remove());
+
+ const newMarkers = [];
+ const newPolylines = [];
+
+ linePositions.forEach((lineData, lineIndex) => {
+ const lineMarkers = [];
+ lineData.coordinates.forEach((coord, index) => {
+ const marker = L.marker(coord, {
+ icon: circleIcon,
+ draggable: true,
+ }).addTo(map);
+
+ marker.on("dragend", () => {
+ const newCoords = marker.getLatLng();
+ const newCoordinates = [...lineData.coordinates];
+ newCoordinates[index] = [newCoords.lat, newCoords.lng];
+ const updatedPolyline = L.polyline(newCoordinates, {
+ color: lineColors[lineData.idModul] || "#000000",
+ }).addTo(map);
+
+ updatedPolyline.bindTooltip(
+ tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
+ {
+ permanent: false,
+ direction: "auto",
+ }
+ );
+
+ updatedPolyline.on("mouseover", () => {
+ updatedPolyline.setStyle({ weight: 10 });
+ updatedPolyline.bringToFront();
+ });
+ updatedPolyline.on("mouseout", () => {
+ updatedPolyline.setStyle({ weight: 5 });
+ });
+
+ newPolylines[lineIndex].remove();
+ newPolylines[lineIndex] = updatedPolyline;
+ lineData.coordinates = newCoordinates;
+
+ const requestData = {
+ idModul: lineData.idModul,
+ idLD: lineData.idLD,
+ newCoordinates,
+ };
+
+ console.log("Sending to API:", requestData);
+ // API-Aufruf, um die neuen Koordinaten zu speichern
+ fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(requestData),
+ })
+ .then((response) => {
+ if (!response.ok) {
+ return response.json().then((data) => {
+ throw new Error(data.error || "Unbekannter Fehler");
+ });
+ }
+ return response.json();
+ })
+ .then((data) => {
+ console.log("Koordinaten erfolgreich aktualisiert:", data);
+ })
+ .catch((error) => {
+ console.error(
+ "Fehler beim Aktualisieren der Koordinaten:",
+ error.message
+ );
+ });
+ });
+
+ lineMarkers.push(marker);
+ });
+
+ const polyline = L.polyline(lineData.coordinates, {
+ color: lineColors[lineData.idModul] || "#000000",
+ }).addTo(map);
+
+ polyline.bindTooltip(
+ tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
+ {
+ permanent: false,
+ direction: "auto",
+ }
+ );
+
+ polyline.on("mouseover", () => {
+ polyline.setStyle({ weight: 10 });
+ polyline.bringToFront();
+ console.log(
+ `polyline with idLD : ${lineData.idLD}, idModul: ${lineData.idModul}`,
+ "lineData : ",
+ lineData
+ );
+ });
+ polyline.on("mouseout", () => {
+ polyline.setStyle({ weight: 5 });
+ });
+
+ newPolylines.push(polyline);
+ newMarkers.push(...lineMarkers);
+ });
+
+ setMarkers(newMarkers);
+ setPolylines(newPolylines);
+ }, [map, linePositions, lineColors, tooltipContents]);
+
+ //---------------------------------------------------------
+ //---------------------------------------------------------
+
+ 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 */}
+
+
+
+
+
+ {/* Formular-Komponente zum Hinzufügen einer Station */}
+
setShowPoiUpdateModal(false)}
+ poiData={currentPoiData}
+ onSubmit={handleAddStation}
+ latlng={popupCoordinates}
+ />
+
+
+ )}
+
+ {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
+ {showPopup && (
+
+
e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
+ >
+ {/* Schließen-Button oben rechts */}
+
+
+
+
+
+ {/* Formular-Komponente zum Hinzufügen einer Station */}
+
+
+
+ )}
+
+
+
+
+
+
+ {" "}
+ TALAS.Map{" "}
+
+
+ Version 1.0.0
+
+
+
+
+
+
+
+
+
+
+
+
+ Littwin Systemtechnik GmbH & Co. KG
+
+
+ Bürgermeister-Brötje Str. 28
+
+
+ D-26180 Rastede
+
+
+ T: +49 4402 9725 77-0
+
+
+ E: kontakt@littwin-systemtechnik.de
+
+
+
+ TALAS.Map Version 1.0.0
+
+
+ Schließen
+
+
+
+