diff --git a/interface/src/project/DashboardDevices.tsx b/interface/src/project/DashboardDevices.tsx index f1bf7b881..064f8ed83 100644 --- a/interface/src/project/DashboardDevices.tsx +++ b/interface/src/project/DashboardDevices.tsx @@ -55,6 +55,7 @@ const DashboardDevices: FC = () => { const { LL } = useI18nContext(); const [deviceData, setDeviceData] = useState({ data: [] }); const [selectedDeviceValue, setSelectedDeviceValue] = useState(); + const [selectedDeviceValueWriteable, setSelectedDeviceValueWriteable] = useState(false); const [onlyFav, setOnlyFav] = useState(false); const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false); @@ -103,7 +104,7 @@ const DashboardDevices: FC = () => { common_theme, { Table: ` - --data-table-library_grid-template-columns: 40px 160px repeat(1, minmax(0, 1fr)); + --data-table-library_grid-template-columns: 40px 130px repeat(1, minmax(0, 1fr)); `, BaseRow: ` .td { @@ -130,7 +131,7 @@ const DashboardDevices: FC = () => { common_theme, { Table: ` - --data-table-library_grid-template-columns: 300px 150px 40px; + --data-table-library_grid-template-columns: 200px 130px 40px; height: auto; max-height: 96%; overflow-y: scroll; @@ -435,10 +436,9 @@ const DashboardDevices: FC = () => { } const sendCommand = (dv: DeviceValue) => { - if (dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY)) { - setSelectedDeviceValue(dv); - setDeviceValueDialogOpen(true); - } + setSelectedDeviceValueWriteable(dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY)); + setSelectedDeviceValue(dv); + setDeviceValueDialogOpen(true); }; const renderNameCell = (dv: DeviceValue) => ( @@ -576,6 +576,7 @@ const DashboardDevices: FC = () => { onClose={deviceValueDialogClose} onSave={deviceValueDialogSave} selectedItem={selectedDeviceValue} + writeable={selectedDeviceValueWriteable} validator={deviceValueItemValidation(selectedDeviceValue)} /> )} diff --git a/interface/src/project/DashboardDevicesDialog.tsx b/interface/src/project/DashboardDevicesDialog.tsx index 64226c880..b6abae4bb 100644 --- a/interface/src/project/DashboardDevicesDialog.tsx +++ b/interface/src/project/DashboardDevicesDialog.tsx @@ -33,10 +33,18 @@ type DashboardDevicesDialogProps = { onClose: () => void; onSave: (as: DeviceValue) => void; selectedItem: DeviceValue; + writeable: boolean; validator: Schema; }; -const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator }: DashboardDevicesDialogProps) => { +const DashboarDevicesDialog = ({ + open, + onClose, + onSave, + selectedItem, + writeable, + validator +}: DashboardDevicesDialogProps) => { const { LL } = useI18nContext(); const [editItem, setEditItem] = useState(selectedItem); const [fieldErrors, setFieldErrors] = useState(); @@ -102,7 +110,9 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator return ( - {selectedItem.v === '' && selectedItem.c ? LL.RUN_COMMAND() : LL.CHANGE_VALUE()} + + {selectedItem.v === '' && selectedItem.c ? LL.RUN_COMMAND() : writeable ? LL.CHANGE_VALUE() : LL.VALUE(1)} + {editItem.id.slice(2)} @@ -114,6 +124,7 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator name="v" label={LL.VALUE(1)} value={editItem.v} + disabled={!writeable} autoFocus sx={{ width: '30ch' }} select @@ -132,6 +143,7 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator label={LL.VALUE(1)} value={Math.round(editItem.v * 10) / 10} autoFocus + disabled={!writeable} type="number" sx={{ width: '30ch' }} onChange={updateFormValue} @@ -146,6 +158,7 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator name="v" label={LL.VALUE(1)} value={editItem.v} + disabled={!writeable} autoFocus sx={{ width: '30ch' }} multiline={editItem.u ? false : true} @@ -153,19 +166,29 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator /> )} - - format: {showHelperText(editItem)} - + {writeable && ( + + format: {showHelperText(editItem)} + + )} - - + {writeable ? ( + <> + + + + ) : ( + + )} );