Merge branch 'release/0.9.0'

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

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Redirect, useParams } from "react-router";
 import {
+  Box,
   Button,
   Checkbox,
   FormControlLabel,
@@ -8,7 +9,11 @@ import {
   FormLabel,
   Radio,
   RadioGroup,
-  TextField
+  TextField,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
 } from "@material-ui/core";
 
 import useStyles from "../../../../useStyles";
@@ -19,11 +24,14 @@ import {
 import { useStatusContext } from "../../../../Contexts/StatusContext";
 import { useUserContext } from "../../../../Contexts/UserContext";
 import { logger } from "../../../../../services/monitoring";
+import { VehicleProvider } from "../../../../Contexts/VehicleContext";
+import CarSelectionTable from "../../../../Controls/CarSelectionTable";
+import SearchField from "../../../../Controls/SearchField";
 
 const MainForm = () => {
   const { name } = useParams();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
-  const { addFleetVehicle, busy } = useFleetContext();
+  const { addFleetVehicles, busy } = useFleetContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -32,7 +40,8 @@ const MainForm = () => {
   const classes = useStyles();
   const [redirect, setRedirect] = useState(null);
 
-  const vinEl = useRef(null);
+  const [vins, setVins] = useState([]);
+  const [search, setSearch] = useState("");
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -58,6 +67,30 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleSearch = (query) => {
+    setVins([]);
+    setSearch(query);
+  };
+
+  const handleSelectAll = (cars) => {
+    setVins(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newVins;
+      if (event.target.checked) {
+        newVins = [...vins];
+        newVins.push(key);
+      } else {
+        newVins = vins.filter((vin) => vin !== key);
+      }
+      setVins(newVins);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
   const onLogLevelChange = (event) => {
     setSelectedLogLevel(event.target.value);
   }
@@ -79,11 +112,11 @@ const MainForm = () => {
   }
 
   const onSubmit = async (event) => {
-    try {
-      event.preventDefault();
+    event.preventDefault();
 
+    try {
       const formData = {
-        vin: vinEl.current.value,
+        vins,
         log_level: selectedLogLevel,
         canbus: {
           enabled: canbusEnabled,
@@ -93,9 +126,9 @@ const MainForm = () => {
         }
       };
 
-      const result = await addFleetVehicle(name, formData, token);
+      const result = await addFleetVehicles(name, formData, token);
 
-      setMessage(`Added ${result.vin}`);
+      setMessage(`Added ${result.vins.join(", ")}`);
       setRedirect(`/fleet/${name}#vehicles`);
     } catch (e) {
       setMessage(e.message);
@@ -110,94 +143,106 @@ const MainForm = () => {
   return (
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
-          id="vin"
-          name="vin"
-          label="VIN"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "17",
-          }}
-          required
-          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
+        <SearchField classes={classes} onSearch={handleSearch}/>
+        <VehicleProvider sx={{ height: "auto" }}>
+          <CarSelectionTable
+            classes={classes}
+            token={token}
+            multiSelect={true}
+            search={{search}}
+            selected={vins}
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
           />
-          <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}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          {busy ? "Submitting..." : "Submit"}
-        </Button>
+        </VehicleProvider>
+
+        <Box className={classes.fleetVehicleAddSubmit}>
+          <Accordion>
+            <AccordionSummary>
+              <Typography>Additional Options</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box sx={{ width: "100%" }}>
+                <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
+                  />
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+          
+          <Button
+            type="submit"
+            disabled={busy}
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={onSubmit}
+          >
+            {busy ? "Submitting..." : "Submit"}
+          </Button>
+        </Box>
       </form>
     </div>
   );