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

Kabelstrecken einblenden und ausblenden

Browse Source
This commit is contained in:
ISA
2024-09-11 22:19:04 +02:00
parent 633886b466
commit f8a4b1f86b
5 changed files with 96 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/DataSheet.js
View File

@@ -7,6 +7,7 @@ import { selectedAreaState } from "../store/atoms/selectedAreaState";
import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
import EditModeToggle from "./EditModeToggle";
import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility
function DataSheet() {
const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
@@ -17,12 +18,16 @@ function DataSheet() {
const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
const GisSystemStatic = useRecoilValue(gisSystemStaticState);
const setZoomTrigger = useSetRecoilState(zoomTriggerState);
const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
useEffect(() => {
const storedPoiVisible = localStorage.getItem("poiVisible");
if (storedPoiVisible !== null) {
setPoiVisible(storedPoiVisible === "true");
}
const storedPolylineVisible = localStorage.getItem("polylineVisible");
if (storedPolylineVisible !== null) {
setPolylineVisible(storedPolylineVisible === "true");
}
const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
if (storedMapLayersVisibility) {
@@ -96,17 +101,17 @@ function DataSheet() {
setSelectedArea("Station wählen");
setZoomTrigger((current) => current + 1);
};
const handlePolylineCheckboxChange = (event) => {
const { checked } = event.target;
setPolylineVisible(checked);
localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage
};
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 className="flex flex-col gap-4 p-4">
<div className="flex items-center justify-between space-x-2">
<select
onChange={handleAreaChange}
id="stationListing"
className="border-solid-1 p-2 rounded ml-1 font-semibold"
style={{ minWidth: "150px", maxWidth: "200px" }} // Hier die Breite des Dropdowns anpassen
>
<select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold" style={{ minWidth: "150px", maxWidth: "200px" }}>
<option value="Station wählen">Station wählen</option>
{stationListing.map((station) => (
<option key={station.id} value={station.id}>
@@ -120,20 +125,32 @@ function DataSheet() {
</div>
</div>
<div>
{/* Checkboxen in einem gemeinsamen Container */}
<div className="flex flex-col gap-2">
{systemListing.map((system) => (
<React.Fragment key={system.id}>
<input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
<label htmlFor={`system-${system.id}`} className="text-sm ml-2">
{system.name}
</label>
<br />
<div className="flex items-center">
<input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
<label htmlFor={`system-${system.id}`} className="text-sm ml-2">
{system.name}
</label>
</div>
</React.Fragment>
))}
<input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
<label htmlFor="poi-checkbox" className="text-sm ml-2">
POIs
</label>
<div className="flex items-center">
<input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
<label htmlFor="poi-checkbox" className="text-sm ml-2">
POIs
</label>
</div>
<div className="flex items-center">
<input type="checkbox" checked={polylineVisible} onChange={handlePolylineCheckboxChange} id="polyline-checkbox" />
<label htmlFor="polyline-checkbox" className="text-sm ml-2">
Kabelstrecken
</label>
</div>
</div>
</div>
</div>