mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-06 07:49:52 +03:00
refactor device value rendering (to Web, Console or MQTT) to base class #632
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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)} ({data.rx_quality}%)
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell >
|
||||
Rx line quality
|
||||
</TableCell>
|
||||
<TableCell align="right">{data.rx_quality} %
|
||||
</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} %
|
||||
<TableCell align="right">{formatNumber(data.tx_sent)} ({data.tx_quality}%)
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user