rename allDevices endpoint to data. improve dallas sensor form

2025-12-07 08:19:52 +03:00 · 2021-07-20 13:01:22 +02:00
parent 33adf518ae
commit ba295385ab
13 changed files with 140 additions and 145 deletions
--- a/interface/src/project/EMSESPDashboard.tsx
+++ b/interface/src/project/EMSESPDashboard.tsx
@@ -8,7 +8,7 @@ import { MenuAppBar } from '../components';
 import { AuthenticatedRoute } from '../authentication';

 import EMSESPStatusController from './EMSESPStatusController';
-import EMSESPDevicesController from './EMSESPDevicesController';
+import EMSESPDataController from './EMSESPDataController';
 import EMSESPHelp from './EMSESPHelp';

 class EMSESP extends Component<RouteComponentProps> {
@@ -24,18 +24,15 @@ class EMSESP extends Component<RouteComponentProps> {
          onChange={(e, path) => this.handleTabChange(path)}
          variant="fullWidth"
        >
-          <Tab
-            value={`/${PROJECT_PATH}/devices`}
-            label="Devices &amp; Sensors"
-          />
+          <Tab value={`/${PROJECT_PATH}/data`} label="Devices &amp; Sensors" />
          <Tab value={`/${PROJECT_PATH}/status`} label="EMS Status" />
          <Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
        </Tabs>
        <Switch>
          <AuthenticatedRoute
            exact
-            path={`/${PROJECT_PATH}/devices`}
-            component={EMSESPDevicesController}
+            path={`/${PROJECT_PATH}/data`}
+            component={EMSESPDataController}
          />
          <AuthenticatedRoute
            exact
@@ -47,7 +44,7 @@ class EMSESP extends Component<RouteComponentProps> {
            path={`/${PROJECT_PATH}/help`}
            component={EMSESPHelp}
          />
-          <Redirect to={`/${PROJECT_PATH}/devices`} />
+          <Redirect to={`/${PROJECT_PATH}/data`} />
        </Switch>
      </MenuAppBar>
    );
--- a/interface/src/project/EMSESPDataController.tsx
+++ b/interface/src/project/EMSESPDataController.tsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+import {
+  restController,
+  RestControllerProps,
+  RestFormLoader,
+  SectionContent
+} from '../components';
+
+import { ENDPOINT_ROOT } from '../api';
+import EMSESPDataForm from './EMSESPDataForm';
+import { EMSESPData } from './EMSESPtypes';
+
+export const EMSESP_DATA_ENDPOINT = ENDPOINT_ROOT + 'data';
+
+type EMSESPDataControllerProps = RestControllerProps<EMSESPData>;
+
+class EMSESPDataController extends Component<EMSESPDataControllerProps> {
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="Devices &amp; Sensors">
+        <RestFormLoader
+          {...this.props}
+          render={(formProps) => <EMSESPDataForm {...formProps} />}
+        />
+      </SectionContent>
+    );
+  }
+}
+
+export default restController(EMSESP_DATA_ENDPOINT, EMSESPDataController);
--- a/interface/src/project/EMSESPDevicesForm.tsx
+++ b/interface/src/project/EMSESPDevicesForm.tsx
@@ -40,7 +40,7 @@ import {
 import { RestFormProps, FormButton, extractEventValue } from '../components';

 import {
-  EMSESPDevices,
+  EMSESPData,
  EMSESPDeviceData,
  Device,
  DeviceValue,
@@ -91,16 +91,16 @@ function compareDevices(a: Device, b: Device) {
  return 0;
 }

-interface EMSESPDevicesFormState {
+interface EMSESPDataFormState {
  confirmScanDevices: boolean;
  processing: boolean;
  deviceData?: EMSESPDeviceData;
  selectedDevice?: number;
  edit_devicevalue?: DeviceValue;
-  edit_sensorname?: Sensor;
+  edit_Sensor?: Sensor;
 }

-type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> &
+type EMSESPDataFormProps = RestFormProps<EMSESPData> &
  AuthenticatedContextProps &
  WithWidthProps;

@@ -150,16 +150,16 @@ function formatValue(value: any, uom: number, digit: number) {
  }
 }

-class EMSESPDevicesForm extends Component<
-  EMSESPDevicesFormProps,
-  EMSESPDevicesFormState
+class EMSESPDataForm extends Component<
+  EMSESPDataFormProps,
+  EMSESPDataFormState
 > {
-  state: EMSESPDevicesFormState = {
+  state: EMSESPDataFormState = {
    confirmScanDevices: false,
    processing: false
  };

-  handleValueChange = (name: keyof DeviceValue) => (
+  handleDeviceValueChange = (name: keyof DeviceValue) => (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    this.setState({
@@ -170,11 +170,11 @@ class EMSESPDevicesForm extends Component<
    });
  };

-  cancelEditingValue = () => {
+  cancelEditingDeviceValue = () => {
    this.setState({ edit_devicevalue: undefined });
  };

-  doneEditingValue = () => {
+  doneEditingDeviceValue = () => {
    const { edit_devicevalue, selectedDevice } = this.state;

    redirectingAuthorizedFetch(WRITE_VALUE_ENDPOINT, {
@@ -223,24 +223,24 @@ class EMSESPDevicesForm extends Component<
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    this.setState({
-      edit_sensorname: {
-        ...this.state.edit_sensorname!,
+      edit_Sensor: {
+        ...this.state.edit_Sensor!,
        [name]: extractEventValue(event)
      }
    });
  };

  cancelEditingSensor = () => {
-    this.setState({ edit_sensorname: undefined });
+    this.setState({ edit_Sensor: undefined });
  };

  doneEditingSensor = () => {
-    const { edit_sensorname } = this.state;
+    const { edit_Sensor } = this.state;

    redirectingAuthorizedFetch(WRITE_SENSOR_ENDPOINT, {
      method: 'POST',
      body: JSON.stringify({
-        sensorname: edit_sensorname
+        sensor: edit_Sensor
      }),
      headers: {
        'Content-Type': 'application/json'
@@ -248,11 +248,11 @@ class EMSESPDevicesForm extends Component<
    })
      .then((response) => {
        if (response.status === 200) {
-          this.props.enqueueSnackbar('Sensorname set', {
+          this.props.enqueueSnackbar('Sensor updated', {
            variant: 'success'
          });
        } else if (response.status === 204) {
-          this.props.enqueueSnackbar('Sensorname not set', {
+          this.props.enqueueSnackbar('Sensor change failed', {
            variant: 'error'
          });
        } else if (response.status === 403) {
@@ -269,13 +269,13 @@ class EMSESPDevicesForm extends Component<
        });
      });

-    if (edit_sensorname) {
-      this.setState({ edit_sensorname: undefined });
+    if (edit_Sensor) {
+      this.setState({ edit_Sensor: undefined });
    }
  };

  sendSensor = (sn: Sensor) => {
-    this.setState({ edit_sensorname: sn });
+    this.setState({ edit_Sensor: sn });
  };

  noDevices = () => {
@@ -386,7 +386,7 @@ class EMSESPDevicesForm extends Component<
                <TableRow key={sensorData.no} hover>
                  <TableCell padding="checkbox" style={{ width: 18 }}>
                    {me.admin && (
-                      <CustomTooltip title="change name" placement="left-end">
+                      <CustomTooltip title="edit" placement="left-end">
                        <IconButton
                          edge="start"
                          size="small"
@@ -614,7 +614,7 @@ class EMSESPDevicesForm extends Component<
  }

  render() {
-    const { edit_devicevalue, edit_sensorname } = this.state;
+    const { edit_devicevalue, edit_Sensor } = this.state;
    return (
      <Fragment>
        <br></br>
@@ -648,14 +648,14 @@ class EMSESPDevicesForm extends Component<
        {edit_devicevalue && (
          <ValueForm
            devicevalue={edit_devicevalue}
-            onDoneEditing={this.doneEditingValue}
-            onCancelEditing={this.cancelEditingValue}
-            handleValueChange={this.handleValueChange}
+            onDoneEditing={this.doneEditingDeviceValue}
+            onCancelEditing={this.cancelEditingDeviceValue}
+            handleValueChange={this.handleDeviceValueChange}
          />
        )}
-        {edit_sensorname && (
+        {edit_Sensor && (
          <SensorForm
-            sensor={edit_sensorname}
+            sensor={edit_Sensor}
            onDoneEditing={this.doneEditingSensor}
            onCancelEditing={this.cancelEditingSensor}
            handleSensorChange={this.handleSensorChange}
@@ -666,4 +666,4 @@ class EMSESPDevicesForm extends Component<
  }
 }

-export default withAuthenticatedContext(withWidth()(EMSESPDevicesForm));
+export default withAuthenticatedContext(withWidth()(EMSESPDataForm));
--- a/interface/src/project/EMSESPDevicesController.tsx
+++ b/interface/src/project/EMSESPDevicesController.tsx
@@ -1,35 +0,0 @@
-import React, { Component } from 'react';
-
-import {
-  restController,
-  RestControllerProps,
-  RestFormLoader,
-  SectionContent
-} from '../components';
-
-import { ENDPOINT_ROOT } from '../api';
-import EMSESPDevicesForm from './EMSESPDevicesForm';
-import { EMSESPDevices } from './EMSESPtypes';
-
-export const EMSESP_DEVICES_ENDPOINT = ENDPOINT_ROOT + 'allDevices';
-
-type EMSESPDevicesControllerProps = RestControllerProps<EMSESPDevices>;
-
-class EMSESPDevicesController extends Component<EMSESPDevicesControllerProps> {
-  componentDidMount() {
-    this.props.loadData();
-  }
-
-  render() {
-    return (
-      <SectionContent title="Devices &amp; Sensors">
-        <RestFormLoader
-          {...this.props}
-          render={(formProps) => <EMSESPDevicesForm {...formProps} />}
-        />
-      </SectionContent>
-    );
-  }
-}
-
-export default restController(EMSESP_DEVICES_ENDPOINT, EMSESPDevicesController);
--- a/interface/src/project/EMSESPtypes.ts
+++ b/interface/src/project/EMSESPtypes.ts
@@ -54,10 +54,11 @@ export interface Device {
 export interface Sensor {
  no: number;
  id: string;
-  temp: string;
+  temp: number;
+  offset: number;
 }

-export interface EMSESPDevices {
+export interface EMSESPData {
  devices: Device[];
  sensors: Sensor[];
  analog: number;
--- a/interface/src/project/ProjectMenu.tsx
+++ b/interface/src/project/ProjectMenu.tsx
@@ -23,7 +23,7 @@ class ProjectMenu extends Component<ProjectProps> {
          to="/ems-esp/"
          selected={
            path.startsWith('/ems-esp/status') ||
-            path.startsWith('/ems-esp/devices') ||
+            path.startsWith('/ems-esp/data') ||
            path.startsWith('/ems-esp/help')
          }
          button
--- a/interface/src/project/SensorForm.tsx
+++ b/interface/src/project/SensorForm.tsx
@@ -6,7 +6,8 @@ import {
  DialogContent,
  DialogActions,
  FormHelperText,
-  OutlinedInput
+  OutlinedInput,
+  InputAdornment
 } from '@material-ui/core';

 import { FormButton } from '../components';
@@ -45,26 +46,27 @@ class SensorForm extends React.Component<SensorFormProps> {
          open
        >
          <DialogTitle id="user-form-dialog-title">
-            Change Sensor Name
+            Editing Sensor #{sensor.no}
          </DialogTitle>
          <DialogContent dividers>
-            <FormHelperText id="outlined-value-name-text">
-              Name of sensor #{sensor.no}
-            </FormHelperText>
+            <FormHelperText>Name (no spaces)</FormHelperText>
            <OutlinedInput
-              id="outlined-adornment-value"
+              id="id"
              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>
+
+            <FormHelperText>Custom Offset</FormHelperText>
+            <OutlinedInput
+              id="offset"
+              value={sensor.offset}
+              fullWidth
+              type="number"
+              onChange={handleSensorChange('offset')}
+              endAdornment={<InputAdornment position="end">°C</InputAdornment>}
+            />
          </DialogContent>
          <DialogActions>
            <FormButton