add demo project implementation

interface/src/project/DemoController.js

@@ -1,22 +1,78 @@
 import React, { Component } from 'react';
-
-import { withStyles } from '@material-ui/core/styles';
 import SectionContent from '../components/SectionContent';
+import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 
-const styles = theme => ({
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+import { makeStyles } from '@material-ui/core/styles';
+import { ValidatorForm } from 'react-material-ui-form-validator';
 
-});
+export const DEMO_SETTINGS_ENDPOINT = process.env.REACT_APP_ENDPOINT_ROOT + "demoSettings";
+
+const valueToPercentage = (value) => `${Math.round(value / 255 * 100)}%`;
 
 class DemoController extends Component {
-
-  render() {    
+  componentDidMount() {
+    this.props.loadData();
+  }
+  
+  render() {
+    const { data, fetched, errorMessage, saveData, loadData, handleValueChange } = this.props;
     return (
       <SectionContent title="Controller" titleGutter>
-        TODO - This will contain a form which controls the speed of the built in LED.
+        <LoadingNotification
+          onReset={loadData}
+          fetched={fetched}
+          errorMessage={errorMessage}>
+          <DemoControllerForm
+            demoSettings={data}
+            onReset={loadData}
+            onSubmit={saveData}
+            handleValueChange={handleValueChange}
+          />
+        </LoadingNotification>
       </SectionContent>
     )
   }
-
 }
 
-export default withStyles(styles)(DemoController);
+const useStyles = makeStyles(theme => ({
+  button: {
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
+  },
+  blinkSpeedLabel:{
+    marginBottom: theme.spacing(5),
+  }
+}));
+  
+function DemoControllerForm(props) {
+  const { demoSettings, onSubmit, onReset, handleValueChange } = props;
+  const classes = useStyles();
+  return (
+    <ValidatorForm onSubmit={onSubmit}>
+      <Typography id="blink-speed-slider" className={classes.blinkSpeedLabel}>
+        Blink Speed
+      </Typography>
+      <Slider
+        value={demoSettings.blink_speed}
+        valueLabelFormat={valueToPercentage}
+        aria-labelledby="blink-speed-slider"
+        valueLabelDisplay="on"
+        min={0}
+        max={255}
+        onChange={handleValueChange('blink_speed')}
+      />
+      <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>
+  );
+}
+
+export default restComponent(DEMO_SETTINGS_ENDPOINT, DemoController);

interface/src/project/DemoInformation.js

@@ -7,6 +7,7 @@ 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 => ({

interface/src/project/ProjectMenu.js

@@ -8,7 +8,6 @@ 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 {