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

fix: Behebt Endlosschleife und doppelte Recoil-Atom-Registrierung

Browse Source 
- `index.js` als Client-Komponente deklariert (`"use client"`) zur Vermeidung von SSR-Problemen.
- `useEffect` optimiert, um unendliche API-Requests durch `isMounted`-Check zu verhindern.
- `loadData()` angepasst, um API-Fehler korrekt abzufangen und erneute Ladeversuche zu vermeiden.
- Doppelte Registrierung von `poiReadFromDbTriggerAtom` durch HMR verhindert.
- Ungültige MySQL-Option `acquireTimeout` entfernt, um Verbindungsfehler zu beheben.

Diese Änderungen verhindern unerwartete Reloads und verbessern die Stabilität der Anwendung.
This commit is contained in:
Ismail Ali
2025-02-02 13:01:04 +01:00
parent de0ff741f7
commit 5b2cb762cc
82 changed files with 5710 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
utils/createAndSetDevices.js
View File

@@ -7,7 +7,6 @@ import { toast } from "react-toastify";
import * as config from "../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand
import { SERVER_URL } from "../config/urls.js";
// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
const determinePriority = (iconPath, priorityConfig) => {
@@ -32,15 +31,13 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
const jsonResponse = await response1.json();
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
const statusResponse = await response2.json();
const BASE_URL = SERVER_URL;
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
if (jsonResponse.Points && statusResponse.Statis) {
//console.log("jsonResponse.Points: ", jsonResponse.Points);
//console.log("statusResponse.Statis: ", statusResponse.Statis);
localStorage.setItem("jsonResponse.Points", JSON.stringify(jsonResponse.Points));
localStorage.setItem("statusResponse.Statis", JSON.stringify(statusResponse.Statis));
console.log("jsonResponse.Points: ", jsonResponse.Points);
console.log("statusResponse.Statis: ", 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);
@@ -114,6 +111,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
</div>
`);
return marker;
});

9
utils/mapUtils.js
View File

@@ -103,12 +103,9 @@ export const checkOverlappingMarkers = (map, markers, plusIcon) => {
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
const plusMarker = L.marker(latLng, { icon: plusIcon });
plusMarker.addTo(map);
//localStorage benutzen statt console.log
//console.log("Adding plus icon marker at", latLng);
localStorage.setItem("Adding plus icon marker at", plusMarker);
console.log("Adding plus icon marker at", latLng);
}
}
//localStorage benutzen statt console.log
//console.log("overlappingGroups", overlappingGroups);
localStorage.setItem("overlappingGroups", overlappingGroups);
console.log("overlappingGroups", overlappingGroups);
};

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,

3
utils/openInNewTab.js
View File

@@ -1,8 +1,7 @@
// utils/openInNewTab.js
import SERVER_URL from "../config/urls";
export function openInNewTab(e, target) {
const BASE_URL = SERVER_URL;
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
let link;
// Prüfen, ob der Kontextmenü-Eintrag aufgerufen wird, ohne dass ein Marker oder Polyline direkt angesprochen wird

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,

341
utils/setupPolylines-back.js Normal file
View File

@@ -0,0 +1,341 @@
// 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 };
};

18
utils/setupPolylines.js
View File

@@ -13,11 +13,6 @@ import { toast } from "react-toastify";
import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
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
// Funktion zum Deaktivieren der Polyline-Ereignisse
export function disablePolylineEvents(polylines) {
polylines.forEach((polyline) => {
@@ -39,7 +34,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);
});
@@ -255,7 +250,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 +309,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");
},
},
@@ -384,11 +379,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) => {