Add placeholder system section, for status page and reset feature.

This commit is contained in:
Rick Watson 2019-05-26 22:02:27 +01:00
parent 9ee9596b72
commit d9ad598e0f
6 changed files with 61 additions and 39 deletions

View File

@ -7,13 +7,13 @@ import AuthenticationWrapper from './authentication/AuthenticationWrapper';
import AuthenticatedRoute from './authentication/AuthenticatedRoute';
import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
import OTAConfiguration from './containers/OTAConfiguration';
import SignInPage from './containers/SignInPage';
import WiFiConnection from './sections/WiFiConnection';
import AccessPoint from './sections/AccessPoint';
import NetworkTime from './sections/NetworkTime';
import Security from './sections/Security';
import System from './sections/System';
class AppRouting extends Component {
@ -29,7 +29,7 @@ class AppRouting extends Component {
<AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />
<AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
<AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
<AuthenticatedRoute exact path="/ota-configuration" component={OTAConfiguration} />
<AuthenticatedRoute exact path="/system/*" component={System} />
<AuthenticatedRoute exact path="/security/*" component={Security} />
<Redirect to="/" />
</Switch>

View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Link, withRouter } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
@ -13,23 +13,19 @@ import Divider from '@material-ui/core/Divider';
import Grow from '@material-ui/core/Grow';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Popper from '@material-ui/core/Popper';
import MenuIcon from '@material-ui/icons/Menu';
import WifiIcon from '@material-ui/icons/Wifi';
import SystemUpdateIcon from '@material-ui/icons/SystemUpdate';
import SettingsIcon from '@material-ui/icons/Settings';
import AccessTimeIcon from '@material-ui/icons/AccessTime';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
import LockIcon from '@material-ui/icons/Lock';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Paper from '@material-ui/core/Paper';
import { APP_NAME } from '../constants/App';
@ -102,7 +98,7 @@ class MenuAppBar extends React.Component {
render() {
const { classes, theme, children, sectionTitle, authenticationContext } = this.props;
const { mobileOpen, authMenuOpen } = this.state;
const path = this.props.match.url;
const drawer = (
<div>
<Toolbar>
@ -113,31 +109,31 @@ class MenuAppBar extends React.Component {
</Toolbar>
<Divider />
<List>
<ListItem button component={Link} to='/wifi/'>
<ListItem button component={Link} to='/wifi/' selected={path.startsWith('/wifi/')}>
<ListItemIcon>
<WifiIcon />
</ListItemIcon>
<ListItemText primary="WiFi Connection" />
</ListItem>
<ListItem button component={Link} to='/ap/'>
<ListItem button component={Link} to='/ap/' selected={path.startsWith('/ap/')}>
<ListItemIcon>
<SettingsInputAntennaIcon />
</ListItemIcon>
<ListItemText primary="Access Point" />
</ListItem>
<ListItem button component={Link} to='/ntp/'>
<ListItem button component={Link} to='/ntp/' selected={path.startsWith('/ntp/')}>
<ListItemIcon>
<AccessTimeIcon />
</ListItemIcon>
<ListItemText primary="Network Time" />
</ListItem>
<ListItem button component={Link} to='/ota-configuration'>
<ListItem button component={Link} to='/system/' selected={path.startsWith('/system/')}>
<ListItemIcon>
<SystemUpdateIcon />
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="OTA Updates" />
<ListItemText primary="System" />
</ListItem>
<ListItem button component={Link} to='/security/'>
<ListItem button component={Link} to='/security/' selected={path.startsWith('/security/')}>
<ListItemIcon>
<LockIcon />
</ListItemIcon>
@ -241,4 +237,8 @@ MenuAppBar.propTypes = {
sectionTitle: PropTypes.string.isRequired,
};
export default withAuthenticationContext(withStyles(styles, { withTheme: true })(MenuAppBar));
export default withAuthenticationContext(
withRouter(
withStyles(styles, { withTheme: true })(MenuAppBar)
)
);

View File

@ -79,7 +79,8 @@ class NTPStatus extends Component {
<ListItemAvatar>
<Avatar>
<SwapVerticalCircleIcon />
</Avatar></ListItemAvatar>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never"} />
</ListItem>
<Divider variant="inset" component="li" />
@ -98,7 +99,8 @@ class NTPStatus extends Component {
<ListItemAvatar>
<Avatar>
<TimerIcon />
</Avatar></ListItemAvatar>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
</ListItem>
<Divider variant="inset" component="li" />
@ -106,7 +108,8 @@ class NTPStatus extends Component {
<ListItemAvatar>
<Avatar>
<AvTimerIcon />
</Avatar></ListItemAvatar>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
</ListItem>
<Divider variant="inset" component="li" />

View File

@ -1,15 +0,0 @@
import React, { Component } from 'react';
import MenuAppBar from '../components/MenuAppBar';
import OTASettings from './OTASettings';
class OTAConfiguration extends Component {
render() {
return (
<MenuAppBar sectionTitle="OTA Configuration">
<OTASettings />
</MenuAppBar>
)
}
}
export default OTAConfiguration

View File

@ -0,0 +1,34 @@
import React, { Component } from 'react';
import { Redirect, Switch } from 'react-router-dom'
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
import MenuAppBar from '../components/MenuAppBar';
import OTASettings from '../containers/OTASettings';
class System extends Component {
handleTabChange = (event, path) => {
this.props.history.push(path);
};
render() {
return (
<MenuAppBar sectionTitle="System">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="/system/status" label="System Status" />
<Tab value="/system/ota" label="OTA Updates" />
</Tabs>
<Switch>
<AuthenticatedRoute exact={true} path="/system/status" component={OTASettings} />
<AuthenticatedRoute exact={true} path="/system/ota" component={OTASettings} />
<Redirect to="/system/status" />
</Switch>
</MenuAppBar>
)
}
}
export default System