Set sensornames from web

interface/src/project/EMSESPDevicesForm.tsx

@@ -45,16 +45,19 @@ import {
   Device,
   DeviceValue,
   DeviceValueUOM,
-  DeviceValueUOM_s
+  DeviceValueUOM_s,
+  Sensor
 } from './EMSESPtypes';
 
 import ValueForm from './ValueForm';
+import SensorForm from './SensorForm';
 
 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';
+export const WRITE_SENSOR_ENDPOINT = ENDPOINT_ROOT + 'writeSensor';
 
 const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
@@ -94,6 +97,7 @@ interface EMSESPDevicesFormState {
   deviceData?: EMSESPDeviceData;
   selectedDevice?: number;
   edit_devicevalue?: DeviceValue;
+  edit_sensorname?: Sensor;
 }
 
 type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> &
@@ -215,6 +219,65 @@ class EMSESPDevicesForm extends Component<
     this.setState({ edit_devicevalue: dv });
   };
 
+  handleSensorChange = (name: keyof Sensor) => (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({
+      edit_sensorname: {
+        ...this.state.edit_sensorname!,
+        [name]: extractEventValue(event)
+      }
+    });
+  };
+
+  cancelEditingSensor = () => {
+    this.setState({ edit_sensorname: undefined });
+  };
+
+  doneEditingSensor = () => {
+    const { edit_sensorname } = this.state;
+
+    redirectingAuthorizedFetch(WRITE_SENSOR_ENDPOINT, {
+      method: 'POST',
+      body: JSON.stringify({
+        sensorname: edit_sensorname
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+      .then((response) => {
+        if (response.status === 200) {
+          this.props.enqueueSnackbar('Sensorname set', {
+            variant: 'success'
+          });
+        } else if (response.status === 204) {
+          this.props.enqueueSnackbar('Sensorname not set', {
+            variant: 'error'
+          });
+        } else if (response.status === 403) {
+          this.props.enqueueSnackbar('Write access denied', {
+            variant: 'error'
+          });
+        } else {
+          throw Error('Unexpected response code: ' + response.status);
+        }
+      })
+      .catch((error) => {
+        this.props.enqueueSnackbar(error.message || 'Problem writing value', {
+          variant: 'error'
+        });
+      });
+
+    if (edit_sensorname) {
+      this.setState({ edit_sensorname: undefined });
+    }
+  };
+
+  sendSensor = (sn: Sensor) => {
+    this.setState({ edit_sensorname: sn });
+  };
+
   noDevices = () => {
     return this.props.data.devices.length === 0;
   };
@@ -298,28 +361,47 @@ class EMSESPDevicesForm extends Component<
 
   renderSensorItems() {
     const { data } = this.props;
+    const me = this.props.authenticatedContext.me;
     return (
       <TableContainer>
         <p></p>
         <Typography variant="h6" color="primary" paragraph>
-          Dallas Sensors
+          Sensors
         </Typography>
         {!this.noSensors() && (
           <Table size="small" padding="default">
             <TableHead>
               <TableRow>
+                <StyledTableCell
+                  padding="checkbox"
+                  style={{ width: 18 }}
+                ></StyledTableCell>
                 <StyledTableCell>Sensor #</StyledTableCell>
-                <StyledTableCell align="center">ID</StyledTableCell>
+                <StyledTableCell align="left">ID / Name</StyledTableCell>
                 <StyledTableCell align="right">Temperature</StyledTableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {data.sensors.map((sensorData) => (
-                <TableRow key={sensorData.no}>
+                <TableRow key={sensorData.no} hover>
+                  <TableCell padding="checkbox" style={{ width: 18 }}>
+                    {me.admin && (
+                      <CustomTooltip title="change name" placement="left-end">
+                        <IconButton
+                          edge="start"
+                          size="small"
+                          aria-label="Edit"
+                          onClick={() => this.sendSensor(sensorData)}
+                        >
+                          <EditIcon color="primary" fontSize="small" />
+                        </IconButton>
+                      </CustomTooltip>
+                    )}
+                  </TableCell>
                   <TableCell component="th" scope="row">
                     {sensorData.no}
                   </TableCell>
-                  <TableCell align="center">{sensorData.id}</TableCell>
+                  <TableCell align="left">{sensorData.id}</TableCell>
                   <TableCell align="right">
                     {formatValue(sensorData.temp, DeviceValueUOM.DEGREES, 1)}
                   </TableCell>
@@ -339,6 +421,34 @@ class EMSESPDevicesForm extends Component<
     );
   }
 
+  renderAnalog() {
+    const { data } = this.props;
+    return (
+      <TableContainer>
+        {data.analog > 0 && (
+          <Table size="small" padding="default">
+            <TableHead>
+              <TableRow>
+                <StyledTableCell>Sensortype</StyledTableCell>
+                <StyledTableCell align="right">Value</StyledTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableCell component="th" scope="row">
+                  Analog Input
+                </TableCell>
+                <TableCell align="right">
+                  {formatValue(data.analog, DeviceValueUOM.MV, 0)}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        )}
+      </TableContainer>
+    );
+  }
+
   renderScanDevicesDialog() {
     return (
       <Dialog
@@ -504,13 +614,14 @@ class EMSESPDevicesForm extends Component<
   }
 
   render() {
-    const { edit_devicevalue } = this.state;
+    const { edit_devicevalue, edit_sensorname } = this.state;
     return (
       <Fragment>
         <br></br>
         {this.renderDeviceItems()}
         {this.renderDeviceData()}
         {this.renderSensorItems()}
+        {this.renderAnalog()}
         <br></br>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1} padding={1}>
@@ -542,6 +653,14 @@ class EMSESPDevicesForm extends Component<
             handleValueChange={this.handleValueChange}
           />
         )}
+        {edit_sensorname && (
+          <SensorForm
+            sensor={edit_sensorname}
+            onDoneEditing={this.doneEditingSensor}
+            onCancelEditing={this.cancelEditingSensor}
+            handleSensorChange={this.handleSensorChange}
+          />
+        )}
       </Fragment>
     );
   }

interface/src/project/EMSESPtypes.ts

@@ -60,6 +60,7 @@ export interface Sensor {
 export interface EMSESPDevices {
   devices: Device[];
   sensors: Sensor[];
+  analog: number;
 }
 
 export interface DeviceValue {
@@ -93,7 +94,8 @@ export enum DeviceValueUOM {
   DBM,
   NUM,
   BOOLEAN,
-  LIST
+  LIST,
+  MV
 }
 
 export const DeviceValueUOM_s = [
@@ -114,5 +116,6 @@ export const DeviceValueUOM_s = [
   'dBm',
   'number',
   'on/off',
-  ''
+  '',
+  'mV'
 ];

interface/src/project/SensorForm.tsx

@@ -0,0 +1,92 @@
+import React, { RefObject } from 'react';
+import { ValidatorForm } from 'react-material-ui-form-validator';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  FormHelperText,
+  OutlinedInput
+} from '@material-ui/core';
+
+import { FormButton } from '../components';
+import { Sensor } from './EMSESPtypes';
+
+interface SensorFormProps {
+  sensor: Sensor;
+  onDoneEditing: () => void;
+  onCancelEditing: () => void;
+  handleSensorChange: (
+    data: keyof Sensor
+  ) => (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+class SensorForm extends React.Component<SensorFormProps> {
+  formRef: RefObject<any> = React.createRef();
+
+  submit = () => {
+    this.formRef.current.submit();
+  };
+
+  render() {
+    const {
+      sensor,
+      handleSensorChange,
+      onDoneEditing,
+      onCancelEditing
+    } = this.props;
+
+    return (
+      <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
+        <Dialog
+          maxWidth="xs"
+          onClose={onCancelEditing}
+          aria-labelledby="user-form-dialog-title"
+          open
+        >
+          <DialogTitle id="user-form-dialog-title">
+            Change Sensor Name
+          </DialogTitle>
+          <DialogContent dividers>
+            <FormHelperText id="outlined-value-name-text">
+              Name of sensor #{sensor.no}
+            </FormHelperText>
+            <OutlinedInput
+              id="outlined-adornment-value"
+              value={sensor.id}
+              autoFocus
+              fullWidth
+              onChange={handleSensorChange('id')}
+              aria-describedby="outlined-value-name-text"
+              inputProps={{
+                'aria-label': 'id'
+              }}
+            />
+            <FormHelperText>
+              (optional 'offset' separated by space)
+            </FormHelperText>
+          </DialogContent>
+          <DialogActions>
+            <FormButton
+              variant="contained"
+              color="secondary"
+              onClick={onCancelEditing}
+            >
+              Cancel
+            </FormButton>
+            <FormButton
+              variant="contained"
+              color="primary"
+              type="submit"
+              onClick={this.submit}
+            >
+              Done
+            </FormButton>
+          </DialogActions>
+        </Dialog>
+      </ValidatorForm>
+    );
+  }
+}
+
+export default SensorForm;