show device info on Web

interface/src/project/EMSESPDevicesController.tsx

@@ -5,7 +5,7 @@ import { ENDPOINT_ROOT } from '../api';
 import EMSESPDevicesForm from './EMSESPDevicesForm';
 import { EMSESPDevices } from './EMSESPtypes';
 
-export const EMSESP_DEVICES_ENDPOINT = ENDPOINT_ROOT + "emsespDevices";
+export const EMSESP_DEVICES_ENDPOINT = ENDPOINT_ROOT + "allDevices";
 
 type EMSESPDevicesControllerProps = RestControllerProps<EMSESPDevices>;
 

interface/src/project/EMSESPDevicesForm.tsx

@@ -24,10 +24,11 @@ import {
   FormButton,
 } from "../components";
 
-import { EMSESPDevices, Device } from "./EMSESPtypes";
+import { EMSESPDevices, EMSESPDeviceData, Device } from "./EMSESPtypes";
 
 import { ENDPOINT_ROOT } from '../api';
 export const SCANDEVICES_ENDPOINT = ENDPOINT_ROOT + "scanDevices";
+export const DEVICE_DATA_ENDPOINT = ENDPOINT_ROOT + "deviceData";
 
 const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
@@ -54,6 +55,7 @@ function compareDevices(a: Device, b: Device) {
 interface EMSESPDevicesFormState {
   confirmScanDevices: boolean;
   processing: boolean;
+  deviceData?: EMSESPDeviceData;
 }
 
 type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> & AuthenticatedContextProps & WithWidthProps;
@@ -65,15 +67,19 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
     processing: false
   }
 
-  noData = () => {
+  noDevices = () => {
     return (this.props.data.devices.length === 0);
   };
 
+  noDeviceData = () => {
+    return (this.state.deviceData?.deviceData.length === 0);
+  };
+
   createTableItems() {
     const { width, data } = this.props;
     return (
       <TableContainer>
-        {!this.noData() && (
+        {!this.noDevices() && (
           <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
             <TableHead>
               <TableRow>
@@ -87,7 +93,9 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
             </TableHead>
             <TableBody>
               {data.devices.sort(compareDevices).map(device => (
-                <TableRow hover key={device.type}>
+                <TableRow hover key={device.id}
+                  onClick={() => this.handleRowClick(device.id)}
+                >
                   <TableCell component="th" scope="row">
                     {device.type}
                   </TableCell>
@@ -111,7 +119,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
             </TableBody>
           </Table>
         )}
-        {this.noData() &&
+        {this.noDevices() &&
           (
             <Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
               <Typography variant="body1">
@@ -156,26 +164,105 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
 
   onScanDevicesConfirmed = () => {
     this.setState({ processing: true });
-    redirectingAuthorizedFetch(SCANDEVICES_ENDPOINT, { method: 'POST' })
-      .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);
-        }
-      })
+    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',
+      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 });
+    });
+  }
+
+  renderDeviceData() {
+    const { deviceData } = this.state;
+    const { width } = this.props;
+
+    if (this.noDevices()) {
+      return (
+        <p />
+      )
+    }
+
+    if (!deviceData) {
+      return (
+        <Typography variant="h6">
+          <p></p>
+          Click on a device to show it's values
+        </Typography>
+      );
+    }
+
+    if ((deviceData.deviceData || []).length === 0) {
+      return (
+        <p />
+      );
+    }
+
+    return (
+      <Fragment>
+        <p></p>
+        <Box bgcolor="info.main" p={2} mt={1} mb={1}>
+          <Typography variant="body1">
+            {deviceData.deviceName}
+          </Typography>
+        </Box>
+
+        <TableContainer>
+          <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+            <TableHead>
+            </TableHead>
+            <TableBody>
+              {deviceData.deviceData.map(deviceData => (
+                <TableRow key={deviceData.name}>
+                  <TableCell component="th" scope="row">
+                    {deviceData.name}
+                  </TableCell>
+                  <TableCell align="left">
+                    {deviceData.value}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Fragment>
+    );
+
+  }
+
   render() {
     return (
       <Fragment>
         <br></br>
         {this.createTableItems()}
+        {this.renderDeviceData()}
         <br></br>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1} padding={1}>

interface/src/project/EMSESPtypes.ts

@@ -24,6 +24,7 @@ export interface EMSESPStatus {
 }
 
 export interface Device {
+  id: number;
   type: string;
   brand: string;
   name: string;
@@ -36,3 +37,13 @@ export interface EMSESPDevices {
   devices: Device[];
 }
 
+export interface DeviceData {
+  name: string;
+  value: string;
+}
+
+export interface EMSESPDeviceData {
+  deviceName: string;
+  deviceData: DeviceData[];
+}
+