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

fix: wenn ftech Breiche fehler soll die Seite im Browser nicht neu laden

Browse Source 
feat:von anderen PC /Test PC zugreifen, Laptop als Server
This commit is contained in:
ISA
2025-03-04 10:10:48 +01:00
parent 7c3e94ed34
commit 6168620f00
3 changed files with 32 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
hooks/layers/useBereicheMarkersLayer.js
View File

@@ -1,3 +1,4 @@
// /hooks/layers/useBereicheMarkersLayer.js
import { useEffect, useState, useRef } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
@@ -20,75 +21,27 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
const updateMarkersVisibility = () => {
if (!map || bereicheMarkers.length === 0) return;
// Hole die Sichtbarkeitsdaten aus localStorage
const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
// Überprüfen, ob alle Layer unsichtbar sind
const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);
// Wenn die Sichtbarkeit gleich bleibt, breche die Ausführung ab
if (areAllLayersInvisible === prevVisibility.current) return;
// Speichere den neuen Sichtbarkeitsstatus
prevVisibility.current = areAllLayersInvisible;
// Füge Marker hinzu oder entferne sie basierend auf der Bedingung
bereicheMarkers.forEach((marker) => {
if (areAllLayersInvisible) {
marker.addTo(map);
if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
if (oms) oms.addMarker(marker);
} else {
map.removeLayer(marker); // Entferne Marker, wenn die Bedingung nicht erfüllt ist
map.removeLayer(marker);
}
});
};
/* useEffect(() => {
// Hole die Daten aus der API
const fetchBereiche = async () => {
try {
const response = await fetch(apiUrl);
const text = await response.text(); // Hole die vollständige Antwort als Text
console.log("Antwort als Text:", text); // Überprüfe den tatsächlichen Inhalt der Antwort
const data = JSON.parse(text); // Versuche, die Antwort zu parsen, falls sie korrektes JSON ist
console.log("API-URL:", apiUrl);
console.log("Response-Status:", response.status);
const markers = data.map((item) => {
const marker = L.marker([item.x, item.y], { icon: customIcon });
// Tooltip statt Popup
marker.bindTooltip(
`
<strong>Bereich:</strong> ${item.location_name} <br />
<strong>Standort:</strong> ${item.area_name} <br />
`,
{
permanent: false, // Tooltip wird nur bei Mouseover angezeigt
direction: "top", // Position des Tooltips relativ zum Marker
offset: [0, -20], // Verschiebung für bessere Sichtbarkeit
}
);
return marker;
});
setBereicheMarkers(markers);
} catch (error) {
console.error("Fehler beim Laden der Bereiche:", error);
}
};
fetchBereiche();
}, [apiUrl]); */
useEffect(() => {
// Initialisiere die Sichtbarkeit beim ersten Laden
updateMarkersVisibility();
// Listener für Änderungen in localStorage hinzufügen
const handleStorageChange = (event) => {
if (event.key === "mapLayersVisibility") {
updateMarkersVisibility();
@@ -97,13 +50,11 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
window.addEventListener("storage", handleStorageChange);
// Fallback: Überwachung durch Intervall
const intervalId = setInterval(() => {
updateMarkersVisibility();
}, 500); // Alle 500ms prüfen
}, 500);
return () => {
// Entferne den Listener und das Intervall
window.removeEventListener("storage", handleStorageChange);
clearInterval(intervalId);
};
@@ -113,15 +64,19 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
const fetchBereiche = async () => {
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);
}
const data = await response.json();
const markers = data.map((item) => {
const marker = L.marker([item.x, item.y], {
icon: customIcon,
draggable: true, // Ermöglicht Drag-and-Drop
draggable: true,
});
// Tooltip
marker.bindTooltip(
`
<strong>Bereich:</strong> ${item.location_name} <br />
@@ -134,12 +89,10 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
}
);
// Event-Listener für Drag-End
marker.on("dragend", async (e) => {
const { lat, lng } = e.target.getLatLng();
try {
// Update API aufrufen
await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng }); // Update-Funktion
await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng });
console.log("Koordinaten erfolgreich aktualisiert:", { lat, lng });
} catch (error) {
console.error("Fehler beim Aktualisieren der Koordinaten:", error);
@@ -151,7 +104,8 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
setBereicheMarkers(markers);
} catch (error) {
console.error("Fehler beim Laden der Bereiche:", error);
console.error("Fehler beim Laden der Bereiche:", error.message);
setBereicheMarkers([]); // Wichtig: Leere Liste setzen, kein reload oder Ausnahme erzeugen
}
};