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

Optimize WebUI rendering when using Dialog Boxes #1116

Browse Source
This commit is contained in:
Proddy
2023-04-28 12:46:59 +02:00
parent b9402d3a01
commit cfe8c410ae
59 changed files with 1446 additions and 1120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
interface/src/framework/mqtt/MqttSettingsForm.tsx
View File

@@ -1,6 +1,6 @@
import CancelIcon from '@mui/icons-material/Cancel';
import WarningIcon from '@mui/icons-material/Warning';
import { Button, Checkbox, MenuItem, Grid, Typography, InputAdornment } from '@mui/material';
import { Button, Checkbox, MenuItem, Grid, Typography, InputAdornment, TextField } from '@mui/material';
import { useState } from 'react';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
@@ -94,7 +94,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6}>
<ValidatedTextField
<TextField
name="client_id"
label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
fullWidth
@@ -105,7 +105,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6}>
<ValidatedTextField
<TextField
name="username"
label={LL.USERNAME(0)}
fullWidth
@@ -143,7 +143,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6}>
<ValidatedTextField
<TextField
name="mqtt_qos"
label="QoS"
value={data.mqtt_qos}
@@ -156,7 +156,7 @@ const MqttSettingsForm: FC = () => {
<MenuItem value={0}>0</MenuItem>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
</ValidatedTextField>
</TextField>
</Grid>
</Grid>
<BlockFormControlLabel
@@ -171,7 +171,7 @@ const MqttSettingsForm: FC = () => {
<Typography sx={{ pt: 2 }} variant="h6" color="primary">
{LL.FORMATTING()}
</Typography>
<ValidatedTextField
<TextField
name="nested_format"
label={LL.MQTT_FORMAT()}
value={data.nested_format}
@@ -183,7 +183,7 @@ const MqttSettingsForm: FC = () => {
>
<MenuItem value={1}>{LL.MQTT_NEST_1()}</MenuItem>
<MenuItem value={2}>{LL.MQTT_NEST_2()}</MenuItem>
</ValidatedTextField>
</TextField>
<BlockFormControlLabel
control={<Checkbox name="send_response" checked={data.send_response} onChange={updateFormValue} />}
label={LL.MQTT_RESPONSE()}
@@ -233,7 +233,7 @@ const MqttSettingsForm: FC = () => {
alignItems="flex-start"
>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
<TextField
name="discovery_type"
label={LL.MQTT_PUBLISH_TEXT_5()}
value={data.discovery_type}
@@ -245,10 +245,10 @@ const MqttSettingsForm: FC = () => {
>
<MenuItem value={0}>Home Assistant</MenuItem>
<MenuItem value={1}>Domoticz</MenuItem>
</ValidatedTextField>
</TextField>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
<TextField
name="discovery_prefix"
label={LL.MQTT_PUBLISH_TEXT_4()}
fullWidth
@@ -259,7 +259,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
<TextField
name="entity_format"
label={LL.MQTT_ENTITY_FORMAT()}
value={data.entity_format}
@@ -272,7 +272,7 @@ const MqttSettingsForm: FC = () => {
<MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
<MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
<MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
</ValidatedTextField>
</TextField>
</Grid>
</Grid>
)}
@@ -299,8 +299,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
<TextField
name="publish_time_boiler"
label={LL.MQTT_INT_BOILER()}
InputProps={{
@@ -315,8 +314,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
<TextField
name="publish_time_thermostat"
label={LL.MQTT_INT_THERMOSTATS()}
InputProps={{
@@ -331,8 +329,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
<TextField
name="publish_time_solar"
label={LL.MQTT_INT_SOLAR()}
InputProps={{
@@ -347,8 +344,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
<TextField
name="publish_time_mixer"
label={LL.MQTT_INT_MIXER()}
InputProps={{
@@ -363,8 +359,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
<TextField
name="publish_time_sensor"
label={LL.TEMP_SENSORS()}
InputProps={{
@@ -379,8 +374,7 @@ const MqttSettingsForm: FC = () => {
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
<TextField
name="publish_time_other"
InputProps={{
endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>

15
interface/src/framework/network/NetworkSettingsForm.tsx
View File

@@ -15,7 +15,8 @@ import {
ListItemSecondaryAction,
ListItemText,
Typography,
InputAdornment
InputAdornment,
TextField
} from '@mui/material';
import { useContext, useEffect, useState } from 'react';
import { toast } from 'react-toastify';
@@ -165,7 +166,6 @@ const WiFiSettingsForm: FC = () => {
margin="normal"
/>
)}
<ValidatedTextField
fieldErrors={fieldErrors}
name="tx_power"
@@ -180,21 +180,17 @@ const WiFiSettingsForm: FC = () => {
type="number"
margin="normal"
/>
<BlockFormControlLabel
control={<Checkbox name="nosleep" checked={data.nosleep} onChange={updateFormValue} />}
label={LL.NETWORK_DISABLE_SLEEP()}
/>
<BlockFormControlLabel
control={<Checkbox name="bandwidth20" checked={data.bandwidth20} onChange={updateFormValue} />}
label={LL.NETWORK_LOW_BAND()}
/>
<Typography sx={{ pt: 2 }} variant="h6" color="primary">
{LL.GENERAL_OPTIONS()}
</Typography>
<ValidatedTextField
fieldErrors={fieldErrors}
name="hostname"
@@ -205,19 +201,16 @@ const WiFiSettingsForm: FC = () => {
onChange={updateFormValue}
margin="normal"
/>
<BlockFormControlLabel
control={<Checkbox name="enableMDNS" checked={data.enableMDNS} onChange={updateFormValue} />}
label={LL.NETWORK_USE_DNS()}
/>
<BlockFormControlLabel
control={<Checkbox name="enableCORS" checked={data.enableCORS} onChange={updateFormValue} />}
label={LL.NETWORK_ENABLE_CORS()}
/>
{data.enableCORS && (
<ValidatedTextField
fieldErrors={fieldErrors}
<TextField
name="CORSOrigin"
label={LL.NETWORK_CORS_ORIGIN()}
fullWidth
@@ -227,12 +220,10 @@ const WiFiSettingsForm: FC = () => {
margin="normal"
/>
)}
<BlockFormControlLabel
control={<Checkbox name="enableIPv6" checked={data.enableIPv6} onChange={updateFormValue} />}
label={LL.NETWORK_ENABLE_IPV6()}
/>
<BlockFormControlLabel
control={<Checkbox name="static_ip_config" checked={data.static_ip_config} onChange={updateFormValue} />}
label={LL.NETWORK_FIXED_IP()}

11
interface/src/framework/system/SystemLog.tsx
View File

@@ -1,6 +1,6 @@
import DownloadIcon from '@mui/icons-material/GetApp';
import WarningIcon from '@mui/icons-material/Warning';
import { Box, styled, Button, Checkbox, MenuItem, Grid } from '@mui/material';
import { Box, styled, Button, Checkbox, MenuItem, Grid, TextField } from '@mui/material';
import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
import type { FC } from 'react';
@@ -138,7 +138,6 @@ const SystemLog: FC = () => {
return () => {
es.close();
};
// eslint-disable-next-line
}, []);
const content = () => {
@@ -150,7 +149,7 @@ const SystemLog: FC = () => {
<>
<Grid container spacing={3} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item xs={2}>
<ValidatedTextField
<TextField
name="level"
label={LL.LOG_LEVEL()}
value={data.level}
@@ -167,10 +166,10 @@ const SystemLog: FC = () => {
<MenuItem value={6}>INFO</MenuItem>
<MenuItem value={7}>DEBUG</MenuItem>
<MenuItem value={9}>ALL</MenuItem>
</ValidatedTextField>
</TextField>
</Grid>
<Grid item xs={2}>
<ValidatedTextField
<TextField
name="max_messages"
label={LL.BUFFER_SIZE()}
value={data.max_messages}
@@ -184,7 +183,7 @@ const SystemLog: FC = () => {
<MenuItem value={50}>50</MenuItem>
<MenuItem value={75}>75</MenuItem>
<MenuItem value={100}>100</MenuItem>
</ValidatedTextField>
</TextField>
</Grid>
<Grid item>
<BlockFormControlLabel