add demo project implementation

interface/.env.development

@@ -1 +1 @@
-REACT_APP_ENDPOINT_ROOT=http://192.168.0.19/rest/
+REACT_APP_ENDPOINT_ROOT=http://192.168.0.20/rest/

interface/src/components/LoadingNotification.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles(theme => ({
+  loadingSettings: {
+    margin: theme.spacing(0.5),
+  },
+  loadingSettingsDetails: {
+    margin: theme.spacing(4),
+    textAlign: "center"
+  },
+  button: {
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
+  }
+}));
+
+export default function LoadingNotification(props) {
+  const classes = useStyles();
+  const { fetched, errorMessage, onReset, children } = props;
+  return (
+    <div>
+      {
+        fetched ?
+          errorMessage ?
+            <div className={classes.loadingSettings}>
+              <Typography variant="h4" className={classes.loadingSettingsDetails}>
+                {errorMessage}
+              </Typography>
+              <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
+                Reset
+              </Button>
+            </div>
+            :
+            children
+          :
+          <div className={classes.loadingSettings}>
+            <LinearProgress className={classes.loadingSettingsDetails} />
+            <Typography variant="h4" className={classes.loadingSettingsDetails}>
+              Loading...
+            </Typography>
+          </div>
+      }
+    </div>
+  );
+}
+
+LoadingNotification.propTypes = {
+  fetched: PropTypes.bool.isRequired,
+  onReset: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string
+};

interface/src/components/RestComponent.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { withSnackbar } from 'notistack';
 import { redirectingAuthorizedFetch } from '../authentication/Authentication';
+
 /*
 * It is unlikely this application will grow complex enough to require redux.
 *
@@ -86,9 +87,9 @@ export const restComponent = (endpointUrl, FormComponent) => {
           });
       }
 
-      handleValueChange = name => event => {
+      handleValueChange = name => (event, newValue) => {
         const { data } = this.state;
-        data[name] = event.target.value;
+        data[name] = newValue;
         this.setState({ data });
       };
 

interface/src/containers/SecuritySettings.js

@@ -12,16 +12,16 @@ class SecuritySettings extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage } = this.props;
+    const { data, fetched, errorMessage, saveData, loadData, handleValueChange } = this.props;
     return (
       <SectionContent title="Security Settings">
         <SecuritySettingsForm
           securitySettings={data}
           securitySettingsFetched={fetched}
           errorMessage={errorMessage}
-          onSubmit={this.props.saveData}
-          onReset={this.props.loadData}
-          handleValueChange={this.props.handleValueChange}
+          onSubmit={saveData}
+          onReset={loadData}
+          handleValueChange={handleValueChange}
         />
       </SectionContent>
     )

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 {