refactor device value rendering (to Web, Console or MQTT) to base class #632

This commit is contained in:
proddy
2020-12-13 22:52:34 +01:00
parent f72e549850
commit ffa313ebe4
60 changed files with 2579 additions and 3367 deletions

View File

@@ -106,17 +106,6 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
onChange={handleValueChange('max_topic_length')}
margin="normal"
/>
<SelectValidator name="mqtt_format"
label="Format"
value={data.mqtt_format}
fullWidth
variant="outlined"
onChange={handleValueChange('mqtt_format')}
margin="normal">
<MenuItem value={1}>Single</MenuItem>
<MenuItem value={2}>Nested</MenuItem>
<MenuItem value={3}>Home Assistant</MenuItem>
</SelectValidator>
<SelectValidator name="mqtt_qos"
label="QoS"
value={data.mqtt_qos}
@@ -149,6 +138,43 @@ class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
label="Retain Flag"
/>
<br></br>
<Typography variant="h6" color="primary" >
Formatting
</Typography>
<SelectValidator name="dallas_format"
label="Dallas Sensor Payload Grouping"
value={data.dallas_format}
fullWidth
variant="outlined"
onChange={handleValueChange('dallas_format')}
margin="normal">
<MenuItem value={1}>by Sensor ID</MenuItem>
<MenuItem value={2}>by Number</MenuItem>
</SelectValidator>
<BlockFormControlLabel
control={
<Checkbox
checked={data.ha_enabled}
onChange={handleValueChange('ha_enabled')}
value="ha_enabled"
/>
}
label="Home Assistant MQTT Discovery"
/>
{ 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">
<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" >
Publish Intervals
</Typography>

View File

@@ -33,7 +33,9 @@ export interface MqttSettings {
publish_time_mixer: number;
publish_time_other: number;
publish_time_sensor: number;
mqtt_format: number;
dallas_format: number;
mqtt_qos: number;
mqtt_retain: boolean;
ha_enabled: boolean;
ha_climate_format: number;
}

View File

@@ -342,13 +342,13 @@ class EMSESPDevicesForm extends Component<
<TableHead></TableHead>
<TableBody>
{deviceData.data.map((item, i) => {
if (i % 2) {
if (i % 3) {
return null;
} else {
return (
<TableRow key={i}>
<TableCell component="th" scope="row">{deviceData.data[i]}</TableCell>
<TableCell align="right">{deviceData.data[i + 1]}</TableCell>
<TableCell component="th" scope="row">{deviceData.data[i+2]}</TableCell>
<TableCell align="right">{deviceData.data[i]}{deviceData.data[i + 1]}</TableCell>
</TableRow>
);
}

View File

@@ -60,30 +60,16 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
<TableBody>
<TableRow>
<TableCell>
Received telegrams
# Telegrams Received
</TableCell>
<TableCell align="right">{formatNumber(data.rx_received)}
<TableCell align="right">{formatNumber(data.rx_received)}&nbsp;({data.rx_quality}%)
</TableCell>
</TableRow>
<TableRow>
<TableCell >
Rx line quality
</TableCell>
<TableCell align="right">{data.rx_quality}&nbsp;%
</TableCell>
</TableRow>
<TableRow>
<TableCell >
Sent telegrams
# Telegrams Sent
</TableCell >
<TableCell align="right">{formatNumber(data.tx_sent)}
</TableCell>
</TableRow>
<TableRow>
<TableCell >
Tx line quality
</TableCell>
<TableCell align="right">{data.tx_quality}&nbsp;%
<TableCell align="right">{formatNumber(data.tx_sent)}&nbsp;({data.tx_quality}%)
</TableCell>
</TableRow>
</TableBody>

View File

@@ -3,7 +3,7 @@ import { Redirect, Switch } from 'react-router';
import { AuthenticatedRoute } from '../authentication';
import EMSESP from './EMSESP';
import EMSESPDashboard from './EMSESPDashboard';
import EMSESPSettings from './EMSESPSettings';
class ProjectRouting extends Component {
@@ -11,9 +11,9 @@ class ProjectRouting extends Component {
render() {
return (
<Switch>
<AuthenticatedRoute exact path="/ems-esp/status/*" component={EMSESP} />
<AuthenticatedRoute exact path="/ems-esp/status/*" component={EMSESPDashboard} />
<AuthenticatedRoute exact path="/ems-esp/settings" component={EMSESPSettings} />
<AuthenticatedRoute exact path="/ems-esp/*" component={EMSESP} />
<AuthenticatedRoute exact path="/ems-esp/*" component={EMSESPDashboard} />
{
/*
* The redirect below caters for the default project route and redirecting invalid paths.