WIP - demo project

interface/src/project/DemoController.js

@@ -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);

interface/src/project/DemoInformation.js

@@ -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);

interface/src/project/DemoProject.js

@@ -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;

interface/src/project/ProjectMenu.js

@@ -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);

interface/src/project/ProjectRouting.js

@@ -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;