nova/esp8266-react-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

reduce use of ternaries in form code

Browse Source
This commit is contained in:
Rick Watson 2019-08-09 18:21:28 +01:00
parent df06e58fb0
commit ff85c2e661
18 changed files with 456 additions and 730 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
interface/src/components/RestComponent.js
View File

@ -52,10 +52,11 @@ export const restComponent = (endpointUrl, FormComponent) => {
})
.then(json => { this.setState({ data: json, fetched: true }) })
.catch(error => {
this.props.enqueueSnackbar("Problem fetching: " + error.message, {
const errorMessage = error.message || "Unknown error";
this.props.enqueueSnackbar("Problem fetching: " + errorMessage, {
variant: 'error',
});
this.setState({ data: null, fetched: true, errorMessage: error.message });
this.setState({ data: null, fetched: true, errorMessage });
});
}
@ -80,10 +81,11 @@ export const restComponent = (endpointUrl, FormComponent) => {
});
this.setState({ data: json, fetched: true });
}).catch(error => {
this.props.enqueueSnackbar("Problem saving: " + error.message, {
const errorMessage = error.message || "Unknown error";
this.props.enqueueSnackbar("Problem saving: " + errorMessage, {
variant: 'error',
});
this.setState({ data: null, fetched: true, errorMessage: error.message });
this.setState({ data: null, fetched: true, errorMessage });
});
}

16
interface/src/containers/APSettings.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { AP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent';
import APSettingsForm from '../forms/APSettingsForm';
@ -12,17 +13,20 @@ class APSettings extends Component {
}
render() {
const { data, fetched, errorMessage } = this.props;
const { fetched, errorMessage, data, saveData, loadData, handleValueChange } = this.props;
return (
<SectionContent title="AP Settings">
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
<APSettingsForm
apSettings={data}
apSettingsFetched={fetched}
errorMessage={errorMessage}
onSubmit={this.props.saveData}
onReset={this.props.loadData}
handleValueChange={this.props.handleValueChange}
onSubmit={saveData}
onReset={loadData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
</SectionContent>
)
}

36
interface/src/containers/APStatus.js
View File

@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
@ -15,6 +13,7 @@ import DeviceHubIcon from '@material-ui/icons/DeviceHub';
import ComputerIcon from '@material-ui/icons/Computer';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent'
import * as Highlight from '../constants/Highlight';
@ -27,10 +26,6 @@ const styles = theme => ({
["apStatus_" + Highlight.IDLE]: {
backgroundColor: theme.palette.highlight_idle
},
fetching: {
margin: theme.spacing(4),
textAlign: "center"
},
button: {
marginRight: theme.spacing(2),
marginTop: theme.spacing(2),
@ -106,30 +101,15 @@ class APStatus extends Component {
}
render() {
const { data, fetched, errorMessage, classes } = this.props;
const { fetched, errorMessage, data, loadData, classes } = this.props;
return (
<SectionContent title="AP Status">
{
!fetched ?
<div>
<LinearProgress className={classes.fetching} />
<Typography variant="h4" className={classes.fetching}>
Loading...
</Typography>
</div>
:
data ? this.renderAPStatus(data, classes)
:
<div>
<Typography variant="h4" className={classes.fetching}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh
</Button>
</div>
}
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
{this.renderAPStatus(data, classes)}
</LoadingNotification>
</SectionContent>
)
}

20
interface/src/containers/ManageUsers.js
View File

@ -2,8 +2,9 @@ import React, { Component } from 'react';
import { SECURITY_SETTINGS_ENDPOINT } from '../constants/Endpoints';
import { restComponent } from '../components/RestComponent';
import ManageUsersForm from '../forms/ManageUsersForm';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent';
import ManageUsersForm from '../forms/ManageUsersForm';
class ManageUsers extends Component {
@ -12,18 +13,21 @@ class ManageUsers extends Component {
}
render() {
const { data, fetched, errorMessage } = this.props;
const { fetched, errorMessage, data, saveData, loadData, setData, handleValueChange } = this.props;
return (
<SectionContent title="Manage Users" titleGutter>
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
<ManageUsersForm
userData={data}
userDataFetched={fetched}
errorMessage={errorMessage}
onSubmit={this.props.saveData}
onReset={this.props.loadData}
setData={this.props.setData}
handleValueChange={this.props.handleValueChange}
onSubmit={saveData}
onReset={loadData}
setData={setData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
</SectionContent>
)
}

18
interface/src/containers/NTPSettings.js
View File

@ -1,7 +1,8 @@
import React, { Component } from 'react';
import { NTP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
import {restComponent} from '../components/RestComponent';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent';
import NTPSettingsForm from '../forms/NTPSettingsForm';
@ -12,17 +13,20 @@ class NTPSettings extends Component {
}
render() {
const { data, fetched, errorMessage } = this.props;
const { fetched, errorMessage, data, saveData, loadData, handleValueChange } = this.props;
return (
<SectionContent title="NTP Settings">
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
<NTPSettingsForm
ntpSettings={data}
ntpSettingsFetched={fetched}
errorMessage={errorMessage}
onSubmit={this.props.saveData}
onReset={this.props.loadData}
handleValueChange={this.props.handleValueChange}
onSubmit={saveData}
onReset={loadData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
</SectionContent>
)
}

38
interface/src/containers/NTPStatus.js
View File

@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@ -22,6 +20,7 @@ import * as Highlight from '../constants/Highlight';
import { unixTimeToTimeAndDate } from '../constants/TimeFormat';
import { NTP_STATUS_ENDPOINT } from '../constants/Endpoints';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent';
import moment from 'moment';
@ -36,10 +35,6 @@ const styles = theme => ({
["ntpStatus_" + Highlight.WARN]: {
backgroundColor: theme.palette.highlight_warn
},
fetching: {
margin: theme.spacing(4),
textAlign: "center"
},
button: {
marginRight: theme.spacing(2),
marginTop: theme.spacing(2),
@ -131,32 +126,17 @@ class NTPStatus extends Component {
}
render() {
const { data, fetched, errorMessage, classes } = this.props;
const { data, fetched, errorMessage, loadData, classes } = this.props;
return (
<SectionContent title="NTP Status">
{
!fetched ?
<div>
<LinearProgress className={classes.fetching} />
<Typography variant="h4" className={classes.fetching}>
Loading...
</Typography>
</div>
:
data ? this.renderNTPStatus(data, classes)
:
<div>
<Typography variant="h4" className={classes.fetching}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh
</Button>
</div>
}
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
{this.renderNTPStatus(data, classes)}
</LoadingNotification>
</SectionContent>
)
);
}
}

20
interface/src/containers/OTASettings.js
View File

@ -1,7 +1,8 @@
import React, { Component } from 'react';
import { OTA_SETTINGS_ENDPOINT } from '../constants/Endpoints';
import {restComponent} from '../components/RestComponent';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent';
import OTASettingsForm from '../forms/OTASettingsForm';
@ -12,18 +13,21 @@ class OTASettings extends Component {
}
render() {
const { data, fetched, errorMessage } = this.props;
const { fetched, errorMessage, data, saveData, loadData, handleValueChange, handleCheckboxChange } = this.props;
return (
<SectionContent title="OTA Settings">
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
<OTASettingsForm
otaSettings={data}
otaSettingsFetched={fetched}
errorMessage={errorMessage}
onSubmit={this.props.saveData}
onReset={this.props.loadData}
handleValueChange={this.props.handleValueChange}
handleCheckboxChange={this.props.handleCheckboxChange}
onSubmit={saveData}
onReset={loadData}
handleValueChange={handleValueChange}
handleCheckboxChange={handleCheckboxChange}
/>
</LoadingNotification>
</SectionContent>
)
}

8
interface/src/containers/SecuritySettings.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { SECURITY_SETTINGS_ENDPOINT } from '../constants/Endpoints';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SecuritySettingsForm from '../forms/SecuritySettingsForm';
import SectionContent from '../components/SectionContent';
@ -15,14 +16,17 @@ class SecuritySettings extends Component {
const { data, fetched, errorMessage, saveData, loadData, handleValueChange } = this.props;
return (
<SectionContent title="Security Settings">
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
<SecuritySettingsForm
securitySettings={data}
securitySettingsFetched={fetched}
errorMessage={errorMessage}
onSubmit={saveData}
onReset={loadData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
</SectionContent>
)
}

36
interface/src/containers/SystemStatus.js
View File

@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@ -16,16 +14,12 @@ import ShowChartIcon from '@material-ui/icons/ShowChart';
import SdStorageIcon from '@material-ui/icons/SdStorage';
import DataUsageIcon from '@material-ui/icons/DataUsage';
import { SYSTEM_STATUS_ENDPOINT } from '../constants/Endpoints';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent';
const styles = theme => ({
fetching: {
margin: theme.spacing(4),
textAlign: "center"
},
button: {
marginRight: theme.spacing(2),
marginTop: theme.spacing(2),
@ -104,29 +98,15 @@ class SystemStatus extends Component {
}
render() {
const { data, fetched, errorMessage, classes } = this.props;
const { data, fetched, errorMessage, loadData, classes } = this.props;
return (
<SectionContent title="System Status">
{
!fetched ?
<div>
<LinearProgress className={classes.fetching} />
<Typography variant="h4" className={classes.fetching}>
Loading...
</Typography>
</div>
:
data ? this.renderNTPStatus(data, classes)
:
<div>
<Typography variant="h4" className={classes.fetching}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh
</Button>
</div>
}
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
{this.renderNTPStatus(data, classes)}
</LoadingNotification>
</SectionContent>
)
}

2
interface/src/containers/WiFiNetworkScanner.js
View File

@ -1,10 +1,10 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withSnackbar } from 'notistack';
import { SCAN_NETWORKS_ENDPOINT, LIST_NETWORKS_ENDPOINT } from '../constants/Endpoints';
import SectionContent from '../components/SectionContent';
import WiFiNetworkSelector from '../forms/WiFiNetworkSelector';
import { withSnackbar } from 'notistack';
import { redirectingAuthorizedFetch } from '../authentication/Authentication';
const NUM_POLLS = 10

26
interface/src/containers/WiFiSettings.js
View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { WIFI_SETTINGS_ENDPOINT } from '../constants/Endpoints';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
import SectionContent from '../components/SectionContent';
import WiFiSettingsForm from '../forms/WiFiSettingsForm';
@ -18,10 +19,10 @@ class WiFiSettings extends Component {
const { selectedNetwork } = this.props;
if (selectedNetwork) {
var wifiSettings = {
ssid:selectedNetwork.ssid,
password:"",
hostname:"esp8266-react",
static_ip_config:false,
ssid: selectedNetwork.ssid,
password: "",
hostname: "esp8266-react",
static_ip_config: false,
}
this.props.setData(wifiSettings);
} else {
@ -35,20 +36,23 @@ class WiFiSettings extends Component {
}
render() {
const { data, fetched, errorMessage, selectedNetwork } = this.props;
const { data, fetched, errorMessage, saveData, loadData, handleValueChange, handleCheckboxChange, selectedNetwork, deselectNetwork } = this.props;
return (
<SectionContent title="WiFi Settings">
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
<WiFiSettingsForm
wifiSettings={data}
wifiSettingsFetched={fetched}
errorMessage={errorMessage}
selectedNetwork={selectedNetwork}
deselectNetwork={this.props.deselectNetwork}
onSubmit={this.props.saveData}
deselectNetwork={deselectNetwork}
onSubmit={saveData}
onReset={this.deselectNetworkAndLoadData}
handleValueChange={this.props.handleValueChange}
handleCheckboxChange={this.props.handleCheckboxChange}
handleValueChange={handleValueChange}
handleCheckboxChange={handleCheckboxChange}
/>
</LoadingNotification>
</SectionContent>
)
}

40
interface/src/containers/WiFiStatus.js
View File

@ -2,14 +2,10 @@ import React, { Component, Fragment } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import Divider from '@material-ui/core/Divider';
import WifiIcon from '@material-ui/icons/Wifi';
@ -23,6 +19,7 @@ import { WIFI_STATUS_ENDPOINT } from '../constants/Endpoints';
import { isConnected, connectionStatus, connectionStatusHighlight } from '../constants/WiFiConnectionStatus';
import * as Highlight from '../constants/Highlight';
import { restComponent } from '../components/RestComponent';
import LoadingNotification from '../components/LoadingNotification';
const styles = theme => ({
["wifiStatus_" + Highlight.IDLE]: {
@ -37,10 +34,6 @@ const styles = theme => ({
["wifiStatus_" + Highlight.WARN]: {
backgroundColor: theme.palette.highlight_warn
},
fetching: {
margin: theme.spacing(4),
textAlign: "center"
},
button: {
marginRight: theme.spacing(2),
marginTop: theme.spacing(2),
@ -145,32 +138,19 @@ class WiFiStatus extends Component {
}
render() {
const { data, fetched, errorMessage, classes } = this.props;
const { data, fetched, errorMessage, loadData, classes } = this.props;
return (
<SectionContent title="WiFi Status">
{
!fetched ?
<div>
<LinearProgress className={classes.fetching} />
<Typography variant="h4" className={classes.fetching}>
Loading...
</Typography>
</div>
:
data ? this.renderWiFiStatus(data, classes)
:
<div>
<Typography variant="h4" className={classes.fetching}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh
</Button>
</div>
}
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
{this.renderWiFiStatus(data, classes)}
</LoadingNotification>
</SectionContent>
)
);
}
}
export default restComponent(WIFI_STATUS_ENDPOINT, withStyles(styles)(WiFiStatus));

54
interface/src/forms/APSettingsForm.js
View File

@ -1,29 +1,19 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
import { isAPEnabled } from '../constants/WiFiAPModes';
import PasswordValidator from '../components/PasswordValidator';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import MenuItem from '@material-ui/core/MenuItem';
import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
import {isAPEnabled} from '../constants/WiFiAPModes';
import PasswordValidator from '../components/PasswordValidator';
const styles = theme => ({
loadingSettings: {
margin: theme.spacing(0.5),
},
loadingSettingsDetails: {
margin: theme.spacing(4),
textAlign: "center"
},
textField: {
width: "100%"
},
selectField:{
selectField: {
width: "100%",
marginTop: theme.spacing(2),
marginBottom: theme.spacing(0.5)
@ -37,30 +27,15 @@ const styles = theme => ({
class APSettingsForm extends React.Component {
render() {
const { classes, apSettingsFetched, apSettings, errorMessage, handleValueChange, onSubmit, onReset } = this.props;
const { classes, apSettings, handleValueChange, onSubmit, onReset } = this.props;
return (
<div>
{
!apSettingsFetched ?
<div className={classes.loadingSettings}>
<LinearProgress className={classes.loadingSettingsDetails}/>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
Loading...
</Typography>
</div>
: apSettings ?
<ValidatorForm onSubmit={onSubmit} ref="APSettingsForm">
<SelectValidator name="provision_mode" label="Provide Access Point..." value={apSettings.provision_mode} className={classes.selectField}
onChange={handleValueChange('provision_mode')}>
<MenuItem value={0}>Always</MenuItem>
<MenuItem value={1}>When WiFi Disconnected</MenuItem>
<MenuItem value={2}>Never</MenuItem>
</SelectValidator>
{
isAPEnabled(apSettings.provision_mode) &&
<Fragment>
@ -86,37 +61,20 @@ class APSettingsForm extends React.Component {
/>
</Fragment>
}
<Button variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</ValidatorForm>
:
<div className={classes.loadingSettings}>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</div>
}
</div>
);
}
}
APSettingsForm.propTypes = {
classes: PropTypes.object.isRequired,
apSettingsFetched: PropTypes.bool.isRequired,
apSettings: PropTypes.object,
errorMessage: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
handleValueChange: PropTypes.func.isRequired

34
interface/src/forms/ManageUsersForm.js
View File

@ -5,7 +5,6 @@ import { ValidatorForm } from 'react-material-ui-form-validator';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
@ -14,7 +13,6 @@ import TableFooter from '@material-ui/core/TableFooter';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Box from '@material-ui/core/Box';
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import CloseIcon from '@material-ui/icons/Close';
@ -25,22 +23,12 @@ import UserForm from './UserForm';
import { withAuthenticationContext } from '../authentication/Context';
const styles = theme => ({
loadingSettings: {
margin: theme.spacing(0.5),
},
loadingSettingsDetails: {
margin: theme.spacing(4),
textAlign: "center"
},
button: {
marginRight: theme.spacing(2),
marginTop: theme.spacing(2),
},
table: {
'& td, & th': { padding: theme.spacing(0.5) }
},
actions: {
whiteSpace: "nowrap"
}
});
@ -134,18 +122,9 @@ class ManageUsersForm extends React.Component {
}
render() {
const { classes, userData, userDataFetched, errorMessage, onReset } = this.props;
const { classes, userData, onReset } = this.props;
const { user, creating } = this.state;
return (
!userDataFetched ?
<div className={classes.loadingSettings}>
<LinearProgress className={classes.loadingSettingsDetails} />
<Typography variant="h4" className={classes.loadingSettingsDetails}>
Loading...
</Typography>
</div>
:
userData ?
<Fragment>
<ValidatorForm onSubmit={this.onSubmit}>
<Table className={classes.table}>
@ -217,15 +196,6 @@ class ManageUsersForm extends React.Component {
/>
}
</Fragment>
:
<div className={classes.loadingSettings}>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</div>
);
}
@ -234,8 +204,6 @@ class ManageUsersForm extends React.Component {
ManageUsersForm.propTypes = {
classes: PropTypes.object.isRequired,
userData: PropTypes.object,
userDataFetched: PropTypes.bool.isRequired,
errorMessage: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
setData: PropTypes.func.isRequired,

49
interface/src/forms/NTPSettingsForm.js
View File

@ -1,24 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import Typography from '@material-ui/core/Typography';
import isIP from '../validators/isIP';
import isHostname from '../validators/isHostname';
import or from '../validators/or';
const styles = theme => ({
loadingSettings: {
margin: theme.spacing(0.5),
},
loadingSettingsDetails: {
margin: theme.spacing(4),
textAlign: "center"
},
textField: {
width: "100%"
},
@ -35,23 +26,9 @@ class NTPSettingsForm extends React.Component {
}
render() {
const { classes, ntpSettingsFetched, ntpSettings, errorMessage, handleValueChange, onSubmit, onReset } = this.props;
const { classes, ntpSettings, handleValueChange, onSubmit, onReset } = this.props;
return (
<div>
{
!ntpSettingsFetched ?
<div className={classes.loadingSettings}>
<LinearProgress className={classes.loadingSettingsDetails}/>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
Loading...
</Typography>
</div>
: ntpSettings ?
<ValidatorForm onSubmit={onSubmit}>
<TextValidator
validators={['required', 'isIPOrHostname']}
errorMessages={['Server is required', "Not a valid IP address or hostname"]}
@ -62,10 +39,9 @@ class NTPSettingsForm extends React.Component {
onChange={handleValueChange('server')}
margin="normal"
/>
<TextValidator
validators={['required','isNumber','minNumber:60','maxNumber:86400']}
errorMessages={['Interval is required','Interval must be a number','Must be at least 60 seconds',"Must not be more than 86400 seconds (24 hours)"]}
validators={['required', 'isNumber', 'minNumber:60', 'maxNumber:86400']}
errorMessages={['Interval is required', 'Interval must be a number', 'Must be at least 60 seconds', "Must not be more than 86400 seconds (24 hours)"]}
name="interval"
label="Interval (Seconds)"
className={classes.textField}
@ -74,37 +50,20 @@ class NTPSettingsForm extends React.Component {
onChange={handleValueChange('interval')}
margin="normal"
/>
<Button variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</ValidatorForm>
:
<div className={classes.loadingSettings}>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</div>
}
</div>
);
}
}
NTPSettingsForm.propTypes = {
classes: PropTypes.object.isRequired,
ntpSettingsFetched: PropTypes.bool.isRequired,
ntpSettings: PropTypes.object,
errorMessage: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
handleValueChange: PropTypes.func.isRequired,

44
interface/src/forms/OTASettingsForm.js
View File

@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Switch from '@material-ui/core/Switch';
import LinearProgress from '@material-ui/core/LinearProgress';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
import Typography from '@material-ui/core/Typography';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import isIP from '../validators/isIP';
@ -15,13 +13,6 @@ import or from '../validators/or';
import PasswordValidator from '../components/PasswordValidator';
const styles = theme => ({
loadingSettings: {
margin: theme.spacing(0.5),
},
loadingSettingsDetails: {
margin: theme.spacing(4),
textAlign: "center"
},
switchControl: {
width: "100%",
marginTop: theme.spacing(2),
@ -43,23 +34,9 @@ class OTASettingsForm extends React.Component {
}
render() {
const { classes, otaSettingsFetched, otaSettings, errorMessage, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
const { classes, otaSettings, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
return (
<div>
{
!otaSettingsFetched ?
<div className={classes.loadingSettings}>
<LinearProgress className={classes.loadingSettingsDetails}/>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
Loading...
</Typography>
</div>
: otaSettings ?
<ValidatorForm onSubmit={onSubmit}>
<FormControlLabel className={classes.switchControl}
control={
<Switch
@ -71,7 +48,6 @@ class OTASettingsForm extends React.Component {
}
label="Enable OTA Updates?"
/>
<TextValidator
validators={['required', 'isNumber', 'minNumber:1025', 'maxNumber:65535']}
errorMessages={['Port is required', "Must be a number", "Must be greater than 1024 ", "Max value is 65535"]}
@ -83,7 +59,6 @@ class OTASettingsForm extends React.Component {
onChange={handleValueChange('port')}
margin="normal"
/>
<PasswordValidator
validators={['required', 'matchRegexp:^.{1,64}$']}
errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
@ -94,37 +69,20 @@ class OTASettingsForm extends React.Component {
onChange={handleValueChange('password')}
margin="normal"
/>
<Button variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</ValidatorForm>
:
<div className={classes.loadingSettings}>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</div>
}
</div>
);
}
}
OTASettingsForm.propTypes = {
classes: PropTypes.object.isRequired,
otaSettingsFetched: PropTypes.bool.isRequired,
otaSettings: PropTypes.object,
errorMessage: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
handleValueChange: PropTypes.func.isRequired,

30
interface/src/forms/SecuritySettingsForm.js
View File

@ -4,7 +4,6 @@ import { ValidatorForm } from 'react-material-ui-form-validator';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
@ -12,13 +11,6 @@ import PasswordValidator from '../components/PasswordValidator';
import { withAuthenticationContext } from '../authentication/Context';
const styles = theme => ({
loadingSettings: {
margin: theme.spacing(0.5),
},
loadingSettingsDetails: {
margin: theme.spacing(4),
textAlign: "center"
},
textField: {
width: "100%"
},
@ -36,17 +28,8 @@ class SecuritySettingsForm extends React.Component {
}
render() {
const { classes, securitySettingsFetched, securitySettings, errorMessage, handleValueChange, onReset } = this.props;
const { classes, securitySettings, handleValueChange, onReset } = this.props;
return (
!securitySettingsFetched ?
<div className={classes.loadingSettings}>
<LinearProgress className={classes.loadingSettingsDetails} />
<Typography variant="h4" className={classes.loadingSettingsDetails}>
Loading...
</Typography>
</div>
:
securitySettings ?
<ValidatorForm onSubmit={this.onSubmit} ref="SecuritySettingsForm">
<PasswordValidator
validators={['required', 'matchRegexp:^.{1,64}$']}
@ -70,24 +53,13 @@ class SecuritySettingsForm extends React.Component {
Reset
</Button>
</ValidatorForm>
:
<div className={classes.loadingSettings}>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</div>
);
}
}
SecuritySettingsForm.propTypes = {
classes: PropTypes.object.isRequired,
securitySettingsFetched: PropTypes.bool.isRequired,
securitySettings: PropTypes.object,
errorMessage: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
handleValueChange: PropTypes.func.isRequired,

37
interface/src/forms/WiFiSettingsForm.js
View File

@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LinearProgress from '@material-ui/core/LinearProgress';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
@ -80,21 +78,8 @@ class WiFiSettingsForm extends React.Component {
}
render() {
const { classes, wifiSettingsFetched, wifiSettings, errorMessage, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
const { classes, wifiSettings, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
return (
<div>
{
!wifiSettingsFetched ?
<div className={classes.loadingSettings}>
<LinearProgress className={classes.loadingSettingsDetails} />
<Typography variant="h4" className={classes.loadingSettingsDetails}>
Loading...
</Typography>
</div>
: wifiSettings ?
<ValidatorForm onSubmit={onSubmit} ref="WiFiSettingsForm">
{
selectedNetwork ? this.renderSelectedNetwork() :
@ -122,7 +107,6 @@ class WiFiSettingsForm extends React.Component {
margin="normal"
/>
}
<TextValidator
validators={['required', 'isHostname']}
errorMessages={['Hostname is required', "Not a valid hostname"]}
@ -133,7 +117,6 @@ class WiFiSettingsForm extends React.Component {
onChange={handleValueChange('hostname')}
margin="normal"
/>
<FormControlLabel className={classes.checkboxControl}
control={
<Checkbox
@ -144,7 +127,6 @@ class WiFiSettingsForm extends React.Component {
}
label="Static IP Config?"
/>
{
wifiSettings.static_ip_config &&
<Fragment>
@ -200,37 +182,20 @@ class WiFiSettingsForm extends React.Component {
/>
</Fragment>
}
<Button variant="contained" color="primary" className={classes.button} type="submit">
Save
</Button>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</ValidatorForm>
:
<div className={classes.loadingSettings}>
<Typography variant="h4" className={classes.loadingSettingsDetails}>
{errorMessage}
</Typography>
<Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset
</Button>
</div>
}
</div>
);
}
}
WiFiSettingsForm.propTypes = {
classes: PropTypes.object.isRequired,
wifiSettingsFetched: PropTypes.bool.isRequired,
wifiSettings: PropTypes.object,
errorMessage: PropTypes.string,
deselectNetwork: PropTypes.func,
selectedNetwork: PropTypes.object,
onSubmit: PropTypes.func.isRequired,