diff --git a/components/CircleIcon.js b/components/CircleIcon.js new file mode 100644 index 000000000..4e29508aa --- /dev/null +++ b/components/CircleIcon.js @@ -0,0 +1,12 @@ +// /components/CircleIcon.js +import L from "leaflet"; +import "leaflet/dist/leaflet.css"; + +const circleIcon = L.divIcon({ + className: "custom-div-icon", + html: "
", + iconSize: [25, 25], + iconAnchor: [5, 5], +}); + +export default circleIcon; diff --git a/components/EndIcon.js b/components/EndIcon.js new file mode 100644 index 000000000..aee9541c8 --- /dev/null +++ b/components/EndIcon.js @@ -0,0 +1,9 @@ +import L from "leaflet"; +const endIcon = L.divIcon({ + className: "custom-end-icon", + html: "
", // Blau für den Endpunkt + iconSize: [25, 25], + iconAnchor: [5, 5], +}); + +export default endIcon; diff --git a/components/MapComponent.js b/components/MapComponent.js index e56f23761..6f632ce95 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -39,12 +39,10 @@ import { set } from "lodash"; import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js"; import { data } from "autoprefixer"; import plusRoundIcon from "./PlusRoundIcon.js"; - -import { - parsePoint, - determinePriority, - createAndSetMarkers, -} from "../utlis/utils.js"; +import { parsePoint, handleEditPoi, insertNewMarker } from "../utlis/utils.js"; +import circleIcon from "./CircleIcon"; +import startIcon from "./StartIcon"; +import endIcon from "./EndIcon"; //--------------------------------------------------------------------- //-------------------- MapComponent ----------------------------------- @@ -148,37 +146,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }); }, []); // 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}` @@ -580,14 +547,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200 const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist //-------------------------------------------------------------------------------- - /* const determinePriority = (iconPath) => { + 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")) { @@ -612,7 +579,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return 5; // Default priority (lowest) } */ // Daten von einer externen Quelle laden - /* const createAndSetMarkers = async (systemId, setMarkersFunction) => { + const createAndSetMarkers = async (systemId, setMarkersFunction) => { try { const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); const jsonResponse = await response1.json(); @@ -641,6 +608,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { 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, @@ -689,7 +660,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } catch (error) { console.error("Error fetching data: ", error); } - }; */ + }; //-------------------------------------------------------------------------------- const mapLayersVisibility = useRecoilValue(mapLayersState); @@ -2076,14 +2047,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }, [map, zoomTrigger]); - //--------------------------------------------------------- - /* useEffect(() => { - //console.log("Aktualisierung in MapComponent.js:", poiReadTrigger); - // Logik zur Aktualisierung der Map hier hinzufügen - // Beispiel: Daten neu laden oder aktualisieren - }, [poiReadTrigger]); */ - //--------------------------------------------------------- - //--------------------------------------------------------- useEffect(() => { if (map) { @@ -2197,21 +2160,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
`; - - /* newTooltipContents[matchingLine.idModul] = ` -
- ${stat.ModulName || "Unknown"} -
- ${stat.ModulTyp || "N/A"} -
-
- - ${stat.Message || "N/A"} -
- (${stat.PrioName || "N/A"}) -
-
- `; */ } }); @@ -2232,25 +2180,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //--------------------------------------------------------- // Custom circle icon for draggable markers - const circleIcon = L.divIcon({ + /* const circleIcon = L.divIcon({ className: "custom-div-icon", html: "
", iconSize: [25, 25], iconAnchor: [5, 5], - }); - const startIcon = L.divIcon({ + }); */ + /* const startIcon = L.divIcon({ className: "custom-start-icon", html: "
", // Rot für den Startpunkt iconSize: [25, 25], iconAnchor: [5, 5], - }); + }); */ - const endIcon = L.divIcon({ + /* const endIcon = L.divIcon({ className: "custom-end-icon", html: "
", // Blau für den Endpunkt iconSize: [25, 25], iconAnchor: [5, 5], - }); + }); */ //----------------------- Update lines---------------------------------- const [lineStatusData, setLineStatusData] = useState([]); const [linesData, setLinesData] = useState([]); @@ -2594,35 +2542,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }); } - function insertNewMarker(closestPoints, newPoint, lineData, map) { - const newMarker = L.marker(newPoint, { - icon: circleIcon, - draggable: true, - }).addTo(map); - lineData.coordinates.splice(closestPoints[2], 0, [ - newPoint.lat, - newPoint.lng, - ]); - - // Hier direkt speichern nach Einfügen - saveLineData(lineData); - - redrawPolyline(lineData); - - // Event-Listener für das Verschieben des Markers hinzufügen - newMarker.on("dragend", () => { - const newCoords = newMarker.getLatLng(); - setNewCoords(newCoords); - const newCoordinates = [...lineData.coordinates]; - newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng]; - lineData.coordinates = newCoordinates; - redrawPolyline(lineData); - - updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker); - saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben - }); - } - function updateMarkerPosition(newLatLng, lineData, marker) { const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()) diff --git a/components/StartIcon.js b/components/StartIcon.js new file mode 100644 index 000000000..b4b8fc0fa --- /dev/null +++ b/components/StartIcon.js @@ -0,0 +1,8 @@ +import L from "leaflet"; +const startIcon = L.divIcon({ + className: "custom-start-icon", + html: "
", // Rot für den Startpunkt + iconSize: [25, 25], + iconAnchor: [5, 5], +}); +export default startIcon; diff --git a/utlis/utils.js b/utlis/utils.js index ee9d40c55..276fdc516 100644 --- a/utlis/utils.js +++ b/utlis/utils.js @@ -1,9 +1,12 @@ +import { useState } from "react"; export const parsePoint = (position) => { const [longitude, latitude] = position.slice(6, -1).split(" "); return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; }; //---------------------------------------------- + export const determinePriority = (iconPath) => { + const [priorityConfig, setPriorityConfig] = useState([]); for (let priority of priorityConfig) { if (iconPath.includes(priority.name.toLowerCase())) { return priority.level; @@ -39,10 +42,6 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => { 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, @@ -92,3 +91,106 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => { console.error("Error fetching data: ", error); } }; +//---------------------------------------------- +export 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); + } +}; +//---------------------------------------------- +export 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); + } +}; +//---------------------------------------------- +export 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); +}; +//---------------------------------------------- +export const insertNewMarker = (closestPoints, newPoint, lineData, map) => { + const newMarker = L.marker(newPoint, { + icon: circleIcon, + draggable: true, + }).addTo(map); + lineData.coordinates.splice(closestPoints[2], 0, [ + newPoint.lat, + newPoint.lng, + ]); + + // Hier direkt speichern nach Einfügen + saveLineData(lineData); + + redrawPolyline(lineData); + + // Event-Listener für das Verschieben des Markers hinzufügen + newMarker.on("dragend", () => { + const newCoords = newMarker.getLatLng(); + setNewCoords(newCoords); + const newCoordinates = [...lineData.coordinates]; + newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng]; + lineData.coordinates = newCoordinates; + redrawPolyline(lineData); + + updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker); + saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben + }); +}; +//---------------------------------------------- +export const addItemsToMapContextMenu = () => { + const [menuItemAdded, setMenuItemAdded] = useState(false); + 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 + } +};