update project

interface/src/project/FanCtlControl.tsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { Typography, Box, List, ListItem, ListItemText } from '@material-ui/core';
+import { SectionContent } from '../components';
+
+class FanCtlControl extends Component {
+
+  render() {
+    return (
+      <SectionContent title='Demo Information' titleGutter>
+        <Typography variant="body1" paragraph>
+          This simple demo project allows you to control 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 stored in the 'interface/src/project' directory:
+        </Typography>        
+        <List>
+          <ListItem>
+            <ListItemText
+              primary="ProjectMenu.tsx"
+              secondary="You can add your project's screens to the side bar here."
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="ProjectRouting.tsx"
+              secondary="The routing which controls the screens of your project."
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="DemoProject.tsx"
+              secondary="This screen, with tabs and tab routing."
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="DemoInformation.tsx"
+              secondary="The demo information page."
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="LightStateRestController.tsx"
+              secondary="A form which lets the user control the LED over a REST service."
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="LightStateWebSocketController.tsx"
+              secondary="A form which lets the user control and monitor the status of the LED over WebSockets."
+            />
+          </ListItem>
+          <ListItem>
+            <ListItemText
+              primary="LightMqttSettingsController.tsx"
+              secondary="A form which lets the user change the MQTT settings for MQTT based control of the LED."
+            />
+          </ListItem>
+        </List>
+        <Box mt={2}>
+          <Typography variant="body1">
+            See the project <a href="https://github.com/rjwats/esp8266-react/">README</a> for a full description of the demo project.
+          </Typography>
+        </Box>
+      </SectionContent>
+    )
+  }
+
+}
+
+export default FanCtlControl;

interface/src/project/FanCtlProject.tsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
+
+import { Tabs, Tab } from '@material-ui/core';
+
+import { PROJECT_PATH } from '../api';
+import { MenuAppBar } from '../components';
+import { AuthenticatedRoute } from '../authentication';
+import FanCtlControl from './FanCtlControl';
+
+class FanCtlProject extends Component<RouteComponentProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="Demo Project">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value={`/${PROJECT_PATH}/fanctl/control`} label="Control" />
+          <Tab value={`/${PROJECT_PATH}/fanctl/settings`} label="Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/fanctl/control`} component={FanCtlControl} />
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/fanctl/settings`} component={FanCtlControl} />
+          <Redirect to={`/${PROJECT_PATH}/fanctl/control`} />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+
+}
+
+export default FanCtlProject;

interface/src/project/ProjectMenu.tsx

@@ -12,11 +12,11 @@ class ProjectMenu extends Component<RouteComponentProps> {
     const path = this.props.match.url;
     return (
       <List>
-        <ListItem to={`/${PROJECT_PATH}/demo/`} selected={path.startsWith(`/${PROJECT_PATH}/demo/`)} button component={Link}>
+        <ListItem to={`/${PROJECT_PATH}/fanctl/`} selected={path.startsWith(`/${PROJECT_PATH}/fanctl/`)} button component={Link}>
           <ListItemIcon>
             <SettingsRemoteIcon />
           </ListItemIcon>
-          <ListItemText primary="Demo Project" />
+          <ListItemText primary="FanCtl Project" />
         </ListItem>
       </List>
     )

interface/src/project/ProjectRouting.tsx

@@ -4,7 +4,7 @@ import { Redirect, Switch } from 'react-router';
 import { PROJECT_PATH } from '../api';
 import { AuthenticatedRoute } from '../authentication';
 
-import DemoProject from './DemoProject';
+import FanCtlProject from './FanCtlProject';
 
 class ProjectRouting extends Component {
 
@@ -16,14 +16,14 @@ class ProjectRouting extends Component {
           * Add your project page routing below.
           */
         }
-        <AuthenticatedRoute exact path={`/${PROJECT_PATH}/demo/*`} component={DemoProject} />
+        <AuthenticatedRoute exact path={`/${PROJECT_PATH}/fanctl/*`} component={FanCtlProject} />
         {
           /*
           * 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/`} />
+        <Redirect to={`/${PROJECT_PATH}/fanctl/`} />
       </Switch>
     )
   }

interface/src/project/types.ts

@@ -7,3 +7,9 @@ export interface LightMqttSettings {
   name: string;
   mqtt_path : string;
 }
+
+export interface FanStatus {
+  fan_speed : number;
+  temperature_thres_low : number;
+  temperature_thres_high : number;
+}