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

improvements to EMS-ESP web status page

Browse Source
This commit is contained in:
proddy
2020-07-06 13:31:07 +02:00
parent 4fb88fbcac
commit 85debcbebe
4 changed files with 167 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
interface/src/project/EMSESPSettingsController.tsx
View File

@@ -52,10 +52,10 @@ function EMSESPSettingsControllerForm(props: EMSESPSettingsControllerFormProps)
</Typography> </Typography>
</Box> </Box>
<TextValidator <TextValidator
validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:255']} validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:255']}
errorMessages={['TX mode is required', "Must be a number", "Must be greater than 0", "Max value is 255"]} errorMessages={['TX mode is required', "Must be a number", "Must be 0 or higher", "Max value is 255"]}
name="tx_mode" name="tx_mode"
label="Tx mode" label="Tx mode (0=off)"
fullWidth fullWidth
variant="outlined" variant="outlined"
value={data.tx_mode} value={data.tx_mode}

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

@@ -1,12 +1,13 @@
import { Theme } from '@material-ui/core'; import { Theme } from '@material-ui/core';
import { EMSESPStatus, busConnectionStatus } from './types'; import { EMSESPStatus, busConnectionStatus } from './types';
export const isConnected = ({ status }: EMSESPStatus) => status === busConnectionStatus.BUS_STATUS_CONNECTED; export const isConnected = ({ status }: EMSESPStatus) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;
export const busStatusHighlight = ({ status }: EMSESPStatus, theme: Theme) => { export const busStatusHighlight = ({ status }: EMSESPStatus, theme: Theme) => {
switch (status) { switch (status) {
case busConnectionStatus.BUS_STATUS_TX_ERRORS: case busConnectionStatus.BUS_STATUS_TX_ERRORS:
return theme.palette.info.main; return theme.palette.warning.main;
case busConnectionStatus.BUS_STATUS_CONNECTED: case busConnectionStatus.BUS_STATUS_CONNECTED:
return theme.palette.success.main; return theme.palette.success.main;
case busConnectionStatus.BUS_STATUS_OFFLINE: case busConnectionStatus.BUS_STATUS_OFFLINE:
@@ -30,6 +31,7 @@ export const busStatus = ({ status }: EMSESPStatus) => {
} }
export const mqttStatusHighlight = ({ mqtt_fails }: EMSESPStatus, theme: Theme) => { export const mqttStatusHighlight = ({ mqtt_fails }: EMSESPStatus, theme: Theme) => {
if (mqtt_fails === 0) if (mqtt_fails === 0)
return theme.palette.success.main; return theme.palette.success.main;

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

@@ -1,24 +1,45 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from "react";
import { WithTheme, withTheme } from '@material-ui/core/styles'; import { WithTheme, withTheme } from "@material-ui/core/styles";
import { Table, TableBody, TableCell, TableHead, TableRow, Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'; import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Avatar,
Divider,
List,
ListItem,
ListItemAvatar,
ListItemText,
} from "@material-ui/core";
import BuildIcon from '@material-ui/icons/Build'; import BuildIcon from "@material-ui/icons/Build";
import RefreshIcon from '@material-ui/icons/Refresh'; import RefreshIcon from "@material-ui/icons/Refresh";
import DeviceHubIcon from '@material-ui/icons/DeviceHub'; import DeviceHubIcon from "@material-ui/icons/DeviceHub";
import SpeakerNotesOffIcon from '@material-ui/icons/SpeakerNotesOff'; import SpeakerNotesOffIcon from "@material-ui/icons/SpeakerNotesOff";
import TimerIcon from '@material-ui/icons/Timer'; import TimerIcon from "@material-ui/icons/Timer";
import BatteryUnknownIcon from '@material-ui/icons/BatteryUnknown'; import BatteryUnknownIcon from "@material-ui/icons/BatteryUnknown";
import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components'; import {
import { busStatus, busStatusHighlight, isConnected, mqttStatusHighlight } from './EMSESPStatus'; RestFormProps,
FormActions,
FormButton,
HighlightAvatar,
} from "../components";
import {
busStatus,
busStatusHighlight,
isConnected,
mqttStatusHighlight,
} from "./EMSESPStatus";
import { EMSESPStatus } from './types'; import { EMSESPStatus } from "./types";
type EMSESPStatusFormProps = RestFormProps<EMSESPStatus> & WithTheme; type EMSESPStatusFormProps = RestFormProps<EMSESPStatus> & WithTheme;
class EMSESPStatusForm extends Component<EMSESPStatusFormProps> { class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
createListItems() { createListItems() {
const { data, theme } = this.props; const { data, theme } = this.props;
return ( return (
@@ -32,7 +53,6 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
<ListItemText primary="Firmware Version" secondary={data.version} /> <ListItemText primary="Firmware Version" secondary={data.version} />
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
@@ -42,17 +62,30 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
<ListItemText primary="System Uptime" secondary={data.uptime} /> <ListItemText primary="System Uptime" secondary={data.uptime} />
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
<BatteryUnknownIcon /> <BatteryUnknownIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="Free System Memory" secondary={data.free_mem + '%'} /> <ListItemText
primary="Free System Memory"
secondary={data.free_mem + "%"}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<HighlightAvatar color={mqttStatusHighlight(data, theme)}>
<SpeakerNotesOffIcon />
</HighlightAvatar>
</ListItemAvatar>
<ListItemText
primary="MQTT Publish failures"
secondary={data.mqtt_fails}
/>
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<HighlightAvatar color={busStatusHighlight(data, theme)}> <HighlightAvatar color={busStatusHighlight(data, theme)}>
@@ -61,11 +94,8 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="EMS Bus Status" secondary={busStatus(data)} /> <ListItemText primary="EMS Bus Status" secondary={busStatus(data)} />
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> {isConnected(data) && (
{
isConnected(data) &&
<Fragment> <Fragment>
<Table size="small" padding="default"> <Table size="small" padding="default">
<TableHead> <TableHead>
<TableRow> <TableRow>
@@ -77,52 +107,32 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
Rx Received (Rx) Received telegrams
</TableCell>
<TableCell align="center">
{data.rx_received}
</TableCell> </TableCell>
<TableCell align="center">{data.rx_received}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
Tx Sent (Rx) Incomplete telegrams
</TableCell>
<TableCell align="center">
{data.tx_sent}
</TableCell> </TableCell>
<TableCell align="center">{data.crc_errors}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
CRC Errors (Tx) Successfully sent telegrams
</TableCell>
<TableCell align="center">
{data.crc_errors}
</TableCell> </TableCell>
<TableCell align="center">{data.tx_sent}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
Tx Errors (Tx) Send failures
</TableCell>
<TableCell align="center">
{data.tx_errors}
</TableCell> </TableCell>
<TableCell align="center">{data.tx_errors}</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</Fragment> </Fragment>
} )}
<ListItem>
<ListItemAvatar>
<HighlightAvatar color={mqttStatusHighlight(data, theme)}>
<SpeakerNotesOffIcon />
</HighlightAvatar>
</ListItemAvatar>
<ListItemText primary="MQTT Publish fails" secondary={data.mqtt_fails} />
</ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
<ListItem></ListItem> <ListItem></ListItem>
</Fragment> </Fragment>
@@ -132,18 +142,20 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
render() { render() {
return ( return (
<Fragment> <Fragment>
<List> <List>{this.createListItems()}</List>
{this.createListItems()}
</List>
<FormActions> <FormActions>
<FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}> <FormButton
startIcon={<RefreshIcon />}
variant="contained"
color="secondary"
onClick={this.props.loadData}
>
Refresh Refresh
</FormButton> </FormButton>
</FormActions> </FormActions>
</Fragment> </Fragment>
); );
} }
} }
export default withTheme(EMSESPStatusForm); export default withTheme(EMSESPStatusForm);

21
interface/src/project/ProjectMenu.tsx
View File

@@ -1,27 +1,30 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import { Link, withRouter, RouteComponentProps } from 'react-router-dom'; import { Link, withRouter, RouteComponentProps } from "react-router-dom";
import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'; import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
import SettingsRemoteIcon from '@material-ui/icons/SettingsRemote'; import SettingsRemoteIcon from "@material-ui/icons/SettingsRemote";
import { PROJECT_PATH } from '../api'; import { PROJECT_PATH } from "../api";
class ProjectMenu extends Component<RouteComponentProps> { class ProjectMenu extends Component<RouteComponentProps> {
render() { render() {
const path = this.props.match.url; const path = this.props.match.url;
return ( return (
<List> <List>
<ListItem to={`/${PROJECT_PATH}/`} selected={path.startsWith(`/${PROJECT_PATH}/`)} button component={Link}> <ListItem
to={`/${PROJECT_PATH}/`}
selected={path.startsWith(`/${PROJECT_PATH}/`)}
button
component={Link}
>
<ListItemIcon> <ListItemIcon>
<SettingsRemoteIcon /> <SettingsRemoteIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="EMS-ESP" /> <ListItemText primary="EMS-ESP" />
</ListItem> </ListItem>
</List> </List>
) );
} }
} }
export default withRouter(ProjectMenu); export default withRouter(ProjectMenu);