feat: Call commands from the Web UI #18

interface/src/project/EMSESPDevicesForm.tsx

@@ -12,13 +12,17 @@ import IconButton from '@material-ui/core/IconButton';
 import EditIcon from '@material-ui/icons/Edit';
 
 import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from "../authentication";
-import { RestFormProps, FormButton } from "../components";
+import { RestFormProps, FormButton, extractEventValue } from "../components";
 
-import { EMSESPDevices, EMSESPDeviceData, Device } from "./EMSESPtypes";
+import { EMSESPDevices, EMSESPDeviceData, Device, DeviceValue } from "./EMSESPtypes";
+
+import ValueForm from './ValueForm';
 
 import { ENDPOINT_ROOT } from "../api";
+
 export const SCANDEVICES_ENDPOINT = ENDPOINT_ROOT + "scanDevices";
 export const DEVICE_DATA_ENDPOINT = ENDPOINT_ROOT + "deviceData";
+export const WRITE_VALUE_ENDPOINT = ENDPOINT_ROOT + "writeValue";
 
 const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
@@ -47,6 +51,7 @@ interface EMSESPDevicesFormState {
   processing: boolean;
   deviceData?: EMSESPDeviceData;
   selectedDevice?: number;
+  devicevalue?: DeviceValue;
 }
 
 type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> & AuthenticatedContextProps & WithWidthProps;
@@ -71,15 +76,61 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
     processing: false
   };
 
-  sendCommand = (i: any) => {
-    const name = this.state.deviceData?.data[i+2];
-    const value = this.state.deviceData?.data[i];
-    const deviceType = this.state.selectedDevice;
-    console.log("type: " + deviceType + " name: " + name + " value: " + value);
+  handleValueChange = (name: keyof DeviceValue) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ devicevalue: { ...this.state.devicevalue!, [name]: extractEventValue(event) } });
+  };
 
-    // this.setState({
-    //   user: undefined
-    // });
+  cancelEditingValue = () => {
+    this.setState({
+      devicevalue: undefined
+    });
+  }
+
+  doneEditingValue = () => {
+    const { devicevalue } = this.state;
+
+    redirectingAuthorizedFetch(WRITE_VALUE_ENDPOINT, {
+      method: "POST",
+      body: JSON.stringify({ devicevalue: devicevalue }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => {
+        if (response.status === 200) {
+          this.props.enqueueSnackbar("Write command sent", { variant: "success" });
+          return;
+        }
+        if (response.status === 204) {
+          this.props.enqueueSnackbar("Write command failed", { variant: "error" });
+          return;
+        }
+        throw Error("Unexpected response code: " + response.status);
+      })
+      .catch((error) => {
+        this.props.enqueueSnackbar(
+          error.message || "Problem writing value", { variant: "error" }
+        );
+      });
+
+    if (devicevalue) {
+      this.setState({
+        devicevalue: undefined
+      });
+    }
+
+  };
+
+  sendCommand = (i: any) => {
+    this.setState({
+      devicevalue: {
+        id: this.state.selectedDevice!,
+        data: this.state.deviceData?.data[i]!,
+        uom: this.state.deviceData?.data[i + 1]!,
+        name: this.state.deviceData?.data[i + 2]!,
+        cmd: this.state.deviceData?.data[i + 3]!,
+      }
+    });
   }
 
   noDevices = () => {
@@ -109,19 +160,13 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
           >
             <TableBody>
               {data.devices.sort(compareDevices).map((device) => (
-                <TableRow
-                  hover
-                  key={device.id}
-                  onClick={() => this.handleRowClick(device)}
-                >
+                <TableRow hover key={device.id} onClick={() => this.handleRowClick(device)}>
                   <TableCell>
                     <Tooltip
                       title={"DeviceID:0x" + ("00" + device.deviceid.toString(16).toUpperCase()).slice(-2) + " ProductID:" + device.productid + " Version:" + device.version}
                       arrow placement="right-end"
                     >
-                      <Button
-                        startIcon={<ListIcon />} size="small" variant="outlined"
-                      >
+                      <Button startIcon={<ListIcon />} size="small" variant="outlined">
                         {device.type}
                       </Button>
                     </Tooltip>
@@ -201,21 +246,11 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
           Are you sure you want to initiate a scan on the EMS bus for all new devices?
         </DialogContent>
         <DialogActions>
-          <Button
-            variant="contained"
-            onClick={this.onScanDevicesRejected}
-            color="secondary"
-          >
+          <Button variant="contained" onClick={this.onScanDevicesRejected} color="secondary">
             Cancel
           </Button>
           <Button
-            startIcon={<RefreshIcon />}
-            variant="contained"
-            onClick={this.onScanDevicesConfirmed}
-            disabled={this.state.processing}
-            color="primary"
-            autoFocus
-          >
+            startIcon={<RefreshIcon />} variant="contained" onClick={this.onScanDevicesConfirmed} disabled={this.state.processing} color="primary" autoFocus>
             Start Scan
           </Button>
         </DialogActions>
@@ -309,16 +344,18 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
               </TableHead>
               <TableBody>
                 {deviceData.data.map((item, i) => {
-                  if (i % 3) {
+                  if (i % 4) {
                     return null;
                   } else {
                     return (
                       <TableRow hover key={i}>
                         <TableCell padding="checkbox" style={{ width: 18 }} >
-                          <IconButton edge="start" size="small" aria-label="Edit" 
-                          onClick={() => this.sendCommand(i)}>
-                            <EditIcon fontSize="small"/>
-                          </IconButton>
+                          {deviceData.data[i + 3] && (
+                            <IconButton edge="start" size="small" aria-label="Edit"
+                              onClick={() => this.sendCommand(i)}>
+                              <EditIcon fontSize="small" />
+                            </IconButton>
+                          )}
                         </TableCell>
                         <TableCell padding="none" component="th" scope="row">{deviceData.data[i + 2]}</TableCell>
                         <TableCell padding="none" align="right">{deviceData.data[i]}{formatUnit(deviceData.data[i + 1])}</TableCell>
@@ -342,6 +379,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
   }
 
   render() {
+    const { devicevalue } = this.state;
     return (
       <Fragment>
         <br></br>
@@ -351,27 +389,26 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
         <br></br>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1} padding={1}>
-            <FormButton
-              startIcon={<RefreshIcon />}
-              variant="contained"
-              color="secondary"
-              onClick={this.props.loadData}
-            >
+            <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}            >
               Refresh
             </FormButton>
           </Box>
           <Box flexWrap="none" padding={1} whiteSpace="nowrap">
-            <FormButton
-              startIcon={<RefreshIcon />}
-              variant="contained"
-              color="primary"
-              onClick={this.onScanDevices}
-            >
+            <FormButton startIcon={<RefreshIcon />} variant="contained" onClick={this.onScanDevices}            >
               Scan Devices
             </FormButton>
           </Box>
         </Box>
         {this.renderScanDevicesDialog()}
+        {
+          devicevalue &&
+          <ValueForm
+            devicevalue={devicevalue}
+            onDoneEditing={this.doneEditingValue}
+            onCancelEditing={this.cancelEditingValue}
+            handleValueChange={this.handleValueChange}
+          />
+        }
       </Fragment>
     );
   }