CPL nicht anzeigen wenn nicht Aktive ist idLD und Active Spalte in location_device, Status wird in Redux gespeichert für die ensprechende Linie(WIP)
This commit is contained in:
ISA
@@ -1,732 +0,0 @@
|
||||
// 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 "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 AddPoiModalWindow from "./pois/AddPoiModalWindow.js";
|
||||
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
|
||||
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
|
||||
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 { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js";
|
||||
import plusRoundIcon from "./PlusRoundIcon.js";
|
||||
import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
|
||||
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 { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";
|
||||
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 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;
|
||||
});
|
||||
|
||||
const [currentCenter, setCurrentCenter] = useState(() => {
|
||||
const storedCenter = localStorage.getItem("mapCenter");
|
||||
try {
|
||||
return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625];
|
||||
} catch (e) {
|
||||
console.error("Error parsing stored map center:", e);
|
||||
return [53.111111, 8.4625];
|
||||
}
|
||||
});
|
||||
const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State
|
||||
|
||||
//---------------------------------------------------------------
|
||||
|
||||
/* useEffect(() => {
|
||||
fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
|
||||
}, []); */
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URL(window.location.href).searchParams;
|
||||
setMapId(params.get("m"));
|
||||
setUserId(params.get("u"));
|
||||
}, [setMapId, setUserId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
|
||||
//console.log("Überprüfung der Berechtigung vor addItemsToMapContextMenu: ", hasRights);
|
||||
addItemsToMapContextMenu(hasRights);
|
||||
}
|
||||
}, [
|
||||
map,
|
||||
poiLayerRef,
|
||||
isPoiTypLoaded,
|
||||
menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
|
||||
hasRights, // Sicherstellen, dass hasRights berücksichtigt wird
|
||||
isRightsLoaded, // Überprüfung, ob die Rechte geladen sind
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAndSetUserRights = async () => {
|
||||
const rights = await fetchUserRights();
|
||||
setUserRights(rights);
|
||||
setIsRightsLoaded(true);
|
||||
|
||||
// Sicherstellen, dass `rights` ein Array ist, bevor `.includes()` aufgerufen wird
|
||||
setHasRights(localStorage.getItem("editMode") && Array.isArray(rights) && rights.includes(56));
|
||||
};
|
||||
|
||||
fetchAndSetUserRights();
|
||||
}, []);
|
||||
|
||||
useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook
|
||||
|
||||
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 fetchOptions = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Connection: "close", // Keep-Alive-Header hinzufügen
|
||||
},
|
||||
};
|
||||
|
||||
// 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);
|
||||
}
|
||||
};
|
||||
|
||||
fetchWebServiceMap();
|
||||
}, []);
|
||||
|
||||
//--------------------------------------------------------
|
||||
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 (item.points && Array.isArray(item.points)) {
|
||||
return {
|
||||
coordinates: item.points.map((point) => [point.x, point.y]),
|
||||
idModul: item.idModul,
|
||||
idLD: item.idLD,
|
||||
};
|
||||
} else {
|
||||
throw new Error("Points missing or not an array");
|
||||
}
|
||||
});
|
||||
setLinePositions(newLinePositions);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching data:", error.message);
|
||||
});
|
||||
}, []);
|
||||
//--------------------------------------------
|
||||
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);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error);
|
||||
}
|
||||
};
|
||||
//--------------------------------------------
|
||||
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();
|
||||
} catch (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;
|
||||
|
||||
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) {
|
||||
/*
|
||||
createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System
|
||||
createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System
|
||||
createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System
|
||||
createAndSetDevices(6, GisSystemStatic, priorityConfig); // Cisco-Router-System
|
||||
createAndSetDevices(7, GisSystemStatic, priorityConfig); // WAGO-System
|
||||
createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System
|
||||
createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System
|
||||
createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System
|
||||
createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System
|
||||
createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System
|
||||
createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System
|
||||
createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
|
||||
createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System
|
||||
createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-System
|
||||
*/
|
||||
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
|
||||
createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem
|
||||
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, 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) {
|
||||
var x = 51.41321407879154;
|
||||
var y = 7.739617925303934;
|
||||
var zoom = 7;
|
||||
|
||||
if (map && map.flyTo) {
|
||||
map.flyTo([x, y], zoom);
|
||||
} else {
|
||||
console.error("Map object is not ready or does not have flyTo method");
|
||||
}
|
||||
}
|
||||
}, [map, zoomTrigger]);
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
const allMarkers = [
|
||||
...talasMarkers,
|
||||
...eciMarkers,
|
||||
...gsmModemMarkers,
|
||||
...ciscoRouterMarkers,
|
||||
...wagoMarkers,
|
||||
...siemensMarkers,
|
||||
...otdrMarkers,
|
||||
...wdmMarkers,
|
||||
...gmaMarkers,
|
||||
...messstellenMarkers,
|
||||
...talasiclMarkers,
|
||||
...dauzMarkers,
|
||||
...smsfunkmodemMarkers,
|
||||
...sonstigeMarkers,
|
||||
...ulafMarkers,
|
||||
...lteModemMarkers,
|
||||
];
|
||||
|
||||
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
|
||||
}
|
||||
}, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers, lteModemMarkers]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||
const data1 = await response1.json();
|
||||
//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 = {};
|
||||
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);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
//--------------------------------------------
|
||||
//Tooltip an mouse position anzeigen für die Linien
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
// Entferne alte Marker und Polylinien
|
||||
markers.forEach((marker) => marker.remove());
|
||||
polylines.forEach((polyline) => polyline.remove());
|
||||
|
||||
// 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
|
||||
);
|
||||
|
||||
newPolylines.forEach((polyline, index) => {
|
||||
const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
|
||||
|
||||
polyline.bindTooltip(tooltipContent, {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
sticky: true,
|
||||
offset: [20, 0],
|
||||
pane: "tooltipPane",
|
||||
});
|
||||
|
||||
polyline.on("mouseover", (e) => {
|
||||
const tooltip = polyline.getTooltip();
|
||||
if (tooltip) {
|
||||
const mousePos = e.containerPoint;
|
||||
const mapSize = map.getSize();
|
||||
|
||||
let direction = "right";
|
||||
|
||||
if (mousePos.x > mapSize.x - 100) {
|
||||
direction = "left";
|
||||
} else if (mousePos.x < 100) {
|
||||
direction = "right";
|
||||
}
|
||||
|
||||
if (mousePos.y > mapSize.y - 100) {
|
||||
direction = "top";
|
||||
} else if (mousePos.y < 100) {
|
||||
direction = "bottom";
|
||||
}
|
||||
|
||||
tooltip.options.direction = direction;
|
||||
polyline.openTooltip(e.latlng);
|
||||
}
|
||||
});
|
||||
|
||||
polyline.on("mouseout", () => {
|
||||
polyline.closeTooltip();
|
||||
});
|
||||
});
|
||||
|
||||
setMarkers(newMarkers);
|
||||
setPolylines(newPolylines);
|
||||
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
|
||||
|
||||
//--------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
restoreMapSettings(map);
|
||||
}
|
||||
}, [map]);
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
const handleMapMoveEnd = (event) => {
|
||||
const newCenter = map.getCenter();
|
||||
const newZoom = map.getZoom();
|
||||
|
||||
setCurrentCenter([newCenter.lat, newCenter.lng]);
|
||||
setCurrentZoom(newZoom);
|
||||
|
||||
localStorage.setItem("mapCenter", JSON.stringify([newCenter.lat, newCenter.lng]));
|
||||
localStorage.setItem("mapZoom", newZoom);
|
||||
};
|
||||
|
||||
map.on("moveend", handleMapMoveEnd);
|
||||
map.on("zoomend", handleMapMoveEnd);
|
||||
|
||||
return () => {
|
||||
map.off("moveend", handleMapMoveEnd);
|
||||
map.off("zoomend", handleMapMoveEnd);
|
||||
};
|
||||
}
|
||||
}, [map]);
|
||||
//--------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedArea && map) {
|
||||
const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
|
||||
if (station) {
|
||||
map.flyTo([station.X, station.Y], 14);
|
||||
}
|
||||
}
|
||||
}, [selectedArea, map, GisStationsStaticDistrict]);
|
||||
|
||||
useEffect(() => {
|
||||
if (zoomTrigger && map) {
|
||||
map.flyTo([51.41321407879154, 7.739617925303934], 7);
|
||||
}
|
||||
}, [zoomTrigger, map]);
|
||||
|
||||
useEffect(() => {
|
||||
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
|
||||
addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
|
||||
}
|
||||
}, [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]);
|
||||
//--------------------------------------------
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToastContainer />
|
||||
<div>{showPoiUpdateModal && <PoiUpdateModal onClose={() => setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</div>
|
||||
|
||||
<div>
|
||||
{showPopup && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={closePopup}>
|
||||
<div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
|
||||
<button onClick={closePopup} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<AddPoiModalWindow onClose={closePopup} onSubmit={handleAddStation} latlng={popupCoordinates} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DataSheet className="z-50" />
|
||||
|
||||
<div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
|
||||
|
||||
<div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<span className="text-black text-lg font-semibold"> TALAS.Map </span>
|
||||
<br />
|
||||
<span className="text-black text-lg">Version {MAP_VERSION}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={openVersionInfoModal}>
|
||||
<InformationCircleIcon className="text-blue-900 h-8 w-8 pr-1" title="Weitere Infos" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VersionInfoModal showVersionInfoModal={showVersionInfoModal} closeVersionInfoModal={closeVersionInfoModal} MAP_VERSION={MAP_VERSION} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapComponent;
|
||||
@@ -542,7 +542,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
|
||||
);
|
||||
|
||||
newPolylines.forEach((polyline, index) => {
|
||||
const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
|
||||
const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || `idLD: ${linePositions[index].idLD} in DB gis_lines aber in WebService GisLinesStatus nicht gefunden`;
|
||||
|
||||
polyline.bindTooltip(tooltipContent, {
|
||||
permanent: false,
|
||||
|
||||
@@ -4,9 +4,7 @@ import * as urls from "../config/urls.js";
|
||||
const mapVersion = "0.5.3"; // Die Version der verwendeten Karte
|
||||
const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird
|
||||
const fullSideMenu = false; // Einstellung, ob ein vollständiges Seitenmenü verwendet wird
|
||||
//const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen werden
|
||||
//const serverURL = "http://10.10.0.13";
|
||||
//const serverURL = "http://10.10.0.70";
|
||||
|
||||
const serverURL = process.env.NEXT_PUBLIC_SERVER_URL;
|
||||
if (!serverURL) {
|
||||
throw new Error("Die Umgebungsvariable NEXT_PUBLIC_SERVER_URL ist nicht gesetzt!");
|
||||
@@ -44,27 +42,12 @@ if (typeof window !== "undefined") {
|
||||
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
|
||||
|
||||
//webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`;
|
||||
//webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
|
||||
//webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
|
||||
//webserviceGisLinesStatusUrl = `${"serverURL"}:3000/api/linesColorApi`;
|
||||
|
||||
// webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
|
||||
//webserviceGisLinesStatusUrl = `http://192.168.10.14/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`;
|
||||
webserviceGisLinesStatusUrl = `${serverURL}/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`;
|
||||
|
||||
//http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484
|
||||
|
||||
/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
|
||||
mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
|
||||
mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
|
||||
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
|
||||
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
|
||||
|
||||
/* mapGisStationsStaticDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`;
|
||||
mapGisStationsStatusDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`;
|
||||
mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsMeasurements?idMap=${idMap}`;
|
||||
mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/gisStationsMeasurementsSQL?idMap=${idMap}`;
|
||||
mapGisSystemStaticUrl = `${serverURL}/api/talas5/webserviceMap/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`;
|
||||
mapDataIconUrl = `${serverURL}/api/talas5/webserviceMap/GetIconsStatic`; */
|
||||
}
|
||||
|
||||
// Export der definierten Variablen und URLs, damit sie in anderen Teilen der Anwendung verwendet werden können
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { SERVER_URL } from "../config/urls";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
||||
const dispatch = useDispatch();
|
||||
const messages = useSelector((state) => state.messages);
|
||||
const [lineColors, setLineColors] = useState({});
|
||||
const [tooltipContents, setTooltipContents] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
let isCancelled = false;
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||
const data1 = await response1.json();
|
||||
|
||||
const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
|
||||
const data2 = await response2.json();
|
||||
|
||||
const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`);
|
||||
const namesData = await response3.json();
|
||||
|
||||
if (!isCancelled) {
|
||||
const colorsByModule = {};
|
||||
const newTooltipContents = {};
|
||||
const valueMap = {};
|
||||
|
||||
const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
|
||||
|
||||
sortedStatis.forEach((statis) => {
|
||||
const key = `${statis.IdLD}-${statis.Modul}`;
|
||||
|
||||
if (!valueMap[key]) {
|
||||
valueMap[key] = {
|
||||
messages: [],
|
||||
messwert: undefined,
|
||||
schleifenwert: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
|
||||
valueMap[key].messwert = statis.Value;
|
||||
}
|
||||
if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
|
||||
valueMap[key].schleifenwert = statis.Value;
|
||||
}
|
||||
|
||||
if (statis.Message && statis.Message !== "?") {
|
||||
valueMap[key].messages.push({
|
||||
message: statis.Message,
|
||||
prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
sortedStatis.forEach((statis) => {
|
||||
const key = `${statis.IdLD}-${statis.Modul}`;
|
||||
const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
|
||||
|
||||
if (matchingLine) {
|
||||
const values = valueMap[key];
|
||||
|
||||
const messageDisplay = values.messages.map((msg) => `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`).join("");
|
||||
|
||||
const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
|
||||
|
||||
colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
|
||||
|
||||
newTooltipContents[key] = `
|
||||
<div class="bg-white rounded-lg m-0 p-2 w-[210px]">
|
||||
<span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span>
|
||||
<br>
|
||||
<span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
|
||||
<br>
|
||||
<span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
|
||||
<br>
|
||||
<span class="text-md font-bold text-gray-800">Station: ${namesData[matchingLine.idLD] || "N/A"}</span>
|
||||
<br>
|
||||
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
|
||||
${messageDisplay}
|
||||
</div>
|
||||
<br>
|
||||
${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` : ""}
|
||||
${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
setLineColors(colorsByModule);
|
||||
setTooltipContents(newTooltipContents);
|
||||
setLineStatusData(data1.Statis);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Daten:", error);
|
||||
try {
|
||||
window.location.reload();
|
||||
} catch (reloadError) {
|
||||
console.error("Fehler beim Neuladen der Seite:", reloadError);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleNextFetch = () => {
|
||||
if (!isCancelled) {
|
||||
fetchData();
|
||||
setTimeout(scheduleNextFetch, 30000);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
scheduleNextFetch();
|
||||
|
||||
return () => {
|
||||
isCancelled = true;
|
||||
};
|
||||
}, [webserviceGisLinesStatusUrl, setLineStatusData]);
|
||||
|
||||
return { lineColors, tooltipContents };
|
||||
};
|
||||
|
||||
export default useLineData;
|
||||
@@ -1,41 +1,6 @@
|
||||
// /utils/mapUtils.js
|
||||
import L from "leaflet";
|
||||
|
||||
export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => {
|
||||
if (!lineData || !lineColors || !tooltipContents || !map) {
|
||||
console.error("Invalid parameters for redrawPolyline");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) {
|
||||
console.error("Invalid coordinates in lineData");
|
||||
return;
|
||||
}
|
||||
|
||||
const color = lineColors[lineData.idModul] || "#000000";
|
||||
const tooltipContent = tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt";
|
||||
|
||||
if (lineData.polyline) map.removeLayer(lineData.polyline);
|
||||
|
||||
lineData.polyline = L.polyline(lineData.coordinates, {
|
||||
color: color,
|
||||
}).addTo(map);
|
||||
|
||||
lineData.polyline.bindTooltip(tooltipContent, {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
lineData.polyline.on("mouseover", () => {
|
||||
lineData.polyline.setStyle({ weight: 10 });
|
||||
lineData.polyline.bringToFront();
|
||||
});
|
||||
|
||||
lineData.polyline.on("mouseout", () => {
|
||||
lineData.polyline.setStyle({ weight: 5 });
|
||||
});
|
||||
};
|
||||
|
||||
export const saveLineData = (lineData) => {
|
||||
fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
|
||||
method: "POST",
|
||||
|
||||
@@ -1,341 +0,0 @@
|
||||
// utils/setupPolylines.js
|
||||
import { findClosestPoints } from "./geometryUtils";
|
||||
import handlePoiSelect from "./handlePoiSelect";
|
||||
import { updateLocationInDatabase } from "../services/apiService";
|
||||
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
|
||||
import { parsePoint } from "./geometryUtils";
|
||||
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
|
||||
import startIcon from "../components/gisPolylines/icons/StartIcon";
|
||||
import endIcon from "../components/gisPolylines/icons/EndIcon";
|
||||
import { redrawPolyline } from "./mapUtils";
|
||||
import { openInNewTab } from "./openInNewTab";
|
||||
import { toast } from "react-toastify";
|
||||
import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
|
||||
import { useRecoilValue } from "recoil";
|
||||
|
||||
// Funktion zum Deaktivieren der Polyline-Ereignisse
|
||||
export function disablePolylineEvents(polylines) {
|
||||
polylines.forEach((polyline) => {
|
||||
polyline.off("mouseover");
|
||||
polyline.off("mouseout");
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Aktivieren der Polyline-Ereignisse
|
||||
export function enablePolylineEvents(polylines, lineColors) {
|
||||
// Überprüfe, ob polylines definiert ist und ob es Elemente enthält
|
||||
if (!polylines || polylines.length === 0) {
|
||||
//console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Falls Polylinien vorhanden sind, wende die Events an
|
||||
polylines.forEach((polyline) => {
|
||||
polyline.on("mouseover", (e) => {
|
||||
//console.log("Mouseover on polyline", polyline.options);
|
||||
polyline.setStyle({ weight: 14 });
|
||||
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
|
||||
//localStorage.setItem("lastElementType", "polyline");
|
||||
//localStorage.setItem("polylineLink", link);
|
||||
});
|
||||
|
||||
polyline.on("mouseout", (e) => {
|
||||
//console.log("Mouseout from polyline", polyline.options);
|
||||
polyline.setStyle({ weight: 3 });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
|
||||
if (localStorage.getItem("polylineVisible") === null) {
|
||||
localStorage.setItem("polylineVisible", "true"); // Standardwert setzen
|
||||
polylineVisible = true; // Wert in der Funktion initialisieren
|
||||
} else {
|
||||
polylineVisible = localStorage.getItem("polylineVisible") === "true";
|
||||
}
|
||||
|
||||
if (!polylineVisible) {
|
||||
// Entferne alle Polylinien, wenn sie ausgeblendet werden sollen
|
||||
if (window.polylines) {
|
||||
window.polylines.forEach((polyline) => {
|
||||
if (map.hasLayer(polyline)) {
|
||||
map.removeLayer(polyline);
|
||||
}
|
||||
});
|
||||
}
|
||||
return { markers: [], polylines: [] };
|
||||
}
|
||||
const markers = [];
|
||||
const polylines = [];
|
||||
const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist
|
||||
|
||||
linePositions.forEach((lineData, lineIndex) => {
|
||||
const lineMarkers = [];
|
||||
|
||||
lineData.coordinates.forEach((coord, index) => {
|
||||
let icon = circleIcon;
|
||||
if (index === 0) {
|
||||
icon = startIcon;
|
||||
} else if (index === lineData.coordinates.length - 1) {
|
||||
icon = endIcon;
|
||||
}
|
||||
|
||||
// Nur Marker mit circleIcon ausblenden, wenn Bearbeitungsmodus deaktiviert ist
|
||||
if (icon !== circleIcon || editMode) {
|
||||
const marker = L.marker(coord, {
|
||||
icon: icon,
|
||||
draggable: editMode, // Nur verschiebbar, wenn Bearbeitungsmodus aktiv ist
|
||||
contextmenu: true,
|
||||
contextmenuInheritItems: false,
|
||||
contextmenuItems: [],
|
||||
}).addTo(map);
|
||||
|
||||
marker.on("dragend", () => {
|
||||
console.log("Marker wurde verschoben in setupPolylines.js");
|
||||
if (editMode) {
|
||||
const newCoords = marker.getLatLng();
|
||||
setNewCoords(newCoords);
|
||||
const newCoordinates = [...lineData.coordinates];
|
||||
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
||||
|
||||
const updatedPolyline = L.polyline(newCoordinates, {
|
||||
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
|
||||
}).addTo(map);
|
||||
|
||||
updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
updatedPolyline.on("mouseover", () => {
|
||||
updatedPolyline.setStyle({ weight: 20 });
|
||||
updatedPolyline.bringToFront();
|
||||
});
|
||||
|
||||
updatedPolyline.on("mouseout", () => {
|
||||
updatedPolyline.setStyle({ weight: 3 });
|
||||
});
|
||||
|
||||
polylines[lineIndex].remove();
|
||||
polylines[lineIndex] = updatedPolyline;
|
||||
lineData.coordinates = newCoordinates;
|
||||
|
||||
const requestData = {
|
||||
idModul: lineData.idModul,
|
||||
idLD: lineData.idLD,
|
||||
newCoordinates,
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
} else {
|
||||
toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
marker.on("mouseover", function () {
|
||||
this.bindContextMenu({
|
||||
contextmenuItems: [
|
||||
{
|
||||
text: "Stützpunkt entfernen",
|
||||
icon: "/img/icons/gisLines/remove-support-point.svg",
|
||||
callback: () => {
|
||||
if (editMode) {
|
||||
const newCoords = marker.getLatLng();
|
||||
const newCoordinates = [...lineData.coordinates];
|
||||
newCoordinates[index] = [newCoords.lat, newCoords.lng];
|
||||
|
||||
removePOI(marker, lineData, currentZoom, currentCenter);
|
||||
polylines[lineIndex].remove();
|
||||
lineData.coordinates = newCoordinates;
|
||||
} else {
|
||||
toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
marker.on("mouseout", function () {
|
||||
this.unbindContextMenu();
|
||||
});
|
||||
|
||||
lineMarkers.push(marker);
|
||||
}
|
||||
});
|
||||
|
||||
const polyline = L.polyline(lineData.coordinates, {
|
||||
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
|
||||
weight: 3,
|
||||
contextmenu: true,
|
||||
contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren
|
||||
contextmenuItems: [],
|
||||
}).addTo(map);
|
||||
|
||||
// Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist
|
||||
if (editMode) {
|
||||
polyline.options.contextmenuItems.push(
|
||||
{
|
||||
text: "Station öffnen (Tab)",
|
||||
icon: "/img/screen_new.png",
|
||||
callback: (e) => {
|
||||
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
|
||||
window.open(link, "_blank");
|
||||
},
|
||||
},
|
||||
{ separator: true },
|
||||
|
||||
{
|
||||
text: "Koordinaten anzeigen",
|
||||
icon: "/img/not_listed_location.png",
|
||||
callback: (e) => {
|
||||
alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
|
||||
},
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
text: "Reinzoomen",
|
||||
icon: "/img/zoom_in.png",
|
||||
callback: (e) => map.zoomIn(),
|
||||
},
|
||||
{
|
||||
text: "Rauszoomen",
|
||||
icon: "/img/zoom_out.png",
|
||||
callback: (e) => map.zoomOut(),
|
||||
},
|
||||
{
|
||||
text: "Hier zentrieren",
|
||||
icon: "/img/center_focus.png",
|
||||
callback: (e) => map.panTo(e.latlng),
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
text: "POI hinzufügen",
|
||||
icon: "/img/add_station.png",
|
||||
callback: (e) => {
|
||||
// Hier kannst du die Logik für das Hinzufügen eines POIs implementieren
|
||||
alert("POI hinzufügen an: " + e.latlng);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Stützpunkt hinzufügen",
|
||||
icon: "/img/icons/gisLines/add-support-point.svg",
|
||||
callback: (e) => {
|
||||
if (tempMarker) {
|
||||
tempMarker.remove();
|
||||
}
|
||||
const newPoint = e.latlng;
|
||||
const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
|
||||
insertNewPOI(closestPoints, newPoint, lineData, map);
|
||||
redrawPolyline(lineData, lineColors, tooltipContents, map);
|
||||
window.location.reload();
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Hier wird der Tooltip hinzugefügt
|
||||
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
polyline.on("mouseover", (e) => {
|
||||
const startTime = Date.now(); // Startzeit erfassen
|
||||
localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage
|
||||
|
||||
// Starte einen Intervall-Timer, um die Differenz zu berechnen
|
||||
const countdownInterval = setInterval(() => {
|
||||
const currentTime = Date.now();
|
||||
const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden
|
||||
|
||||
// Speichern der abgelaufenen Zeit in localStorage
|
||||
localStorage.setItem("contextMenuCountdown", elapsedTime);
|
||||
|
||||
// Wenn die Zeit 17 Sekunden erreicht, schließe das Menü
|
||||
if (elapsedTime >= 17) {
|
||||
clearInterval(countdownInterval);
|
||||
const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü
|
||||
contextMenu.hide(); // Kontextmenü schließen
|
||||
}
|
||||
}, 1000); // Jede Sekunde
|
||||
//console.log("Mouseover on polyline", lineData);
|
||||
polyline.setStyle({ weight: 14 });
|
||||
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
|
||||
console.log("Link der Linie:", link);
|
||||
//localStorage.setItem("lastElementType", "polyline");
|
||||
//localStorage.setItem("polylineLink", link);
|
||||
});
|
||||
|
||||
polyline.on("mouseout", (e) => {
|
||||
// console.log("Mouseout from polyline", lineData);
|
||||
polyline.setStyle({ weight: 3 });
|
||||
// Setze den Countdown auf 0, wenn mouseout ausgelöst wird
|
||||
localStorage.setItem("contextMenuCountdown", 0);
|
||||
});
|
||||
// Speichere den Link bei einem Rechtsklick (Kontextmenü)
|
||||
/*
|
||||
polyline.on("contextmenu", (e) => {
|
||||
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
|
||||
console.log("Link der Linie (via Rechtsklick):", link);
|
||||
localStorage.setItem("lastElementType", "polyline");
|
||||
localStorage.setItem("polylineLink", link);
|
||||
});
|
||||
*/
|
||||
// Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
|
||||
polyline.on("contextmenu", function (e) {
|
||||
const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
|
||||
const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
|
||||
|
||||
const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 30);
|
||||
if (countdown >= 28) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
polylines.push(polyline);
|
||||
markers.push(...lineMarkers);
|
||||
});
|
||||
|
||||
// Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
|
||||
window.polylines = polylines;
|
||||
window.lineColors = lineColors;
|
||||
|
||||
return { markers, polylines };
|
||||
};
|
||||
@@ -137,7 +137,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
|
||||
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
|
||||
}).addTo(map);
|
||||
|
||||
updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
|
||||
updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup 1", {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
@@ -352,7 +352,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
|
||||
}
|
||||
|
||||
// Hier wird der Tooltip hinzugefügt
|
||||
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
|
||||
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup", {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
@@ -25,22 +25,14 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => {
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
|
||||
const getIdSystemAndAllowValueMap = new Map(
|
||||
GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
|
||||
);
|
||||
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) => {
|
||||
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 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
|
||||
@@ -62,9 +54,7 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
}
|
||||
|
||||
const statusInfo = statusResponse.Statis.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
)
|
||||
const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
@@ -108,9 +98,7 @@ export const fetchPriorityConfig = async () => {
|
||||
//----------------------------------------------
|
||||
export const fetchGisStatusStations = async (idMap, idUser) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`
|
||||
);
|
||||
const response = await fetch(`/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error: ${response.statusText}`);
|
||||
}
|
||||
@@ -158,10 +146,7 @@ export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
|
||||
icon: circleIcon,
|
||||
draggable: true,
|
||||
}).addTo(map);
|
||||
lineData.coordinates.splice(closestPoints[2], 0, [
|
||||
newPoint.lat,
|
||||
newPoint.lng,
|
||||
]);
|
||||
lineData.coordinates.splice(closestPoints[2], 0, [newPoint.lat, newPoint.lng]);
|
||||
|
||||
// Hier direkt speichern nach Einfügen
|
||||
saveLineData(lineData);
|
||||
@@ -224,42 +209,3 @@ export const saveLineData = (lineData) => {
|
||||
});
|
||||
};
|
||||
//----------------------------------------------
|
||||
/* export const redrawPolyline = (lineData) => {
|
||||
const [lineColors, setLineColors] = useState({}); */
|
||||
import L from "leaflet";
|
||||
|
||||
export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => {
|
||||
if (!lineData || !lineColors || !tooltipContents || !map) {
|
||||
console.error("Invalid parameters for redrawPolyline");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) {
|
||||
console.error("Invalid coordinates in lineData");
|
||||
return;
|
||||
}
|
||||
|
||||
const color = lineColors[lineData.idModul] || "#000000";
|
||||
const tooltipContent =
|
||||
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt";
|
||||
|
||||
if (lineData.polyline) map.removeLayer(lineData.polyline);
|
||||
|
||||
lineData.polyline = L.polyline(lineData.coordinates, {
|
||||
color: color,
|
||||
}).addTo(map);
|
||||
|
||||
lineData.polyline.bindTooltip(tooltipContent, {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
|
||||
lineData.polyline.on("mouseover", () => {
|
||||
lineData.polyline.setStyle({ weight: 10 });
|
||||
lineData.polyline.bringToFront();
|
||||
});
|
||||
|
||||
lineData.polyline.on("mouseout", () => {
|
||||
lineData.polyline.setStyle({ weight: 5 });
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user