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

improve view of app and mqtt settings pages

Browse Source 
The appearance of the configuration pages has been unified. Additionally on very narrow screens (e.g. smartphones) only one parameter per row is displayed (on wider screens up to three per row).
This commit is contained in:
pswid
2023-03-22 13:31:53 +01:00
parent 93d68996b4
commit 12da8f9b67
2 changed files with 87 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,7 +57,7 @@ const MqttSettingsForm: FC = () => {
label={LL.ENABLE_MQTT()} label={LL.ENABLE_MQTT()}
/> />
<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={6}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="host" name="host"
@@ -69,7 +69,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="port" name="port"
@@ -82,9 +82,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
</Grid> <Grid item xs={12} sm={6}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="base" name="base"
@@ -96,7 +94,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
name="client_id" name="client_id"
label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'} label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
@@ -107,9 +105,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
</Grid> <Grid item xs={12} sm={6}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={6}>
<ValidatedTextField <ValidatedTextField
name="username" name="username"
label={LL.USERNAME(0)} label={LL.USERNAME(0)}
@@ -120,7 +116,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={12} sm={6}>
<ValidatedPasswordField <ValidatedPasswordField
name="password" name="password"
label={LL.PASSWORD()} label={LL.PASSWORD()}
@@ -131,9 +127,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
</Grid> <Grid item xs={12} sm={6}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="keep_alive" name="keep_alive"
@@ -149,7 +143,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
name="mqtt_qos" name="mqtt_qos"
label="QoS" label="QoS"
@@ -196,7 +190,7 @@ const MqttSettingsForm: FC = () => {
label={LL.MQTT_RESPONSE()} label={LL.MQTT_RESPONSE()}
/> />
{!data.ha_enabled && ( {!data.ha_enabled && (
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid container rowSpacing={-1} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item> <Grid item>
<BlockFormControlLabel <BlockFormControlLabel
control={<Checkbox name="publish_single" checked={data.publish_single} onChange={updateFormValue} />} control={<Checkbox name="publish_single" checked={data.publish_single} onChange={updateFormValue} />}
@@ -219,15 +213,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: 1 }}
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 container sx={{ pl: 1 }} 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={12} sm={6} md={4}>
<Grid item>
<ValidatedTextField <ValidatedTextField
name="discovery_type" name="discovery_type"
label={LL.MQTT_PUBLISH_TEXT_5()} label={LL.MQTT_PUBLISH_TEXT_5()}
@@ -242,7 +234,7 @@ const MqttSettingsForm: FC = () => {
<MenuItem value={1}>Domoticz</MenuItem> <MenuItem value={1}>Domoticz</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
name="discovery_prefix" name="discovery_prefix"
label={LL.MQTT_PUBLISH_TEXT_4()} label={LL.MQTT_PUBLISH_TEXT_4()}
@@ -253,7 +245,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
name="entity_format" name="entity_format"
label={LL.MQTT_ENTITY_FORMAT()} label={LL.MQTT_ENTITY_FORMAT()}
@@ -270,7 +262,6 @@ const MqttSettingsForm: FC = () => {
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
</Grid> </Grid>
</>
)} )}
</Grid> </Grid>
)} )}
@@ -278,7 +269,7 @@ const MqttSettingsForm: FC = () => {
{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={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_heartbeat" name="publish_time_heartbeat"
@@ -294,7 +285,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_boiler" name="publish_time_boiler"
@@ -310,7 +301,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_thermostat" name="publish_time_thermostat"
@@ -326,7 +317,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_solar" name="publish_time_solar"
@@ -342,7 +333,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_mixer" name="publish_time_mixer"
@@ -358,7 +349,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_sensor" name="publish_time_sensor"
@@ -374,7 +365,7 @@ const MqttSettingsForm: FC = () => {
margin="normal" margin="normal"
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="publish_time_other" name="publish_time_other"

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

@@ -162,7 +162,7 @@ const SettingsApplication: FC = () => {
justifyContent="flex-start" justifyContent="flex-start"
alignItems="flex-start" alignItems="flex-start"
> >
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="rx_gpio" name="rx_gpio"
@@ -176,7 +176,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="tx_gpio" name="tx_gpio"
@@ -190,7 +190,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="pbutton_gpio" name="pbutton_gpio"
@@ -204,7 +204,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="dallas_gpio" name="dallas_gpio"
@@ -218,7 +218,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="led_gpio" name="led_gpio"
@@ -232,7 +232,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
name="phy_type" name="phy_type"
label={LL.PHY_TYPE()} label={LL.PHY_TYPE()}
@@ -259,7 +259,7 @@ const SettingsApplication: FC = () => {
justifyContent="flex-start" justifyContent="flex-start"
alignItems="flex-start" alignItems="flex-start"
> >
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={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) + ')'}
@@ -272,7 +272,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={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')}
@@ -285,7 +285,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
name="eth_clock_mode" name="eth_clock_mode"
label="PHY Clk" label="PHY Clk"
@@ -311,7 +311,7 @@ const SettingsApplication: FC = () => {
{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">
<Grid item xs={6}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
name="tx_mode" name="tx_mode"
label={LL.TX_MODE()} label={LL.TX_MODE()}
@@ -329,7 +329,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={4}>{LL.HARDWARE()}</MenuItem> <MenuItem value={4}>{LL.HARDWARE()}</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
name="ems_bus_id" name="ems_bus_id"
label={LL.ID_OF(LL.EMS_BUS(1))} label={LL.ID_OF(LL.EMS_BUS(1))}
@@ -358,20 +358,16 @@ const SettingsApplication: FC = () => {
<Typography sx={{ pt: 2 }} variant="h6" color="primary"> <Typography sx={{ pt: 2 }} variant="h6" color="primary">
{LL.GENERAL_OPTIONS()} {LL.GENERAL_OPTIONS()}
</Typography> </Typography>
<Box <Grid item>
sx={{
'& .MuiTextField-root': { width: '25ch' }
}}
>
<ValidatedTextField <ValidatedTextField
name="locale" name="locale"
label={LL.LANGUAGE_ENTITIES()} label={LL.LANGUAGE_ENTITIES()}
disabled={saving} disabled={saving}
value={data.locale} value={data.locale}
fullWidth
variant="outlined" variant="outlined"
onChange={updateFormValue} onChange={updateFormValue}
margin="normal" margin="normal"
size="small"
select select
> >
<MenuItem value="en">English (EN)</MenuItem> <MenuItem value="en">English (EN)</MenuItem>
@@ -384,7 +380,7 @@ const SettingsApplication: FC = () => {
<MenuItem value="sv">Svenska (SV)</MenuItem> <MenuItem value="sv">Svenska (SV)</MenuItem>
<MenuItem value="tr">Türk (TR)</MenuItem> <MenuItem value="tr">Türk (TR)</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Box> </Grid>
{data.led_gpio !== 0 && ( {data.led_gpio !== 0 && (
<BlockFormControlLabel <BlockFormControlLabel
control={<Checkbox checked={data.hide_led} onChange={updateFormValue} name="hide_led" />} control={<Checkbox checked={data.hide_led} onChange={updateFormValue} name="hide_led" />}
@@ -429,14 +425,15 @@ 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}
/> />
</Grid>
<Grid container sx={{ pt: 2 }} rowSpacing={3} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
{data.shower_alert && ( {data.shower_alert && (
<> <>
<Grid item sx={{ pr: 1, pb: 2 }}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="shower_alert_trigger" name="shower_alert_trigger"
@@ -446,13 +443,13 @@ const SettingsApplication: FC = () => {
}} }}
variant="outlined" variant="outlined"
value={numberValue(data.shower_alert_trigger)} value={numberValue(data.shower_alert_trigger)}
fullWidth
type="number" type="number"
onChange={updateFormValue} onChange={updateFormValue}
size="small"
disabled={!data.shower_timer} disabled={!data.shower_timer}
/> />
</Grid> </Grid>
<Grid item sx={{ pb: 3 }}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="shower_alert_coldshot" name="shower_alert_coldshot"
@@ -462,20 +459,20 @@ const SettingsApplication: FC = () => {
}} }}
variant="outlined" variant="outlined"
value={numberValue(data.shower_alert_coldshot)} value={numberValue(data.shower_alert_coldshot)}
fullWidth
type="number" type="number"
onChange={updateFormValue} onChange={updateFormValue}
size="small"
disabled={!data.shower_timer} disabled={!data.shower_timer}
/> />
</Grid> </Grid>
</> </>
)} )}
</Grid> </Grid>
<Typography variant="h6" color="primary"> <Typography sx={{ pt: 3 }} 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={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
name="bool_dashboard" name="bool_dashboard"
label={LL.BOOLEAN_FORMAT_DASHBOARD()} label={LL.BOOLEAN_FORMAT_DASHBOARD()}
@@ -492,7 +489,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={5}>1/0</MenuItem> <MenuItem value={5}>1/0</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
name="bool_format" name="bool_format"
label={LL.BOOLEAN_FORMAT_API()} label={LL.BOOLEAN_FORMAT_API()}
@@ -511,7 +508,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={6}>1/0</MenuItem> <MenuItem value={6}>1/0</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item xs={6} sm={4}> <Grid item xs={12} sm={6} md={4}>
<ValidatedTextField <ValidatedTextField
name="enum_format" name="enum_format"
label={LL.ENUM_FORMAT()} label={LL.ENUM_FORMAT()}
@@ -560,7 +557,7 @@ const SettingsApplication: FC = () => {
/> />
{data.syslog_enabled && ( {data.syslog_enabled && (
<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={12} sm={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="syslog_host" name="syslog_host"
@@ -573,7 +570,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="syslog_port" name="syslog_port"
@@ -587,7 +584,7 @@ const SettingsApplication: FC = () => {
disabled={saving} disabled={saving}
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
name="syslog_level" name="syslog_level"
label={LL.LOG_LEVEL()} label={LL.LOG_LEVEL()}
@@ -607,7 +604,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={9}>ALL</MenuItem> <MenuItem value={9}>ALL</MenuItem>
</ValidatedTextField> </ValidatedTextField>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={12} sm={6}>
<ValidatedTextField <ValidatedTextField
fieldErrors={fieldErrors} fieldErrors={fieldErrors}
name="syslog_mark_interval" name="syslog_mark_interval"