Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Auskommentierter Code in MapComponent.js entfernt

Browse Source
This commit is contained in:
ISA
2024-07-08 15:46:19 +02:00
parent 27c2a8251e
commit 3fbfe1c2e0
4 changed files with 3 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/CircleIcon.js
View File

@@ -1,4 +1,5 @@
// /components/CircleIcon.js
// Custom circle icon for draggable markers
import L from "leaflet";
import "leaflet/dist/leaflet.css";

1
components/EndIcon.js
View File

@@ -1,3 +1,4 @@
// Custom circle icon for draggable markers
import L from "leaflet";
const endIcon = L.divIcon({
className: "custom-end-icon",

195
components/MapComponent.js
View File

@@ -47,10 +47,7 @@ import endIcon from "./EndIcon";
//---------------------------------------------------------------------
//-------------------- MapComponent -----------------------------------
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Get current zoom and center
//const currentZoom = map.getZoom();
const [currentZoom, setCurrentZoom] = useState(12);
//const currentCenter = map.getCenter();
const [currentCenter, setCurrentCenter] = useState(() => {
const storedCenter = localStorage.getItem("mapCenter");
return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625];
@@ -98,19 +95,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, []);
//---------------------------------------------------------------------
/*
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);
@@ -352,30 +336,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
};
// 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);
@@ -399,67 +359,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
); // 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",
@@ -484,30 +383,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
.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
//-----------------------------------------------------------------
@@ -555,29 +430,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
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 {
@@ -1152,21 +1005,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
};
//--------------------------------------------------
/* 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) {
@@ -1553,19 +1391,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
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);
@@ -2179,26 +2004,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, [lineColors]);
//---------------------------------------------------------
// Custom circle icon for draggable markers
/* const circleIcon = L.divIcon({
className: "custom-div-icon",
html: "<div style='background-color:#298a00;border-radius:50%;width:10px;height:10px;'></div>",
iconSize: [25, 25],
iconAnchor: [5, 5],
}); */
/* const startIcon = L.divIcon({
className: "custom-start-icon",
html: "<div style='background-color:#000000;border-radius:50%;width:10px;height:10px;'></div>", // Rot für den Startpunkt
iconSize: [25, 25],
iconAnchor: [5, 5],
}); */
/* const endIcon = L.divIcon({
className: "custom-end-icon",
html: "<div style='background-color:#ffffff;border-radius:50%;width:10px;height:10px;'></div>", // Blau für den Endpunkt
iconSize: [25, 25],
iconAnchor: [5, 5],
}); */
//----------------------- Update lines----------------------------------
const [lineStatusData, setLineStatusData] = useState([]);
const [linesData, setLinesData] = useState([]);

1
components/StartIcon.js
View File

@@ -1,3 +1,4 @@
// Custom circle icon for draggable markers
import L from "leaflet";
const startIcon = L.divIcon({
className: "custom-start-icon",