From e54499dc1b05bd65a8806167d9f8522d67642ea3 Mon Sep 17 00:00:00 2001 From: proddy Date: Fri, 9 Oct 2020 23:04:38 +0200 Subject: [PATCH] relax the colours --- interface/src/project/EMSESPDevicesForm.tsx | 304 +++++++++++--------- 1 file changed, 173 insertions(+), 131 deletions(-) diff --git a/interface/src/project/EMSESPDevicesForm.tsx b/interface/src/project/EMSESPDevicesForm.tsx index 136f14955..d475ec205 100644 --- a/interface/src/project/EMSESPDevicesForm.tsx +++ b/interface/src/project/EMSESPDevicesForm.tsx @@ -1,26 +1,40 @@ import React, { Component, Fragment } from "react"; -import { withStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { withStyles, Theme, createStyles } from "@material-ui/core/styles"; import { - Table, TableBody, TableCell, TableHead, TableRow, TableContainer, - withWidth, WithWidthProps, isWidthDown, - Button, Tooltip, - DialogTitle, DialogContent, DialogActions, Box, Dialog, Typography + Table, + TableBody, + TableCell, + TableHead, + TableRow, + TableContainer, + withWidth, + WithWidthProps, + isWidthDown, + Button, + Tooltip, + DialogTitle, + DialogContent, + DialogActions, + Box, + Dialog, + Typography, } from "@material-ui/core"; import RefreshIcon from "@material-ui/icons/Refresh"; -import ListIcon from '@material-ui/icons/List'; - -import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication'; +import ListIcon from "@material-ui/icons/List"; import { - RestFormProps, - FormButton, -} from "../components"; + redirectingAuthorizedFetch, + withAuthenticatedContext, + AuthenticatedContextProps, +} from "../authentication"; + +import { RestFormProps, FormButton } from "../components"; import { EMSESPDevices, EMSESPDeviceData, Device } from "./EMSESPtypes"; -import { ENDPOINT_ROOT } from '../api'; +import { ENDPOINT_ROOT } from "../api"; export const SCANDEVICES_ENDPOINT = ENDPOINT_ROOT + "scanDevices"; export const DEVICE_DATA_ENDPOINT = ENDPOINT_ROOT + "deviceData"; @@ -33,7 +47,7 @@ const StyledTableCell = withStyles((theme: Theme) => body: { fontSize: 14, }, - }), + }) )(TableCell); function compareDevices(a: Device, b: Device) { @@ -52,49 +66,44 @@ interface EMSESPDevicesFormState { deviceData?: EMSESPDeviceData; } -const LightTooltip = withStyles((theme: Theme) => ({ - tooltip: { - // backgroundColor: theme.palette.common.black, - backgroundColor: theme.palette.primary.dark, - color: theme.palette.common.white, - boxShadow: theme.shadows[1], - borderRadius: "18px", - fontSize: 11 - }, -}))(Tooltip); - -type EMSESPDevicesFormProps = RestFormProps & AuthenticatedContextProps & WithWidthProps; - -class EMSESPDevicesForm extends Component { +type EMSESPDevicesFormProps = RestFormProps & + AuthenticatedContextProps & + WithWidthProps; +class EMSESPDevicesForm extends Component< + EMSESPDevicesFormProps, + EMSESPDevicesFormState +> { state: EMSESPDevicesFormState = { confirmScanDevices: false, - processing: false - } + processing: false, + }; noDevices = () => { - return (this.props.data.devices.length === 0); + return this.props.data.devices.length === 0; }; noSensors = () => { - return (this.props.data.sensors.length === 0); + return this.props.data.sensors.length === 0; }; noDeviceData = () => { - return ((this.state.deviceData?.deviceData || []).length === 0); + return (this.state.deviceData?.deviceData || []).length === 0; }; - createDeviceItems() { const { width, data } = this.props; return ( - + Devices

{!this.noDevices() && ( - +
Type @@ -107,47 +116,53 @@ class EMSESPDevicesForm extends Component - {data.devices.sort(compareDevices).map(device => ( - this.handleRowClick(device.id)}> + {data.devices.sort(compareDevices).map((device) => ( + this.handleRowClick(device.id)} + > - - - + + {device.brand} + {device.name} - {device.brand} - - - {device.name} - - - 0x{('00' + device.deviceid.toString(16).toUpperCase()).slice(-2)} - - - {device.productid} - - - {device.version} - - - + 0x + {("00" + device.deviceid.toString(16).toUpperCase()).slice( + -2 + )} + {device.productid} + {device.version} + ))}
)} - {this.noDevices() && - ( - - - No EMS devices found. Check the connections and for possible Tx errors. - - - ) - } + {this.noDevices() && ( + + + No EMS devices found. Check the connections and for possible Tx + errors. + + + )} ); } @@ -169,7 +184,7 @@ class EMSESPDevicesForm extends Component - {data.sensors.map(sensorData => ( + {data.sensors.map((sensorData) => ( {sensorData.id} @@ -182,15 +197,13 @@ class EMSESPDevicesForm extends Component )} - {this.noSensors() && - ( - - - There are no external temperature sensors connected - - - ) - } + {this.noSensors() && ( + + + There are no external temperature sensors connected + + + )} ); } @@ -203,65 +216,88 @@ class EMSESPDevicesForm extends Component Confirm Scan Devices - Are you sure you want to initiate a scan on the EMS bus for all new devices? + Are you sure you want to initiate a scan on the EMS bus for all new + devices? - - - ) + ); } onScanDevices = () => { this.setState({ confirmScanDevices: true }); - } + }; onScanDevicesRejected = () => { this.setState({ confirmScanDevices: false }); - } + }; onScanDevicesConfirmed = () => { this.setState({ processing: true }); - redirectingAuthorizedFetch(SCANDEVICES_ENDPOINT).then(response => { - if (response.status === 200) { - this.props.enqueueSnackbar("Device scan is starting...", { variant: 'info' }); - this.setState({ processing: false, confirmScanDevices: false }); - } else { - throw Error("Invalid status code: " + response.status); - } - }) - .catch(error => { - this.props.enqueueSnackbar(error.message || "Problem with scan", { variant: 'error' }); + redirectingAuthorizedFetch(SCANDEVICES_ENDPOINT) + .then((response) => { + if (response.status === 200) { + this.props.enqueueSnackbar("Device scan is starting...", { + variant: "info", + }); + this.setState({ processing: false, confirmScanDevices: false }); + } else { + throw Error("Invalid status code: " + response.status); + } + }) + .catch((error) => { + this.props.enqueueSnackbar(error.message || "Problem with scan", { + variant: "error", + }); this.setState({ processing: false, confirmScanDevices: false }); }); - } + }; handleRowClick = (id: any) => { this.setState({ deviceData: undefined }); redirectingAuthorizedFetch(DEVICE_DATA_ENDPOINT, { - method: 'POST', + method: "POST", body: JSON.stringify({ id: id }), headers: { - 'Content-Type': 'application/json' - } - }).then(response => { - if (response.status === 200) { - return response.json(); - // this.setState({ errorMessage: undefined }, this.props.loadData); - } - throw Error("Unexpected response code: " + response.status); - }).then(json => { - this.setState({ deviceData: json }); - }).catch(error => { - this.props.enqueueSnackbar(error.message || "Problem getting device data", { variant: 'error' }); - this.setState({ deviceData: undefined }); - }); - } + "Content-Type": "application/json", + }, + }) + .then((response) => { + if (response.status === 200) { + return response.json(); + // this.setState({ errorMessage: undefined }, this.props.loadData); + } + throw Error("Unexpected response code: " + response.status); + }) + .then((json) => { + this.setState({ deviceData: json }); + }) + .catch((error) => { + this.props.enqueueSnackbar( + error.message || "Problem getting device data", + { variant: "error" } + ); + this.setState({ deviceData: undefined }); + }); + }; renderDeviceData() { const { deviceData } = this.state; @@ -278,43 +314,40 @@ class EMSESPDevicesForm extends Component

- - + + {deviceData.deviceName} {!this.noDeviceData() && ( - - - +
+ - {deviceData.deviceData.map(deviceData => ( + {deviceData.deviceData.map((deviceData) => ( {deviceData.n} - - {deviceData.v} - + {deviceData.v} ))}
)} - {this.noDeviceData() && - ( - - - No data available for this device - - - ) - } + {this.noDeviceData() && ( + + + No data available for this device + + + )} ); - } render() { @@ -327,21 +360,30 @@ class EMSESPDevicesForm extends Component
- } variant="contained" color="secondary" onClick={this.props.loadData}> + } + variant="contained" + color="secondary" + onClick={this.props.loadData} + > Refresh - } variant="contained" color="primary" onClick={this.onScanDevices}> + } + variant="contained" + color="primary" + onClick={this.onScanDevices} + > Scan Devices - + {this.renderScanDevicesDialog()} ); } - } export default withAuthenticatedContext(withWidth()(EMSESPDevicesForm));