Add restart service for esp8266 and esp32
Add restart feature to status screen Upgrade material-ui Add icons to buttons
This commit is contained in:
@ -2,22 +2,16 @@ import React, { Component } from 'react';
|
||||
import { Redirect, Route, Switch } from 'react-router';
|
||||
|
||||
import AppRouting from './AppRouting';
|
||||
import { PROJECT_NAME } from './constants/Env';
|
||||
|
||||
import { SnackbarProvider } from 'notistack';
|
||||
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import blueGrey from '@material-ui/core/colors/blueGrey';
|
||||
import indigo from '@material-ui/core/colors/indigo';
|
||||
import orange from '@material-ui/core/colors/orange';
|
||||
import red from '@material-ui/core/colors/red';
|
||||
import green from '@material-ui/core/colors/green';
|
||||
|
||||
import { create } from 'jss';
|
||||
import { StylesProvider, jssPreset } from '@material-ui/styles';
|
||||
|
||||
import {
|
||||
MuiThemeProvider,
|
||||
createMuiTheme
|
||||
} from '@material-ui/core/styles';
|
||||
import { CssBaseline, IconButton, MuiThemeProvider, createMuiTheme } from '@material-ui/core';
|
||||
import { StylesProvider, jssPreset } from '@material-ui/styles';
|
||||
import { blueGrey, indigo, orange, red, green } from '@material-ui/core/colors';
|
||||
import CloseIcon from '@material-ui/icons/Close';
|
||||
|
||||
|
||||
// Our theme
|
||||
const theme = createMuiTheme({
|
||||
@ -38,11 +32,28 @@ const jss = create(jssPreset());
|
||||
const unauthorizedRedirect = () => <Redirect to="/" />;
|
||||
|
||||
class App extends Component {
|
||||
|
||||
notistackRef = React.createRef();
|
||||
|
||||
componentDidMount() {
|
||||
document.title = PROJECT_NAME;
|
||||
}
|
||||
|
||||
onClickDismiss = (key) => () => {
|
||||
this.notistackRef.current.closeSnackbar(key);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<StylesProvider jss={jss}>
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<SnackbarProvider maxSnack={3}>
|
||||
<SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
||||
ref={this.notistackRef}
|
||||
action={(key) => (
|
||||
<IconButton onClick={this.onClickDismiss(key)} size="small">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
)}>
|
||||
<CssBaseline />
|
||||
<Switch>
|
||||
<Route exact path="/unauthorized" component={unauthorizedRedirect} />
|
||||
|
@ -13,3 +13,4 @@ export const SYSTEM_STATUS_ENDPOINT = ENDPOINT_ROOT + "systemStatus";
|
||||
export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn";
|
||||
export const VERIFY_AUTHORIZATION_ENDPOINT = ENDPOINT_ROOT + "verifyAuthorization";
|
||||
export const SECURITY_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "securitySettings";
|
||||
export const RESTART_ENDPOINT = ENDPOINT_ROOT + "restart";
|
||||
|
@ -11,6 +11,7 @@ import Divider from '@material-ui/core/Divider';
|
||||
import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
|
||||
import DeviceHubIcon from '@material-ui/icons/DeviceHub';
|
||||
import ComputerIcon from '@material-ui/icons/Computer';
|
||||
import RefreshIcon from '@material-ui/icons/Refresh';
|
||||
|
||||
import { restComponent } from '../components/RestComponent';
|
||||
import LoadingNotification from '../components/LoadingNotification';
|
||||
@ -93,7 +94,7 @@ class APStatus extends Component {
|
||||
<List>
|
||||
{this.createListItems(data, classes)}
|
||||
</List>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
@ -14,6 +14,7 @@ import DNSIcon from '@material-ui/icons/Dns';
|
||||
import TimerIcon from '@material-ui/icons/Timer';
|
||||
import UpdateIcon from '@material-ui/icons/Update';
|
||||
import AvTimerIcon from '@material-ui/icons/AvTimer';
|
||||
import RefreshIcon from '@material-ui/icons/Refresh';
|
||||
|
||||
import { isSynchronized, ntpStatusHighlight, ntpStatus } from '../constants/NTPStatus';
|
||||
import * as Highlight from '../constants/Highlight';
|
||||
@ -118,7 +119,7 @@ class NTPStatus extends Component {
|
||||
<List>
|
||||
{this.createListItems(data, classes)}
|
||||
</List>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withSnackbar } from 'notistack';
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
@ -8,16 +9,24 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import Avatar from '@material-ui/core/Avatar';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogActions from '@material-ui/core/DialogActions';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
|
||||
import DevicesIcon from '@material-ui/icons/Devices';
|
||||
import MemoryIcon from '@material-ui/icons/Memory';
|
||||
import ShowChartIcon from '@material-ui/icons/ShowChart';
|
||||
import SdStorageIcon from '@material-ui/icons/SdStorage';
|
||||
import DataUsageIcon from '@material-ui/icons/DataUsage';
|
||||
import AutorenewIcon from '@material-ui/icons/Autorenew';
|
||||
import RefreshIcon from '@material-ui/icons/Refresh';
|
||||
|
||||
import { SYSTEM_STATUS_ENDPOINT } from '../constants/Endpoints';
|
||||
import { SYSTEM_STATUS_ENDPOINT, RESTART_ENDPOINT } from '../constants/Endpoints';
|
||||
import { restComponent } from '../components/RestComponent';
|
||||
import LoadingNotification from '../components/LoadingNotification';
|
||||
import SectionContent from '../components/SectionContent';
|
||||
import { redirectingAuthorizedFetch } from '../authentication/Authentication';
|
||||
|
||||
const styles = theme => ({
|
||||
button: {
|
||||
@ -28,6 +37,16 @@ const styles = theme => ({
|
||||
|
||||
class SystemStatus extends Component {
|
||||
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
confirmRestart: false,
|
||||
processing: false
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.loadData();
|
||||
}
|
||||
@ -90,13 +109,63 @@ class SystemStatus extends Component {
|
||||
<List>
|
||||
{this.createListItems(data, classes)}
|
||||
</List>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button startIcon={<AutorenewIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.onRestart}>
|
||||
Restart
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onRestart = () => {
|
||||
this.setState({ confirmRestart: true });
|
||||
}
|
||||
|
||||
onRestartRejected = () => {
|
||||
this.setState({ confirmRestart: false });
|
||||
}
|
||||
|
||||
onRestartConfirmed = () => {
|
||||
this.setState({ processing: true });
|
||||
redirectingAuthorizedFetch(RESTART_ENDPOINT, { method: 'POST' })
|
||||
.then(response => {
|
||||
if (response.status === 200) {
|
||||
this.props.enqueueSnackbar("Device is restarting", { variant: 'info' });
|
||||
this.setState({ processing: false, confirmRestart: false });
|
||||
} else {
|
||||
throw Error("Invalid status code: " + response.status);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.props.enqueueSnackbar(error.message || "Problem restarting device", { variant: 'error' });
|
||||
this.setState({ processing: false, confirmRestart: false });
|
||||
});
|
||||
}
|
||||
|
||||
renderRestartDialog() {
|
||||
return (
|
||||
<Dialog
|
||||
open={this.state.confirmRestart}
|
||||
onClose={this.onRestartRejected}
|
||||
>
|
||||
<DialogTitle>Confirm Restart</DialogTitle>
|
||||
<DialogContent dividers={true}>
|
||||
Are you sure you want to restart the device?
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button startIcon={<AutorenewIcon />} variant="contained" onClick={this.onRestartConfirmed} disabled={this.state.processing} color="primary" autoFocus>
|
||||
Restart
|
||||
</Button>
|
||||
<Button variant="contained" onClick={this.onRestartRejected} color="secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { data, fetched, errorMessage, loadData, classes } = this.props;
|
||||
return (
|
||||
@ -109,9 +178,11 @@ class SystemStatus extends Component {
|
||||
() => this.renderSystemStatus(data, classes)
|
||||
}
|
||||
/>
|
||||
{this.renderRestartDialog()}
|
||||
</SectionContent>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default restComponent(SYSTEM_STATUS_ENDPOINT, withStyles(styles)(SystemStatus));
|
||||
export default withSnackbar(restComponent(SYSTEM_STATUS_ENDPOINT, withStyles(styles)(SystemStatus)));
|
||||
|
@ -13,6 +13,7 @@ import DNSIcon from '@material-ui/icons/Dns';
|
||||
import SettingsInputComponentIcon from '@material-ui/icons/SettingsInputComponent';
|
||||
import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
|
||||
import DeviceHubIcon from '@material-ui/icons/DeviceHub';
|
||||
import RefreshIcon from '@material-ui/icons/Refresh';
|
||||
|
||||
import SectionContent from '../components/SectionContent';
|
||||
import { WIFI_STATUS_ENDPOINT } from '../constants/Endpoints';
|
||||
@ -130,7 +131,7 @@ class WiFiStatus extends Component {
|
||||
<List>
|
||||
{this.createListItems(data, classes)}
|
||||
</List>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
<Button startIcon={<RefreshIcon />} variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
@ -8,6 +8,7 @@ import PasswordValidator from '../components/PasswordValidator';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
|
||||
const styles = theme => ({
|
||||
textField: {
|
||||
@ -61,7 +62,7 @@ class APSettingsForm extends React.Component {
|
||||
/>
|
||||
</Fragment>
|
||||
}
|
||||
<Button variant="contained" color="primary" className={classes.button} type="submit">
|
||||
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
||||
|
@ -18,6 +18,8 @@ import DeleteIcon from '@material-ui/icons/Delete';
|
||||
import CloseIcon from '@material-ui/icons/Close';
|
||||
import CheckIcon from '@material-ui/icons/Check';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
||||
|
||||
import UserForm from './UserForm';
|
||||
import { withAuthenticationContext } from '../authentication/Context';
|
||||
@ -161,7 +163,7 @@ class ManageUsersForm extends React.Component {
|
||||
<TableRow>
|
||||
<TableCell colSpan={2} />
|
||||
<TableCell align="center">
|
||||
<Button variant="contained" color="secondary" onClick={this.createUser}>
|
||||
<Button startIcon={<PersonAddIcon />} variant="contained" color="secondary" onClick={this.createUser}>
|
||||
Add User
|
||||
</Button>
|
||||
</TableCell>
|
||||
@ -176,7 +178,7 @@ class ManageUsersForm extends React.Component {
|
||||
</Box>
|
||||
</Typography>
|
||||
}
|
||||
<Button variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
|
||||
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit" disabled={this.noAdminConfigured()}>
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
||||
|
@ -4,6 +4,7 @@ import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
|
||||
import isIP from '../validators/isIP';
|
||||
import isHostname from '../validators/isHostname';
|
||||
@ -50,7 +51,7 @@ class NTPSettingsForm extends React.Component {
|
||||
onChange={handleValueChange('interval')}
|
||||
margin="normal"
|
||||
/>
|
||||
<Button variant="contained" color="primary" className={classes.button} type="submit">
|
||||
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
||||
|
@ -6,6 +6,7 @@ import Button from '@material-ui/core/Button';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
|
||||
import isIP from '../validators/isIP';
|
||||
import isHostname from '../validators/isHostname';
|
||||
@ -69,7 +70,7 @@ class OTASettingsForm extends React.Component {
|
||||
onChange={handleValueChange('password')}
|
||||
margin="normal"
|
||||
/>
|
||||
<Button variant="contained" color="primary" className={classes.button} type="submit">
|
||||
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
||||
|
@ -6,6 +6,7 @@ import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Box from '@material-ui/core/Box';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
|
||||
import PasswordValidator from '../components/PasswordValidator';
|
||||
import { withAuthenticationContext } from '../authentication/Context';
|
||||
@ -46,7 +47,7 @@ class SecuritySettingsForm extends React.Component {
|
||||
If you modify the JWT Secret, all users will be logged out.
|
||||
</Box>
|
||||
</Typography>
|
||||
<Button variant="contained" color="primary" className={classes.button} type="submit">
|
||||
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
||||
|
@ -18,6 +18,7 @@ import Badge from '@material-ui/core/Badge';
|
||||
import WifiIcon from '@material-ui/icons/Wifi';
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
import LockOpenIcon from '@material-ui/icons/LockOpen';
|
||||
import PermScanWifiIcon from '@material-ui/icons/PermScanWifi';
|
||||
|
||||
import { isNetworkOpen, networkSecurityMode } from '../constants/WiFiSecurityModes';
|
||||
|
||||
@ -86,7 +87,7 @@ class WiFiNetworkSelector extends Component {
|
||||
</div>
|
||||
}
|
||||
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={requestNetworkScan} disabled={scanningForNetworks}>
|
||||
<Button startIcon={<PermScanWifiIcon />} variant="contained" color="secondary" className={classes.button} onClick={requestNetworkScan} disabled={scanningForNetworks}>
|
||||
Scan again...
|
||||
</Button>
|
||||
</div>
|
||||
|
@ -16,6 +16,7 @@ import IconButton from '@material-ui/core/IconButton';
|
||||
import LockIcon from '@material-ui/icons/Lock';
|
||||
import LockOpenIcon from '@material-ui/icons/LockOpen';
|
||||
import DeleteIcon from '@material-ui/icons/Delete';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
|
||||
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
|
||||
import { isNetworkOpen, networkSecurityMode } from '../constants/WiFiSecurityModes';
|
||||
@ -175,7 +176,7 @@ class WiFiSettingsForm extends React.Component {
|
||||
/>
|
||||
</Fragment>
|
||||
}
|
||||
<Button variant="contained" color="primary" className={classes.button} type="submit">
|
||||
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
||||
|
@ -10,6 +10,7 @@ import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Slider from '@material-ui/core/Slider';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
|
||||
export const DEMO_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "demoSettings";
|
||||
|
||||
@ -69,7 +70,7 @@ function DemoControllerForm(props) {
|
||||
max={255}
|
||||
onChange={handleSliderChange('blink_speed')}
|
||||
/>
|
||||
<Button variant="contained" color="primary" className={classes.button} type="submit">
|
||||
<Button startIcon={<SaveIcon />} variant="contained" color="primary" className={classes.button} type="submit">
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
|
||||
|
Reference in New Issue
Block a user