CEC-1256/CEC-1330 data logger for vehicles/fleets and details tabs for vehicles/fleets (#136)

* forms for fleet can filters

* unit tests for fleet filters

* removing warnings

* updating regex

* added fleet details page

* fleet pages

* smoothed out bugs

* fleets done

* working update, delete vehicles

* finished mocks, still need snapshots and context tests

* contexts done

* snapshot tests

* updating code smells

* smells

src/components/Fleets/Add/index.jsx

@@ -1,6 +1,15 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Redirect } 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 {
@@ -20,11 +29,15 @@ const MainForm = () => {
     },
   } = useUserContext();
   const classes = useStyles();
-  const nameEl = useRef(null);
-  const canbusEnabledEl = useRef(null);
-  const logLevelEl = useRef(null);
   const [redirect, setRedirect] = useState(null);
 
+  const nameEl = 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(() => {
     setTitle("Add Fleet");
     setSitePath([
@@ -39,16 +52,42 @@ 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 = {
         name: nameEl.current.value,
-        canbus: { enabled: canbusEnabledEl.current.value === "true" },
-        log_level: logLevelEl.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 addFleet(formData, token);
+      if (!result || result.error) return;
 
       setMessage(`Added ${result.name}`);
       setRedirect(`/fleets`);
@@ -78,33 +117,69 @@ const MainForm = () => {
           fullWidth
           inputRef={nameEl}
         />
+        <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="warn" control={<Radio />} label="Warn" />
+          <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="canbus"
-          name="canbus"
-          label='CANBus Enabled'
-          defaultValue="true"
+          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: "255",
+            maxLength: "12",
           }}
+          type="number"
+          disabled={!dataLoggerEnabled}
           required
           fullWidth
-          inputRef={canbusEnabledEl}
-        />
-        <TextField
-          id="log-level"
-          name="log-level"
-          label='Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")'
-          defaultValue="error"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={logLevelEl}
         />
         <Button
           type="submit"