From 78d87d1918f347a4939296ca390e9e673c2e47d0 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 26 Apr 2024 11:29:34 +0200 Subject: [PATCH] =?UTF-8?q?1.=09Filterung=20eindeutiger=20Bereiche=20und?= =?UTF-8?q?=20Systeme:=20Systeme=20werden=20nur=20ber=C3=BCcksichtigt,=20w?= =?UTF-8?q?enn=20Allow=20=3D=3D=3D=201.=20Das=20sorgt=20daf=C3=BCr,=20dass?= =?UTF-8?q?=20keine=20Systeme=20angezeigt=20werden,=20die=20nicht=20erlaub?= =?UTF-8?q?t=20sind.=202.=09Dynamisches=20Checkbox-Handling:=20Die=20Check?= =?UTF-8?q?boxen=20werden=20dynamisch=20anhand=20der=20gefilterten=20Syste?= =?UTF-8?q?me=20erstellt.=20Ihre=20Sichtbarkeits=C3=A4nderungen=20werden?= =?UTF-8?q?=20zentral=20gehandhabt.=203.=09Verwaltung=20der=20Sichtbarkeit?= =?UTF-8?q?:=20Die=20Sichtbarkeit=20jedes=20Systems=20wird=20in=20mapLayer?= =?UTF-8?q?sVisibility=20basierend=20auf=20Benutzerinteraktionen=20gesteue?= =?UTF-8?q?rt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DataSheet.js | 355 ++++--------------------------------- components/MapComponent.js | 6 +- config/config.js | 2 +- 3 files changed, 41 insertions(+), 322 deletions(-) diff --git a/components/DataSheet.js b/components/DataSheet.js index 9de9c7eb3..41aba4398 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,15 +1,12 @@ -// components/DataSheet.js import React, { useEffect, useState } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; import { gisStationsStaticDistrictState } from "../store/gisStationState"; import { gisSystemStaticState } from "../store/gisSystemState"; import { mapLayersState } from "../store/mapLayersState"; + function DataSheet() { const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState); - // useState für uniqueAreas und stationListing - const [uniqueAreas, setUniqueAreas] = useState([]); - const [uniqueSystems, setUniqueSystems] = useState([]); const [stationListing, setStationListing] = useState([]); const [systemListing, setSystemListing] = useState([]); const GisStationsStaticDistrict = useRecoilValue( @@ -18,13 +15,7 @@ function DataSheet() { const GisSystemStatic = useRecoilValue(gisSystemStaticState); useEffect(() => { - /* console.log( - "GisStationsStaticDistrict in DataSheet:", - GisStationsStaticDistrict - ); - console.log("GisSystemStatic in DataSheet:", GisSystemStatic); */ - - // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren + // Filter unique areas const seenNames = new Set(); const filteredAreas = GisStationsStaticDistrict.filter((item) => { const isUnique = !seenNames.has(item.Area_Name); @@ -34,213 +25,38 @@ function DataSheet() { return isUnique; }); - setUniqueAreas(filteredAreas); - + // Filter unique systems where Allow is 1 const seenSystemNames = new Set(); const filteredSystems = GisSystemStatic.filter((item) => { - const isUnique = !seenSystemNames.has(item.Name); + const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1; if (isUnique) { seenSystemNames.add(item.Name); } return isUnique; }); - setUniqueSystems(filteredSystems); - - // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren - const newStationListing = filteredAreas - .map((area, index) => ({ - id: index + 1, // Zuweisung einer eindeutigen ID + setStationListing( + filteredAreas.map((area, index) => ({ + id: index + 1, name: area.Area_Name, })) - .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen - - setStationListing(newStationListing); - - //---------- - const newSystemListing = filteredSystems.map((area, index) => ({ - id: index + 1, // Zuweisung einer eindeutigen ID - name: area.Name, - })); - setSystemListing(newSystemListing); - //console.log("System Listing:", systemListing); - }, [GisStationsStaticDistrict]); - - const [checkedStations, setCheckedStations] = useState({}); - /* const TALAS = new L.layerGroup(); - const ECI = new L.layerGroup(); - const ULAF = new L.layerGroup(); - const GSMModem = new L.layerGroup(); - const CiscoRouter = new L.layerGroup(); - const WAGO = new L.layerGroup(); - const Siemens = new L.layerGroup(); - const OTDR = new L.layerGroup(); - const WDM = new L.layerGroup(); - const GMA = new L.layerGroup(); - const Sonstige = new L.layerGroup(); - const TALASICL = new L.layerGroup(); */ - const handleCheckboxChangeTALAS = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - TALAS: checked, - })); - }; - const handleCheckboxChangeECI = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - ECI: checked, - })); - }; - const handleCheckboxChangeULAF = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - ULAF: checked, - })); - }; - const handleCheckboxChangeGSMModem = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - GSMModem: checked, - })); - }; - const handleCheckboxChangeCiscoRouter = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - CiscoRouter: checked, - })); - }; - const handleCheckboxChangeWAGO = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - WAGO: checked, - })); - }; - const handleCheckboxChangeSiemens = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - Siemens: checked, - })); - }; - const handleCheckboxChangeOTDR = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - OTDR: checked, - })); - }; - const handleCheckboxChangeWDM = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - WDM: checked, - })); - }; - const handleCheckboxChangeGMA = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - GMA: checked, - })); - }; - const handleCheckboxChangeSonstige = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - Sonstige: checked, - })); - }; - const handleCheckboxChangeTALASICL = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - TALASICL: checked, - })); - }; - const handleCheckboxChangeDAUZ = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - DAUZ: checked, - })); - }; - const handleCheckboxChangeSMSFunkmodem = (event) => { - const { checked } = event.target; - - setMapLayersVisibility((prev) => ({ - ...prev, - SMSFunkmodem: checked, - })); - }; - const handleCheckboxChangeMessstellen = (event) => { - const { checked } = event.target; - setMapLayersVisibility((prev) => ({ - ...prev, - Messstellen: checked, - })); - }; - const handleCheckboxChange = (event) => { - const { checked, value } = event.target; - setCheckedStations((prev) => ({ - ...prev, - [value]: checked, - })); - }; - - const handleStationChange = (event) => { - //console.log("Station selected:", event.target.value); - }; - - const resetView = () => { - console.log("View has been reset"); - }; - useEffect(() => { - //console.log("Checked Stations:", checkedStations); - // Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus - const talasStation = systemListing.find( - (station) => station.name === "TALAS" ); - if (talasStation) { - /* console.log( - "TALAS Station ist gecheckt:", - checkedStations[talasStation.id] - ); */ - } - }, [checkedStations, systemListing]); - const eciStation = systemListing.find((station) => station.name === "ECI"); - const ulafStation = systemListing.find((station) => station.name === "ULAF"); - const gsmModemStation = systemListing.find( - (station) => station.name === "GSMModem" - ); - const ciscoRouterStation = systemListing.find( - (station) => station.name === "CiscoRouter" - ); - const wagoStation = systemListing.find((station) => station.name === "WAGO"); - const siemensStation = systemListing.find( - (station) => station.name === "Siemens" - ); - const otdrStation = systemListing.find((station) => station.name === "OTDR"); - const wdmStation = systemListing.find((station) => station.name === "WDM"); - const gmaStation = systemListing.find((station) => station.name === "GMA"); - const sonstigeStation = systemListing.find( - (station) => station.name === "Sonstige" - ); - const talasiclStation = systemListing.find( - (station) => station.name === "TALASICL" - ); - const dauzStation = systemListing.find((station) => station.name === "DAUZ"); - const smsFunkmodemStation = systemListing.find( - (station) => station.name === "SMSFunkmodem" - ); - const messstellenStation = systemListing.find( - (station) => station.name === "Messstellen" - ); + + setSystemListing( + filteredSystems.map((system, index) => ({ + id: index + 1, + name: system.Name, + })) + ); + }, [GisStationsStaticDistrict, GisSystemStatic]); + + const handleCheckboxChange = (name, event) => { + const { checked } = event.target; + setMapLayersVisibility((prev) => ({ + ...prev, + [name]: checked, + })); + }; return (
- {/* Dropdown */} - {/* Icon */} Expand
- - {/* Liste der Stationen mit Checkboxen */} -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
+ {systemListing.map((system) => ( + + handleCheckboxChange(system.name, e)} + /> + +
+ + ))}
diff --git a/components/MapComponent.js b/components/MapComponent.js index 56dc43d5d..ea0edfaad 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -728,9 +728,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const priority = determinePriority(iconPath); const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values - console.log( + /* console.log( `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}` - ); + ); */ const marker = L.marker([station.X, station.Y], { icon: L.icon({ @@ -978,7 +978,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { let measurements = {}; gmaMeasurements.forEach((m) => { - console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`); + //console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`); area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt }); diff --git a/config/config.js b/config/config.js index 6357eb528..b9dfb72d9 100644 --- a/config/config.js +++ b/config/config.js @@ -28,7 +28,7 @@ if (typeof window !== "undefined") { url_string = window.location.href; // Die vollständige URL als String url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben c = url.searchParams.get("m") || "10"; // Ein Parameter aus der URL, Standardwert ist '10' - user = url.searchParams.get("u") || "485"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485' + user = url.searchParams.get("u") || "484"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485 zu testen von Stationen ausblenden und einblenden in der Card' // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;