utils/utils.js entfernt, weil alles ist ausgelagert
This commit is contained in:
ISA
265
utils/utils.js
265
utils/utils.js
@@ -1,265 +0,0 @@
|
||||
// /utils/utils.js
|
||||
import { useState } from "react";
|
||||
import circleIcon from "../components/CircleIcon";
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
return 5; // Default priority (lowest)
|
||||
};
|
||||
//----------------------------------------------
|
||||
export 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
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: iconPath,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
|
||||
link: station.Link,
|
||||
zIndexOffset: zIndexOffset,
|
||||
bounceOnAdd: !!statis,
|
||||
});
|
||||
|
||||
if (statis) {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
}
|
||||
|
||||
const statusInfo = statusResponse.Statis.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class=" bg-white rounded-lg ">
|
||||
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
||||
<span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
|
||||
<span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
|
||||
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
|
||||
<div class="mt-2">${statusInfo}</div>
|
||||
</div>
|
||||
`);
|
||||
return marker;
|
||||
});
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data: ", error);
|
||||
}
|
||||
};
|
||||
//----------------------------------------------
|
||||
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
|
||||
}
|
||||
}; */
|
||||
//----------------------------------------------
|
||||
export const saveLineData = (lineData) => {
|
||||
fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
idModul: lineData.idModul,
|
||||
idLD: lineData.idLD,
|
||||
newCoordinates: lineData.coordinates,
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Fehler beim Speichern der Linienänderungen");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
console.log("Linienänderungen gespeichert:", data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Speichern der Linienänderungen:", error);
|
||||
});
|
||||
};
|
||||
//----------------------------------------------
|
||||
/* 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