andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

web UI usability changes

Browse Source
This commit is contained in:
proddy
2020-10-08 21:12:02 +02:00
parent 0cc2abfcfe
commit 45945c9926
5 changed files with 87 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/src/CustomMuiTheme.tsx
View File

@@ -25,7 +25,7 @@ const theme = createMuiTheme({
success: { success: {
main: green[500] main: green[500]
} }
}, }
}); });
export default class CustomMuiTheme extends Component { export default class CustomMuiTheme extends Component {

100
interface/src/project/EMSESPDevicesForm.tsx
View File

@@ -2,20 +2,14 @@ import React, { Component, Fragment } from "react";
import { withStyles, Theme, createStyles } from '@material-ui/core/styles'; import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
import { import {
Table, Table, TableBody, TableCell, TableHead, TableRow, TableContainer,
TableBody, withWidth, WithWidthProps, isWidthDown,
TableCell, Button, Tooltip,
TableHead,
TableRow,
TableContainer,
withWidth,
WithWidthProps,
isWidthDown,
Button,
DialogTitle, DialogContent, DialogActions, Box, Dialog, Typography DialogTitle, DialogContent, DialogActions, Box, Dialog, Typography
} from "@material-ui/core"; } from "@material-ui/core";
import RefreshIcon from "@material-ui/icons/Refresh"; import RefreshIcon from "@material-ui/icons/Refresh";
import ListIcon from '@material-ui/icons/List';
import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication'; import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
@@ -58,6 +52,17 @@ interface EMSESPDevicesFormState {
deviceData?: EMSESPDeviceData; 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; type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> & AuthenticatedContextProps & WithWidthProps;
class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesFormState> { class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesFormState> {
@@ -76,9 +81,10 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
}; };
noDeviceData = () => { noDeviceData = () => {
return (this.state.deviceData?.deviceData.length === 0); return ((this.state.deviceData?.deviceData || []).length === 0);
}; };
createDeviceItems() { createDeviceItems() {
const { width, data } = this.props; const { width, data } = this.props;
return ( return (
@@ -86,9 +92,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
<Typography variant="h6" color="primary" > <Typography variant="h6" color="primary" >
Devices Devices
</Typography> </Typography>
<Typography variant="caption" color="initial" paragraph> <p></p>
<i>(click to show details)</i>
</Typography>
{!this.noDevices() && ( {!this.noDevices() && (
<Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}> <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
<TableHead> <TableHead>
@@ -99,15 +103,18 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
<StyledTableCell align="center">Device ID</StyledTableCell> <StyledTableCell align="center">Device ID</StyledTableCell>
<StyledTableCell align="center">Product ID</StyledTableCell> <StyledTableCell align="center">Product ID</StyledTableCell>
<StyledTableCell align="center">Version</StyledTableCell> <StyledTableCell align="center">Version</StyledTableCell>
<StyledTableCell></StyledTableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{data.devices.sort(compareDevices).map(device => ( {data.devices.sort(compareDevices).map(device => (
<TableRow hover key={device.id} <TableRow hover key={device.id} onClick={() => this.handleRowClick(device.id)}>
onClick={() => this.handleRowClick(device.id)}
>
<TableCell component="th" scope="row"> <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>
<TableCell align="center"> <TableCell align="center">
{device.brand} {device.brand}
@@ -124,6 +131,9 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
<TableCell align="center"> <TableCell align="center">
{device.version} {device.version}
</TableCell> </TableCell>
<TableCell>
</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
@@ -176,7 +186,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
( (
<Box color="warning.main" p={0} mt={0} mb={0}> <Box color="warning.main" p={0} mt={0} mb={0}>
<Typography variant="body1"> <Typography variant="body1">
<i>No connected Dallas temperature sensors detected</i> <i>There are no external temperature sensors connected</i>
</Typography> </Typography>
</Box> </Box>
) )
@@ -265,10 +275,6 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
return; return;
} }
if ((deviceData.deviceData || []).length === 0) {
return;
}
return ( return (
<Fragment> <Fragment>
<p></p> <p></p>
@@ -277,25 +283,35 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
{deviceData.deviceName} {deviceData.deviceName}
</Typography> </Typography>
</Box> </Box>
{!this.noDeviceData() && (
<TableContainer> <TableContainer>
<Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}> <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
<TableHead> <TableHead>
</TableHead> </TableHead>
<TableBody> <TableBody>
{deviceData.deviceData.map(deviceData => ( {deviceData.deviceData.map(deviceData => (
<TableRow key={deviceData.n}> <TableRow key={deviceData.n}>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{deviceData.n} {deviceData.n}
</TableCell> </TableCell>
<TableCell align="right"> <TableCell align="right">
{deviceData.v} {deviceData.v}
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </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> </Fragment>
); );

9
interface/src/project/EMSESPStatus.ts
View File

@@ -29,3 +29,12 @@ export const busStatus = ({ status }: EMSESPStatus) => {
return "Unknown"; return "Unknown";
} }
} }
export const qualityHighlight = ( value: number, theme: Theme) => {
if (value >= 95) {
return theme.palette.success.main;
}
return theme.palette.error.main;
}

47
interface/src/project/EMSESPStatusForm.tsx
View File

@@ -1,12 +1,11 @@
import React, { Component, Fragment } from "react"; 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 { import {
TableContainer, TableContainer,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableHead,
TableRow, TableRow,
List, List,
ListItem, ListItem,
@@ -14,7 +13,7 @@ import {
ListItemText, ListItemText,
withWidth, withWidth,
WithWidthProps, WithWidthProps,
isWidthDown isWidthDown,
} from "@material-ui/core"; } from "@material-ui/core";
import RefreshIcon from "@material-ui/icons/Refresh"; import RefreshIcon from "@material-ui/icons/Refresh";
@@ -30,7 +29,7 @@ import {
import { import {
busStatus, busStatus,
busStatusHighlight, busStatusHighlight,
isConnected isConnected,
} from "./EMSESPStatus"; } from "./EMSESPStatus";
import { EMSESPStatus } from "./EMSESPtypes"; import { EMSESPStatus } from "./EMSESPtypes";
@@ -41,18 +40,6 @@ function formatNumber(num: number) {
type EMSESPStatusFormProps = RestFormProps<EMSESPStatus> & WithTheme & WithWidthProps; 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> { class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
createListItems() { createListItems() {
@@ -65,41 +52,39 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
<DeviceHubIcon /> <DeviceHubIcon />
</HighlightAvatar> </HighlightAvatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="EMS Connection Status" secondary={busStatus(data)} /> <ListItemText primary="Connection Status" secondary={busStatus(data)} />
</ListItem> </ListItem>
{isConnected(data) && ( {isConnected(data) && (
<TableContainer> <TableContainer>
<Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}> <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
<TableHead>
<TableRow>
<StyledTableCell>Statistic</StyledTableCell>
<StyledTableCell align="right"># Telegrams</StyledTableCell>
</TableRow>
</TableHead>
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell> <TableCell>
(Rx) Received telegrams Received Telegrams
</TableCell>
<TableCell align="right">{formatNumber(data.rx_received)}
</TableCell> </TableCell>
<TableCell align="right">{formatNumber(data.rx_received)}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell > <TableCell >
(Rx) Quality Rx Quality
</TableCell>
<TableCell align="right">{data.rx_quality}&nbsp;%
</TableCell> </TableCell>
<TableCell align="right">{formatNumber(data.rx_quality)}%</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell > <TableCell >
(Tx) Sent telegrams Sent Telegrams
</TableCell >
<TableCell align="right">{formatNumber(data.tx_sent)}
</TableCell> </TableCell>
<TableCell align="right">{formatNumber(data.tx_sent)}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell > <TableCell >
(Tx) Quality Tx Quality
</TableCell>
<TableCell align="right">{data.tx_quality}&nbsp;%
</TableCell> </TableCell>
<TableCell align="right">{formatNumber(data.tx_quality)}%</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>

6
interface/src/security/SecuritySettingsForm.tsx
View File

@@ -24,9 +24,9 @@ class SecuritySettingsForm extends React.Component<SecuritySettingsFormProps> {
<ValidatorForm onSubmit={this.onSubmit}> <ValidatorForm onSubmit={this.onSubmit}>
<PasswordValidator <PasswordValidator
validators={['required', 'matchRegexp:^.{1,64}$']} 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" name="jwt_secret"
label="JWT Secret" label="Super User Password"
fullWidth fullWidth
variant="outlined" variant="outlined"
value={data.jwt_secret} 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}> <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
<Typography variant="body1"> <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> </Typography>
</Box> </Box>
<FormActions> <FormActions>