andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 08:19:52 +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

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

@@ -55,6 +55,7 @@ const DashboardDevices: FC = () => {
const { LL } = useI18nContext();
const [deviceData, setDeviceData] = useState<DeviceData>({ data: [] });
const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
const [selectedDeviceValueWriteable, setSelectedDeviceValueWriteable] = useState<boolean>(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)) {
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)}
/>
)}

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

@@ -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<DeviceValue>(selectedItem);
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
@@ -102,7 +110,9 @@ const DashboarDevicesDialog = ({ open, onClose, onSave, selectedItem, validator
return (
<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>
<Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
<Typography variant="body2">{editItem.id.slice(2)}</Typography>
@@ -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
/>
)}
</Grid>
{writeable && (
<Grid item>
<FormHelperText>format:&nbsp;{showHelperText(editItem)}</FormHelperText>
</Grid>
)}
</Grid>
</DialogContent>
<DialogActions>
{writeable ? (
<>
<Button startIcon={<CancelIcon />} variant="outlined" onClick={close} color="secondary">
{LL.CANCEL()}
</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>
</Dialog>
);