62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
// /components/uiWidgets/mapLayersControlPanel/EditModeToggle.js
|
|
import React, { useState, useEffect } from "react";
|
|
import EditOffIcon from "@mui/icons-material/EditOff";
|
|
import ModeEditIcon from "@mui/icons-material/ModeEdit";
|
|
import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
|
|
import { useSelector } from "react-redux";
|
|
import { selectGisUserRightsFromWebservice } from "@/redux/slices/webservice/userRightsSlice";
|
|
import BlockIcon from "@mui/icons-material/Block"; // 🚫 Symbol
|
|
|
|
function EditModeToggle() {
|
|
const rights = useSelector(selectGisUserRightsFromWebservice);
|
|
const hasEditRight = rights.some(r => r.IdRight === 56);
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
|
|
|
|
const toggleEditMode = () => {
|
|
const newEditMode = !editMode;
|
|
setEditMode(newEditMode);
|
|
localStorage.setItem("editMode", newEditMode);
|
|
//Browser neu laden, um die Änderungen anzuwenden
|
|
window.location.reload();
|
|
};
|
|
|
|
useEffect(() => {
|
|
const storedMode = localStorage.getItem("editMode") === "true";
|
|
setEditMode(storedMode);
|
|
}, []);
|
|
|
|
return (
|
|
<Tooltip
|
|
title={
|
|
hasEditRight
|
|
? editMode
|
|
? "Bearbeitungsmodus deaktivieren"
|
|
: "Bearbeitungsmodus aktivieren"
|
|
: "Keine Bearbeitungsrechte"
|
|
}
|
|
placement="top"
|
|
>
|
|
<div
|
|
onClick={hasEditRight ? toggleEditMode : undefined}
|
|
style={{
|
|
cursor: hasEditRight ? "pointer" : "default",
|
|
display: "inline-block",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
opacity: hasEditRight ? 1 : 0.4,
|
|
pointerEvents: hasEditRight ? "auto" : "none", // nur Icon blockieren
|
|
}}
|
|
>
|
|
{editMode ? <EditOffIcon /> : <ModeEditIcon />}
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export default EditModeToggle;
|