a

interface/src/project/FanCtlProject.tsx

@@ -7,6 +7,7 @@ import { PROJECT_PATH } from '../api';
 import { MenuAppBar } from '../components';
 import { AuthenticatedRoute } from '../authentication';
 import FanCtlControl from './FanCtlControl';
+import FanCtlSettings from './FanCtlSettings';
 
 class FanCtlProject extends Component<RouteComponentProps> {
 
@@ -23,7 +24,7 @@ class FanCtlProject extends Component<RouteComponentProps> {
         </Tabs>
         <Switch>
           <AuthenticatedRoute exact path={`/${PROJECT_PATH}/fanctl/control`} component={FanCtlControl} />
-          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/fanctl/settings`} component={FanCtlControl} />
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/fanctl/settings`} component={FanCtlSettings} />
           <Redirect to={`/${PROJECT_PATH}/fanctl/control`} />
         </Switch>
       </MenuAppBar>

interface/src/project/FanCtlSettings.tsx

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { ValidatorForm } from 'react-material-ui-form-validator';
+
+import { Typography, Box, Checkbox } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+
+import { ENDPOINT_ROOT } from '../api';
+import { restController, RestControllerProps, RestFormLoader, RestFormProps, FormActions, FormButton, SectionContent, BlockFormControlLabel } from '../components';
+
+import { FanStatus } from './types';
+
+export const FAN_STATUS_ENDPOINT = ENDPOINT_ROOT + "fanState";
+
+
+
+
+
+type FanStatusRestControllerProps = RestControllerProps<FanStatus>;
+
+class FanStatusRestController extends Component<FanStatusRestControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title='REST Controller' titleGutter>
+        <RestFormLoader
+          {...this.props}
+          render={props => (
+            <FanStatusRestControllerForm {...props} />
+          )}
+        />
+      </SectionContent>
+    )
+  }
+
+}
+
+export default restController(FAN_STATUS_ENDPOINT, FanStatusRestController);
+
+type FanStatusRestControllerFormProps = RestFormProps<FanStatus>;
+
+function FanStatusRestControllerForm(props: FanStatusRestControllerFormProps) {
+  const { data, saveData, handleValueChange } = props;
+  return (
+    <ValidatorForm onSubmit={saveData}>
+      <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
+        <Typography variant="body1">
+          The form below controls the LED via the RESTful service exposed by the ESP device.
+        </Typography>
+      </Box>
+      <BlockFormControlLabel
+        control={
+          <Checkbox
+            checked={data.fan_status}
+            onChange={handleValueChange('fan_status')}
+            color="primary"
+          />
+        }
+        label="Fan State ?"
+      />
+      <FormActions>
+        <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+          Save
+        </FormButton>
+      </FormActions>
+    </ValidatorForm>
+  );
+}

interface/src/project/types.ts

@@ -12,4 +12,5 @@ export interface FanStatus {
   fan_speed : number;
   temperature_thres_low : number;
   temperature_thres_high : number;
+  fan_status : boolean;
 }