From 4e4755dad4a59272177c4f8478694f4a4490f90e Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 29 Apr 2024 11:17:39 +0200 Subject: [PATCH] Leerzeichen von Systemnamen entfernen damit einblenen und ausblenden von der jenige layergroups Markers --- components/DataSheet.js | 18 +++++++++------ components/MapComponent.js | 45 +++++++++++++++++++++++++++----------- store/mapLayersState.js | 2 +- 3 files changed, 44 insertions(+), 21 deletions(-) diff --git a/components/DataSheet.js b/components/DataSheet.js index e0043a40f..234a4285e 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -33,6 +33,7 @@ function DataSheet() { (system) => system.IdSystem ) ); + console.log("allowedSystems:", allowedSystems); // Filter unique areas that belong to allowed systems const seenNames = new Set(); @@ -41,7 +42,7 @@ function DataSheet() { !seenNames.has(item.Area_Name) && allowedSystems.has(item.System); if (isUnique) { seenNames.add(item.Area_Name); - //console.log("Unique area:", item.Area_Name); + //console.log("Unique area:", item.Area_Name); //Dropdown menu } return isUnique; }); @@ -58,9 +59,12 @@ function DataSheet() { // Prepare system listings as before const seenSystemNames = new Set(); const filteredSystems = GisSystemStatic.filter((item) => { - const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1; + // Entferne alle Leerzeichen und Bindestriche aus dem Namen + const formattedName = item.Name.replace(/[\s\-]+/g, ""); + const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1; if (isUnique) { - seenSystemNames.add(item.Name); + seenSystemNames.add(formattedName); // Füge den formatierten Namen hinzu + console.log("Unique system in DataSheet:", formattedName); // Zeige den formatierten Namen in der Konsole } return isUnique; }); @@ -68,21 +72,21 @@ function DataSheet() { setSystemListing( filteredSystems.map((system, index) => ({ id: index + 1, - name: system.Name, + name: system.Name.replace(/[\s\-]+/g, ""), // Auch hier Leerzeichen und Bindestriche entfernen })) ); }, [GisStationsStaticDistrict, GisSystemStatic]); - + //--------------------------------------------------------- const handleCheckboxChange = (name, event) => { const { checked } = event.target; - //console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox + console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox setMapLayersVisibility((prev) => { const newState = { ...prev, [name]: checked, }; - //console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update + console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update return newState; }); }; diff --git a/components/MapComponent.js b/components/MapComponent.js index 9ce11744c..5200b4035 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -168,6 +168,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { fetchData(); }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen //------------------------------------------ + //GisSystemStatic Daten laden useEffect(() => { const fetchData = async () => { @@ -1194,13 +1195,18 @@ const MapComponent = ({ locations, onLocationUpdate }) => { toggleLayer(mapLayersVisibility.TALAS); }, [map, talasMarkers, mapLayersVisibility.TALAS]); */ // Depend on map, markers array, and visibility state - const handleCheckboxChange = (event) => { + const handleCheckboxChange = (name, event) => { const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - TALAS: checked, - })); + const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen + + setMapLayersVisibility((prev) => { + return { + ...prev, + [internalName]: checked, + }; + }); }; + //------------------------------------------ // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS @@ -1270,6 +1276,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]); //------------------------------------------ */ + const layerNames = { + "GSM Modem": "GSMMODEM", + "Cisco Router": "CiscoRouter", + "TALAS ICL": "TALASICL", + "SMS-Funkmodem": "GSMModem", + }; //------------------------------------------ */ // Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter @@ -1277,14 +1289,16 @@ const MapComponent = ({ locations, onLocationUpdate }) => { if (!map || !ciscoRouterMarkers) return; const toggleLayer = (isVisible) => { if (isVisible) { - ciscoRouterMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added + ciscoRouterMarkers.forEach((marker) => marker.addTo(map)); } else { - ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually + ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker)); } }; - // Apply visibility - toggleLayer(mapLayersVisibility.CiscoRouter); - }, [map, ciscoRouterMarkers, mapLayersVisibility.CiscoRouter]); + // Nutzt die Map, um den internen Namen zu bekommen + const internalName = layerNames["Cisco Router"] || "CiscoRouter"; + toggleLayer(mapLayersVisibility[internalName]); + console.log("internalName Cisco Router: ", internalName); + }, [map, ciscoRouterMarkers, mapLayersVisibility]); //------------------------------------------ */ //------------------------------------------ */ @@ -1395,6 +1409,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { useEffect(() => { if (!map || !talasiclMarkers) return; + console.log("talasiclMarkers", talasiclMarkers); const toggleLayer = (isVisible) => { if (isVisible) { talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added @@ -1402,9 +1417,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => { talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually } }; - // Apply visibility - toggleLayer(mapLayersVisibility.TALASICL); - }, [map, talasiclMarkers, mapLayersVisibility.TALASICL]); + + // Verwendung der Map, um den internen Namen zu bekommen, und Fallback auf "TALASICL", falls nicht gefunden + const internalName = + layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers "; + toggleLayer(mapLayersVisibility[internalName]); + console.log("internalName for TALAS ICL in MapComponent: ", internalName); + }, [map, talasiclMarkers, mapLayersVisibility]); //------------------------------------------ */ //------------------------------------------ */ diff --git a/store/mapLayersState.js b/store/mapLayersState.js index de2e792a6..160195516 100644 --- a/store/mapLayersState.js +++ b/store/mapLayersState.js @@ -18,7 +18,7 @@ export const mapLayersState = atom({ Messstellen: true, TALASICL: true, DAUZ: true, - SMSFunkmodem: true, + "SMS-Funkmodem": true, Sonstige: true, }, });