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;

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

@@ -1,149 +1,161 @@
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() {
const { data, theme } = this.props;
return (
<Fragment>
<ListItem>
<ListItemAvatar>
<Avatar>
<BuildIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Firmware Version" secondary={data.version} />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar>
<TimerIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="System Uptime" secondary={data.uptime} />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar>
<BatteryUnknownIcon />
</Avatar>
</ListItemAvatar>
<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>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<HighlightAvatar color={busStatusHighlight(data, theme)}>
<DeviceHubIcon />
</HighlightAvatar>
</ListItemAvatar>
<ListItemText primary="EMS Bus Status" secondary={busStatus(data)} />
</ListItem>
{isConnected(data) && (
<Fragment>
<Table size="small" padding="default">
<TableHead>
<TableRow>
<TableCell>Statistic</TableCell>
<TableCell align="center"># Telegrams</TableCell>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell component="th" scope="row">
(Rx) Received telegrams
</TableCell>
<TableCell align="center">{data.rx_received}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
(Rx) Incomplete telegrams
</TableCell>
<TableCell align="center">{data.crc_errors}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
(Tx) Successfully sent telegrams
</TableCell>
<TableCell align="center">{data.tx_sent}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
(Tx) Send failures
</TableCell>
<TableCell align="center">{data.tx_errors}</TableCell>
</TableRow>
</TableBody>
</Table>
</Fragment>
)}
<Divider variant="inset" component="li" />
<ListItem></ListItem>
</Fragment>
);
}
createListItems() { render() {
const { data, theme } = this.props; return (
return ( <Fragment>
<Fragment> <List>{this.createListItems()}</List>
<ListItem> <FormActions>
<ListItemAvatar> <FormButton
<Avatar> startIcon={<RefreshIcon />}
<BuildIcon /> variant="contained"
</Avatar> color="secondary"
</ListItemAvatar> onClick={this.props.loadData}
<ListItemText primary="Firmware Version" secondary={data.version} /> >
</ListItem> Refresh
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar>
<TimerIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="System Uptime" secondary={data.uptime} />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar>
<BatteryUnknownIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Free System Memory" secondary={data.free_mem + '%'} />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<HighlightAvatar color={busStatusHighlight(data, theme)}>
<DeviceHubIcon />
</HighlightAvatar>
</ListItemAvatar>
<ListItemText primary="EMS Bus Status" secondary={busStatus(data)} />
</ListItem>
<Divider variant="inset" component="li" />
{
isConnected(data) &&
<Fragment>
<Table size="small" padding="default">
<TableHead>
<TableRow>
<TableCell>Statistic</TableCell>
<TableCell align="center"># Telegrams</TableCell>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell component="th" scope="row">
Rx Received
</TableCell>
<TableCell align="center">
{data.rx_received}
</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
Tx Sent
</TableCell>
<TableCell align="center">
{data.tx_sent}
</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
CRC Errors
</TableCell>
<TableCell align="center">
{data.crc_errors}
</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
Tx Errors
</TableCell>
<TableCell align="center">
{data.tx_errors}
</TableCell>
</TableRow>
</TableBody>
</Table>
</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" />
<ListItem></ListItem>
</Fragment>
);
}
render() {
return (
<Fragment>
<List>
{this.createListItems()}
</List>
<FormActions>
<FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
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);