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

tidy table, mention Rx fails is not evil

Browse Source
This commit is contained in:
proddy
2020-08-26 16:05:54 +02:00
parent 896063d798
commit 1559d5f1a7
1 changed files with 46 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,22 @@
import React, { Component, Fragment } from "react"; import React, { Component, Fragment } from "react";
import { WithTheme, withTheme } from "@material-ui/core/styles"; import { WithTheme, withTheme, withStyles, Theme, createStyles } from "@material-ui/core/styles";
import { import {
TableContainer,
Table, Table,
Box,
Typography,
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow, TableRow,
Divider,
List, List,
ListItem, ListItem,
ListItemAvatar, ListItemAvatar,
ListItemText, ListItemText,
withWidth,
WithWidthProps,
isWidthDown
} from "@material-ui/core"; } from "@material-ui/core";
import RefreshIcon from "@material-ui/icons/Refresh"; import RefreshIcon from "@material-ui/icons/Refresh";
@@ -32,14 +37,30 @@ import {
import { EMSESPStatus } from "./EMSESPtypes"; import { EMSESPStatus } from "./EMSESPtypes";
type EMSESPStatusFormProps = RestFormProps<EMSESPStatus> & WithTheme; 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> {
rxErrors = () => {
return this.props.data.crc_errors !== 0;
}
createListItems() { createListItems() {
const { data, theme } = this.props; const { data, theme, width } = this.props;
return ( return (
<Fragment> <Fragment>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<HighlightAvatar color={busStatusHighlight(data, theme)}> <HighlightAvatar color={busStatusHighlight(data, theme)}>
@@ -49,46 +70,52 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
<ListItemText primary="EMS Connection Status" secondary={busStatus(data)} /> <ListItemText primary="EMS Connection Status" secondary={busStatus(data)} />
</ListItem> </ListItem>
{isConnected(data) && ( {isConnected(data) && (
<Fragment> <TableContainer>
<Table size="small" padding="default"> <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell>Statistic</TableCell> <StyledTableCell>Statistic</StyledTableCell>
<TableCell align="center"># Telegrams</TableCell> <StyledTableCell align="center"># Telegrams</StyledTableCell>
<TableCell />
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell>
(Rx) Received telegrams (Rx) Received telegrams
</TableCell> </TableCell>
<TableCell align="center">{data.rx_received}</TableCell> <TableCell align="center">{data.rx_received}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell >
(Rx) Incomplete telegrams (Rx) Incomplete telegrams
</TableCell> </TableCell>
<TableCell align="center">{data.crc_errors}</TableCell> <TableCell align="center">{data.crc_errors}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell >
(Tx) Successfully sent telegrams (Tx) Successfully sent telegrams
</TableCell> </TableCell>
<TableCell align="center">{data.tx_sent}</TableCell> <TableCell align="center">{data.tx_sent}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row"> <TableCell >
(Tx) Send Errors (Tx) Send Errors
</TableCell> </TableCell>
<TableCell align="center">{data.tx_errors}</TableCell> <TableCell align="center">{data.tx_errors}</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</Fragment> <Fragment>
{this.rxErrors() && (
<Box bgcolor="warning.main" p={1} mt={0} mb={0}>
<Typography variant="caption" color="textPrimary">
<i>Note: Having a small number of incomplete Rx telegrams is normal and often caused by noise on the EMS line.</i>
</Typography>
</Box>
)}
</Fragment>
</TableContainer>
)} )}
<Divider variant="inset" component="li" />
<ListItem></ListItem>
</Fragment> </Fragment>
); );
} }
@@ -99,11 +126,7 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
<List>{this.createListItems()}</List> <List>{this.createListItems()}</List>
<FormActions> <FormActions>
<FormButton <FormButton
startIcon={<RefreshIcon />} startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
variant="contained"
color="secondary"
onClick={this.props.loadData}
>
Refresh Refresh
</FormButton> </FormButton>
</FormActions> </FormActions>
@@ -112,4 +135,4 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
} }
} }
export default withTheme(EMSESPStatusForm); export default withTheme(withWidth()(EMSESPStatusForm));