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

Merge branch 'v1.0.8.1' into fix/ohne-externe-babel

Browse Source
This commit is contained in:
ISA
2025-02-05 10:27:36 +01:00
parent 580b9edb4c b6ba58fa96
commit f4210a4776
88 changed files with 5425 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
utils/createAndSetDevices.js
View File

@@ -1,162 +1,133 @@
// /utils/createAndSetDevices.js
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { SERVER_URL } from "../config/urls.js";
import { toast } from "react-toastify";
import * as config from "../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
//import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
import { store } from "../redux/store";
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";
// Variable zum Speichern der Prioritätskonfiguration (z.B. Level und Farben)
let priorityConfig = [];
// Funktion zum Abrufen der Prioritätsdaten von der API
const fetchPriorityConfig = async () => {
try {
// Ruft die API auf, um die Prioritätsdaten zu laden
const response = await fetch(`${SERVER_URL}:3000/api/prio`);
// Konvertiert die Antwort in ein JSON-Format
const data = await response.json();
// Gibt die empfangenen Daten in der Konsole aus, um die Struktur zu überprüfen
// console.log("Prioritätsdaten: ", data);
// Speichert die empfangenen Prioritätsdaten in der Variablen priorityConfig
priorityConfig = data;
} catch (error) {
// Gibt einen Fehler in der Konsole aus, falls die API nicht erreichbar ist
console.error("Fehler beim Abrufen der Prioritätsdaten: ", error);
const determinePriority = (iconPath, priorityConfig) => {
for (let priority of priorityConfig) {
if (iconPath.includes(priority.name.toLowerCase())) {
return priority.level;
}
}
return 5;
};
// Funktion zur Bestimmung der Farbe basierend auf dem Level
const getColorClass = (level) => {
// Sucht in priorityConfig nach einem Objekt, dessen level-Wert dem übergebenen Level entspricht
const priority = priorityConfig.find((p) => p.level === level);
// Gibt die Farbe zurück, wenn das Level gefunden wurde, ansonsten die Standardfarbe (#999999)
return priority ? priority.color : "#999999"; // Fallback-Farbe, wenn kein Level gefunden wurde
};
/* // Ruft die Funktion zum Abrufen der Prioritätsdaten auf und wartet, bis sie abgeschlossen ist
fetchPriorityConfig().then(() => {
// Gibt die geladenen Prioritätsdaten in der Konsole aus, um zu überprüfen, ob die Daten korrekt geladen wurden
console.log("Prioritätsdaten wurden geladen:", priorityConfig);
// Testet die Funktion getColorClass für verschiedene Level und gibt die entsprechenden Farben aus
console.log("Farbe für Level 0:", getColorClass(0)); // Farbe für Level 0 anzeigen
console.log("Farbe für Level 1:", getColorClass(1)); // Farbe für Level 1 anzeigen
console.log("Farbe für Level 2:", getColorClass(2)); // Farbe für Level 2 anzeigen
console.log("Farbe für Level 3:", getColorClass(3)); // Farbe für Level 3 anzeigen
console.log("Farbe für Level 4:", getColorClass(4)); // Farbe für Level 4 anzeigen
console.log("Farbe für Level 100:", getColorClass(100)); // Farbe für Level 100 anzeigen
console.log("Farbe für Level 101:", getColorClass(101)); // Farbe für Level 101 anzeigen
}); */
// Funktion zum Erstellen und Setzen von Markern
// Funktion zum Erstellen und Setzen von Markern
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic) => {
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
try {
// Lade die statischen Daten
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
const jsonResponse = await response1.json();
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
const statusResponse = await response2.json();
//console.log("statusResponse: ", statusResponse);
const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
if (!jsonResponse.Points || !statusResponse.Statis) {
console.error("❌ Fehlende Daten in API-Response!");
return;
}
if (jsonResponse.Points && statusResponse.Statis) {
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, { color: s.Co, level: s.Le }]));
console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
// console.log("idLD , Farbe und Level: ", statisMap);
// Erstelle eine Map für Statusinformationen
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) => {
// Statusdaten für die Station abrufen
const statisForStation = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD);
// Speichere `idLD` und `Active` Werte in Redux
const allLines = jsonResponse.Points.filter((station) => station.System === systemId).map((station) => {
console.log("------------------------");
console.log("station.IdLD: ", station.IdLD);
console.log("station.Active: ", station.Active);
console.log("------------------------");
// Niedrigstes Level ermitteln
const minLevel = Math.min(...statisForStation.map((status) => status.Le));
// Redux: Aktualisiere `idLD` und `Active` Werte
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
// Farbe für das niedrigste Level bestimmen
const color = getColorClass(minLevel); // Farbe anhand des Levels
return {
idLD: station.IdLD,
active: station.Active,
};
});
//console.log(`Station: ${station.LD_Name}, Min Level: ${minLevel}, Color: ${color}`);
const statisData = statisMap.get(station.IdLD); // Hole Farbe und Level
const outerColor = statisData ? statisData.color : "#008013"; // Dynamische Farbe oder Standard-Grün
const innerColor = "rgba(255, 255, 255, 0.8)"; // Weiß mit 80% Deckkraft
console.log("🔄 Alle Linien gespeichert:", allLines);
const marker = L.marker([station.X, station.Y], {
icon: L.divIcon({
className: `custom-marker`,
html: `
<div >
<!-- SVG direkt eingebettet -->
<svg width="50" height="50" viewBox="0 0 25 41" xmlns="http://www.w3.org/2000/svg">
<!-- Äußere Form -->
<path id="outer" fill="${outerColor}" stroke="#000000" stroke-width="0.3"
d="M 5.0582559,3.8656758 19.50163,3.616274 c 0,0 1.960457,0.6522815 2.770647,1.5827418 0.910212,1.0455689 0.670156,2.3789089 0.670156,2.3789089 l 0.120028,13.2470683 c 0,0 -0.460107,0.911276 -1.250292,1.649889 -0.630147,0.594727 -1.620378,1.055162 -1.620378,1.055162 0,0 -0.500117,0.508395 -4.190979,1.314155 0,0 -0.869675,1.874293 -1.31978,3.457035 -1.020238,3.577955 -2.304224,6.276531 -2.304224,6.276531 0,0 -0.824931,-2.365549 -1.84517,-5.972281 -0.480112,-1.717035 -1.4124335,-3.81884 -1.4124335,-3.81884 0,0 -3.7708809,-0.681058 -3.8609019,-0.748205 0,0 -1.2102827,-0.441249 -1.8804393,-1.170269 -0.7601775,-0.824944 -1.190278,-1.860921 -1.190278,-1.860921 L 2.0575549,7.0407517 C 1.5174288,7.0599367 4.3580923,3.8848605 5.0582559,3.8656758 Z" />
<!-- Innere Form -->
<path id="inner" fill="${innerColor}" stroke="#000000" stroke-width="0.27"
d="m 5.1425811,7.1294233 c -0.5874766,0.6413053 -0.8634128,1.398402 -0.8634128,1.398402 0,0 0.2492327,12.0779207 0.2492327,12.0779207 0,0 0.5162673,0.641304 1.1927556,1.166818 0.5785757,0.445352 1.4686917,0.623491 1.4686917,0.623491 0.979128,0.01781 11.3845877,-0.338466 11.3845877,-0.338466 0,0 0.747696,-0.240489 1.30847,-0.863981 0.45396,-0.498793 0.818907,-0.855074 0.818907,-0.855074 0,0 -0.07122,-11.8641507 -0.07122,-11.7572665 0,0.071256 -0.23143,-0.9797723 -0.863412,-1.6834268 -0.400548,-0.4364441 -1.308466,-0.6502126 -1.308466,-0.6502126 0,0 -12.0699763,0 -12.0699763,0 0,0 -0.7922036,0.3919091 -1.2461636,0.8817952 z" />
</svg>
<!-- Inneres Icon -->
<img src="img/icons/marker-icon-${station.Icon}.svg"
style="position: absolute;
top: 8px;
left: 15px;
width: 20px;
height: 20px;
" />
</div>`,
iconSize: [30, 45],
iconAnchor: [27, 41],
popupAnchor: [1, -34],
}),
areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
link: station.Link,
// Filtere nur aktive Stationen für Marker
const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
console.log("🔍 Gefilterte aktive Stationen:", activeStations);
zIndexOffset: 100 * (6 - minLevel),
});
let markersData = activeStations.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`;
// Popup-Info dynamisch erstellen
const statusInfo = statisForStation
.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}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`
)
.join("");
const priority = determinePriority(iconPath, priorityConfig);
const zIndexOffset = 100 * (5 - priority);
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>
`);
// **Mouseover zeigt Popup**
marker.on("mouseover", function () {
this.openPopup();
});
// **Mouseout schließt Popup**
marker.on("mouseout", function () {
this.closePopup();
});
return marker;
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,
link: station.Link,
zIndexOffset: zIndexOffset,
});
setMarkersFunction(markersData);
}
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">
${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}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`
)
.join("")}
</div>
</div>
`);
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("contextmenu", function (event) {
if (event && event.preventDefault) event.preventDefault();
this.openPopup();
});
document.addEventListener("mouseout", function (event) {
if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
enablePolylineEvents(window.polylines, window.lineColors);
}
});
if (typeof marker.bounce === "function" && statis) {
marker.on("add", () => marker.bounce(3));
}
return marker;
});
console.log("📌 Marker erstellt:", markersData.length, markersData);
setMarkersFunction(markersData);
} catch (error) {
console.error("Fehler beim Abrufen der Daten: ", error);
console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
}
};

39
utils/mapUtils.js
View File

@@ -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",
@@ -86,7 +51,8 @@ export const checkOverlappingMarkers = (map, markers, plusIcon) => {
// Gruppiere Marker basierend auf ihrer Position
markers.forEach((marker) => {
if (map.hasLayer(marker)) { // Überprüfen, ob der Marker sichtbar ist
if (map.hasLayer(marker)) {
// Überprüfen, ob der Marker sichtbar ist
const latlngStr = marker.getLatLng().toString();
if (overlappingGroups[latlngStr]) {
overlappingGroups[latlngStr].push(marker);
@@ -133,7 +99,6 @@ export const checkOverlappingMarkers = (map, markers, plusIcon) => {
}
};
export const handlePlusIconClick = (map, markers, oms, clickedLatLng) => {
// Debugging-Ausgabe
console.log("Plus-Icon Position:", clickedLatLng);

2
utils/mysqlPool.js
View File

@@ -7,7 +7,7 @@ let connectionCount = 0; // Zähler für die aktiven Verbindungen
function getPool() {
if (!cachedPool) {
cachedPool = mysql.createPool({
host: "127.0.0.1",
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME,

4
utils/setupPOIs.js
View File

@@ -83,9 +83,7 @@ export const setupPOIs = async (
`);
marker.on("mouseover", function () {
//loaclStorage benutzen statt console.log
//console.log("Device Name:", marker); // Debugging
localStorage.setItem("deviceName", marker.options.name);
console.log("Device Name:", marker); // Debugging
handlePoiSelect(
{
id: location.idPoi,

423
utils/setupPolylines copy.js Normal file
View File

@@ -0,0 +1,423 @@
// 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 });
});
});
}
// Funktion zum Schließen des Kontextmenüs und Entfernen der Markierung
function closePolylineSelectionAndContextMenu(map) {
try {
// Entferne alle markierten Polylinien
if (window.selectedPolyline) {
window.selectedPolyline.setStyle({ weight: 3 }); // Originalstil wiederherstellen
window.selectedPolyline = null;
}
// Überprüfe, ob map und map.contextmenu definiert sind
if (map && map.contextmenu) {
map.contextmenu.hide(); // Kontextmenü schließen
} else {
console.warn("Kontextmenü ist nicht verfügbar.");
}
} catch (error) {
console.error("Fehler beim Schließen des Kontextmenüs:", error);
window.location.reload();
}
// Countdown-Status zurücksetzen
localStorage.removeItem("contextMenuCountdown");
localStorage.removeItem("contextMenuExpired");
}
// Überprüft regelmäßig den Status in localStorage
function monitorContextMenu(map) {
setInterval(() => {
const isContextMenuExpired = localStorage.getItem("contextMenuExpired") === "true";
if (isContextMenuExpired) {
closePolylineSelectionAndContextMenu(map);
localStorage.removeItem("contextMenuExpired"); // Flagge entfernen, um wiederverwendbar zu sein
}
}, 1000); // Alle 1 Sekunde überprüfen
}
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();
},
}
);
} else {
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);
},
}
);
}
// 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;
monitorContextMenu(map);
return { markers, polylines };
};

43
utils/setupPolylines.js
View File

@@ -12,11 +12,7 @@ import { openInNewTab } from "./openInNewTab";
import { toast } from "react-toastify";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice";
import { useRecoilValue } from "recoil";
const protocol = window.location.protocol; // z. B. 'http:' oder 'https:'
const hostname = window.location.hostname; // z. B. 'example.com'
const originWithoutPort = `${protocol}//${hostname}`; // z. B. 'https://example.com'
const BASE_URL = `${originWithoutPort}/talas5/devices/`; // Dynamische Basis-URL
import { store } from "../redux/store"; // Importiere den Store
// Funktion zum Deaktivieren der Polyline-Ereignisse
export function disablePolylineEvents(polylines) {
@@ -39,7 +35,7 @@ export function enablePolylineEvents(polylines, lineColors) {
polyline.on("mouseover", (e) => {
//console.log("Mouseover on polyline", polyline.options);
polyline.setStyle({ weight: 14 });
const link = `${BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
//localStorage.setItem("lastElementType", "polyline");
//localStorage.setItem("polylineLink", link);
});
@@ -87,6 +83,15 @@ function monitorContextMenu(map) {
}
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
// Hole activeLines direkt aus Redux
const state = store.getState(); // Hole den gesamten Zustand
const activeLines = state.lineVisibility.activeLines; // Zugriff auf activeLines
if (!activeLines) {
console.warn("activeLines ist undefined oder null.");
return { markers: [], polylines: [] };
}
if (localStorage.getItem("polylineVisible") === null) {
localStorage.setItem("polylineVisible", "true"); // Standardwert setzen
polylineVisible = true; // Wert in der Funktion initialisieren
@@ -110,6 +115,17 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist
linePositions.forEach((lineData, lineIndex) => {
console.log("LineData:", lineData.idLD, lineData.idModul);
console.log("ActiveLines:", activeLines);
// **Fix: Sicherstellen, dass activeLines definiert ist und idLD existiert**
const isActive = activeLines && lineData.idLD && activeLines[String(lineData.idLD)] === 1;
if (!isActive) {
console.warn(`Linie mit idLD ${lineData.idLD} wird ausgeblendet.`);
return;
}
const lineMarkers = [];
lineData.coordinates.forEach((coord, index) => {
@@ -142,7 +158,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",
});
@@ -255,7 +271,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
const link = `${BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
window.open(link, "_blank");
},
},
@@ -314,7 +330,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
const link = `${BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
window.open(link, "_blank");
},
},
@@ -357,7 +373,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",
});
@@ -384,11 +400,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
// Jede Sekunde
//console.log("Mouseover on polyline", lineData);
polyline.setStyle({ weight: 14 });
const link = `${BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
//console.log("Link der Linie:", link);
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("Link_der_Linie:", link);
//localStorage.setItem("polylineLink", link);
});
polyline.on("mouseout", (e) => {

211
utils/utils.js Normal file
View File

@@ -0,0 +1,211 @@
// /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}&nbsp;<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);
});
};
//----------------------------------------------