From 35cb567b62d499ab54c1a2f5bef959605d476243 Mon Sep 17 00:00:00 2001 From: proddy Date: Fri, 30 Aug 2024 14:55:24 +0200 Subject: [PATCH] migrate deprecated Grid v5 to v6 (Grid2) --- interface/src/SignIn.tsx | 8 +- .../src/app/main/CustomEntitiesDialog.tsx | 78 +++--- interface/src/app/main/Customizations.tsx | 26 +- .../src/app/main/CustomizationsDialog.tsx | 11 +- interface/src/app/main/Devices.tsx | 4 +- interface/src/app/main/DevicesDialog.tsx | 30 ++- interface/src/app/main/ModulesDialog.tsx | 2 +- interface/src/app/main/SchedulerDialog.tsx | 2 +- .../src/app/main/SensorsAnalogDialog.tsx | 96 ++++---- .../src/app/main/SensorsTemperatureDialog.tsx | 17 +- interface/src/app/main/types.ts | 3 +- .../src/app/settings/ApplicationSettings.tsx | 224 +++++++----------- interface/src/app/settings/MqttSettings.tsx | 184 +++++--------- interface/src/app/status/NTPStatus.tsx | 6 +- interface/src/app/status/SystemLog.tsx | 61 ++--- .../inputs/ValidatedPasswordField.tsx | 24 +- .../src/components/upload/SingleUpload.tsx | 2 +- 17 files changed, 326 insertions(+), 452 deletions(-) diff --git a/interface/src/SignIn.tsx b/interface/src/SignIn.tsx index 409cb36e2..c547be43d 100644 --- a/interface/src/SignIn.tsx +++ b/interface/src/SignIn.tsx @@ -109,9 +109,11 @@ const SignIn = () => { onChange={updateLoginRequestValue} margin="normal" variant="outlined" - inputProps={{ - autoCapitalize: 'none', - autoCorrect: 'off' + slotProps={{ + input: { + autoCapitalize: 'none', + autoCorrect: 'off' + } }} /> - - + + - + {editItem.ram === 1 && ( - + - + - + 0x - ) + slotProps={{ + input: { + startAdornment: ( + 0x + ) + }, + htmlInput: { style: { textTransform: 'uppercase' } } }} /> - + 0x - ) + slotProps={{ + input: { + startAdornment: ( + 0x + ) + }, + htmlInput: { style: { textTransform: 'uppercase' } } }} /> - + - + @@ -247,26 +251,28 @@ const CustomEntitiesDialog = ({ {editItem.value_type !== DeviceValueType.BOOL && editItem.value_type !== DeviceValueType.STRING && ( <> - + - + @@ -281,20 +287,21 @@ const CustomEntitiesDialog = ({ )} {editItem.value_type === DeviceValueType.STRING && editItem.device_id !== '0' && ( - + @@ -303,7 +310,6 @@ const CustomEntitiesDialog = ({ )} - {!creating && ( diff --git a/interface/src/app/main/Customizations.tsx b/interface/src/app/main/Customizations.tsx index 42de65d53..4f74dd0a9 100644 --- a/interface/src/app/main/Customizations.tsx +++ b/interface/src/app/main/Customizations.tsx @@ -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" > - + { onChange={(event) => { setSearch(event.target.value); }} - InputProps={{ - startAdornment: ( - - - - ) + slotProps={{ + input: { + startAdornment: ( + + + + ) + } }} /> - + { - + - + - + {LL.SHOWING()} {shown_data.length}/{deviceEntities.length}  {LL.ENTITIES(deviceEntities.length)} diff --git a/interface/src/app/main/CustomizationsDialog.tsx b/interface/src/app/main/CustomizationsDialog.tsx index b29130dba..62bd2e83d 100644 --- a/interface/src/app/main/CustomizationsDialog.tsx +++ b/interface/src/app/main/CustomizationsDialog.tsx @@ -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 = ({ {LL.EDIT() + ' ' + LL.ENTITY()} - + {LL.ID_OF(LL.ENTITY())}:  @@ -112,19 +112,18 @@ const CustomizationsDialog = ({ - + {isWriteableNumber && ( <> - + - + { - + diff --git a/interface/src/app/main/DevicesDialog.tsx b/interface/src/app/main/DevicesDialog.tsx index e226897ee..e668da663 100644 --- a/interface/src/app/main/DevicesDialog.tsx +++ b/interface/src/app/main/DevicesDialog.tsx @@ -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 = ({ {editItem.id.slice(2)} - - + + {editItem.l ? ( - {setUom(editItem.u)} - - ) + : {}, + input: { + startAdornment: ( + + {setUom(editItem.u)} + + ) + } }} /> ) : ( @@ -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 = ({ )} {writeable && ( - + {showHelperText(editItem)} )} diff --git a/interface/src/app/main/ModulesDialog.tsx b/interface/src/app/main/ModulesDialog.tsx index 570c9ab14..e045c69f7 100644 --- a/interface/src/app/main/ModulesDialog.tsx +++ b/interface/src/app/main/ModulesDialog.tsx @@ -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'; diff --git a/interface/src/app/main/SchedulerDialog.tsx b/interface/src/app/main/SchedulerDialog.tsx index 7769bac00..5bcb82abd 100644 --- a/interface/src/app/main/SchedulerDialog.tsx +++ b/interface/src/app/main/SchedulerDialog.tsx @@ -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'; diff --git a/interface/src/app/main/SensorsAnalogDialog.tsx b/interface/src/app/main/SensorsAnalogDialog.tsx index 59700ba4c..e3c1b12b0 100644 --- a/interface/src/app/main/SensorsAnalogDialog.tsx +++ b/interface/src/app/main/SensorsAnalogDialog.tsx @@ -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 = ({ - + {creating && ( - + {LL.WARN_GPIO()} )} - + - + {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && ( - + @@ -150,55 +151,61 @@ const SensorsAnalogDialog = ({ )} {editItem.t === AnalogType.ADC && ( - + mV - ) + slotProps={{ + input: { + startAdornment: ( + mV + ) + }, + htmlInput: { min: '0', max: '3300', step: '1' } }} /> )} {editItem.t === AnalogType.COUNTER && ( - + )} {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && ( - + )} {editItem.t === AnalogType.DIGITAL_OUT && (editItem.g === 25 || editItem.g === 26) && ( - + )} @@ -215,12 +224,11 @@ const SensorsAnalogDialog = ({ editItem.g !== 25 && editItem.g !== 26 && ( <> - + {LL.ON()} - + @@ -242,12 +250,12 @@ const SensorsAnalogDialog = ({ {LL.ACTIVELOW()} - + @@ -266,37 +274,41 @@ const SensorsAnalogDialog = ({ editItem.t === AnalogType.PWM_1 || editItem.t === AnalogType.PWM_2) && ( <> - + Hz - ) + slotProps={{ + input: { + startAdornment: ( + Hz + ) + }, + htmlInput: { min: '1', max: '5000', step: '1' } }} /> - + % - ) + slotProps={{ + input: { + startAdornment: ( + % + ) + }, + htmlInput: { min: '0', max: '100', step: '0.1' } }} /> diff --git a/interface/src/app/main/SensorsTemperatureDialog.tsx b/interface/src/app/main/SensorsTemperatureDialog.tsx index cc3b94705..da19906c8 100644 --- a/interface/src/app/main/SensorsTemperatureDialog.tsx +++ b/interface/src/app/main/SensorsTemperatureDialog.tsx @@ -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 = ({ - + - + °C + slotProps={{ + input: { + startAdornment: ( + °C + ) + }, + htmlInput: { min: '-5', max: '5', step: '0.1' } }} /> diff --git a/interface/src/app/main/types.ts b/interface/src/app/main/types.ts index 895082137..e386951c1 100644 --- a/interface/src/app/main/types.ts +++ b/interface/src/app/main/types.ts @@ -420,12 +420,11 @@ export const enum DeviceValueType { TIME, // same as UINT24 UINT32, ENUM, - STRING, + STRING, // RAW CMD } export const DeviceValueTypeNames = [ - // 'BOOL', 'INT8', 'UINT8', diff --git a/interface/src/app/settings/ApplicationSettings.tsx b/interface/src/app/settings/ApplicationSettings.tsx index f25abc407..409393746 100644 --- a/interface/src/app/settings/ApplicationSettings.tsx +++ b/interface/src/app/settings/ApplicationSettings.tsx @@ -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: {LL.SECONDS()} + }; + const MilliSecondsInputProps = { + endAdornment: ms + }; + const MinutesInputProps = { + endAdornment: {LL.MINUTES()} + }; + const HoursInputProps = { + endAdornment: {LL.HOURS()} + }; + const content = () => { if (!data || !hardwareData) { return ; @@ -191,19 +204,12 @@ const ApplicationSettings = () => { label={LL.ENABLE_MODBUS()} /> {data.modbus_enabled && ( - - + + { margin="normal" /> - + { margin="normal" /> - + ms + 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 && ( - - + + - + { margin="normal" /> - + { ALL - + {LL.SECONDS()} - ) + slotProps={{ + input: SecondsInputProps }} - fullWidth variant="outlined" value={numberValue(data.syslog_mark_interval)} type="number" @@ -358,43 +351,37 @@ const ApplicationSettings = () => { {LL.FORMATTING_OPTIONS()} - - - Deutsch (DE) - English (EN) - Français (FR) - Italiano (IT) - Nederlands (NL) - Norsk (NO) - Polski (PL) - Slovenčina (SK) - Svenska (SV) - Türk (TR) - - - - + + + + Deutsch (DE) + English (EN) + Français (FR) + Italiano (IT) + Nederlands (NL) + Norsk (NO) + Polski (PL) + Slovenčina (SK) + Svenska (SV) + Türk (TR) + + + { 1/0 - + { 1/0 - + { 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 = () => { {data.board_profile === 'CUSTOM' && ( <> - - + + { margin="normal" /> - + { margin="normal" /> - + { margin="normal" /> - + { margin="normal" /> - + { margin="normal" /> - + { {data.phy_type !== 0 && ( - - + + { margin="normal" /> - + { margin="normal" /> - + { )} )} - - + + { {LL.HARDWARE()} - + { fieldErrors={fieldErrors} name="remote_timeout" label={LL.REMOTE_TIMEOUT()} - InputProps={{ - endAdornment: ( - {LL.HOURS()} - ) + slotProps={{ + input: HoursInputProps }} variant="outlined" value={numberValue(data.remote_timeout)} @@ -753,13 +717,7 @@ const ApplicationSettings = () => { /> )} - + { disabled={!data.shower_timer} /> - + {data.shower_timer && ( - + {LL.SECONDS()} - ) + slotProps={{ + input: SecondsInputProps }} variant="outlined" value={numberValue(data.shower_min_duration)} @@ -812,15 +760,13 @@ const ApplicationSettings = () => { )} {data.shower_alert && ( <> - + {LL.MINUTES()} - ) + slotProps={{ + input: MinutesInputProps }} variant="outlined" value={numberValue(data.shower_alert_trigger)} @@ -830,15 +776,13 @@ const ApplicationSettings = () => { disabled={!data.shower_timer} /> - + {LL.SECONDS()} - ) + slotProps={{ + input: SecondsInputProps }} variant="outlined" value={numberValue(data.shower_alert_coldshot)} diff --git a/interface/src/app/settings/MqttSettings.tsx b/interface/src/app/settings/MqttSettings.tsx index 715bb1d2c..416d0c493 100644 --- a/interface/src/app/settings/MqttSettings.tsx +++ b/interface/src/app/settings/MqttSettings.tsx @@ -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: {LL.SECONDS()} + }; + const content = () => { if (!data) { return ; @@ -86,19 +90,12 @@ const MqttSettings = () => { } label={LL.ENABLE_MQTT()} /> - - + + { margin="normal" /> - + { margin="normal" /> - + - + - + - + - + {LL.SECONDS()} - ) + slotProps={{ + input: SecondsInputProps }} - fullWidth variant="outlined" value={numberValue(data.keep_alive)} type="number" @@ -182,12 +171,11 @@ const MqttSettings = () => { margin="normal" /> - + { )} - { } label={LL.MQTT_RETAIN_FLAG()} /> - {LL.FORMATTING()} @@ -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 && ( - - + + { /> {data.publish_single && ( - + { )} {!data.publish_single && ( - - + + { /> {data.ha_enabled && ( - - + + { Domoticz (latest) - + - + { {LL.MQTT_PUBLISH_INTERVALS()} (0=auto) - - + + {LL.SECONDS()} - ) + slotProps={{ + input: SecondsInputProps }} - fullWidth variant="outlined" value={numberValue(data.publish_time_heartbeat)} type="number" @@ -417,127 +369,105 @@ const MqttSettings = () => { margin="normal" /> - + {LL.SECONDS()} - ) - }} - fullWidth variant="outlined" value={numberValue(data.publish_time_boiler)} type="number" onChange={updateFormValue} margin="normal" + slotProps={{ + input: SecondsInputProps + }} /> - + {LL.SECONDS()} - ) - }} - fullWidth variant="outlined" value={numberValue(data.publish_time_thermostat)} type="number" onChange={updateFormValue} margin="normal" + slotProps={{ + input: SecondsInputProps + }} /> - + {LL.SECONDS()} - ) - }} - fullWidth variant="outlined" value={numberValue(data.publish_time_solar)} type="number" onChange={updateFormValue} margin="normal" + slotProps={{ + input: SecondsInputProps + }} /> - + {LL.SECONDS()} - ) - }} - fullWidth variant="outlined" value={numberValue(data.publish_time_mixer)} type="number" onChange={updateFormValue} margin="normal" + slotProps={{ + input: SecondsInputProps + }} /> - + {LL.SECONDS()} - ) - }} - fullWidth variant="outlined" value={numberValue(data.publish_time_water)} type="number" onChange={updateFormValue} margin="normal" + slotProps={{ + input: SecondsInputProps + }} /> - + {LL.SECONDS()} - ) - }} - fullWidth variant="outlined" value={numberValue(data.publish_time_sensor)} type="number" onChange={updateFormValue} margin="normal" + slotProps={{ + input: SecondsInputProps + }} /> - + {LL.SECONDS()} - ) - }} label={LL.DEFAULT(0)} - fullWidth variant="outlined" value={numberValue(data.publish_time_other)} type="number" onChange={updateFormValue} margin="normal" + slotProps={{ + input: SecondsInputProps + }} /> - {dirtyFlags && dirtyFlags.length !== 0 && ( + {dirtyFlags && dirtyFlags.length !== 0 && ( - {dirtyFlags && dirtyFlags.length !== 0 && ( - - )} - + )} ; -const ValidatedPasswordField: FC = ({ - InputProps, - ...props -}) => { +const ValidatedPasswordField: FC = ({ ...props }) => { const [showPassword, setShowPassword] = useState(false); return ( - setShowPassword(!showPassword)} edge="end"> - {showPassword ? : } - - - ) + slotProps={{ + input: { + endAdornment: ( + + setShowPassword(!showPassword)} edge="end"> + {showPassword ? : } + + + ) + } }} /> ); diff --git a/interface/src/components/upload/SingleUpload.tsx b/interface/src/components/upload/SingleUpload.tsx index 1eb669e8e..09cd22fc1 100644 --- a/interface/src/components/upload/SingleUpload.tsx +++ b/interface/src/components/upload/SingleUpload.tsx @@ -88,7 +88,7 @@ const SingleUpload = ({ callRestart }) => { sx={{ ml: 2, mt: 2 }} startIcon={} variant="outlined" - color="error" + color="secondary" onClick={cancelUpload} > {LL.CANCEL()}