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

fix: Layer-Visibility-Konflikt bei SMS Modem behoben

Browse Source 
- Ursache des Problems: Inkonsistenz bei der Benennung des Layers in `useLayerVisibility` ("SMSFunkmodem" vs. "SMSModem").
- Anpassung des Layer-Namens in `useLayerVisibility`, um mit der `GisSystemStatic`-Datenstruktur und `mapLayersVisibility` übereinzustimmen.
- Konflikt führte dazu, dass der SMS Modem-Layer nicht korrekt sichtbar/unsichtbar geschaltet wurde.
- Debugging und Anpassungen führten zur erfolgreichen Behebung des Fehlers.

Dieser Fix stellt sicher, dass die Sichtbarkeit der Marker-Layer konsistent und wie erwartet funktioniert.
This commit is contained in:
ISA
2024-11-29 11:10:03 +01:00
parent 35915bb91f
commit 4a9381ae46
6 changed files with 203 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/MapComponent.js
View File

@@ -249,6 +249,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter
); );
useSmsfunkmodemMarkersLayer(
map,
oms,
GisSystemStatic,
priorityConfig,
mapLayersVisibility.SMSFunkmodem // Sichtbarkeitsstatus aus dem State
);
useEffect(() => { useEffect(() => {
const fetchWebServiceMap = async () => { const fetchWebServiceMap = async () => {
try { try {
@@ -436,7 +444,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms); useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms);
useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms); useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms);
useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms); useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms);
useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSFunkmodem", oms); useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSModem", oms);
useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms); useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms);
useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms); useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms);

3
components/imports.js
View File

@@ -1,4 +1,4 @@
// imports.js /* // imports.js
import React, { useEffect, useRef, useState, useCallback } from "react"; import React, { useEffect, useRef, useState, useCallback } from "react";
import L, { marker } from "leaflet"; import L, { marker } from "leaflet";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
@@ -160,3 +160,4 @@ export {
useLayerVisibility, useLayerVisibility,
useLineData, useLineData,
}; };
*/

2
config/settings.js
View File

@@ -1,5 +1,5 @@
// /config/settings.js // /config/settings.js
// Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte // Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
export const MAP_VERSION = "1.0.4"; export const MAP_VERSION = "1.0.5";
//export const STANDARD_SIDE_MENU = true; //export const STANDARD_SIDE_MENU = true;
//export const FULL_SIDE_MENU = false; //export const FULL_SIDE_MENU = false;

3
hooks/layers/useLteModemMarkersLayer.js
View File

@@ -1,4 +1,4 @@
// hooks/useLteModemMarkersLayer.js /* // hooks/useLteModemMarkersLayer.js das ist GSM Modem
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import L from "leaflet"; import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices"; import { createAndSetDevices } from "../../utils/createAndSetDevices";
@@ -47,3 +47,4 @@ const useLteModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
}; };
export default useLteModemMarkersLayer; export default useLteModemMarkersLayer;
*/

41
hooks/layers/useSmsfunkmodemMarkersLayer.js
View File

@@ -4,12 +4,23 @@ import L from "leaflet";
import "leaflet-contextmenu"; import "leaflet-contextmenu";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig, isVisible) => {
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
useEffect(() => { useEffect(() => {
if (map && GisSystemStatic) { if (!map || !GisSystemStatic) return;
const markers = GisSystemStatic.filter((station) => station.System === 111).map((station) => {
// Debugging: Logge die Sichtbarkeit und die übergebenen Daten
console.log("isVisible für SMS Modem:", isVisible);
console.log("Alle Stationen in GisSystemStatic:", GisSystemStatic);
// Hilfsfunktion: Normalisiert Strings
const normalizeString = (str) => str?.trim().toLowerCase() || "";
// Filter für SMS Modem (System === 111 oder Name entspricht "SMS Modem")
const markers = isVisible
? GisSystemStatic.filter((station) => station.System === 111 || normalizeString(station.Name) === "SMS Modem").map((station) => {
console.log("Gefundener SMS Modem-Marker:", station); // Debugging
const marker = L.marker([station.Latitude, station.Longitude], { const marker = L.marker([station.Latitude, station.Longitude], {
icon: L.icon({ icon: L.icon({
iconUrl: "/img/icons/pois/sms-funkmodem.png", iconUrl: "/img/icons/pois/sms-funkmodem.png",
@@ -27,26 +38,26 @@ const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig)
</div> </div>
`); `);
marker.on("mouseover", function () { // Füge ein Kontextmenü hinzu
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker); addContextMenuToMarker(marker);
return marker; return marker;
}); })
: [];
// Setze die Marker im Zustand
setSmsfunkmodemMarkers(markers); setSmsfunkmodemMarkers(markers);
// Füge Marker zur Karte hinzu
markers.forEach((marker) => { markers.forEach((marker) => {
marker.addTo(map); marker.addTo(map);
oms.addMarker(marker); oms.addMarker(marker);
}); });
}
}, [map, GisSystemStatic, priorityConfig]); // Cleanup: Entferne Marker bei Deaktivierung oder wenn der Hook entladen wird
return () => {
markers.forEach((marker) => marker.remove());
};
}, [map, GisSystemStatic, isVisible]);
return smsfunkmodemMarkers; return smsfunkmodemMarkers;
}; };

264
pages/api/talas5/webserviceMap/GisSystemStatic.js
View File

@@ -1,273 +1,273 @@
// /pages/api/webServiceMap.js // /pages/api/webServiceMap.js
const gisSystemStatic = { const gisSystemStatic = {
"Name": "Liste aller angezeigten Systeme", Name: "Liste aller angezeigten Systeme",
"Zeitstempel": "2024-05-31T15:08:49.8599542+02:00", Zeitstempel: "2024-05-31T15:08:49.8599542+02:00",
"IdMap": "10", IdMap: "10",
"Systems": [ Systems: [
{ {
"IdSystem": 1, IdSystem: 1,
"Name": "TALAS", Name: "TALAS",
"Longname": "Talas Meldestationen", Longname: "Talas Meldestationen",
"Allow": 1, Allow: 1,
"Icon": 1 Icon: 1,
}, },
{ {
"IdSystem": 2, IdSystem: 2,
"Name": "ECI", Name: "ECI",
"Longname": "ECI Geräte", Longname: "ECI Geräte",
"Allow": 1, Allow: 1,
"Icon": 2 Icon: 2,
}, },
{ {
"IdSystem": 5, IdSystem: 5,
"Name": "GSM Modem", Name: "GSM Modem",
"Longname": "LR77 GSM Modems", Longname: "LR77 GSM Modems",
"Allow": 1, Allow: 1,
"Icon": 5 Icon: 5,
}, },
{ {
"IdSystem": 6, IdSystem: 6,
"Name": "Cisco Router", Name: "Cisco Router",
"Longname": "Cisco Router", Longname: "Cisco Router",
"Allow": 1, Allow: 1,
"Icon": 6 Icon: 6,
}, },
{ {
"IdSystem": 7, IdSystem: 7,
"Name": "WAGO", Name: "WAGO",
"Longname": "WAGO I/O Systeme", Longname: "WAGO I/O Systeme",
"Allow": 1, Allow: 1,
"Icon": 7 Icon: 7,
}, },
{ {
"IdSystem": 8, IdSystem: 8,
"Name": "Siemens", Name: "Siemens",
"Longname": "Siemens Notrufsystem", Longname: "Siemens Notrufsystem",
"Allow": 0, Allow: 0,
"Icon": 8 Icon: 8,
}, },
{ {
"IdSystem": 9, IdSystem: 9,
"Name": "OTDR", Name: "OTDR",
"Longname": "Glasfaserüberwachung OTU", Longname: "Glasfaserüberwachung OTU",
"Allow": 0, Allow: 0,
"Icon": 9 Icon: 9,
}, },
{ {
"IdSystem": 10, IdSystem: 10,
"Name": "WDM", Name: "WDM",
"Longname": " Wavelength Division Multiplexing", Longname: " Wavelength Division Multiplexing",
"Allow": 0, Allow: 0,
"Icon": 10 Icon: 10,
}, },
{ {
"IdSystem": 11, IdSystem: 11,
"Name": "GMA", Name: "GMA",
"Longname": "Glättemeldeanlagen", Longname: "Glättemeldeanlagen",
"Allow": 1, Allow: 1,
"Icon": 11 Icon: 11,
}, },
{ {
"IdSystem": 13, IdSystem: 13,
"Name": "Messstellen", Name: "Messstellen",
"Longname": "Messstellen", Longname: "Messstellen",
"Allow": 0, Allow: 0,
"Icon": 13 Icon: 13,
}, },
{ {
"IdSystem": 100, IdSystem: 100,
"Name": "TALAS ICL", Name: "TALAS ICL",
"Longname": "Talas ICL Unterstationen", Longname: "Talas ICL Unterstationen",
"Allow": 1, Allow: 1,
"Icon": 100 Icon: 100,
}, },
{ {
"IdSystem": 110, IdSystem: 110,
"Name": "DAUZ", Name: "DAUZ",
"Longname": "Dauerzählstellen", Longname: "Dauerzählstellen",
"Allow": 1, Allow: 1,
"Icon": 110 Icon: 110,
}, },
{ {
"IdSystem": 111, IdSystem: 111,
"Name": "SMS-Funkmodem", Name: "SMS-Funkmodem",
"Longname": "SMS-Funkmodem", Longname: "SMS-Funkmodem",
"Allow": 0, Allow: 0,
"Icon": 111 Icon: 111,
}, },
{ {
"IdSystem": 200, IdSystem: 200,
"Name": "Sonstige", Name: "Sonstige",
"Longname": "Sonstige", Longname: "Sonstige",
"Allow": 1, Allow: 1,
"Icon": 200 Icon: 200,
} },
], ],
"Rights": [ Rights: [
{ {
"IdRight": 1 IdRight: 1,
}, },
{ {
"IdRight": 2 IdRight: 2,
}, },
{ {
"IdRight": 3 IdRight: 3,
}, },
{ {
"IdRight": 5 IdRight: 5,
}, },
{ {
"IdRight": 6 IdRight: 6,
}, },
{ {
"IdRight": 7 IdRight: 7,
}, },
{ {
"IdRight": 8 IdRight: 8,
}, },
{ {
"IdRight": 10 IdRight: 10,
}, },
{ {
"IdRight": 11 IdRight: 11,
}, },
{ {
"IdRight": 12 IdRight: 12,
}, },
{ {
"IdRight": 20 IdRight: 20,
}, },
{ {
"IdRight": 22 IdRight: 22,
}, },
{ {
"IdRight": 23 IdRight: 23,
}, },
{ {
"IdRight": 25 IdRight: 25,
}, },
{ {
"IdRight": 30 IdRight: 30,
}, },
{ {
"IdRight": 40 IdRight: 40,
}, },
{ {
"IdRight": 41 IdRight: 41,
}, },
{ {
"IdRight": 42 IdRight: 42,
}, },
{ {
"IdRight": 43 IdRight: 43,
}, },
{ {
"IdRight": 44 IdRight: 44,
}, },
{ {
"IdRight": 45 IdRight: 45,
}, },
{ {
"IdRight": 46 IdRight: 46,
}, },
{ {
"IdRight": 47 IdRight: 47,
}, },
{ {
"IdRight": 48 IdRight: 48,
}, },
{ {
"IdRight": 49 IdRight: 49,
}, },
{ {
"IdRight": 50 IdRight: 50,
}, },
{ {
"IdRight": 51 IdRight: 51,
}, },
{ {
"IdRight": 52 IdRight: 52,
}, },
{ {
"IdRight": 55 IdRight: 55,
}, },
{ {
"IdRight": 56 IdRight: 56,
}, },
{ {
"IdRight": 60 IdRight: 60,
}, },
{ {
"IdRight": 61 IdRight: 61,
}, },
{ {
"IdRight": 62 IdRight: 62,
}, },
{ {
"IdRight": 63 IdRight: 63,
}, },
{ {
"IdRight": 64 IdRight: 64,
}, },
{ {
"IdRight": 65 IdRight: 65,
}, },
{ {
"IdRight": 68 IdRight: 68,
}, },
{ {
"IdRight": 69 IdRight: 69,
}, },
{ {
"IdRight": 70 IdRight: 70,
}, },
{ {
"IdRight": 71 IdRight: 71,
}, },
{ {
"IdRight": 72 IdRight: 72,
}, },
{ {
"IdRight": 73 IdRight: 73,
}, },
{ {
"IdRight": 79 IdRight: 79,
}, },
{ {
"IdRight": 80 IdRight: 80,
}, },
{ {
"IdRight": 90 IdRight: 90,
}, },
{ {
"IdRight": 93 IdRight: 93,
}, },
{ {
"IdRight": 94 IdRight: 94,
}, },
{ {
"IdRight": 95 IdRight: 95,
}, },
{ {
"IdRight": 96 IdRight: 96,
} },
] ],
} };
// Export an async function handler for the API route. // Export an async function handler for the API route.
export default async function handler(req, res) { export default async function handler(req, res) {
// Initialize an empty params object to store query parameters. // Initialize an empty params object to store query parameters.
const params = { const params = {
idMap: req.query.idMap, idMap: req.query.idMap,
idUser: req.query.idUser idUser: req.query.idUser,
}; };
// Check if the requested ID map and user match certain conditions. // Check if the requested ID map and user match certain conditions.
if (params.idMap === '10' && params.idUser === '484') { if (params.idMap === "10" && params.idUser === "484") {
// If the conditions are met, return the gisSystemStatic object with a 200 status code. // If the conditions are met, return the gisSystemStatic object with a 200 status code.
res.status(200).json(gisSystemStatic); res.status(200).json(gisSystemStatic);
} else { } else {
// If not, return a 404 error with the message "Not Found". // If not, return a 404 error with the message "Not Found".
res.status(404).send('Not Found'); res.status(404).send("Not Found");
} }
}; }