Rick Watson
5 years ago
17 changed files with 250 additions and 20 deletions
-
6interface/.env
-
2interface/.env.development
-
5interface/src/AppRouting.js
-
3interface/src/authentication/Authentication.js
-
10interface/src/components/MenuAppBar.js
-
9interface/src/components/SectionContent.js
-
1interface/src/constants/App.js
-
2interface/src/constants/Env.js
-
4interface/src/containers/APStatus.js
-
2interface/src/containers/ManageUsers.js
-
4interface/src/containers/SignInPage.js
-
22interface/src/project/DemoController.js
-
99interface/src/project/DemoInformation.js
-
37interface/src/project/DemoProject.js
-
31interface/src/project/ProjectMenu.js
-
32interface/src/project/ProjectRouting.js
-
1interface/src/sections/NetworkTime.js
@ -1 +1,5 @@ |
|||
REACT_APP_NAME=ESP8266 React |
|||
# This is the name of your project. It appears on the sign-in page and in the menu bar. |
|||
REACT_APP_PROJECT_NAME=ESP8266 React |
|||
|
|||
# This is the url path your project will be exposed under. |
|||
REACT_APP_PROJECT_PATH=project |
@ -1 +1 @@ |
|||
REACT_APP_ENDPOINT_ROOT=http://192.168.0.11/rest/ |
|||
REACT_APP_ENDPOINT_ROOT=http://192.168.0.19/rest/ |
@ -1 +0,0 @@ |
|||
export const APP_NAME = process.env.REACT_APP_NAME; |
@ -0,0 +1,2 @@ |
|||
export const PROJECT_NAME = process.env.REACT_APP_PROJECT_NAME; |
|||
export const PROJECT_PATH = process.env.REACT_APP_PROJECT_PATH; |
@ -0,0 +1,22 @@ |
|||
import React, { Component } from 'react'; |
|||
|
|||
import { withStyles } from '@material-ui/core/styles'; |
|||
import SectionContent from '../components/SectionContent'; |
|||
|
|||
const styles = theme => ({ |
|||
|
|||
}); |
|||
|
|||
class DemoController extends Component { |
|||
|
|||
render() { |
|||
return ( |
|||
<SectionContent title="Controller" titleGutter> |
|||
TODO - This will contain a form which controls the speed of the built in LED. |
|||
</SectionContent> |
|||
) |
|||
} |
|||
|
|||
} |
|||
|
|||
export default withStyles(styles)(DemoController); |
@ -0,0 +1,99 @@ |
|||
import React, { Component } from 'react'; |
|||
|
|||
import { withStyles } from '@material-ui/core/styles'; |
|||
import Table from '@material-ui/core/Table'; |
|||
import TableHead from '@material-ui/core/TableHead'; |
|||
import TableCell from '@material-ui/core/TableCell'; |
|||
import TableBody from '@material-ui/core/TableBody'; |
|||
import TableRow from '@material-ui/core/TableRow'; |
|||
import Typography from '@material-ui/core/Typography'; |
|||
import SectionContent from '../components/SectionContent'; |
|||
|
|||
const styles = theme => ({ |
|||
fileTable: { |
|||
marginBottom: theme.spacing(2) |
|||
} |
|||
}); |
|||
|
|||
class DemoInformation extends Component { |
|||
|
|||
render() { |
|||
const { classes } = this.props; |
|||
return ( |
|||
<SectionContent title="Demo Project - Blink Speed Controller" titleGutter> |
|||
<Typography variant="body1" paragraph> |
|||
This simple demo project allows you to control the blink speed of the built-in LED. |
|||
It demonstrates how the esp8266-react framework may be extended for your own IoT project. |
|||
</Typography> |
|||
<Typography variant="body1" paragraph> |
|||
It is recommended that you keep your project interface code under the 'project' directory. |
|||
This serves to isolate your project code from the from the rest of the user interface which should |
|||
simplify merges should you wish to update your project with future framework changes. |
|||
</Typography> |
|||
<Typography variant="body1" paragraph> |
|||
The demo project interface code is structured as follows: |
|||
</Typography> |
|||
<Table className={classes.fileTable}> |
|||
<TableHead> |
|||
<TableRow> |
|||
<TableCell> |
|||
File |
|||
</TableCell> |
|||
<TableCell> |
|||
Description |
|||
</TableCell> |
|||
</TableRow> |
|||
</TableHead> |
|||
<TableBody> |
|||
<TableRow> |
|||
<TableCell> |
|||
project/ProjectMenu.js |
|||
</TableCell> |
|||
<TableCell> |
|||
You can add your project's screens to the side bar here. |
|||
</TableCell> |
|||
</TableRow> |
|||
<TableRow> |
|||
<TableCell> |
|||
project/ProjectRouting.js |
|||
</TableCell> |
|||
<TableCell> |
|||
The routing which controls the screens of your project. |
|||
</TableCell> |
|||
</TableRow> |
|||
<TableRow> |
|||
<TableCell> |
|||
project/DemoProject.js |
|||
</TableCell> |
|||
<TableCell> |
|||
This screen, with tabs and tab routing. |
|||
</TableCell> |
|||
</TableRow> |
|||
<TableRow> |
|||
<TableCell> |
|||
project/DemoInformation.js |
|||
</TableCell> |
|||
<TableCell> |
|||
The demo information tab. |
|||
</TableCell> |
|||
</TableRow> |
|||
<TableRow> |
|||
<TableCell> |
|||
project/DemoController.js |
|||
</TableCell> |
|||
<TableCell> |
|||
The demo controller tab, to control the built-in LED. |
|||
</TableCell> |
|||
</TableRow> |
|||
</TableBody> |
|||
</Table> |
|||
<Typography variant="body1" paragraph> |
|||
See the project <a href="https://github.com/rjwats/esp8266-react/">README</a> for a full description of the demo project. |
|||
</Typography> |
|||
</SectionContent> |
|||
) |
|||
} |
|||
|
|||
} |
|||
|
|||
export default withStyles(styles)(DemoInformation); |
@ -0,0 +1,37 @@ |
|||
import React, { Component } from 'react'; |
|||
import { Redirect, Switch } from 'react-router-dom' |
|||
|
|||
import { PROJECT_PATH } from '../constants/Env'; |
|||
import MenuAppBar from '../components/MenuAppBar'; |
|||
import AuthenticatedRoute from '../authentication/AuthenticatedRoute'; |
|||
import DemoInformation from './DemoInformation'; |
|||
import DemoController from './DemoController'; |
|||
|
|||
import Tabs from '@material-ui/core/Tabs'; |
|||
import Tab from '@material-ui/core/Tab'; |
|||
|
|||
class DemoProject extends Component { |
|||
|
|||
handleTabChange = (event, path) => { |
|||
this.props.history.push(path); |
|||
}; |
|||
|
|||
render() { |
|||
return ( |
|||
<MenuAppBar sectionTitle="Demo Project"> |
|||
<Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth"> |
|||
<Tab value={`/${PROJECT_PATH}/demo/information`} label="Information" /> |
|||
<Tab value={`/${PROJECT_PATH}/demo/controller`} label="Controller" /> |
|||
</Tabs> |
|||
<Switch> |
|||
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/information`} component={DemoInformation} /> |
|||
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/controller`} component={DemoController} /> |
|||
<Redirect to={`/${PROJECT_PATH}/demo/information`} /> |
|||
</Switch> |
|||
</MenuAppBar> |
|||
) |
|||
} |
|||
|
|||
} |
|||
|
|||
export default DemoProject; |
@ -0,0 +1,31 @@ |
|||
import React, { Component } from 'react'; |
|||
import { Link, withRouter } from 'react-router-dom'; |
|||
|
|||
import { PROJECT_PATH } from '../constants/Env'; |
|||
|
|||
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 SettingsRemoteIcon from '@material-ui/icons/SettingsRemote'; |
|||
import Divider from '@material-ui/core/Divider'; |
|||
|
|||
class ProjectMenu extends Component { |
|||
|
|||
render() { |
|||
const path = this.props.match.url; |
|||
return ( |
|||
<List> |
|||
<ListItem to={`/${PROJECT_PATH}/demo/`} selected={path.startsWith(`/${PROJECT_PATH}/demo/`)} button component={Link}> |
|||
<ListItemIcon> |
|||
<SettingsRemoteIcon /> |
|||
</ListItemIcon> |
|||
<ListItemText primary="Demo Project" /> |
|||
</ListItem> |
|||
</List> |
|||
) |
|||
} |
|||
|
|||
} |
|||
|
|||
export default withRouter(ProjectMenu); |
@ -0,0 +1,32 @@ |
|||
import React, { Component } from 'react'; |
|||
import { Redirect, Switch } from 'react-router'; |
|||
|
|||
import { PROJECT_PATH } from '../constants/Env'; |
|||
import AuthenticatedRoute from '../authentication/AuthenticatedRoute'; |
|||
import DemoProject from './DemoProject'; |
|||
|
|||
class ProjectRouting extends Component { |
|||
|
|||
render() { |
|||
return ( |
|||
<Switch> |
|||
{ |
|||
/* |
|||
* Add your project page routing below. |
|||
*/ |
|||
} |
|||
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/*`} component={DemoProject} /> |
|||
{ |
|||
/* |
|||
* The redirect below caters for the default project route and redirecting invalid paths. |
|||
* The "to" property must match one of the routes above for this to work correctly. |
|||
*/ |
|||
} |
|||
<Redirect to={`/${PROJECT_PATH}/demo/`} /> |
|||
</Switch> |
|||
) |
|||
} |
|||
|
|||
} |
|||
|
|||
export default ProjectRouting; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue