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 layout, booleans show as a menu

Browse Source
This commit is contained in:
proddy
2021-06-07 21:18:29 +02:00
parent cf416ee080
commit e9741ea4f8
1 changed files with 49 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
interface/src/project/ValueForm.tsx
View File

@@ -1,15 +1,21 @@
import React, { RefObject } from 'react'; import React, { RefObject } from 'react';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator'; import { ValidatorForm } from 'react-material-ui-form-validator';
import { import {
Dialog, Dialog,
DialogTitle, DialogTitle,
DialogContent, DialogContent,
DialogActions, DialogActions,
Box, Box,
Typography Typography,
FormHelperText,
OutlinedInput,
InputAdornment,
TextField,
MenuItem
} from '@material-ui/core'; } from '@material-ui/core';
import { FormButton } from '../components'; import { FormButton } from '../components';
import { DeviceValue } from './EMSESPtypes'; import { DeviceValue, DeviceValueUOM, DeviceValueUOM_s } from './EMSESPtypes';
interface ValueFormProps { interface ValueFormProps {
devicevalue: DeviceValue; devicevalue: DeviceValue;
@@ -27,13 +33,6 @@ class ValueForm extends React.Component<ValueFormProps> {
this.formRef.current.submit(); this.formRef.current.submit();
}; };
buildLabel = (devicevalue: DeviceValue) => {
if (devicevalue.uom === '' || !devicevalue.uom) {
return 'New value';
}
return 'New value (' + devicevalue.uom + ')';
};
render() { render() {
const { const {
devicevalue, devicevalue,
@@ -41,6 +40,7 @@ class ValueForm extends React.Component<ValueFormProps> {
onDoneEditing, onDoneEditing,
onCancelEditing onCancelEditing
} = this.props; } = this.props;
return ( return (
<ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}> <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
<Dialog <Dialog
@@ -49,31 +49,52 @@ class ValueForm extends React.Component<ValueFormProps> {
aria-labelledby="user-form-dialog-title" aria-labelledby="user-form-dialog-title"
open open
> >
<DialogTitle id="user-form-dialog-title"> <DialogTitle id="user-form-dialog-title">Change Value</DialogTitle>
Change the {devicevalue.name}
</DialogTitle>
<DialogContent dividers> <DialogContent dividers>
<TextValidator {devicevalue.u !== DeviceValueUOM.BOOLEAN && (
validators={['required']} <OutlinedInput
errorMessages={['is required']} id="outlined-adornment-value"
name="data" value={devicevalue.v}
label={this.buildLabel(devicevalue)} autoFocus
fullWidth fullWidth
variant="outlined" onChange={handleValueChange('v')}
value={devicevalue.data} endAdornment={
margin="normal" <InputAdornment position="end">
onChange={handleValueChange('data')} {DeviceValueUOM_s[devicevalue.u]}
/> </InputAdornment>
<Box color="warning.main" p={1} pl={0} pr={0} mt={0} mb={0}> }
aria-describedby="outlined-value-helper-text"
inputProps={{
'aria-label': 'value'
}}
/>
)}
{devicevalue.u === DeviceValueUOM.BOOLEAN && (
<TextField
id="outlined-select-value"
select
value={devicevalue.v}
autoFocus
fullWidth
onChange={handleValueChange('v')}
variant="outlined"
>
<MenuItem value="true">on</MenuItem>
<MenuItem value="false">off</MenuItem>
</TextField>
)}
<FormHelperText id="outlined-value-helper-text">
{devicevalue.n}
</FormHelperText>
<Box color="warning.main" p={0} pl={0} pr={0} mt={4} mb={0}>
<Typography variant="body2"> <Typography variant="body2">
<i> <i>
Note: it may take a few seconds before the change is visible. Note: it may take a few seconds before the change is
If nothing happens check the logs. registered with the EMS device.
</i> </i>
</Typography> </Typography>
</Box> </Box>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<FormButton <FormButton
variant="contained" variant="contained"