Handle user permissions

1 files changed, 7 insertions, 3 deletions

diff --git a/modern/src/map/StatusCard.js b/modern/src/map/StatusCard.js
index 73cd3b0f..5fc3edd0 100644
--- a/modern/src/map/StatusCard.js
+++ b/modern/src/map/StatusCard.js
@@ -15,6 +15,7 @@ import { formatStatus } from '../common/formatter';
 import RemoveDialog from '../RemoveDialog';
 import PositionValue from '../components/PositionValue';
 import dimensions from '../theme/dimensions';
+import { useDeviceReadonly, useReadonly } from '../common/permissions';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -59,6 +60,9 @@ const StatusCard = ({ deviceId, onClose }) => {
   const history = useHistory();
   const t = useTranslation();
 
+  const readonly = useReadonly();
+  const deviceReadonly = useDeviceReadonly();
+
   const device = useSelector((state) => state.devices.items[deviceId]);
   const position = useSelector((state) => state.positions.items[deviceId]);
 
@@ -105,13 +109,13 @@ const StatusCard = ({ deviceId, onClose }) => {
             <IconButton onClick={() => history.push('/replay')} disabled={!position}>
               <ReplayIcon />
             </IconButton>
-            <IconButton onClick={() => history.push(`/command/${deviceId}`)}>
+            <IconButton onClick={() => history.push(`/command/${deviceId}`)} disabled={readonly}>
               <PublishIcon />
             </IconButton>
-            <IconButton onClick={() => history.push(`/device/${deviceId}`)}>
+            <IconButton onClick={() => history.push(`/device/${deviceId}`)} disabled={deviceReadonly}>
               <EditIcon />
             </IconButton>
-            <IconButton onClick={() => setRemoveDialogShown(true)} className={classes.negative}>
+            <IconButton onClick={() => setRemoveDialogShown(true)} disabled={deviceReadonly} className={classes.negative}>
               <DeleteIcon />
             </IconButton>
           </CardActions>