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 { 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 (
<div
@@ -249,9 +65,10 @@ function DataSheet() {
>
<div className="flex flex-col gap-4 p-4">
<div className="flex items-center justify-between">
{/* Dropdown */}
<select
onChange={handleStationChange}
onChange={(event) =>
console.log("Station selected:", event.target.value)
}
id="stationListing"
className="border-solid-1 p-2 rounded ml-1"
>
@@ -262,122 +79,24 @@ function DataSheet() {
</option>
))}
</select>
{/* Icon */}
<img
src="/img/expand-icon.svg"
alt="Expand"
className="h-6 w-6 ml-2"
/>
</div>
{/* Liste der Stationen mit Checkboxen */}
<div>
<input
type="checkbox"
checked={mapLayersVisibility.TALAS}
onChange={handleCheckboxChangeTALAS}
/>
<label className="text-sm font-bold ml-2">TALAS</label>
<br />
<input
type="checkbox"
checked={mapLayersVisibility.ECI}
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 />
{systemListing.map((system) => (
<React.Fragment key={system.id}>
<input
type="checkbox"
checked={mapLayersVisibility[system.name] || false}
onChange={(e) => handleCheckboxChange(system.name, e)}
/>
<label className="text-sm font-bold ml-2">{system.name}</label>
<br />
</React.Fragment>
))}
</div>
</div>
</div>

6
components/MapComponent.js
View File

@@ -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
});

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 = 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}`;