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

1. Filterung eindeutiger Bereiche und Systeme: Systeme werden nur berücksichtigt, wenn Allow === 1. Das sorgt dafür, dass keine Systeme angezeigt werden, die nicht erlaubt sind.

Browse Source 
2.	Dynamisches Checkbox-Handling: Die Checkboxen werden dynamisch anhand der gefilterten Systeme erstellt. Ihre Sichtbarkeitsänderungen werden zentral gehandhabt.
3.	Verwaltung der Sichtbarkeit: Die Sichtbarkeit jedes Systems wird in mapLayersVisibility basierend auf Benutzerinteraktionen gesteuert.
This commit is contained in:
ISA
2024-04-26 11:29:34 +02:00
parent 5e84d35120
commit 78d87d1918
3 changed files with 41 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
components/DataSheet.js
View File

@@ -1,15 +1,12 @@
// components/DataSheet.js
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue } from "recoil"; import { useRecoilState, useRecoilValue } from "recoil";
import { gisStationsStaticDistrictState } from "../store/gisStationState"; import { gisStationsStaticDistrictState } from "../store/gisStationState";
import { gisSystemStaticState } from "../store/gisSystemState"; import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState"; import { mapLayersState } from "../store/mapLayersState";
function DataSheet() { function DataSheet() {
const [mapLayersVisibility, setMapLayersVisibility] = const [mapLayersVisibility, setMapLayersVisibility] =
useRecoilState(mapLayersState); useRecoilState(mapLayersState);
// useState für uniqueAreas und stationListing
const [uniqueAreas, setUniqueAreas] = useState([]);
const [uniqueSystems, setUniqueSystems] = useState([]);
const [stationListing, setStationListing] = useState([]); const [stationListing, setStationListing] = useState([]);
const [systemListing, setSystemListing] = useState([]); const [systemListing, setSystemListing] = useState([]);
const GisStationsStaticDistrict = useRecoilValue( const GisStationsStaticDistrict = useRecoilValue(
@@ -18,13 +15,7 @@ function DataSheet() {
const GisSystemStatic = useRecoilValue(gisSystemStaticState); const GisSystemStatic = useRecoilValue(gisSystemStaticState);
useEffect(() => { useEffect(() => {
/* console.log( // Filter unique areas
"GisStationsStaticDistrict in DataSheet:",
GisStationsStaticDistrict
);
console.log("GisSystemStatic in DataSheet:", GisSystemStatic); */
// Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
const seenNames = new Set(); const seenNames = new Set();
const filteredAreas = GisStationsStaticDistrict.filter((item) => { const filteredAreas = GisStationsStaticDistrict.filter((item) => {
const isUnique = !seenNames.has(item.Area_Name); const isUnique = !seenNames.has(item.Area_Name);
@@ -34,213 +25,38 @@ function DataSheet() {
return isUnique; return isUnique;
}); });
setUniqueAreas(filteredAreas); // Filter unique systems where Allow is 1
const seenSystemNames = new Set(); const seenSystemNames = new Set();
const filteredSystems = GisSystemStatic.filter((item) => { const filteredSystems = GisSystemStatic.filter((item) => {
const isUnique = !seenSystemNames.has(item.Name); const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
if (isUnique) { if (isUnique) {
seenSystemNames.add(item.Name); seenSystemNames.add(item.Name);
} }
return isUnique; return isUnique;
}); });
setUniqueSystems(filteredSystems); setStationListing(
filteredAreas.map((area, index) => ({
// Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren id: index + 1,
const newStationListing = filteredAreas
.map((area, index) => ({
id: index + 1, // Zuweisung einer eindeutigen ID
name: area.Area_Name, 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( setSystemListing(
"TALAS Station ist gecheckt:", filteredSystems.map((system, index) => ({
checkedStations[talasStation.id] id: index + 1,
); */ name: system.Name,
} }))
}, [checkedStations, systemListing]); );
const eciStation = systemListing.find((station) => station.name === "ECI"); }, [GisStationsStaticDistrict, GisSystemStatic]);
const ulafStation = systemListing.find((station) => station.name === "ULAF");
const gsmModemStation = systemListing.find( const handleCheckboxChange = (name, event) => {
(station) => station.name === "GSMModem" const { checked } = event.target;
); setMapLayersVisibility((prev) => ({
const ciscoRouterStation = systemListing.find( ...prev,
(station) => station.name === "CiscoRouter" [name]: checked,
); }));
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"
);
return ( return (
<div <div
@@ -249,9 +65,10 @@ function DataSheet() {
> >
<div className="flex flex-col gap-4 p-4"> <div className="flex flex-col gap-4 p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Dropdown */}
<select <select
onChange={handleStationChange} onChange={(event) =>
console.log("Station selected:", event.target.value)
}
id="stationListing" id="stationListing"
className="border-solid-1 p-2 rounded ml-1" className="border-solid-1 p-2 rounded ml-1"
> >
@@ -262,122 +79,24 @@ function DataSheet() {
</option> </option>
))} ))}
</select> </select>
{/* Icon */}
<img <img
src="/img/expand-icon.svg" src="/img/expand-icon.svg"
alt="Expand" alt="Expand"
className="h-6 w-6 ml-2" className="h-6 w-6 ml-2"
/> />
</div> </div>
{/* Liste der Stationen mit Checkboxen */}
<div> <div>
<input {systemListing.map((system) => (
type="checkbox" <React.Fragment key={system.id}>
checked={mapLayersVisibility.TALAS} <input
onChange={handleCheckboxChangeTALAS} type="checkbox"
/> checked={mapLayersVisibility[system.name] || false}
<label className="text-sm font-bold ml-2">TALAS</label> onChange={(e) => handleCheckboxChange(system.name, e)}
<br /> />
<input <label className="text-sm font-bold ml-2">{system.name}</label>
type="checkbox" <br />
checked={mapLayersVisibility.ECI} </React.Fragment>
onChange={handleCheckboxChangeECI} ))}
/>
<label className="text-sm font-bold ml-2">ECI</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.ULAF}
onChange={handleCheckboxChangeULAF}
/>
<label className="text-sm font-bold ml-2">ULAF</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.GSMModem}
onChange={handleCheckboxChangeGSMModem}
/>
<label className="text-sm font-bold ml-2">GSM Modem</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.CiscoRouter}
onChange={handleCheckboxChangeCiscoRouter}
/>
<label className="text-sm font-bold ml-2">Cisco Router</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.WAGO}
onChange={handleCheckboxChangeWAGO}
/>
<label className="text-sm font-bold ml-2">WAGO</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.Siemens}
onChange={handleCheckboxChangeSiemens}
/>
<label className="text-sm font-bold ml-2">Siemens</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.OTDR}
onChange={handleCheckboxChangeOTDR}
/>
<label className="text-sm font-bold ml-2">OTDR</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.WDM}
onChange={handleCheckboxChangeWDM}
/>
<label className="text-sm font-bold ml-2">WDM</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.GMA}
onChange={handleCheckboxChangeGMA}
/>
<label className="text-sm font-bold ml-2">GMA</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.Sonstige}
onChange={handleCheckboxChangeSonstige}
/>
<label className="text-sm font-bold ml-2">Sonstige</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.TALASICL}
onChange={handleCheckboxChangeTALASICL}
/>
<label className="text-sm font-bold ml-2">TALASICL</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.DAUZ}
onChange={handleCheckboxChangeDAUZ}
/>
<label className="text-sm font-bold ml-2">DAUZ</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.SMSFunkmodem}
onChange={handleCheckboxChangeSMSFunkmodem}
/>
<label className="text-sm font-bold ml-2">SMS Funkmodem</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.Messstellen}
onChange={handleCheckboxChangeMessstellen}
/>
<label className="text-sm font-bold ml-2">Messstellen</label>
<br />
</div> </div>
</div> </div>
</div> </div>

6
components/MapComponent.js
View File

@@ -728,9 +728,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
const priority = determinePriority(iconPath); const priority = determinePriority(iconPath);
const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
console.log( /* console.log(
`Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}` `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
); ); */
const marker = L.marker([station.X, station.Y], { const marker = L.marker([station.X, station.Y], {
icon: L.icon({ icon: L.icon({
@@ -978,7 +978,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
let measurements = {}; let measurements = {};
gmaMeasurements.forEach((m) => { 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 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 measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt
}); });

2
config/config.js
View File

@@ -28,7 +28,7 @@ if (typeof window !== "undefined") {
url_string = window.location.href; // Die vollständige URL als String 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 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' 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 // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;