feat: add sliders

jembi · Oct 17, 2023 · 9e185e7 · 9e185e7
1 parent 5fa7de4
commit 9e185e7
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 25 deletions.
diff --git a/JeMPI_Apps/JeMPI_UI/src/components/import/DropZone.tsx b/JeMPI_Apps/JeMPI_UI/src/components/import/DropZone.tsx
@@ -7,6 +7,7 @@ import {
   CardContent,
   Checkbox,
   Grid,
+  Slider,
   TextField,
   Typography
 } from '@mui/material'
@@ -31,6 +32,10 @@ const MAX_UPLOAD_FILE_SIZE_IN_BYTES = megabytesToBytes(
 )
 
 const DropZone: FC = () => {
+  const { enqueueSnackbar } = useSnackbar()
+  const [fileObjs, setFilesObj] = useState<FileObj | undefined>()
+  const abortControllerRef = useRef<AbortController>(new AbortController())
+
   const {
     handleChange,
     handleSubmit,
@@ -45,16 +50,12 @@ const DropZone: FC = () => {
       windowSize: 0
     },
     onSubmit: () => {
-      if (fileObjs) {
+      if (fileObjs?.file) {
         uploadFileMutation.mutate(fileObjs)
       }
     }
   })
 
-  const { enqueueSnackbar } = useSnackbar()
-  const [fileObjs, setFilesObj] = useState<FileObj | undefined>()
-  const abortControllerRef = useRef<AbortController>(new AbortController())
-
   const onDrop = (
     acceptedFiles: File[],
     fileRejections: FileRejection[]
@@ -156,7 +157,7 @@ const DropZone: FC = () => {
     setFilesObj(undefined)
   }
 
-  const uploadList = (
+  const uploadList: JSX.Element = (
     <>
       {fileObjs && (
         <UploadFileListItem
@@ -207,19 +208,6 @@ const DropZone: FC = () => {
               sx={{ marginTop: '1rem' }}
               alignItems="center"
             >
-              <Grid item xs={9}>
-                <Typography fontWeight="bold" fontSize="1rem">
-                  Generate Report:
-                </Typography>
-              </Grid>
-              <Grid item xs={3}>
-                <Checkbox
-                  name="reporting"
-                  checked={FormValues.reporting}
-                  value={FormValues.reporting}
-                  onChange={handleChange}
-                />
-              </Grid>
               <Grid item xs={9}>
                 <Typography fontWeight="bold" fontSize="1rem">
                   Compute M&U before linking:
@@ -238,7 +226,18 @@ const DropZone: FC = () => {
                   Linking:
                 </Typography>
               </Grid>
-              <Grid item xs={12} md={4}>
+              <Grid item xs={12} md={4} sx={{ padding: '1rem' }}>
+                <Slider
+                  value={FormValues.leftMargin}
+                  onChange={handleChange}
+                  getAriaValueText={(e: number) => e.toString()}
+                  valueLabelDisplay="auto"
+                  name="leftMargin"
+                  step={0.1}
+                  marks
+                  min={0}
+                  max={1}
+                />
                 <TextField
                   name="leftMargin"
                   type="number"
@@ -251,7 +250,18 @@ const DropZone: FC = () => {
                   fullWidth
                 />
               </Grid>
-              <Grid item xs={12} md={4}>
+              <Grid item xs={12} md={4} sx={{ padding: '1rem' }}>
+                <Slider
+                  value={FormValues.threshold}
+                  onChange={handleChange}
+                  getAriaValueText={(e: number) => e.toString()}
+                  valueLabelDisplay="auto"
+                  name="threshold"
+                  step={0.1}
+                  marks
+                  min={0}
+                  max={1}
+                />
                 <TextField
                   name="threshold"
                   type="number"
@@ -260,11 +270,22 @@ const DropZone: FC = () => {
                   label="Threshold"
                   value={FormValues.threshold}
                   onChange={handleChange}
-                  inputProps={{ min: 0, max: 100, step: 0.01 }}
+                  inputProps={{ min: 0, max: 1, step: 0.01 }}
                   fullWidth
                 />
               </Grid>
-              <Grid item xs={12} md={4}>
+              <Grid item xs={12} md={4} sx={{ padding: '1rem' }}>
+                <Slider
+                  value={FormValues.rightMargin}
+                  getAriaValueText={(e: number) => e.toString()}
+                  valueLabelDisplay="auto"
+                  onChange={handleChange}
+                  name="rightMargin"
+                  step={0.1}
+                  marks
+                  min={0}
+                  max={1}
+                />
                 <TextField
                   name="rightMargin"
                   type="number"
@@ -273,7 +294,7 @@ const DropZone: FC = () => {
                   label="Notification right margin"
                   value={FormValues.rightMargin}
                   onChange={handleChange}
-                  inputProps={{ min: 0, max: 100, step: 0.01 }}
+                  inputProps={{ min: 0, max: 1, step: 0.01 }}
                   fullWidth
                 />
               </Grid>
@@ -283,6 +304,17 @@ const DropZone: FC = () => {
                 </Typography>
               </Grid>
               <Grid item xs={12} md={4}>
+                <Slider
+                  value={FormValues.windowSize}
+                  getAriaValueText={(e: number) => e.toString()}
+                  valueLabelDisplay="auto"
+                  onChange={handleChange}
+                  name="windowSize"
+                  step={0.1}
+                  marks
+                  min={0}
+                  max={1}
+                />
                 <TextField
                   name="windowSize"
                   type="number"
@@ -295,6 +327,19 @@ const DropZone: FC = () => {
                   fullWidth
                 />
               </Grid>
+              <Grid item xs={9}>
+                <Typography fontWeight="bold" fontSize="1rem">
+                  Generate Report:
+                </Typography>
+              </Grid>
+              <Grid item xs={3}>
+                <Checkbox
+                  name="reporting"
+                  checked={FormValues.reporting}
+                  value={FormValues.reporting}
+                  onChange={handleChange}
+                />
+              </Grid>
             </Grid>
           </form>
         </CardContent>

diff --git a/JeMPI_Apps/JeMPI_UI/src/components/import/UploadFileListItem.tsx b/JeMPI_Apps/JeMPI_UI/src/components/import/UploadFileListItem.tsx
@@ -81,7 +81,7 @@ const UploadFileListItem: FC<FileObjProps> = (props: FileObjProps) => {
           variant="buffer"
           value={props.fileObj.progress}
           valueBuffer={100}
-        />{' '}
+        />
       </Grid>
     </Grid>
   )
-Original file line number
+Diff line change
@@ Expand Up @@
               variant="buffer"
               value={props.fileObj.progress}
               valueBuffer={100}
-            />{' '}
+            />
           </Grid>
         </Grid>
       )
@@ Expand Down @@