OTA Upload Feature (#162)

* Improve restart behaviour under esp8266
* Backend to support firmware update over HTTP
* UI for uploading new firmware
* Documentation changes

interface/src/components/RestFormLoader.tsx

@@ -35,7 +35,7 @@ export default function RestFormLoader<D>(props: RestFormLoaderProps<D>) {
       <div className={classes.loadingSettings}>
         <LinearProgress className={classes.loadingSettingsDetails} />
         <Typography variant="h6" className={classes.loadingSettingsDetails}>
-          Loading...
+          Loading&hellip;
         </Typography>
       </div>
     );

interface/src/components/SingleUpload.tsx

@@ -0,0 +1,96 @@
+import React, { FC, Fragment } from 'react';
+import { useDropzone, DropzoneState } from 'react-dropzone';
+
+import { makeStyles, createStyles } from '@material-ui/styles';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import CancelIcon from '@material-ui/icons/Cancel';
+import { Theme, Box, Typography, LinearProgress, Button } from '@material-ui/core';
+
+interface SingleUploadStyleProps extends DropzoneState {
+  uploading: boolean;
+}
+
+const progressPercentage = (progress: ProgressEvent) => Math.round((progress.loaded * 100) / progress.total);
+
+const getBorderColor = (theme: Theme, props: SingleUploadStyleProps) => {
+  if (props.isDragAccept) {
+    return theme.palette.success.main;
+  }
+  if (props.isDragReject) {
+    return theme.palette.error.main;
+  }
+  if (props.isDragActive) {
+    return theme.palette.info.main;
+  }
+  return theme.palette.grey[700];
+}
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  dropzone: {
+    padding: theme.spacing(8, 2),
+    borderWidth: 2,
+    borderRadius: 2,
+    borderStyle: 'dashed',
+    color: theme.palette.grey[700],
+    transition: 'border .24s ease-in-out',
+    cursor: (props: SingleUploadStyleProps) => props.uploading ? 'default' : 'pointer',
+    width: '100%',
+    borderColor: (props: SingleUploadStyleProps) => getBorderColor(theme, props)
+  }
+}));
+
+export interface SingleUploadProps {
+  onDrop: (acceptedFiles: File[]) => void;
+  onCancel: () => void;
+  accept?: string | string[];
+  uploading: boolean;
+  progress?: ProgressEvent;
+}
+
+const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, accept, uploading, progress }) => {
+  const dropzoneState = useDropzone({ onDrop, accept, disabled: uploading, multiple: false });
+  const { getRootProps, getInputProps } = dropzoneState;
+  const classes = useStyles({ ...dropzoneState, uploading });
+
+
+  const renderProgressText = () => {
+    if (uploading) {
+      if (progress?.lengthComputable) {
+        return `Uploading: ${progressPercentage(progress)}%`;
+      }
+      return "Uploading\u2026";
+    }
+    return "Drop file here or click to browse";
+  }
+
+  const renderProgress = (progress?: ProgressEvent) => (
+    <LinearProgress
+      variant={!progress || progress.lengthComputable ? "determinate" : "indeterminate"}
+      value={!progress ? 0 : progress.lengthComputable ? progressPercentage(progress) : 0}
+    />
+  );
+
+  return (
+    <div {...getRootProps({ className: classes.dropzone })}>
+      <input {...getInputProps()} />
+      <Box flexDirection="column" display="flex" alignItems="center">
+        <CloudUploadIcon fontSize='large' />
+        <Typography variant="h6">
+          {renderProgressText()}
+        </Typography>
+        {uploading && (
+          <Fragment>
+            <Box width="100%" p={2}>
+              {renderProgress(progress)}
+            </Box>
+            <Button startIcon={<CancelIcon />} variant="contained" color="secondary" onClick={onCancel}>
+              Cancel
+            </Button>
+          </Fragment>
+        )}
+      </Box>
+    </div>
+  );
+}
+
+export default SingleUpload;

interface/src/components/index.ts

@@ -8,6 +8,7 @@ export { default as RestFormLoader } from './RestFormLoader';
 export { default as SectionContent } from './SectionContent';
 export { default as WebSocketFormLoader } from './WebSocketFormLoader';
 export { default as ErrorButton } from './ErrorButton';
+export { default as SingleUpload } from './SingleUpload';
 
 export * from './RestFormLoader';
 export * from './RestController';