diff --git a/interface/src/project/EMSESPSettingsController.tsx b/interface/src/project/EMSESPSettingsController.tsx index 08c07a060..7bb2923ca 100644 --- a/interface/src/project/EMSESPSettingsController.tsx +++ b/interface/src/project/EMSESPSettingsController.tsx @@ -52,10 +52,10 @@ function EMSESPSettingsControllerForm(props: EMSESPSettingsControllerFormProps) status === busConnectionStatus.BUS_STATUS_CONNECTED; +export const isConnected = ({ status }: EMSESPStatus) => status !== busConnectionStatus.BUS_STATUS_OFFLINE; export const busStatusHighlight = ({ status }: EMSESPStatus, theme: Theme) => { + switch (status) { case busConnectionStatus.BUS_STATUS_TX_ERRORS: - return theme.palette.info.main; + return theme.palette.warning.main; case busConnectionStatus.BUS_STATUS_CONNECTED: return theme.palette.success.main; case busConnectionStatus.BUS_STATUS_OFFLINE: @@ -30,6 +31,7 @@ export const busStatus = ({ status }: EMSESPStatus) => { } export const mqttStatusHighlight = ({ mqtt_fails }: EMSESPStatus, theme: Theme) => { + if (mqtt_fails === 0) return theme.palette.success.main; diff --git a/interface/src/project/EMSESPStatusForm.tsx b/interface/src/project/EMSESPStatusForm.tsx index 5dd702a00..4dcc90843 100644 --- a/interface/src/project/EMSESPStatusForm.tsx +++ b/interface/src/project/EMSESPStatusForm.tsx @@ -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 { Table, TableBody, TableCell, TableHead, TableRow, Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'; +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 BuildIcon from '@material-ui/icons/Build'; -import RefreshIcon from '@material-ui/icons/Refresh'; -import DeviceHubIcon from '@material-ui/icons/DeviceHub'; -import SpeakerNotesOffIcon from '@material-ui/icons/SpeakerNotesOff'; -import TimerIcon from '@material-ui/icons/Timer'; -import BatteryUnknownIcon from '@material-ui/icons/BatteryUnknown'; +import BuildIcon from "@material-ui/icons/Build"; +import RefreshIcon from "@material-ui/icons/Refresh"; +import DeviceHubIcon from "@material-ui/icons/DeviceHub"; +import SpeakerNotesOffIcon from "@material-ui/icons/SpeakerNotesOff"; +import TimerIcon from "@material-ui/icons/Timer"; +import BatteryUnknownIcon from "@material-ui/icons/BatteryUnknown"; -import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components'; -import { busStatus, busStatusHighlight, isConnected, mqttStatusHighlight } from './EMSESPStatus'; +import { + RestFormProps, + FormActions, + FormButton, + HighlightAvatar, +} from "../components"; +import { + busStatus, + busStatusHighlight, + isConnected, + mqttStatusHighlight, +} from "./EMSESPStatus"; -import { EMSESPStatus } from './types'; +import { EMSESPStatus } from "./types"; type EMSESPStatusFormProps = RestFormProps & WithTheme; class EMSESPStatusForm extends Component { + createListItems() { + const { data, theme } = this.props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {isConnected(data) && ( + + + + + Statistic + # Telegrams + + + + + + + (Rx) Received telegrams + + {data.rx_received} + + + + (Rx) Incomplete telegrams + + {data.crc_errors} + + + + (Tx) Successfully sent telegrams + + {data.tx_sent} + + + + (Tx) Send failures + + {data.tx_errors} + + +
+
+ )} + + +
+ ); + } - createListItems() { - const { data, theme } = this.props; - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { - isConnected(data) && - - - - - - Statistic - # Telegrams - - - - - - - Rx Received - - - {data.rx_received} - - - - - Tx Sent - - - {data.tx_sent} - - - - - CRC Errors - - - {data.crc_errors} - - - - - Tx Errors - - - {data.tx_errors} - - - - -
- -
- } - - - - - - - - - - - - -
- ); - } - - render() { - return ( - - - {this.createListItems()} - - - } variant="contained" color="secondary" onClick={this.props.loadData}> - Refresh + render() { + return ( + + {this.createListItems()} + + } + variant="contained" + color="secondary" + onClick={this.props.loadData} + > + Refresh - - - ); - } - + + + ); + } } export default withTheme(EMSESPStatusForm); diff --git a/interface/src/project/ProjectMenu.tsx b/interface/src/project/ProjectMenu.tsx index ce3cbd6e0..908b746f0 100644 --- a/interface/src/project/ProjectMenu.tsx +++ b/interface/src/project/ProjectMenu.tsx @@ -1,27 +1,30 @@ -import React, { Component } from 'react'; -import { Link, withRouter, RouteComponentProps } from 'react-router-dom'; +import React, { Component } from "react"; +import { Link, withRouter, RouteComponentProps } from "react-router-dom"; -import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'; -import SettingsRemoteIcon from '@material-ui/icons/SettingsRemote'; +import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core"; +import SettingsRemoteIcon from "@material-ui/icons/SettingsRemote"; -import { PROJECT_PATH } from '../api'; +import { PROJECT_PATH } from "../api"; class ProjectMenu extends Component { - render() { const path = this.props.match.url; return ( - + - ) + ); } - } export default withRouter(ProjectMenu);