CEC-3242 - New form for Fleet/AddVehicle (#243)

* CEC-3242 - New form for Fleet/AddVehicle

* fixes, improvements

* update snapshot

* CEC-3242 and CEC-3262

* update snapshot

* un-require removed fields from vehicle add

src/components/Fleets/Status/Vehicles/Add/index.jsx

@@ -1,6 +1,15 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Redirect, useParams } from "react-router";
-import { Button, TextField } from "@material-ui/core";
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField
+} from "@material-ui/core";
 
 import useStyles from "../../../../useStyles";
 import {
@@ -21,9 +30,15 @@ const MainForm = () => {
     },
   } = useUserContext();
   const classes = useStyles();
-  const vinEl = useRef(null);
   const [redirect, setRedirect] = useState(null);
 
+  const vinEl = useRef(null);
+  const [selectedLogLevel, setSelectedLogLevel] = useState("info");
+  const [canbusEnabled, setCANBusEnabled] = useState(true);
+  const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
+  const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
+  const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
+
   useEffect(() => {
     const title = "Add Vehicle";
     setTitle(title);
@@ -43,11 +58,41 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const onLogLevelChange = (event) => {
+    setSelectedLogLevel(event.target.value);
+  }
+
+  const onCANBusChange = (event) => {
+    setCANBusEnabled(event.target.checked);
+  }
+
+  const onDataLoggerChange = (event) => {
+    setDataLoggerEnabled(event.target.checked);
+  }
+
+  const onMaxMemBufferSizeChange = (event) => {
+    setMaxMemBufferSize(event.target.value);
+  }
+
+  const onMaxDiskBufferSizeChange = (event) => {
+    setMaxDiskBufferSize(event.target.value);
+  }
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
 
-      const formData = { vin: vinEl.current.value };
+      const formData = {
+        vin: vinEl.current.value,
+        log_level: selectedLogLevel,
+        canbus: {
+          enabled: canbusEnabled,
+          data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
+          max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
+          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
+        }
+      };
+
       const result = await addFleetVehicle(name, formData, token);
 
       setMessage(`Added ${result.vin}`);
@@ -78,6 +123,70 @@ const MainForm = () => {
           fullWidth
           inputRef={vinEl}
         />
+        <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
+        <RadioGroup
+          row
+          aria-labelledby="demo-row-radio-buttons-group-label"
+          name="log-level-group"
+          value={selectedLogLevel}
+          onChange={onLogLevelChange}
+          margin="normal"
+        >
+          <FormControlLabel value="trace" control={<Radio />} label="Trace" />
+          <FormControlLabel value="debug" control={<Radio />} label="Debug" />
+          <FormControlLabel value="info" control={<Radio />} label="Info" />
+          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
+          <FormControlLabel value="error" control={<Radio />} label="Error" />
+          <FormControlLabel value="critical" control={<Radio />} label="Critical" />
+        </RadioGroup>
+        <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
+        <FormGroup>
+          <FormControlLabel control={
+            <Checkbox
+              checked={canbusEnabled}
+              onChange={onCANBusChange}
+            />
+          } label="CAN Bus Enabled" />
+          <TextField
+            id="max_mem_buffer_size"
+            name="max_mem_buffer_size"
+            label='Max Memory Buffer Size (0 uses default size)'
+            value={maxMemBufferSize}
+            onChange={onMaxMemBufferSizeChange}
+            variant="outlined"
+            margin="normal"
+            inputProps={{
+              maxLength: "12",
+            }}
+            type="number"
+            disabled={!canbusEnabled}
+            required
+            fullWidth
+          />
+          <FormControlLabel control={
+            <Checkbox
+              checked={dataLoggerEnabled}
+              onChange={onDataLoggerChange}
+              disabled={!canbusEnabled}
+            />
+          } label="Data Logger Enabled" />
+        </FormGroup>
+        <TextField
+          id="max_disk_buffer_size"
+          name="max_disk_buffer_size"
+          label='Max Disk Buffer Size (0 uses default size)'
+          value={maxDiskBufferSize}
+          onChange={onMaxDiskBufferSizeChange}
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "12",
+          }}
+          type="number"
+          disabled={!dataLoggerEnabled}
+          required
+          fullWidth
+        />
         <Button
           type="submit"
           disabled={busy}