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

feat: Anzeigenamen für System-Checkboxen korrigiert

Browse Source 
- Anpassung der System-Checkboxen im DataSheet, um statt interner Schlüssel die lesbaren Namen (z. B. "GSM Modem") anzuzeigen.
- Interne Schlüssel bleiben für die Logik unverändert.
- Verbesserung der Benutzerfreundlichkeit durch klarere Bezeichnungen in der UI.
This commit is contained in:
ISA
2024-11-29 11:49:40 +01:00
parent 41e018a7f8
commit 5a3111ea5f
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/DataSheet.js
View File

@@ -52,9 +52,6 @@ function DataSheet() {
} }
return isUnique; return isUnique;
}); });
console.log("filterdArea GisStationsStaticDistrict:", filteredAreas);
console.log("GisSystemStatic:", GisSystemStatic);
console.log("allowedSystems:", allowedSystems);
setStationListing( setStationListing(
filteredAreas.map((area, index) => ({ filteredAreas.map((area, index) => ({
@@ -65,11 +62,9 @@ function DataSheet() {
const seenSystemNames = new Set(); const seenSystemNames = new Set();
const filteredSystems = GisSystemStatic.filter((item) => { const filteredSystems = GisSystemStatic.filter((item) => {
const formattedName = item.Name.replace(/[\s\-]+/g, ""); const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
console.log(formattedName);
const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
if (isUnique) { if (isUnique) {
seenSystemNames.add(formattedName); seenSystemNames.add(item.Name);
} }
return isUnique; return isUnique;
}); });
@@ -77,20 +72,20 @@ function DataSheet() {
setSystemListing( setSystemListing(
filteredSystems.map((system, index) => ({ filteredSystems.map((system, index) => ({
id: index + 1, id: index + 1,
name: system.Name.replace(/[\s\-]+/g, ""), name: system.Name, // Verwende den Originalnamen für die Anzeige
key: system.Name.replace(/[\s\-]+/g, ""), // Internen Schlüssel für die MapLayersVisibility-Logik
})) }))
); );
}, [GisStationsStaticDistrict, GisSystemStatic]); }, [GisStationsStaticDistrict, GisSystemStatic]);
const handleCheckboxChange = (name, event) => { const handleCheckboxChange = (key, event) => {
const { checked } = event.target; const { checked } = event.target;
setMapLayersVisibility((prev) => { setMapLayersVisibility((prev) => {
const newState = { const newState = {
...prev, ...prev,
[name]: checked, [key]: checked,
}; };
localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); // Store in localStorage localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
return newState; return newState;
}); });
}; };
@@ -110,7 +105,9 @@ function DataSheet() {
setPolylineVisible(checked); setPolylineVisible(checked);
localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage
}; };
//---------------------------
//---------------------------
return ( return (
<div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg"> <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg">
<div className="flex flex-col gap-4 p-4"> <div className="flex flex-col gap-4 p-4">
@@ -134,9 +131,14 @@ function DataSheet() {
{systemListing.map((system) => ( {systemListing.map((system) => (
<React.Fragment key={system.id}> <React.Fragment key={system.id}>
<div className="flex items-center"> <div className="flex items-center">
<input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} /> <input
type="checkbox"
checked={mapLayersVisibility[system.key] || false} // Schlüssel für Logik
onChange={(e) => handleCheckboxChange(system.key, e)} // Schlüssel für Logik
id={`system-${system.id}`}
/>
<label htmlFor={`system-${system.id}`} className="text-sm ml-2"> <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
{system.name} {system.name} {/* Anzeigename */}
</label> </label>
</div> </div>
</React.Fragment> </React.Fragment>