mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-07 00:09:51 +03:00
MQTT Formatting payload (nested vs single) is a pull-down option
This commit is contained in:
proddy
@@ -1,22 +1,31 @@
|
||||
import React from 'react';
|
||||
import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
|
||||
import React from "react";
|
||||
import {
|
||||
TextValidator,
|
||||
ValidatorForm,
|
||||
SelectValidator,
|
||||
} from "react-material-ui-form-validator";
|
||||
|
||||
import { Checkbox, TextField, Typography } from '@material-ui/core';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import { Checkbox, TextField, Typography } from "@material-ui/core";
|
||||
import SaveIcon from "@material-ui/icons/Save";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
|
||||
import { RestFormProps, FormActions, FormButton, BlockFormControlLabel, PasswordValidator } from '../components';
|
||||
import { isIP, isHostname, or, isPath } from '../validators';
|
||||
import {
|
||||
RestFormProps,
|
||||
FormActions,
|
||||
FormButton,
|
||||
BlockFormControlLabel,
|
||||
PasswordValidator,
|
||||
} from "../components";
|
||||
import { isIP, isHostname, or, isPath } from "../validators";
|
||||
|
||||
import { MqttSettings } from './types';
|
||||
import { MqttSettings } from "./types";
|
||||
|
||||
type MqttSettingsFormProps = RestFormProps<MqttSettings>;
|
||||
|
||||
class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
|
||||
componentDidMount() {
|
||||
ValidatorForm.addValidationRule('isIPOrHostname', or(isIP, isHostname));
|
||||
ValidatorForm.addValidationRule('isPath', isPath);
|
||||
ValidatorForm.addValidationRule("isIPOrHostname", or(isIP, isHostname));
|
||||
ValidatorForm.addValidationRule("isPath", isPath);
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -27,44 +36,57 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
control={
|
||||
<Checkbox
|
||||
checked={data.enabled}
|
||||
onChange={handleValueChange('enabled')}
|
||||
onChange={handleValueChange("enabled")}
|
||||
value="enabled"
|
||||
/>
|
||||
}
|
||||
label="Enable MQTT"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isIPOrHostname']}
|
||||
errorMessages={['Host is required', "Not a valid IP address or hostname"]}
|
||||
validators={["required", "isIPOrHostname"]}
|
||||
errorMessages={[
|
||||
"Host is required",
|
||||
"Not a valid IP address or hostname",
|
||||
]}
|
||||
name="host"
|
||||
label="Host"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.host}
|
||||
onChange={handleValueChange('host')}
|
||||
onChange={handleValueChange("host")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
|
||||
errorMessages={['Port is required', "Must be a number", "Must be greater than 0 ", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:0",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Port is required",
|
||||
"Must be a number",
|
||||
"Must be greater than 0 ",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="port"
|
||||
label="Port"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.port}
|
||||
type="number"
|
||||
onChange={handleValueChange('port')}
|
||||
onChange={handleValueChange("port")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isPath']}
|
||||
errorMessages={['Base is required', "Not a valid Path"]}
|
||||
validators={["required", "isPath"]}
|
||||
errorMessages={["Base is required", "Not a valid Path"]}
|
||||
name="base"
|
||||
label="Base"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.base}
|
||||
onChange={handleValueChange('base')}
|
||||
onChange={handleValueChange("base")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
@@ -73,7 +95,7 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.username}
|
||||
onChange={handleValueChange('username')}
|
||||
onChange={handleValueChange("username")}
|
||||
margin="normal"
|
||||
/>
|
||||
<PasswordValidator
|
||||
@@ -82,7 +104,7 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.password}
|
||||
onChange={handleValueChange('password')}
|
||||
onChange={handleValueChange("password")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextField
|
||||
@@ -91,28 +113,40 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.client_id}
|
||||
onChange={handleValueChange('client_id')}
|
||||
onChange={handleValueChange("client_id")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:65535']}
|
||||
errorMessages={['Keep alive is required', "Must be a number", "Must be greater than 0", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:1",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Keep alive is required",
|
||||
"Must be a number",
|
||||
"Must be greater than 0",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="keep_alive"
|
||||
label="Keep Alive (seconds)"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.keep_alive}
|
||||
type="number"
|
||||
onChange={handleValueChange('keep_alive')}
|
||||
onChange={handleValueChange("keep_alive")}
|
||||
margin="normal"
|
||||
/>
|
||||
<SelectValidator name="mqtt_qos"
|
||||
<SelectValidator
|
||||
name="mqtt_qos"
|
||||
label="QoS"
|
||||
value={data.mqtt_qos}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onChange={handleValueChange('mqtt_qos')}
|
||||
margin="normal">
|
||||
onChange={handleValueChange("mqtt_qos")}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value={0}>0 (default)</MenuItem>
|
||||
<MenuItem value={1}>1</MenuItem>
|
||||
<MenuItem value={2}>2</MenuItem>
|
||||
@@ -121,7 +155,7 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
control={
|
||||
<Checkbox
|
||||
checked={data.clean_session}
|
||||
onChange={handleValueChange('clean_session')}
|
||||
onChange={handleValueChange("clean_session")}
|
||||
value="clean_session"
|
||||
/>
|
||||
}
|
||||
@@ -131,55 +165,63 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
control={
|
||||
<Checkbox
|
||||
checked={data.mqtt_retain}
|
||||
onChange={handleValueChange('mqtt_retain')}
|
||||
onChange={handleValueChange("mqtt_retain")}
|
||||
value="mqtt_retain"
|
||||
/>
|
||||
}
|
||||
label="Retain Flag"
|
||||
/>
|
||||
<br></br>
|
||||
<Typography variant="h6" color="primary" >
|
||||
<Typography variant="h6" color="primary">
|
||||
Formatting
|
||||
</Typography>
|
||||
<BlockFormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={data.nested_format}
|
||||
onChange={handleValueChange('nested_format')}
|
||||
value="nested_format"
|
||||
/>
|
||||
}
|
||||
label="Nested format (Thermostat & Mixer only)"
|
||||
/>
|
||||
<SelectValidator name="dallas_format"
|
||||
<SelectValidator
|
||||
name="nested_format"
|
||||
label="Topic/Payload Format"
|
||||
value={data.nested_format}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onChange={handleValueChange("nested_format")}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value={1}>nested on a single topic</MenuItem>
|
||||
<MenuItem value={2}>as individual topics</MenuItem>
|
||||
</SelectValidator>
|
||||
<SelectValidator
|
||||
name="dallas_format"
|
||||
label="Dallas Sensor Payload Grouping"
|
||||
value={data.dallas_format}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onChange={handleValueChange('dallas_format')}
|
||||
margin="normal">
|
||||
onChange={handleValueChange("dallas_format")}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value={1}>by Sensor ID</MenuItem>
|
||||
<MenuItem value={2}>by Number</MenuItem>
|
||||
</SelectValidator>
|
||||
<SelectValidator name="bool_format"
|
||||
<SelectValidator
|
||||
name="bool_format"
|
||||
label="Boolean Format"
|
||||
value={data.bool_format}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onChange={handleValueChange('bool_format')}
|
||||
margin="normal">
|
||||
onChange={handleValueChange("bool_format")}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value={1}>"on"/"off"</MenuItem>
|
||||
<MenuItem value={2}>true/false</MenuItem>
|
||||
<MenuItem value={3}>1/0</MenuItem>
|
||||
<MenuItem value={4}>"ON"/"OFF"</MenuItem>
|
||||
</SelectValidator>
|
||||
<SelectValidator name="subscribe_format"
|
||||
<SelectValidator
|
||||
name="subscribe_format"
|
||||
label="Subscribe Format"
|
||||
value={data.subscribe_format}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onChange={handleValueChange('subscribe_format')}
|
||||
margin="normal">
|
||||
onChange={handleValueChange("subscribe_format")}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value={0}>general device topic</MenuItem>
|
||||
<MenuItem value={1}>individual topics, main heating circuit</MenuItem>
|
||||
<MenuItem value={2}>individual topics, all heating circuits</MenuItem>
|
||||
@@ -188,103 +230,170 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
|
||||
control={
|
||||
<Checkbox
|
||||
checked={data.ha_enabled}
|
||||
onChange={handleValueChange('ha_enabled')}
|
||||
onChange={handleValueChange("ha_enabled")}
|
||||
value="ha_enabled"
|
||||
/>
|
||||
}
|
||||
label="Home Assistant MQTT Discovery"
|
||||
label="Use Home Assistant MQTT Discovery"
|
||||
/>
|
||||
{ data.ha_enabled &&
|
||||
<SelectValidator name="ha_climate_format"
|
||||
{data.ha_enabled && (
|
||||
<SelectValidator
|
||||
name="ha_climate_format"
|
||||
label="Thermostat Room Temperature"
|
||||
value={data.ha_climate_format}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
onChange={handleValueChange('ha_climate_format')}
|
||||
margin="normal">
|
||||
onChange={handleValueChange("ha_climate_format")}
|
||||
margin="normal"
|
||||
>
|
||||
<MenuItem value={1}>use Current temperature (default)</MenuItem>
|
||||
<MenuItem value={2}>use Setpoint temperature</MenuItem>
|
||||
<MenuItem value={3}>Fix to 0</MenuItem>
|
||||
</SelectValidator>
|
||||
}
|
||||
)}
|
||||
<br></br>
|
||||
<Typography variant="h6" color="primary" >
|
||||
<Typography variant="h6" color="primary">
|
||||
Publish Intervals
|
||||
</Typography>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
|
||||
errorMessages={['Publish time is required', "Must be a number", "Must be 0 or greater", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:0",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Publish time is required",
|
||||
"Must be a number",
|
||||
"Must be 0 or greater",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="publish_time_boiler"
|
||||
label="Boiler Publish Interval (seconds, 0=on change)"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.publish_time_boiler}
|
||||
type="number"
|
||||
onChange={handleValueChange('publish_time_boiler')}
|
||||
onChange={handleValueChange("publish_time_boiler")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
|
||||
errorMessages={['Publish time is required', "Must be a number", "Must be 0 or greater", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:0",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Publish time is required",
|
||||
"Must be a number",
|
||||
"Must be 0 or greater",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="publish_time_thermostat"
|
||||
label="Thermostat Publish Interval (seconds, 0=on change)"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.publish_time_thermostat}
|
||||
type="number"
|
||||
onChange={handleValueChange('publish_time_thermostat')}
|
||||
onChange={handleValueChange("publish_time_thermostat")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
|
||||
errorMessages={['Publish time is required', "Must be a number", "Must be 0 or greater", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:0",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Publish time is required",
|
||||
"Must be a number",
|
||||
"Must be 0 or greater",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="publish_time_solar"
|
||||
label="Solar Publish Interval (seconds, 0=on change)"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.publish_time_solar}
|
||||
type="number"
|
||||
onChange={handleValueChange('publish_time_solar')}
|
||||
onChange={handleValueChange("publish_time_solar")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
|
||||
errorMessages={['Publish time is required', "Must be a number", "Must be 0 or greater", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:0",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Publish time is required",
|
||||
"Must be a number",
|
||||
"Must be 0 or greater",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="publish_time_mixer"
|
||||
label="Mixer Publish Interval (seconds, 0=on change)"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.publish_time_mixer}
|
||||
type="number"
|
||||
onChange={handleValueChange('publish_time_mixer')}
|
||||
onChange={handleValueChange("publish_time_mixer")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
|
||||
errorMessages={['Publish time is required', "Must be a number", "Must be 0 or greater", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:0",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Publish time is required",
|
||||
"Must be a number",
|
||||
"Must be 0 or greater",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="publish_time_sensor"
|
||||
label="Sensors Publish Interval (seconds, 0=on change)"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.publish_time_sensor}
|
||||
type="number"
|
||||
onChange={handleValueChange('publish_time_sensor')}
|
||||
onChange={handleValueChange("publish_time_sensor")}
|
||||
margin="normal"
|
||||
/>
|
||||
<TextValidator
|
||||
validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
|
||||
errorMessages={['Publish time is required', "Must be a number", "Must be 0 or greater", "Max value is 65535"]}
|
||||
validators={[
|
||||
"required",
|
||||
"isNumber",
|
||||
"minNumber:0",
|
||||
"maxNumber:65535",
|
||||
]}
|
||||
errorMessages={[
|
||||
"Publish time is required",
|
||||
"Must be a number",
|
||||
"Must be 0 or greater",
|
||||
"Max value is 65535",
|
||||
]}
|
||||
name="publish_time_other"
|
||||
label="All other Modules Publish Interval (seconds, 0=on change)"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={data.publish_time_other}
|
||||
type="number"
|
||||
onChange={handleValueChange('publish_time_other')}
|
||||
onChange={handleValueChange("publish_time_other")}
|
||||
margin="normal"
|
||||
/>
|
||||
<FormActions>
|
||||
<FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
|
||||
<FormButton
|
||||
startIcon={<SaveIcon />}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
type="submit"
|
||||
>
|
||||
Save
|
||||
</FormButton>
|
||||
</FormActions>
|
||||
|
||||
Reference in New Issue
Block a user