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

4
interface/src/SignIn.tsx
View File

@@ -109,9 +109,11 @@ const SignIn = () => {
onChange={updateLoginRequestValue}
margin="normal"
variant="outlined"
inputProps={{
slotProps={{
input: {
autoCapitalize: 'none',
autoCorrect: 'off'
}
}}
/>
<ValidatedPasswordField

60
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={{
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={{
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={{
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}>

16
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={{
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 }} />

20
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={{
: {},
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';

78
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={{
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={{
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={{
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',

180
interface/src/app/settings/ApplicationSettings.tsx
View File

@@ -9,12 +9,12 @@ import {
Button,
Checkbox,
Divider,
Grid,
InputAdornment,
MenuItem,
TextField,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import { readHardwareStatus, restart } from 'api/system';
@@ -114,6 +114,19 @@ const ApplicationSettings = () => {
useLayoutTitle(LL.SETTINGS_OF(LL.APPLICATION()));
const SecondsInputProps = {
endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
};
const MilliSecondsInputProps = {
endAdornment: <InputAdornment position="end">ms</InputAdornment>
};
const MinutesInputProps = {
endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
};
const HoursInputProps = {
endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
};
const content = () => {
if (!data || !hardwareData) {
return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -191,19 +204,12 @@ const ApplicationSettings = () => {
label={LL.ENABLE_MODBUS()}
/>
{data.modbus_enabled && (
<Grid
container
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="modbus_max_clients"
label={LL.AP_MAX_CLIENTS()}
fullWidth
variant="outlined"
value={numberValue(data.modbus_max_clients)}
type="number"
@@ -211,12 +217,11 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="modbus_port"
label="Port"
fullWidth
variant="outlined"
value={numberValue(data.modbus_port)}
type="number"
@@ -224,15 +229,14 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="modbus_timeout"
label="Timeout"
InputProps={{
endAdornment: <InputAdornment position="end">ms</InputAdornment>
slotProps={{
input: MilliSecondsInputProps
}}
fullWidth
variant="outlined"
value={numberValue(data.modbus_timeout)}
type="number"
@@ -254,31 +258,23 @@ const ApplicationSettings = () => {
label={LL.ENABLE_SYSLOG()}
/>
{data.syslog_enabled && (
<Grid
container
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="syslog_host"
label="Host"
fullWidth
variant="outlined"
value={data.syslog_host}
onChange={updateFormValue}
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="syslog_port"
label="Port"
fullWidth
variant="outlined"
value={numberValue(data.syslog_port)}
type="number"
@@ -286,7 +282,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<TextField
name="syslog_level"
label={LL.LOG_LEVEL()}
@@ -305,17 +301,14 @@ const ApplicationSettings = () => {
<MenuItem value={9}>ALL</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="syslog_mark_interval"
label={LL.MARK_INTERVAL()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
slotProps={{
input: SecondsInputProps
}}
fullWidth
variant="outlined"
value={numberValue(data.syslog_mark_interval)}
type="number"
@@ -358,7 +351,8 @@ const ApplicationSettings = () => {
<Typography sx={{ pb: 1, pt: 2 }} variant="h6" color="primary">
{LL.FORMATTING_OPTIONS()}
</Typography>
<Grid item>
<Grid container spacing={1}>
<Grid size={3}>
<TextField
name="locale"
label={LL.LANGUAGE_ENTITIES()}
@@ -381,20 +375,13 @@ const ApplicationSettings = () => {
<MenuItem value="tr">Türk (TR)</MenuItem>
</TextField>
</Grid>
<Grid
container
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6} md={4}>
<Grid size={3}>
<TextField
name="bool_dashboard"
label={LL.BOOLEAN_FORMAT_DASHBOARD()}
value={data.bool_dashboard}
fullWidth
variant="outlined"
fullWidth
onChange={updateFormValue}
margin="normal"
select
@@ -405,13 +392,13 @@ const ApplicationSettings = () => {
<MenuItem value={5}>1/0</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid size={3}>
<TextField
name="bool_format"
label={LL.BOOLEAN_FORMAT_API()}
value={data.bool_format}
fullWidth
variant="outlined"
fullWidth
onChange={updateFormValue}
margin="normal"
select
@@ -424,13 +411,13 @@ const ApplicationSettings = () => {
<MenuItem value={6}>1/0</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid size={3}>
<TextField
name="enum_format"
label={LL.ENUM_FORMAT()}
value={data.enum_format}
fullWidth
variant="outlined"
fullWidth
onChange={updateFormValue}
margin="normal"
select
@@ -469,7 +456,6 @@ const ApplicationSettings = () => {
label={LL.BOARD_PROFILE()}
value={data.board_profile}
disabled={processingBoard || hardwareData.model.startsWith('BBQKees')}
fullWidth
variant="outlined"
onChange={changeBoardProfile}
margin="normal"
@@ -483,15 +469,8 @@ const ApplicationSettings = () => {
</TextField>
{data.board_profile === 'CUSTOM' && (
<>
<Grid
container
spacing={1}
sx={{ pt: 1 }}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6} md={4}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="rx_gpio"
@@ -504,7 +483,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="tx_gpio"
@@ -517,7 +496,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="pbutton_gpio"
@@ -530,7 +509,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="dallas_gpio"
@@ -545,7 +524,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="led_gpio"
@@ -558,7 +537,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="phy_type"
label={LL.PHY_TYPE()}
@@ -576,15 +555,8 @@ const ApplicationSettings = () => {
</Grid>
</Grid>
{data.phy_type !== 0 && (
<Grid
container
spacing={1}
sx={{ pt: 1 }}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6} md={4}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<TextField
name="eth_power"
label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
@@ -596,7 +568,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="eth_phy_addr"
label={LL.ADDRESS_OF('PHY I²C')}
@@ -608,7 +580,7 @@ const ApplicationSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="eth_clock_mode"
label="PHY Clk"
@@ -629,14 +601,8 @@ const ApplicationSettings = () => {
)}
</>
)}
<Grid
container
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<TextField
name="tx_mode"
label={LL.TX_MODE()}
@@ -653,7 +619,7 @@ const ApplicationSettings = () => {
<MenuItem value={4}>{LL.HARDWARE()}</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<TextField
name="ems_bus_id"
label={LL.ID_OF(LL.EMS_BUS(0))}
@@ -741,10 +707,8 @@ const ApplicationSettings = () => {
fieldErrors={fieldErrors}
name="remote_timeout"
label={LL.REMOTE_TIMEOUT()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.HOURS()}</InputAdornment>
)
slotProps={{
input: HoursInputProps
}}
variant="outlined"
value={numberValue(data.remote_timeout)}
@@ -753,13 +717,7 @@ const ApplicationSettings = () => {
/>
</Box>
)}
<Grid
container
spacing={0}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid container spacing={1} rowSpacing={0}>
<BlockFormControlLabel
control={
<Checkbox
@@ -782,25 +740,15 @@ const ApplicationSettings = () => {
disabled={!data.shower_timer}
/>
</Grid>
<Grid
container
sx={{ pt: 2 }}
rowSpacing={3}
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid container spacing={1} rowSpacing={2} sx={{ pt: 2 }}>
{data.shower_timer && (
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="shower_min_duration"
label={LL.MIN_DURATION()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
slotProps={{
input: SecondsInputProps
}}
variant="outlined"
value={numberValue(data.shower_min_duration)}
@@ -812,15 +760,13 @@ const ApplicationSettings = () => {
)}
{data.shower_alert && (
<>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="shower_alert_trigger"
label={LL.TRIGGER_TIME()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
)
slotProps={{
input: MinutesInputProps
}}
variant="outlined"
value={numberValue(data.shower_alert_trigger)}
@@ -830,15 +776,13 @@ const ApplicationSettings = () => {
disabled={!data.shower_timer}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="shower_alert_coldshot"
label={LL.COLD_SHOT_DURATION()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
slotProps={{
input: SecondsInputProps
}}
variant="outlined"
value={numberValue(data.shower_alert_coldshot)}

184
interface/src/app/settings/MqttSettings.tsx
View File

@@ -5,12 +5,12 @@ import WarningIcon from '@mui/icons-material/Warning';
import {
Button,
Checkbox,
Grid,
InputAdornment,
MenuItem,
TextField,
Typography
} from '@mui/material';
import Grid from '@mui/material/Grid2';
import * as MqttApi from 'api/mqtt';
@@ -59,6 +59,10 @@ const MqttSettings = () => {
updateDataValue
);
const SecondsInputProps = {
endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
};
const content = () => {
if (!data) {
return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -86,19 +90,12 @@ const MqttSettings = () => {
}
label={LL.ENABLE_MQTT()}
/>
<Grid
container
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="host"
label={LL.ADDRESS_OF(LL.BROKER())}
fullWidth
multiline
variant="outlined"
value={data.host}
@@ -106,12 +103,11 @@ const MqttSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="port"
label="Port"
fullWidth
variant="outlined"
value={numberValue(data.port)}
type="number"
@@ -119,62 +115,55 @@ const MqttSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="base"
label={LL.BASE_TOPIC()}
fullWidth
variant="outlined"
value={data.base}
onChange={updateFormValue}
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<TextField
name="client_id"
label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
fullWidth
variant="outlined"
value={data.client_id}
onChange={updateFormValue}
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<TextField
name="username"
label={LL.USERNAME(0)}
fullWidth
variant="outlined"
value={data.username}
onChange={updateFormValue}
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedPasswordField
name="password"
label={LL.PASSWORD()}
fullWidth
variant="outlined"
value={data.password}
onChange={updateFormValue}
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="keep_alive"
label="Keep Alive"
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
slotProps={{
input: SecondsInputProps
}}
fullWidth
variant="outlined"
value={numberValue(data.keep_alive)}
type="number"
@@ -182,12 +171,11 @@ const MqttSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6}>
<Grid>
<TextField
name="mqtt_qos"
label="QoS"
value={data.mqtt_qos}
fullWidth
variant="outlined"
onChange={updateFormValue}
margin="normal"
@@ -215,14 +203,12 @@ const MqttSettings = () => {
<ValidatedPasswordField
name="rootCA"
label={LL.CERT()}
fullWidth
variant="outlined"
value={data.rootCA}
onChange={updateFormValue}
margin="normal"
/>
)}
<BlockFormControlLabel
control={
<Checkbox
@@ -243,7 +229,6 @@ const MqttSettings = () => {
}
label={LL.MQTT_RETAIN_FLAG()}
/>
<Typography sx={{ pt: 2 }} variant="h6" color="primary">
{LL.FORMATTING()}
</Typography>
@@ -251,7 +236,6 @@ const MqttSettings = () => {
name="nested_format"
label={LL.MQTT_FORMAT()}
value={data.nested_format}
fullWidth
variant="outlined"
onChange={updateFormValue}
margin="normal"
@@ -271,15 +255,8 @@ const MqttSettings = () => {
label={LL.MQTT_RESPONSE()}
/>
{!data.ha_enabled && (
<Grid
container
rowSpacing={-1}
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<BlockFormControlLabel
control={
<Checkbox
@@ -292,7 +269,7 @@ const MqttSettings = () => {
/>
</Grid>
{data.publish_single && (
<Grid item>
<Grid>
<BlockFormControlLabel
control={
<Checkbox
@@ -308,14 +285,8 @@ const MqttSettings = () => {
</Grid>
)}
{!data.publish_single && (
<Grid
container
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<BlockFormControlLabel
control={
<Checkbox
@@ -328,20 +299,12 @@ const MqttSettings = () => {
/>
</Grid>
{data.ha_enabled && (
<Grid
container
sx={{ pl: 1 }}
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6} md={4}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<TextField
name="discovery_type"
label={LL.MQTT_PUBLISH_TEXT_5()}
value={data.discovery_type}
fullWidth
variant="outlined"
onChange={updateFormValue}
margin="normal"
@@ -352,23 +315,21 @@ const MqttSettings = () => {
<MenuItem value={2}>Domoticz (latest)</MenuItem>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="discovery_prefix"
label={LL.MQTT_PUBLISH_TEXT_4()}
fullWidth
variant="outlined"
value={data.discovery_prefix}
onChange={updateFormValue}
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="entity_format"
label={LL.MQTT_ENTITY_FORMAT()}
value={data.entity_format}
fullWidth
variant="outlined"
onChange={updateFormValue}
margin="normal"
@@ -392,24 +353,15 @@ const MqttSettings = () => {
<Typography sx={{ pt: 2 }} variant="h6" color="primary">
{LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
</Typography>
<Grid
container
spacing={1}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item xs={12} sm={6} md={4}>
<Grid container spacing={1} rowSpacing={0}>
<Grid>
<ValidatedTextField
fieldErrors={fieldErrors}
name="publish_time_heartbeat"
label="Heartbeat"
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
slotProps={{
input: SecondsInputProps
}}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_heartbeat)}
type="number"
@@ -417,127 +369,105 @@ const MqttSettings = () => {
margin="normal"
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="publish_time_boiler"
label={LL.MQTT_INT_BOILER()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
}}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_boiler)}
type="number"
onChange={updateFormValue}
margin="normal"
slotProps={{
input: SecondsInputProps
}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="publish_time_thermostat"
label={LL.MQTT_INT_THERMOSTATS()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
}}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_thermostat)}
type="number"
onChange={updateFormValue}
margin="normal"
slotProps={{
input: SecondsInputProps
}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="publish_time_solar"
label={LL.MQTT_INT_SOLAR()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
}}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_solar)}
type="number"
onChange={updateFormValue}
margin="normal"
slotProps={{
input: SecondsInputProps
}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="publish_time_mixer"
label={LL.MQTT_INT_MIXER()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
}}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_mixer)}
type="number"
onChange={updateFormValue}
margin="normal"
slotProps={{
input: SecondsInputProps
}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="publish_time_water"
label={LL.MQTT_INT_WATER()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
}}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_water)}
type="number"
onChange={updateFormValue}
margin="normal"
slotProps={{
input: SecondsInputProps
}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="publish_time_sensor"
label={LL.TEMP_SENSORS()}
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
}}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_sensor)}
type="number"
onChange={updateFormValue}
margin="normal"
slotProps={{
input: SecondsInputProps
}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Grid>
<TextField
name="publish_time_other"
InputProps={{
endAdornment: (
<InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
)
}}
label={LL.DEFAULT(0)}
fullWidth
variant="outlined"
value={numberValue(data.publish_time_other)}
type="number"
onChange={updateFormValue}
margin="normal"
slotProps={{
input: SecondsInputProps
}}
/>
</Grid>
</Grid>
{dirtyFlags && dirtyFlags.length !== 0 && (
<ButtonRow>
<Button

4
interface/src/app/status/NTPStatus.tsx
View File

@@ -134,8 +134,10 @@ const NTPStatus = () => {
onChange={updateLocalTime}
disabled={processing}
fullWidth
InputLabelProps={{
slotProps={{
inputLabel: {
shrink: true
}
}}
/>
</DialogContent>

33
interface/src/app/status/SystemLog.tsx
View File

@@ -3,15 +3,8 @@ import { toast } from 'react-toastify';
import DownloadIcon from '@mui/icons-material/GetApp';
import WarningIcon from '@mui/icons-material/Warning';
import {
Box,
Button,
Checkbox,
Grid,
MenuItem,
TextField,
styled
} from '@mui/material';
import { Box, Button, Checkbox, MenuItem, TextField, styled } from '@mui/material';
import Grid from '@mui/material/Grid2';
import * as SystemApi from 'api/system';
import { fetchLogES } from 'api/system';
@@ -177,14 +170,8 @@ const SystemLog = () => {
return (
<>
<Grid
container
spacing={3}
direction="row"
justifyContent="flex-start"
alignItems="center"
>
<Grid item xs={4}>
<Grid container spacing={1} alignItems="center">
<Grid size={2}>
<TextField
name="level"
label={LL.LOG_LEVEL()}
@@ -203,7 +190,7 @@ const SystemLog = () => {
<MenuItem value={9}>ALL</MenuItem>
</TextField>
</Grid>
<Grid item xs={4}>
<Grid size={2}>
<TextField
name="max_messages"
label={LL.BUFFER_SIZE()}
@@ -220,7 +207,7 @@ const SystemLog = () => {
<MenuItem value={100}>100</MenuItem>
</TextField>
</Grid>
<Grid item xs={2}>
<Grid>
<BlockFormControlLabel
control={
<Checkbox
@@ -232,13 +219,6 @@ const SystemLog = () => {
label={LL.COMPACT()}
/>
</Grid>
<Box
sx={{
'& button, & a, & .MuiCard-root': {
ml: 3
}
}}
>
<Button
startIcon={<DownloadIcon />}
variant="outlined"
@@ -257,7 +237,6 @@ const SystemLog = () => {
{LL.APPLY_CHANGES(dirtyFlags.length)}
</Button>
)}
</Box>
</Grid>
<Box
sx={{

10
interface/src/components/inputs/ValidatedPasswordField.tsx
View File

@@ -10,18 +10,15 @@ import type { ValidatedTextFieldProps } from './ValidatedTextField';
type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({
InputProps,
...props
}) => {
const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) => {
const [showPassword, setShowPassword] = useState<boolean>(false);
return (
<ValidatedTextField
{...props}
type={showPassword ? 'text' : 'password'}
InputProps={{
...InputProps,
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
@@ -29,6 +26,7 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({
</IconButton>
</InputAdornment>
)
}
}}
/>
);

2
interface/src/components/upload/SingleUpload.tsx
View File

@@ -88,7 +88,7 @@ const SingleUpload = ({ callRestart }) => {
sx={{ ml: 2, mt: 2 }}
startIcon={<CancelIcon />}
variant="outlined"
color="error"
color="secondary"
onClick={cancelUpload}
>
{LL.CANCEL()}