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

WIP: Checkboxen für Marker deaktivieren wenn EditMode aktive ist

Browse Source
This commit is contained in:
ISA
2024-12-17 12:13:11 +01:00
parent 5b406ca143
commit 3a8b002e33
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/DataSheet.js
View File

@@ -10,6 +10,7 @@ import EditModeToggle from "./EditModeToggle";
import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility
function DataSheet() { function DataSheet() {
const [editMode, setEditMode] = useState(false); // Zustand für editMode
const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState); const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
const setSelectedArea = useSetRecoilState(selectedAreaState); const setSelectedArea = useSetRecoilState(selectedAreaState);
const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState); const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
@@ -20,6 +21,7 @@ function DataSheet() {
const setZoomTrigger = useSetRecoilState(zoomTriggerState); const setZoomTrigger = useSetRecoilState(zoomTriggerState);
const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
useEffect(() => { useEffect(() => {
// LocalStorage Werte laden
const storedPoiVisible = localStorage.getItem("poiVisible"); const storedPoiVisible = localStorage.getItem("poiVisible");
if (storedPoiVisible !== null) { if (storedPoiVisible !== null) {
setPoiVisible(storedPoiVisible === "true"); setPoiVisible(storedPoiVisible === "true");
@@ -33,6 +35,10 @@ function DataSheet() {
if (storedMapLayersVisibility) { if (storedMapLayersVisibility) {
setMapLayersVisibility(JSON.parse(storedMapLayersVisibility)); setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
} }
// EditMode lesen
const storedEditMode = localStorage.getItem("editMode");
setEditMode(storedEditMode === "true");
}, [setPoiVisible, setMapLayersVisibility]); }, [setPoiVisible, setMapLayersVisibility]);
const handleAreaChange = (event) => { const handleAreaChange = (event) => {
@@ -79,6 +85,7 @@ function DataSheet() {
}, [GisStationsStaticDistrict, GisSystemStatic]); }, [GisStationsStaticDistrict, GisSystemStatic]);
const handleCheckboxChange = (key, event) => { const handleCheckboxChange = (key, event) => {
if (editMode) return; // Checkbox deaktiviert bei aktivem EditMode
const { checked } = event.target; const { checked } = event.target;
setMapLayersVisibility((prev) => { setMapLayersVisibility((prev) => {
const newState = { const newState = {
@@ -129,19 +136,18 @@ function DataSheet() {
{/* Checkboxen in einem gemeinsamen Container */} {/* Checkboxen in einem gemeinsamen Container */}
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{systemListing.map((system) => ( {systemListing.map((system) => (
<React.Fragment key={system.id}> <div className="flex items-center" key={system.id}>
<div className="flex items-center"> <input
<input type="checkbox"
type="checkbox" checked={mapLayersVisibility[system.key] || false}
checked={mapLayersVisibility[system.key] || false} // Schlüssel für Logik onChange={(e) => handleCheckboxChange(system.key, e)}
onChange={(e) => handleCheckboxChange(system.key, e)} // Schlüssel für Logik id={`system-${system.id}`}
id={`system-${system.id}`} disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
/> />
<label htmlFor={`system-${system.id}`} className="text-sm ml-2"> <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
{system.name} {/* Anzeigename */} {system.name}
</label> </label>
</div> </div>
</React.Fragment>
))} ))}
<div className="flex items-center"> <div className="flex items-center">