andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-10 17:59:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

migrate deprecated Grid v5 to v6 (Grid2)

Browse Source
This commit is contained in:
proddy
2024-08-30 14:55:24 +02:00
parent eff3e3f404
commit 35cb567b62
17 changed files with 326 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
interface/src/app/main/CustomEntitiesDialog.tsx
View File

@@ -12,11 +12,11 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
InputAdornment,
MenuItem,
TextField
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { dialogStyle } from 'CustomTheme';
import type Schema from 'async-validator';
@@ -100,8 +100,8 @@ const CustomEntitiesDialog = ({
<Box display="flex" flexWrap="wrap" mb={1}>
<Box flexWrap="nowrap" whiteSpace="nowrap" />
</Box>
<Grid container spacing={2}>
<Grid item xs={4}>
<Grid container spacing={1} rowSpacing={0}>
<Grid size={12}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="name"
@@ -112,7 +112,7 @@ const CustomEntitiesDialog = ({
onChange={updateFormValue}
/>
</Grid>
<Grid item xs={4}>
<Grid>
<TextField
name="ram"
label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
@@ -128,7 +128,7 @@ const CustomEntitiesDialog = ({
</TextField>
</Grid>
{editItem.ram === 1 && (
<Grid item xs={4}>
<Grid>
<TextField
name="value"
label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
@@ -143,7 +143,7 @@ const CustomEntitiesDialog = ({
)}
{editItem.ram === 0 && (
<>
<Grid item xs={4} mt={3}>
<Grid mt={3} size={9}>
<BlockFormControlLabel
control={
<Checkbox
@@ -155,63 +155,67 @@ const CustomEntitiesDialog = ({
label={LL.WRITEABLE()}
/>
</Grid>
<Grid item xs={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="device_id"
label={LL.ID_OF(LL.DEVICE())}
margin="normal"
sx={{ width: '11ch' }}
type="string"
fullWidth
value={editItem.device_id as string}
onChange={updateFormValue}
inputProps={{ style: { textTransform: 'uppercase' } }}
InputProps={{
startAdornment: (
<InputAdornment position="start">0x</InputAdornment>
)
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">0x</InputAdornment>
)
},
htmlInput: { style: { textTransform: 'uppercase' } }
}}
/>
</Grid>
<Grid item xs={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="type_id"
label={LL.ID_OF(LL.TYPE(1))}
margin="normal"
fullWidth
sx={{ width: '11ch' }}
type="string"
value={editItem.type_id as string}
onChange={updateFormValue}
inputProps={{ style: { textTransform: 'uppercase' } }}
InputProps={{
startAdornment: (
<InputAdornment position="start">0x</InputAdornment>
)
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">0x</InputAdornment>
)
},
htmlInput: { style: { textTransform: 'uppercase' } }
}}
/>
</Grid>
<Grid item xs={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="offset"
label={LL.OFFSET()}
margin="normal"
fullWidth
sx={{ width: '11ch' }}
type="number"
value={editItem.offset}
onChange={updateFormValue}
/>
</Grid>
<Grid item xs={4}>
<Grid>
<TextField
name="value_type"
label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
value={editItem.value_type}
variant="outlined"
sx={{ width: '11ch' }}
onChange={updateFormValue}
margin="normal"
fullWidth
select
>
<MenuItem value={DeviceValueType.BOOL}>
@@ -247,26 +251,28 @@ const CustomEntitiesDialog = ({
{editItem.value_type !== DeviceValueType.BOOL &&
editItem.value_type !== DeviceValueType.STRING && (
<>
<Grid item xs={4}>
<Grid>
<TextField
name="factor"
label={LL.FACTOR()}
value={numberValue(editItem.factor)}
variant="outlined"
onChange={updateFormValue}
fullWidth
sx={{ width: '11ch' }}
margin="normal"
type="number"
inputProps={{ step: '0.001' }}
slotProps={{
htmlInput: { step: '0.001' }
}}
/>
</Grid>
<Grid item xs={4}>
<Grid>
<TextField
name="uom"
label={LL.UNIT()}
value={editItem.uom}
margin="normal"
fullWidth
sx={{ width: '11ch' }}
onChange={updateFormValue}
select
>
@@ -281,20 +287,21 @@ const CustomEntitiesDialog = ({
)}
{editItem.value_type === DeviceValueType.STRING &&
editItem.device_id !== '0' && (
<Grid item xs={4}>
<Grid>
<TextField
name="factor"
label="Bytes"
value={editItem.factor}
variant="outlined"
onChange={updateFormValue}
fullWidth
margin="normal"
type="number"
inputProps={{
min: '1',
max: String(256 - editItem.offset),
step: '1'
slotProps={{
htmlInput: {
min: '1',
max: String(256 - editItem.offset),
step: '1'
}
}}
/>
</Grid>
@@ -303,7 +310,6 @@ const CustomEntitiesDialog = ({
)}
</Grid>
</DialogContent>
<DialogActions>
{!creating && (
<Box flexGrow={1}>

26
interface/src/app/main/Customizations.tsx
View File

@@ -16,7 +16,6 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
InputAdornment,
Link,
MenuItem,
@@ -25,6 +24,7 @@ import {
ToggleButtonGroup,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { restart } from 'api/system';
@@ -514,7 +514,7 @@ const Customizations = () => {
justifyContent="flex-start"
alignItems="center"
>
<Grid item xs={2}>
<Grid>
<TextField
size="small"
variant="outlined"
@@ -522,16 +522,18 @@ const Customizations = () => {
onChange={(event) => {
setSearch(event.target.value);
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon color="primary" sx={{ fontSize: 16 }} />
</InputAdornment>
)
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">
<SearchIcon color="primary" sx={{ fontSize: 16 }} />
</InputAdornment>
)
}
}}
/>
</Grid>
<Grid item>
<Grid>
<ToggleButtonGroup
size="small"
color="secondary"
@@ -557,7 +559,7 @@ const Customizations = () => {
</ToggleButton>
</ToggleButtonGroup>
</Grid>
<Grid item>
<Grid>
<Button
size="small"
sx={{ fontSize: 10 }}
@@ -570,7 +572,7 @@ const Customizations = () => {
<OptionIcon type="web_exclude" isSet={false} />
</Button>
</Grid>
<Grid item>
<Grid>
<Button
size="small"
sx={{ fontSize: 10 }}
@@ -583,7 +585,7 @@ const Customizations = () => {
<OptionIcon type="web_exclude" isSet={true} />
</Button>
</Grid>
<Grid item>
<Grid>
<Typography variant="subtitle2" color="primary">
{LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
&nbsp;{LL.ENTITIES(deviceEntities.length)}

11
interface/src/app/main/CustomizationsDialog.tsx
View File

@@ -10,10 +10,10 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
TextField,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { dialogStyle } from 'CustomTheme';
import { useI18nContext } from 'i18n/i18n-react';
@@ -81,7 +81,7 @@ const CustomizationsDialog = ({
<Dialog sx={dialogStyle} open={open} onClose={handleClose}>
<DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
<DialogContent dividers>
<Grid container direction="row">
<Grid container>
<Typography variant="body2" color="warning.main">
{LL.ID_OF(LL.ENTITY())}:&nbsp;
</Typography>
@@ -112,19 +112,18 @@ const CustomizationsDialog = ({
<EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
</Box>
<Grid container spacing={1}>
<Grid item>
<Grid>
<TextField
name="cn"
label={LL.NEW_NAME_OF(LL.ENTITY())}
value={editItem.cn}
// autoFocus
sx={{ width: '30ch' }}
onChange={updateFormValue}
/>
</Grid>
{isWriteableNumber && (
<>
<Grid item>
<Grid>
<TextField
name="mi"
label={LL.MIN()}
@@ -134,7 +133,7 @@ const CustomizationsDialog = ({
onChange={updateFormValue}
/>
</Grid>
<Grid item>
<Grid>
<TextField
name="ma"
label={LL.MAX()}

4
interface/src/app/main/Devices.tsx
View File

@@ -30,7 +30,6 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
IconButton,
List,
ListItem,
@@ -41,6 +40,7 @@ import {
styled,
tooltipClasses
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { useRowSelect } from '@table-library/react-table-library/select';
import { SortToggleType, useSort } from '@table-library/react-table-library/sort';
@@ -677,7 +677,7 @@ const Devices = () => {
</IconButton>
</ButtonTooltip>
</Typography>
<Grid item zeroMinWidth justifyContent="flex-end">
<Grid justifyContent="flex-end">
<ButtonTooltip title={LL.CANCEL()}>
<IconButton onClick={resetDeviceSelect}>
<HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />

30
interface/src/app/main/DevicesDialog.tsx
View File

@@ -11,12 +11,12 @@ import {
DialogContent,
DialogTitle,
FormHelperText,
Grid,
InputAdornment,
MenuItem,
TextField,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { dialogStyle } from 'CustomTheme';
import type Schema from 'async-validator';
@@ -112,15 +112,14 @@ const DevicesDialog = ({
<Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
<Typography variant="body2">{editItem.id.slice(2)}</Typography>
</Box>
<Grid>
<Grid item>
<Grid container>
<Grid size={12}>
{editItem.l ? (
<TextField
name="v"
label={LL.VALUE(0)}
value={editItem.v}
disabled={!writeable}
// autoFocus
sx={{ width: '30ch' }}
select
onChange={updateFormValue}
@@ -142,17 +141,17 @@ const DevicesDialog = ({
type="number"
sx={{ width: '30ch' }}
onChange={updateFormValue}
inputProps={
editItem.s
slotProps={{
htmlInput: editItem.s
? { min: editItem.m, max: editItem.x, step: editItem.s }
: {}
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
{setUom(editItem.u)}
</InputAdornment>
)
: {},
input: {
startAdornment: (
<InputAdornment position="start">
{setUom(editItem.u)}
</InputAdornment>
)
}
}}
/>
) : (
@@ -162,7 +161,6 @@ const DevicesDialog = ({
label={LL.VALUE(0)}
value={editItem.v}
disabled={!writeable}
// autoFocus
sx={{ width: '30ch' }}
multiline={editItem.u ? false : true}
onChange={updateFormValue}
@@ -170,7 +168,7 @@ const DevicesDialog = ({
)}
</Grid>
{writeable && (
<Grid item>
<Grid>
<FormHelperText>{showHelperText(editItem)}</FormHelperText>
</Grid>
)}

2
interface/src/app/main/ModulesDialog.tsx
View File

@@ -10,9 +10,9 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
TextField
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { dialogStyle } from 'CustomTheme';
import { BlockFormControlLabel } from 'components';

2
interface/src/app/main/SchedulerDialog.tsx
View File

@@ -13,12 +13,12 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
TextField,
ToggleButton,
ToggleButtonGroup,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { dialogStyle } from 'CustomTheme';
import type Schema from 'async-validator';

96
interface/src/app/main/SensorsAnalogDialog.tsx
View File

@@ -10,12 +10,12 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
InputAdornment,
MenuItem,
TextField,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { dialogStyle } from 'CustomTheme';
import type Schema from 'async-validator';
@@ -86,11 +86,12 @@ const SensorsAnalogDialog = ({
</DialogTitle>
<DialogContent dividers>
<Grid container spacing={2}>
<Grid item xs={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="g"
label="GPIO"
sx={{ width: '15ch' }}
value={numberValue(editItem.g)}
type="number"
variant="outlined"
@@ -98,13 +99,13 @@ const SensorsAnalogDialog = ({
/>
</Grid>
{creating && (
<Grid item>
<Grid>
<Box color="warning.main" mt={2}>
<Typography variant="body2">{LL.WARN_GPIO()}</Typography>
</Box>
</Grid>
)}
<Grid item xs={12}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="n"
@@ -115,7 +116,7 @@ const SensorsAnalogDialog = ({
onChange={updateFormValue}
/>
</Grid>
<Grid item xs={8}>
<Grid>
<TextField
name="t"
label={LL.TYPE(0)}
@@ -132,12 +133,12 @@ const SensorsAnalogDialog = ({
</TextField>
</Grid>
{editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
<Grid item xs={4}>
<Grid>
<TextField
name="u"
label={LL.UNIT()}
value={editItem.u}
fullWidth
sx={{ width: '15ch' }}
select
onChange={updateFormValue}
>
@@ -150,55 +151,61 @@ const SensorsAnalogDialog = ({
</Grid>
)}
{editItem.t === AnalogType.ADC && (
<Grid item xs={4}>
<Grid>
<TextField
name="o"
label={LL.OFFSET()}
value={numberValue(editItem.o)}
fullWidth
type="number"
sx={{ width: '15ch' }}
variant="outlined"
onChange={updateFormValue}
inputProps={{ min: '0', max: '3300', step: '1' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">mV</InputAdornment>
)
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">mV</InputAdornment>
)
},
htmlInput: { min: '0', max: '3300', step: '1' }
}}
/>
</Grid>
)}
{editItem.t === AnalogType.COUNTER && (
<Grid item xs={4}>
<Grid>
<TextField
name="o"
label={LL.STARTVALUE()}
value={numberValue(editItem.o)}
fullWidth
type="number"
sx={{ width: '15ch' }}
variant="outlined"
onChange={updateFormValue}
inputProps={{ step: '0.001' }}
slotProps={{
htmlInput: { step: '0.001' }
}}
/>
</Grid>
)}
{editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
<Grid item xs={4}>
<Grid>
<TextField
name="f"
label={LL.FACTOR()}
value={numberValue(editItem.f)}
fullWidth
sx={{ width: '15ch' }}
type="number"
variant="outlined"
onChange={updateFormValue}
inputProps={{ step: '0.001' }}
slotProps={{
htmlInput: { step: '0.001' }
}}
/>
</Grid>
)}
{editItem.t === AnalogType.DIGITAL_OUT &&
(editItem.g === 25 || editItem.g === 26) && (
<Grid item xs={4}>
<Grid>
<TextField
name="o"
label={LL.VALUE(0)}
@@ -207,7 +214,9 @@ const SensorsAnalogDialog = ({
type="number"
variant="outlined"
onChange={updateFormValue}
inputProps={{ min: '0', max: '255', step: '1' }}
slotProps={{
htmlInput: { min: '0', max: '255', step: '1' }
}}
/>
</Grid>
)}
@@ -215,12 +224,11 @@ const SensorsAnalogDialog = ({
editItem.g !== 25 &&
editItem.g !== 26 && (
<>
<Grid item xs={4}>
<Grid>
<TextField
name="o"
label={LL.VALUE(0)}
value={numberValue(editItem.o)}
fullWidth
select
variant="outlined"
onChange={updateFormValue}
@@ -229,12 +237,12 @@ const SensorsAnalogDialog = ({
<MenuItem value={1}>{LL.ON()}</MenuItem>
</TextField>
</Grid>
<Grid item xs={4}>
<Grid>
<TextField
name="f"
label={LL.POLARITY()}
value={editItem.f}
fullWidth
sx={{ width: '15ch' }}
select
onChange={updateFormValue}
>
@@ -242,12 +250,12 @@ const SensorsAnalogDialog = ({
<MenuItem value={-1}>{LL.ACTIVELOW()}</MenuItem>
</TextField>
</Grid>
<Grid item xs={4}>
<Grid>
<TextField
name="u"
label={LL.STARTVALUE()}
sx={{ width: '15ch' }}
value={editItem.u}
fullWidth
select
onChange={updateFormValue}
>
@@ -266,37 +274,41 @@ const SensorsAnalogDialog = ({
editItem.t === AnalogType.PWM_1 ||
editItem.t === AnalogType.PWM_2) && (
<>
<Grid item xs={4}>
<Grid>
<TextField
name="f"
label={LL.FREQ()}
value={numberValue(editItem.f)}
fullWidth
type="number"
variant="outlined"
sx={{ width: '15ch' }}
onChange={updateFormValue}
inputProps={{ min: '1', max: '5000', step: '1' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">Hz</InputAdornment>
)
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">Hz</InputAdornment>
)
},
htmlInput: { min: '1', max: '5000', step: '1' }
}}
/>
</Grid>
<Grid item xs={4}>
<Grid>
<TextField
name="o"
label={LL.DUTY_CYCLE()}
value={numberValue(editItem.o)}
fullWidth
type="number"
sx={{ width: '15ch' }}
variant="outlined"
onChange={updateFormValue}
inputProps={{ min: '0', max: '100', step: '0.1' }}
InputProps={{
startAdornment: (
<InputAdornment position="start">%</InputAdornment>
)
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">%</InputAdornment>
)
},
htmlInput: { min: '0', max: '100', step: '0.1' }
}}
/>
</Grid>

17
interface/src/app/main/SensorsTemperatureDialog.tsx
View File

@@ -9,11 +9,11 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Grid,
InputAdornment,
TextField,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { dialogStyle } from 'CustomTheme';
import type Schema from 'async-validator';
@@ -80,18 +80,17 @@ const SensorsTemperatureDialog = ({
</Typography>
</Box>
<Grid container spacing={1}>
<Grid item>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="n"
label={LL.NAME(0)}
value={editItem.n}
// autoFocus
sx={{ width: '30ch' }}
onChange={updateFormValue}
/>
</Grid>
<Grid item>
<Grid>
<TextField
name="o"
label={LL.OFFSET()}
@@ -100,9 +99,13 @@ const SensorsTemperatureDialog = ({
type="number"
variant="outlined"
onChange={updateFormValue}
inputProps={{ min: '-5', max: '5', step: '0.1' }}
InputProps={{
startAdornment: <InputAdornment position="start">°C</InputAdornment>
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">°C</InputAdornment>
)
},
htmlInput: { min: '-5', max: '5', step: '0.1' }
}}
/>
</Grid>

3
interface/src/app/main/types.ts
View File

@@ -420,12 +420,11 @@ export const enum DeviceValueType {
TIME, // same as UINT24
UINT32,
ENUM,
STRING,
STRING, // RAW
CMD
}
export const DeviceValueTypeNames = [
//
'BOOL',
'INT8',
'UINT8',