show external dallas temp sensors in web UI

This commit is contained in:
proddy
2020-07-31 13:59:06 +02:00
parent 34f7796bd8
commit 1d3a31b9f3
8 changed files with 87 additions and 21 deletions

View File

@@ -22,7 +22,7 @@ class EMSESP extends Component<RouteComponentProps> {
<MenuAppBar sectionTitle="Dashboard">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
<Tab value={`/${PROJECT_PATH}/status`} label="EMS Status" />
<Tab value={`/${PROJECT_PATH}/devices`} label="EMS Devices" />
<Tab value={`/${PROJECT_PATH}/devices`} label="Devices & Sensors" />
<Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
</Tabs>
<Switch>

View File

@@ -17,7 +17,7 @@ class EMSESPDevicesController extends Component<EMSESPDevicesControllerProps> {
render() {
return (
<SectionContent title="EMS Devices">
<SectionContent title="Devices & Sensors">
<RestFormLoader
{...this.props}
render={formProps => <EMSESPDevicesForm {...formProps} />}

View File

@@ -71,14 +71,21 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
return (this.props.data.devices.length === 0);
};
noSensors = () => {
return (this.props.data.sensors.length === 0);
};
noDeviceData = () => {
return (this.state.deviceData?.deviceData.length === 0);
};
createTableItems() {
createDeviceItems() {
const { width, data } = this.props;
return (
<TableContainer>
<Typography variant="h6" color="primary" paragraph>
Devices:
</Typography>
{!this.noDevices() && (
<Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
<TableHead>
@@ -132,6 +139,49 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
);
}
createSensorItems() {
const { data } = this.props;
return (
<TableContainer>
<p></p>
<Typography variant="h6" color="primary" paragraph>
Sensors:
</Typography>
{!this.noSensors() && (
<Table size="small" padding="default">
<TableHead>
<TableRow>
<StyledTableCell>ID</StyledTableCell>
<StyledTableCell align="left">Temperature</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.sensors.map(sensorData => (
<TableRow key={sensorData.id}>
<TableCell component="th" scope="row">
{sensorData.id}
</TableCell>
<TableCell align="left">
{sensorData.temp}&deg;C
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
{this.noSensors() &&
(
<Box color="warning.main" p={0} mt={0} mb={0}>
<Typography variant="body1">
No external temperature sensors detected.
</Typography>
</Box>
)
}
</TableContainer>
);
}
renderScanDevicesDialog() {
return (
<Dialog
@@ -208,7 +258,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
return;
}
if (!deviceData) {
if (!deviceData) {
return;
}
@@ -252,8 +302,9 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
return (
<Fragment>
<br></br>
{this.createTableItems()}
{this.createDeviceItems()}
{this.renderDeviceData()}
{this.createSensorItems()}
<br></br>
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1} padding={1}>

View File

@@ -33,8 +33,14 @@ export interface Device {
version: string;
}
export interface Sensor {
id: string;
temp: number;
}
export interface EMSESPDevices {
devices: Device[];
sensors: Sensor[];
}
export interface DeviceData {