device values table reformatting

interface/src/project/EMSESPDevicesForm.tsx

@@ -8,6 +8,8 @@ import {
 
 import RefreshIcon from "@material-ui/icons/Refresh";
 import ListIcon from "@material-ui/icons/List";
+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";
@@ -44,11 +46,10 @@ interface EMSESPDevicesFormState {
   confirmScanDevices: boolean;
   processing: boolean;
   deviceData?: EMSESPDeviceData;
+  selectedDevice?: number;
 }
 
-type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> &
+type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> & AuthenticatedContextProps & WithWidthProps;
-  AuthenticatedContextProps &
-  WithWidthProps;
 
 function formatTemp(t: string) {
   if (t == null) {
@@ -67,9 +68,20 @@ function formatUnit(u: string) {
 class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesFormState> {
   state: EMSESPDevicesFormState = {
     confirmScanDevices: false,
-    processing: false,
+    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);
+
+    // this.setState({
+    //   user: undefined
+    // });
+  }
+
   noDevices = () => {
     return this.props.data.devices.length === 0;
   };
@@ -95,50 +107,26 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
             size="small"
             padding={isWidthDown("xs", width!) ? "none" : "default"}
           >
-            <TableHead>
-              <TableRow>
-                <StyledTableCell>Type</StyledTableCell>
-                <StyledTableCell align="center">Brand</StyledTableCell>
-                <StyledTableCell align="center">Model</StyledTableCell>
-                <StyledTableCell align="center">Device ID</StyledTableCell>
-                <StyledTableCell align="center">Product ID</StyledTableCell>
-                <StyledTableCell align="center">Version</StyledTableCell>
-                <StyledTableCell></StyledTableCell>
-              </TableRow>
-            </TableHead>
             <TableBody>
               {data.devices.sort(compareDevices).map((device) => (
                 <TableRow
                   hover
                   key={device.id}
-                  onClick={() => this.handleRowClick(device.id)}
+                  onClick={() => this.handleRowClick(device)}
                 >
-                  <TableCell component="th" scope="row">
+                  <TableCell>
                     <Tooltip
-                      title="click for details..."
+                      title={"DeviceID:0x" + ("00" + device.deviceid.toString(16).toUpperCase()).slice(-2) + " ProductID:" + device.productid + " Version:" + device.version}
-                      arrow
+                      arrow placement="right-end"
-                      placement="right-end"
                     >
                       <Button
-                        startIcon={<ListIcon />}
+                        startIcon={<ListIcon />} size="small" variant="outlined"
-                        size="small"
-                        variant="outlined"
                       >
                         {device.type}
                       </Button>
                     </Tooltip>
                   </TableCell>
-                  <TableCell align="center">{device.brand}</TableCell>
+                  <TableCell>{device.brand + " " + device.name} </TableCell>
-                  <TableCell align="center">{device.name}</TableCell>
-                  <TableCell align="center">
-                    0x
-                    {("00" + device.deviceid.toString(16).toUpperCase()).slice(
-                    -2
-                  )}
-                  </TableCell>
-                  <TableCell align="center">{device.productid}</TableCell>
-                  <TableCell align="center">{device.version}</TableCell>
-                  <TableCell></TableCell>
                 </TableRow>
               ))}
             </TableBody>
@@ -148,13 +136,10 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
           <Box
             bgcolor="error.main"
             color="error.contrastText"
-            p={2}
+            p={2} mt={2} mb={2}
-            mt={2}
-            mb={2}
           >
             <Typography variant="body1">
-              No EMS devices found. Check the connections and for possible Tx
+              No EMS devices found. Check the connections and for possible Tx errors.
-              errors.
             </Typography>
           </Box>
         )}
@@ -213,8 +198,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
       >
         <DialogTitle>Confirm Scan Devices</DialogTitle>
         <DialogContent dividers>
-          Are you sure you want to initiate a scan on the EMS bus for all new
+          Are you sure you want to initiate a scan on the EMS bus for all new devices?
-          devices?
         </DialogContent>
         <DialogActions>
           <Button
@@ -268,11 +252,11 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
       });
   };
 
-  handleRowClick = (id: any) => {
+  handleRowClick = (device: any) => {
-    this.setState({ deviceData: undefined });
+    this.setState({ selectedDevice: device.id, deviceData: undefined });
     redirectingAuthorizedFetch(DEVICE_DATA_ENDPOINT, {
       method: "POST",
-      body: JSON.stringify({ id: id }),
+      body: JSON.stringify({ id: device.id }),
       headers: {
         "Content-Type": "application/json",
       },
@@ -321,16 +305,23 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
               size="small"
               padding={isWidthDown("xs", width!) ? "none" : "default"}
             >
-              <TableHead></TableHead>
+              <TableHead>
+              </TableHead>
               <TableBody>
                 {deviceData.data.map((item, i) => {
                   if (i % 3) {
                     return null;
                   } else {
                     return (
-                      <TableRow key={i}>
+                      <TableRow hover key={i}>
-                        <TableCell component="th" scope="row">{deviceData.data[i + 2]}</TableCell>
+                        <TableCell padding="checkbox" style={{ width: 18 }} >
-                        <TableCell align="right">{deviceData.data[i]}{formatUnit(deviceData.data[i + 1])}</TableCell>
+                          <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>
                       </TableRow>
                     );
                   }

interface/src/security/ManageUsersForm.tsx

@@ -122,9 +122,7 @@ class ManageUsersForm extends React.Component<ManageUsersFormProps, ManageUsersF
                     {user.username}
                   </TableCell>
                   <TableCell align="center">
-                    {
+                    {user.admin ? <CheckIcon /> : <CloseIcon />}
-                      user.admin ? <CheckIcon /> : <CloseIcon />
-                    }
                   </TableCell>
                   <TableCell align="center">
                     <IconButton size="small" aria-label="Delete" onClick={() => this.removeUser(user)}>

mock-api/server.js

@@ -119,13 +119,13 @@ const emsesp_settings = {
 };
 const emsesp_alldevices = {
     "devices": [{
-        "id": 1, "type": "Thermostat", "brand": "---", "name": "RC20/Moduline 300",
+        "id": 1, "type": "Thermostat", "brand": "", "name": "RC20/Moduline 300",
         "deviceid": 23, "productid": 77, "version": "03.03"
     }, {
         "id": 2, "type": "Boiler", "brand": "Nefit", "name": "GBx72/Trendline/Cerapur/Greenstar Si/27i",
         "deviceid": 8, "productid": 123, "version": "06.01"
     }, {
-        "id": 3, "type": "Controller", "brand": "---", "name": "BC10",
+        "id": 3, "type": "Controller", "brand": "", "name": "BC10",
         "deviceid": 9, "productid": 190, "version": "01.03"
     }],
     "sensors": []

src/emsdevice.cpp

@@ -149,7 +149,7 @@ std::string EMSdevice::brand_to_string() const {
         break;
     case EMSdevice::Brand::NO_BRAND:
     default:
-        return read_flash_string(F("---"));
+        return read_flash_string(F(""));
         break;
     }
 

src/version.h

@@ -1,2 +1,2 @@
-#define EMSESP_APP_VERSION "3.0.2b1"
+#define EMSESP_APP_VERSION "3.0.3b0"
 #define EMSESP_PLATFORM "ESP32"