lukas/WordClockESP
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Rework routing

Browse Source
This commit is contained in:
Rick Watson 2019-05-26 21:27:35 +01:00
parent 2fa954d5b9
commit 9ee9596b72
7 changed files with 79 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
interface/src/AppRouting.js
View File

@ -2,19 +2,18 @@ import React, { Component } from 'react';
import { Redirect, Switch } from 'react-router';
// authentication
import * as Authentication from './authentication/Authentication';
import AuthenticationWrapper from './authentication/AuthenticationWrapper';
import AuthenticatedRoute from './authentication/AuthenticatedRoute';
import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
import NTPConfiguration from './containers/NTPConfiguration';
import OTAConfiguration from './containers/OTAConfiguration';
import APConfiguration from './containers/APConfiguration';
import SignInPage from './containers/SignInPage';
import Security from './sections/Security';
import WiFiConnection from './sections/WiFiConnection';
import AccessPoint from './sections/AccessPoint';
import NetworkTime from './sections/NetworkTime';
import Security from './sections/Security';
class AppRouting extends Component {
@ -28,8 +27,8 @@ class AppRouting extends Component {
<Switch>
<UnauthenticatedRoute exact path="/" component={SignInPage} />
<AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />
<AuthenticatedRoute exact path="/ap-configuration" component={APConfiguration} />
<AuthenticatedRoute exact path="/ntp-configuration" component={NTPConfiguration} />
<AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
<AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
<AuthenticatedRoute exact path="/ota-configuration" component={OTAConfiguration} />
<AuthenticatedRoute exact path="/security/*" component={Security} />
<Redirect to="/" />

4
interface/src/components/MenuAppBar.js
View File

@ -119,13 +119,13 @@ class MenuAppBar extends React.Component {
</ListItemIcon>
<ListItemText primary="WiFi Connection" />
</ListItem>
<ListItem button component={Link} to='/ap-configuration'>
<ListItem button component={Link} to='/ap/'>
<ListItemIcon>
<SettingsInputAntennaIcon />
</ListItemIcon>
<ListItemText primary="Access Point" />
</ListItem>
<ListItem button component={Link} to='/ntp-configuration'>
<ListItem button component={Link} to='/ntp/'>
<ListItemIcon>
<AccessTimeIcon />
</ListItemIcon>

39
interface/src/containers/APConfiguration.js
View File

@ -1,39 +0,0 @@
import React, { Component } from 'react';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import MenuAppBar from '../components/MenuAppBar';
import APSettings from './APSettings';
import APStatus from './APStatus';
class APConfiguration extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: "apStatus",
selectedNetwork: null
};
}
handleTabChange = (event, selectedTab) => {
this.setState({ selectedTab });
};
render() {
const { selectedTab } = this.state;
return (
<MenuAppBar sectionTitle="AP Configuration">
<Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="apStatus" label="AP Status" />
<Tab value="apSettings" label="AP Settings" />
</Tabs>
{selectedTab === "apStatus" && <APStatus />}
{selectedTab === "apSettings" && <APSettings />}
</MenuAppBar>
)
}
}
export default APConfiguration;

37
interface/src/containers/NTPConfiguration.js
View File

@ -1,37 +0,0 @@
import React, { Component } from 'react';
import MenuAppBar from '../components/MenuAppBar';
import NTPSettings from './NTPSettings';
import NTPStatus from './NTPStatus';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
class NTPConfiguration extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: "ntpStatus"
};
}
handleTabChange = (event, selectedTab) => {
this.setState({ selectedTab });
};
render() {
const { selectedTab } = this.state;
return (
<MenuAppBar sectionTitle="NTP Configuration">
<Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="ntpStatus" label="NTP Status" />
<Tab value="ntpSettings" label="NTP Settings" />
</Tabs>
{selectedTab === "ntpStatus" && <NTPStatus />}
{selectedTab === "ntpSettings" && <NTPSettings />}
</MenuAppBar>
)
}
}
export default NTPConfiguration

4
interface/src/forms/UserForm.js
View File

@ -43,12 +43,12 @@ class UserForm extends React.Component {
const { classes, user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props;
return (
<ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
<Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open={true} scroll="paper">
<Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open={true}>
<DialogTitle id="user-form-dialog-title">{creating ? 'Add' : 'Modify'} User</DialogTitle>
<DialogContent dividers={true}>
<TextValidator
validators={creating ? ['required', 'uniqueUsername', 'matchRegexp:^[a-zA-Z0-9_\\.]{1,24}$'] : []}
errorMessages={creating ? ['Username is required', "That username already exists", "Must be 1-24 characters: alpha numberic, '_' or '.'"] : []}
errorMessages={creating ? ['Username is required', "Username already exists", "Must be 1-24 characters: alpha numberic, '_' or '.'"] : []}
name="username"
label="Username"
className={classes.textField}

35
interface/src/sections/AccessPoint.js Normal file
View File

@ -0,0 +1,35 @@
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 APSettings from '../containers/APSettings';
import APStatus from '../containers/APStatus';
class AccessPoint extends Component {
handleTabChange = (event, path) => {
this.props.history.push(path);
};
render() {
return (
<MenuAppBar sectionTitle="AP Configuration">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="/ap/status" label="AP Status" />
<Tab value="/ap/settings" label="AP Settings" />
</Tabs>
<Switch>
<AuthenticatedRoute exact={true} path="/ap/status" component={APStatus} />
<AuthenticatedRoute exact={true} path="/ap/settings" component={APSettings} />
<Redirect to="/ap/status" />
</Switch>
</MenuAppBar>
)
}
}
export default AccessPoint;

35
interface/src/sections/NetworkTime.js Normal file
View File

@ -0,0 +1,35 @@
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 NTPSettings from '../containers/NTPSettings';
import NTPStatus from '../containers/NTPStatus';
class NetworkTime extends Component {
handleTabChange = (event, path) => {
this.props.history.push(path);
};
render() {
return (
<MenuAppBar sectionTitle="Network Time">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
<Tab value="/ntp/status" label="NTP Status" />
<Tab value="/ntp/settings" label="NTP Settings" />
</Tabs>
<Switch>
<AuthenticatedRoute exact={true} path="/ntp/status" component={NTPStatus} />
<AuthenticatedRoute exact={true} path="/ntp/settings" component={NTPSettings} />
<Redirect to="/ntp/status" />
</Switch>
</MenuAppBar>
)
}
}
export default NetworkTime