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

Merge pull request #733 from pswid/dev

Browse Source 
fix: cosmetic webUI improvements
This commit is contained in:
Proddy
2022-11-13 14:17:59 +01:00
committed by GitHub
parent 8ed789892b dfd7647838
commit 92ac601072
3 changed files with 79 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -214,12 +214,13 @@ const MqttSettingsForm: FC = () => {
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item> <Grid item>
<BlockFormControlLabel <BlockFormControlLabel
sx={{ pb: 2 }}
control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />} control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />}
label={LL.MQTT_PUBLISH_TEXT_3()} label={LL.MQTT_PUBLISH_TEXT_3()}
/> />
</Grid> </Grid>
{data.ha_enabled && ( {data.ha_enabled && (
<Grid item xs={6}> <Grid item sx={{ pb: 3 }}>
<ValidatedTextField <ValidatedTextField
name="discovery_prefix" name="discovery_prefix"
label={LL.MQTT_PUBLISH_TEXT_4()} label={LL.MQTT_PUBLISH_TEXT_4()}
@@ -227,17 +228,17 @@ const MqttSettingsForm: FC = () => {
variant="outlined" variant="outlined"
value={data.discovery_prefix} value={data.discovery_prefix}
onChange={updateFormValue} onChange={updateFormValue}
margin="normal" size="small"
/> />
</Grid> </Grid>
)} )}
</Grid> </Grid>
)} )}
<Typography sx={{ pt: 2 }} variant="h6" color="primary"> <Typography variant="h6" color="primary">
{LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto) {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
</Typography> </Typography>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_boiler" name="publish_time_boiler"
@@ -253,7 +254,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_thermostat" name="publish_time_thermostat"
@@ -269,7 +270,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_solar" name="publish_time_solar"
@@ -285,7 +286,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_mixer" name="publish_time_mixer"
@@ -301,7 +302,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_sensor" name="publish_time_sensor"
@@ -317,7 +318,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_other" name="publish_time_other"

59
interface/src/project/DashboardData.tsx
View File

@@ -172,7 +172,7 @@ const DashboardData: FC = () => {
common_theme, common_theme,
{ {
Table: ` Table: `
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 140px 40px; --data-table-library_grid-template-columns: minmax(0, 1fr) 35% 40px;
`, `,
BaseRow: ` BaseRow: `
.td { .td {
@@ -1038,32 +1038,34 @@ const DashboardData: FC = () => {
</DialogTitle> </DialogTitle>
<DialogContent dividers> <DialogContent dividers>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item> <Grid item xs={12}>
<ValidatedTextField
name="n"
label={LL.ENTITY_NAME()}
value={analog.n}
fullWidth
variant="outlined"
onChange={updateValue(setAnalog)}
/>
</Grid>
<Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="g" name="g"
label="GPIO" label="GPIO"
value={analog.g} value={analog.g}
fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
autoFocus autoFocus
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
/> />
</Grid> </Grid>
<Grid item> <Grid item xs={8}>
<ValidatedTextField
name="n"
label={LL.ENTITY_NAME()}
value={analog.n}
sx={{ width: '20ch' }}
variant="outlined"
onChange={updateValue(setAnalog)}
/>
</Grid>
<Grid item>
<ValidatedTextField <ValidatedTextField
name="t" name="t"
label={LL.TYPE()} label={LL.TYPE()}
value={analog.t} value={analog.t}
fullWidth
select select
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
> >
@@ -1076,11 +1078,12 @@ const DashboardData: FC = () => {
</Grid> </Grid>
{analog.t >= AnalogType.COUNTER && analog.t <= AnalogType.RATE && ( {analog.t >= AnalogType.COUNTER && analog.t <= AnalogType.RATE && (
<> <>
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="u" name="u"
label={LL.UNIT()} label={LL.UNIT()}
value={analog.u} value={analog.u}
fullWidth
select select
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
> >
@@ -1092,12 +1095,12 @@ const DashboardData: FC = () => {
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
{analog.t === AnalogType.ADC && ( {analog.t === AnalogType.ADC && (
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="o" name="o"
label={LL.OFFSET()} label={LL.OFFSET()}
value={numberValue(analog.o)} value={numberValue(analog.o)}
sx={{ width: '20ch' }} fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
@@ -1109,12 +1112,12 @@ const DashboardData: FC = () => {
</Grid> </Grid>
)} )}
{analog.t === AnalogType.COUNTER && ( {analog.t === AnalogType.COUNTER && (
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="o" name="o"
label={LL.STARTVALUE()} label={LL.STARTVALUE()}
value={numberValue(analog.o)} value={numberValue(analog.o)}
sx={{ width: '20ch' }} fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
@@ -1122,12 +1125,12 @@ const DashboardData: FC = () => {
/> />
</Grid> </Grid>
)} )}
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="f" name="f"
label={LL.FACTOR()} label={LL.FACTOR()}
value={numberValue(analog.f)} value={numberValue(analog.f)}
sx={{ width: '20ch' }} fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
@@ -1138,12 +1141,12 @@ const DashboardData: FC = () => {
)} )}
{analog.t === AnalogType.DIGITAL_OUT && (analog.id === '25' || analog.id === '26') && ( {analog.t === AnalogType.DIGITAL_OUT && (analog.id === '25' || analog.id === '26') && (
<> <>
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="o" name="o"
label={LL.VALUE(0)} label={LL.VALUE(0)}
value={numberValue(analog.o)} value={numberValue(analog.o)}
sx={{ width: '20ch' }} fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
@@ -1154,12 +1157,12 @@ const DashboardData: FC = () => {
)} )}
{analog.t === AnalogType.DIGITAL_OUT && analog.id !== '25' && analog.id !== '26' && ( {analog.t === AnalogType.DIGITAL_OUT && analog.id !== '25' && analog.id !== '26' && (
<> <>
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="o" name="o"
label={LL.VALUE(0)} label={LL.VALUE(0)}
value={numberValue(analog.o)} value={numberValue(analog.o)}
sx={{ width: '20ch' }} fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
@@ -1170,12 +1173,12 @@ const DashboardData: FC = () => {
)} )}
{analog.t >= AnalogType.PWM_0 && ( {analog.t >= AnalogType.PWM_0 && (
<> <>
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="f" name="f"
label={LL.FREQ()} label={LL.FREQ()}
value={numberValue(analog.f)} value={numberValue(analog.f)}
sx={{ width: '20ch' }} fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}
@@ -1185,12 +1188,12 @@ const DashboardData: FC = () => {
}} }}
/> />
</Grid> </Grid>
<Grid item> <Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="o" name="o"
label={LL.DUTY_CYCLE()} label={LL.DUTY_CYCLE()}
value={numberValue(analog.o)} value={numberValue(analog.o)}
sx={{ width: '20ch' }} fullWidth
type="number" type="number"
variant="outlined" variant="outlined"
onChange={updateValue(setAnalog)} onChange={updateValue(setAnalog)}

42
interface/src/project/SettingsApplication.tsx
View File

@@ -127,6 +127,7 @@ const SettingsApplication: FC = () => {
label={LL.BOARD_PROFILE()} label={LL.BOARD_PROFILE()}
value={data.board_profile} value={data.board_profile}
disabled={processingBoard} disabled={processingBoard}
fullWidth
variant="outlined" variant="outlined"
onChange={changeBoardProfile} onChange={changeBoardProfile}
margin="normal" margin="normal"
@@ -140,8 +141,8 @@ const SettingsApplication: FC = () => {
</ValidatedTextField> </ValidatedTextField>
{data.board_profile === 'CUSTOM' && ( {data.board_profile === 'CUSTOM' && (
<> <>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid container spacing={1} sx={{ pt: 1 }} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="rx_gpio" name="rx_gpio"
@@ -155,7 +156,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="tx_gpio" name="tx_gpio"
@@ -169,7 +170,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="pbutton_gpio" name="pbutton_gpio"
@@ -183,7 +184,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="dallas_gpio" name="dallas_gpio"
@@ -197,7 +198,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="led_gpio" name="led_gpio"
@@ -211,8 +212,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
</Grid> <Grid item xs={6} sm={4}>
<Grid item xs={4}>
<ValidatedTextField <ValidatedTextField
name="phy_type" name="phy_type"
label={LL.PHY_TYPE()} label={LL.PHY_TYPE()}
@@ -229,9 +229,10 @@ const SettingsApplication: FC = () => {
<MenuItem value={2}>TLK110</MenuItem> <MenuItem value={2}>TLK110</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
</Grid>
{data.phy_type !== 0 && ( {data.phy_type !== 0 && (
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid container spacing={1} sx={{ pt: 1 }} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
name="eth_power" name="eth_power"
label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'} label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
@@ -244,7 +245,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
name="eth_phy_addr" name="eth_phy_addr"
label={LL.ADDRESS_OF('PHY I²C')} label={LL.ADDRESS_OF('PHY I²C')}
@@ -257,7 +258,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
name="eth_clock_mode" name="eth_clock_mode"
label="PHY Clk" label="PHY Clk"
@@ -279,7 +280,7 @@ const SettingsApplication: FC = () => {
)} )}
</> </>
)} )}
<Typography variant="h6" color="primary"> <Typography sx={{ pt: 2 }} variant="h6" color="primary">
{LL.SETTINGS_OF(LL.EMS_BUS(0))} {LL.SETTINGS_OF(LL.EMS_BUS(0))}
</Typography> </Typography>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
@@ -398,13 +399,14 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
<BlockFormControlLabel <BlockFormControlLabel
sx={{ pb: 2 }}
control={<Checkbox checked={data.shower_alert} onChange={updateFormValue} name="shower_alert" />} control={<Checkbox checked={data.shower_alert} onChange={updateFormValue} name="shower_alert" />}
label={LL.ENABLE_SHOWER_ALERT()} label={LL.ENABLE_SHOWER_ALERT()}
disabled={!data.shower_timer} disabled={!data.shower_timer}
/> />
{data.shower_alert && ( {data.shower_alert && (
<> <>
<Grid item xs={4}> <Grid item sx={{ pr: 1, pb: 2 }}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="shower_alert_trigger" name="shower_alert_trigger"
@@ -416,10 +418,11 @@ const SettingsApplication: FC = () => {
value={data.shower_alert_trigger} value={data.shower_alert_trigger}
type="number" type="number"
onChange={updateFormValue} onChange={updateFormValue}
size="small"
disabled={!data.shower_timer} disabled={!data.shower_timer}
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item sx={{ pb: 3 }}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="shower_alert_coldshot" name="shower_alert_coldshot"
@@ -431,17 +434,18 @@ const SettingsApplication: FC = () => {
value={data.shower_alert_coldshot} value={data.shower_alert_coldshot}
type="number" type="number"
onChange={updateFormValue} onChange={updateFormValue}
size="small"
disabled={!data.shower_timer} disabled={!data.shower_timer}
/> />
</Grid> </Grid>
</> </>
)} )}
</Grid> </Grid>
<Typography sx={{ pt: 2 }} variant="h6" color="primary"> <Typography variant="h6" color="primary">
{LL.FORMATTING_OPTIONS()} {LL.FORMATTING_OPTIONS()}
</Typography> </Typography>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
name="bool_dashboard" name="bool_dashboard"
label={LL.BOOLEAN_FORMAT_DASHBOARD()} label={LL.BOOLEAN_FORMAT_DASHBOARD()}
@@ -458,7 +462,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={5}>1/0</MenuItem> <MenuItem value={5}>1/0</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
name="bool_format" name="bool_format"
label={LL.BOOLEAN_FORMAT_API()} label={LL.BOOLEAN_FORMAT_API()}
@@ -477,7 +481,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={6}>1/0</MenuItem> <MenuItem value={6}>1/0</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6} sm={4}>
<ValidatedTextField <ValidatedTextField
name="enum_format" name="enum_format"
label={LL.ENUM_FORMAT()} label={LL.ENUM_FORMAT()}