web UI usability changes

2025-12-06 15:59:52 +03:00 · 2020-10-08 21:12:02 +02:00
parent 0cc2abfcfe
commit 45945c9926
5 changed files with 87 additions and 77 deletions
--- a/interface/src/CustomMuiTheme.tsx
+++ b/interface/src/CustomMuiTheme.tsx
@@ -25,7 +25,7 @@ const theme = createMuiTheme({
    success: {
      main: green[500]
    }
-  },
+  }
 });

 export default class CustomMuiTheme extends Component {
--- a/interface/src/project/EMSESPDevicesForm.tsx
+++ b/interface/src/project/EMSESPDevicesForm.tsx
@@ -2,20 +2,14 @@ import React, { Component, Fragment } from "react";
 import { withStyles, Theme, createStyles } from '@material-ui/core/styles';

 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TableContainer,
-  withWidth,
-  WithWidthProps,
-  isWidthDown,
-  Button,
+  Table, TableBody, TableCell, TableHead, TableRow, TableContainer,
+  withWidth, WithWidthProps, isWidthDown,
+  Button, Tooltip,
  DialogTitle, DialogContent, DialogActions, Box, Dialog, Typography
 } from "@material-ui/core";

 import RefreshIcon from "@material-ui/icons/Refresh";
+import ListIcon from '@material-ui/icons/List';

 import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';

@@ -58,6 +52,17 @@ interface EMSESPDevicesFormState {
  deviceData?: EMSESPDeviceData;
 }

+const LightTooltip = withStyles((theme: Theme) => ({
+  tooltip: {
+    // backgroundColor: theme.palette.common.black,
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.common.white,
+    boxShadow: theme.shadows[1],
+    borderRadius: "18px",
+    fontSize: 11
+  },
+}))(Tooltip);
+
 type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> & AuthenticatedContextProps & WithWidthProps;

 class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesFormState> {
@@ -76,9 +81,10 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
  };

  noDeviceData = () => {
-    return (this.state.deviceData?.deviceData.length === 0);
+    return ((this.state.deviceData?.deviceData || []).length === 0);
  };

+
  createDeviceItems() {
    const { width, data } = this.props;
    return (
@@ -86,9 +92,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
        <Typography variant="h6" color="primary" >
          Devices
        </Typography>
-        <Typography variant="caption" color="initial" paragraph>
-          <i>(click to show details)</i>
-        </Typography>
+        <p></p>
        {!this.noDevices() && (
          <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
            <TableHead>
@@ -99,15 +103,18 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
                <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)}
-                >
+                <TableRow hover key={device.id} onClick={() => this.handleRowClick(device.id)}>
                  <TableCell component="th" scope="row">
-                    {device.type}
+                    <LightTooltip title="Show values..." placement="right">
+                      <Button startIcon={<ListIcon />} size="small" variant="outlined" color="primary">
+                        {device.type}
+                      </Button>
+                    </LightTooltip >
                  </TableCell>
                  <TableCell align="center">
                    {device.brand}
@@ -124,6 +131,9 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
                  <TableCell align="center">
                    {device.version}
                  </TableCell>
+                  <TableCell>
+
+                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
@@ -176,7 +186,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
          (
            <Box color="warning.main" p={0} mt={0} mb={0}>
              <Typography variant="body1">
-                <i>No connected Dallas temperature sensors detected</i>
+                <i>There are no external temperature sensors connected</i>
              </Typography>
            </Box>
          )
@@ -265,10 +275,6 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
      return;
    }

-    if ((deviceData.deviceData || []).length === 0) {
-      return;
-    }
-
    return (
      <Fragment>
        <p></p>
@@ -277,25 +283,35 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
            {deviceData.deviceName}
          </Typography>
        </Box>
-
-        <TableContainer>
-          <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
-            <TableHead>
-            </TableHead>
-            <TableBody>
-              {deviceData.deviceData.map(deviceData => (
-                <TableRow key={deviceData.n}>
-                  <TableCell component="th" scope="row">
-                    {deviceData.n}
-                  </TableCell>
-                  <TableCell align="right">
-                    {deviceData.v}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
+        {!this.noDeviceData() && (
+          <TableContainer>
+            <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+              <TableHead>
+              </TableHead>
+              <TableBody>
+                {deviceData.deviceData.map(deviceData => (
+                  <TableRow key={deviceData.n}>
+                    <TableCell component="th" scope="row">
+                      {deviceData.n}
+                    </TableCell>
+                    <TableCell align="right">
+                      {deviceData.v}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+        {this.noDeviceData() &&
+          (
+            <Box color="warning.main" p={0} mt={0} mb={0}>
+              <Typography variant="body1">
+                <i>No data available for this device</i>
+              </Typography>
+            </Box>
+          )
+        }
      </Fragment>
    );

--- a/interface/src/project/EMSESPStatus.ts
+++ b/interface/src/project/EMSESPStatus.ts
@@ -29,3 +29,12 @@ export const busStatus = ({ status }: EMSESPStatus) => {
      return "Unknown";
  }
 }
+
+export const qualityHighlight = ( value: number, theme: Theme) => {
+  if (value >= 95) {
+    return theme.palette.success.main;
+  }
+
+  return theme.palette.error.main;
+}
+
--- a/interface/src/project/EMSESPStatusForm.tsx
+++ b/interface/src/project/EMSESPStatusForm.tsx
@@ -1,12 +1,11 @@
 import React, { Component, Fragment } from "react";

-import { WithTheme, withTheme, withStyles, Theme, createStyles } from "@material-ui/core/styles";
+import { WithTheme, withTheme } from "@material-ui/core/styles";
 import {
  TableContainer,
  Table,
  TableBody,
  TableCell,
-  TableHead,
  TableRow,
  List,
  ListItem,
@@ -14,7 +13,7 @@ import {
  ListItemText,
  withWidth,
  WithWidthProps,
-  isWidthDown
+  isWidthDown,
 } from "@material-ui/core";

 import RefreshIcon from "@material-ui/icons/Refresh";
@@ -30,7 +29,7 @@ import {
 import {
  busStatus,
  busStatusHighlight,
-  isConnected
+  isConnected,
 } from "./EMSESPStatus";

 import { EMSESPStatus } from "./EMSESPtypes";
@@ -41,18 +40,6 @@ function formatNumber(num: number) {

 type EMSESPStatusFormProps = RestFormProps<EMSESPStatus> & WithTheme & WithWidthProps;

-const StyledTableCell = withStyles((theme: Theme) =>
-  createStyles({
-    head: {
-      backgroundColor: theme.palette.common.black,
-      color: theme.palette.common.white,
-    },
-    body: {
-      fontSize: 14,
-    },
-  }),
-)(TableCell);
-
 class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {

  createListItems() {
@@ -65,41 +52,39 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
              <DeviceHubIcon />
            </HighlightAvatar>
          </ListItemAvatar>
-          <ListItemText primary="EMS Connection Status" secondary={busStatus(data)} />
+          <ListItemText primary="Connection Status" secondary={busStatus(data)} />
        </ListItem>
        {isConnected(data) && (
          <TableContainer>
            <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
-              <TableHead>
-                <TableRow>
-                  <StyledTableCell>Statistic</StyledTableCell>
-                  <StyledTableCell align="right"># Telegrams</StyledTableCell>
-                </TableRow>
-              </TableHead>
              <TableBody>
                <TableRow>
                  <TableCell>
-                    (Rx) Received telegrams
+                    Received Telegrams
+                  </TableCell>
+                  <TableCell align="right">{formatNumber(data.rx_received)}
                  </TableCell>
-                  <TableCell align="right">{formatNumber(data.rx_received)}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell >
-                    (Rx) Quality
+                    Rx Quality
+                  </TableCell>
+                  <TableCell align="right">{data.rx_quality}&nbsp;%
                  </TableCell>
-                  <TableCell align="right">{formatNumber(data.rx_quality)}%</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell >
-                    (Tx) Sent telegrams
+                    Sent Telegrams
+                  </TableCell >
+                  <TableCell align="right">{formatNumber(data.tx_sent)}
                  </TableCell>
-                  <TableCell align="right">{formatNumber(data.tx_sent)}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell >
-                    (Tx) Quality
+                    Tx Quality
+                  </TableCell>
+                  <TableCell align="right">{data.tx_quality}&nbsp;%
                  </TableCell>
-                  <TableCell align="right">{formatNumber(data.tx_quality)}%</TableCell>
                </TableRow>
              </TableBody>
            </Table>
--- a/interface/src/security/SecuritySettingsForm.tsx
+++ b/interface/src/security/SecuritySettingsForm.tsx
@@ -24,9 +24,9 @@ class SecuritySettingsForm extends React.Component<SecuritySettingsFormProps> {
      <ValidatorForm onSubmit={this.onSubmit}>
        <PasswordValidator
          validators={['required', 'matchRegexp:^.{1,64}$']}
-          errorMessages={['JWT Secret Required', 'JWT Secret must be 64 characters or less']}
+          errorMessages={['Password Required', 'Password must be 64 characters or less']}
          name="jwt_secret"
-          label="JWT Secret"
+          label="Super User Password"
          fullWidth
          variant="outlined"
          value={data.jwt_secret}
@@ -35,7 +35,7 @@ class SecuritySettingsForm extends React.Component<SecuritySettingsFormProps> {
        />
        <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
          <Typography variant="body1">
-            The JWT secret is used to sign authentication tokens. If you modify the JWT Secret, all users will be signed out.
+            The Super User password is used to sign authentication tokens and also the Console's `su` password. If you modify this all users will be signed out.
          </Typography>
        </Box>
        <FormActions>