andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 16:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve mobile layout

Browse Source
This commit is contained in:
Proddy
2023-05-11 21:26:41 +02:00
parent 4f8d3d27ba
commit 3ecaeffec0
2 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
interface/src/project/DashboardDevices.tsx
View File

@@ -55,6 +55,7 @@ const DashboardDevices: FC = () => {
const { LL } = useI18nContext(); const { LL } = useI18nContext();
const [deviceData, setDeviceData] = useState<DeviceData>({ data: [] }); const [deviceData, setDeviceData] = useState<DeviceData>({ data: [] });
const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>(); const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
const [selectedDeviceValueWriteable, setSelectedDeviceValueWriteable] = useState<boolean>(false);
const [onlyFav, setOnlyFav] = useState(false); const [onlyFav, setOnlyFav] = useState(false);
const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false); const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
@@ -103,7 +104,7 @@ const DashboardDevices: FC = () => {
common_theme, common_theme,
{ {
Table: ` 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: ` BaseRow: `
.td { .td {
@@ -130,7 +131,7 @@ const DashboardDevices: FC = () => {
common_theme, common_theme,
{ {
Table: ` Table: `
--data-table-library_grid-template-columns: 300px 150px 40px; --data-table-library_grid-template-columns: 200px 130px 40px;
height: auto; height: auto;
max-height: 96%; max-height: 96%;
overflow-y: scroll; overflow-y: scroll;
@@ -435,10 +436,9 @@ const DashboardDevices: FC = () => {
} }
const sendCommand = (dv: DeviceValue) => { const sendCommand = (dv: DeviceValue) => {
if (dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY)) { setSelectedDeviceValueWriteable(dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY));
setSelectedDeviceValue(dv); setSelectedDeviceValue(dv);
setDeviceValueDialogOpen(true); setDeviceValueDialogOpen(true);
}
}; };
const renderNameCell = (dv: DeviceValue) => ( const renderNameCell = (dv: DeviceValue) => (
@@ -576,6 +576,7 @@ const DashboardDevices: FC = () => {
onClose={deviceValueDialogClose} onClose={deviceValueDialogClose}
onSave={deviceValueDialogSave} onSave={deviceValueDialogSave}
selectedItem={selectedDeviceValue} selectedItem={selectedDeviceValue}
writeable={selectedDeviceValueWriteable}
validator={deviceValueItemValidation(selectedDeviceValue)} validator={deviceValueItemValidation(selectedDeviceValue)}
/> />
)} )}

45
interface/src/project/DashboardDevicesDialog.tsx
View File

@@ -33,10 +33,18 @@ type DashboardDevicesDialogProps = {
onClose: () => void; onClose: () => void;
onSave: (as: DeviceValue) => void; onSave: (as: DeviceValue) => void;
selectedItem: DeviceValue; selectedItem: DeviceValue;
writeable: boolean;
validator: Schema; validator: Schema;
}; };
const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator }: DashboardDevicesDialogProps) => { const DashboarDevicesDialog = ({
open,
onClose,
onSave,
selectedItem,
writeable,
validator
}: DashboardDevicesDialogProps) => {
const { LL } = useI18nContext(); const { LL } = useI18nContext();
const [editItem, setEditItem] = useState<DeviceValue>(selectedItem); const [editItem, setEditItem] = useState<DeviceValue>(selectedItem);
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>(); const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
@@ -102,7 +110,9 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator
return ( return (
<Dialog open={open} onClose={close}> <Dialog open={open} onClose={close}>
<DialogTitle>{selectedItem.v === '' && selectedItem.c ? LL.RUN_COMMAND() : LL.CHANGE_VALUE()}</DialogTitle> <DialogTitle>
{selectedItem.v === '' && selectedItem.c ? LL.RUN_COMMAND() : writeable ? LL.CHANGE_VALUE() : LL.VALUE(1)}
</DialogTitle>
<DialogContent dividers> <DialogContent dividers>
<Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}> <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
<Typography variant="body2">{editItem.id.slice(2)}</Typography> <Typography variant="body2">{editItem.id.slice(2)}</Typography>
@@ -114,6 +124,7 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator
name="v" name="v"
label={LL.VALUE(1)} label={LL.VALUE(1)}
value={editItem.v} value={editItem.v}
disabled={!writeable}
autoFocus autoFocus
sx={{ width: '30ch' }} sx={{ width: '30ch' }}
select select
@@ -132,6 +143,7 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator
label={LL.VALUE(1)} label={LL.VALUE(1)}
value={Math.round(editItem.v * 10) / 10} value={Math.round(editItem.v * 10) / 10}
autoFocus autoFocus
disabled={!writeable}
type="number" type="number"
sx={{ width: '30ch' }} sx={{ width: '30ch' }}
onChange={updateFormValue} onChange={updateFormValue}
@@ -146,6 +158,7 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator
name="v" name="v"
label={LL.VALUE(1)} label={LL.VALUE(1)}
value={editItem.v} value={editItem.v}
disabled={!writeable}
autoFocus autoFocus
sx={{ width: '30ch' }} sx={{ width: '30ch' }}
multiline={editItem.u ? false : true} multiline={editItem.u ? false : true}
@@ -153,19 +166,29 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator
/> />
)} )}
</Grid> </Grid>
<Grid item> {writeable && (
<FormHelperText>format:&nbsp;{showHelperText(editItem)}</FormHelperText> <Grid item>
</Grid> <FormHelperText>format:&nbsp;{showHelperText(editItem)}</FormHelperText>
</Grid>
)}
</Grid> </Grid>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button startIcon={<CancelIcon />} variant="outlined" onClick={close} color="secondary"> {writeable ? (
{LL.CANCEL()} <>
</Button> <Button startIcon={<CancelIcon />} variant="outlined" onClick={close} color="secondary">
<Button startIcon={<WarningIcon color="warning" />} variant="contained" onClick={save} color="info"> {LL.CANCEL()}
{LL.UPDATE()} </Button>
</Button> <Button startIcon={<WarningIcon color="warning" />} variant="contained" onClick={save} color="info">
{LL.UPDATE()}
</Button>
</>
) : (
<Button variant="outlined" onClick={close} color="secondary">
{LL.CLOSE()}
</Button>
)}
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );