CEC-244 Remote car commands, search, sortable tables (#42)

* Add sortable table header

* Send bulk commands page
Update table page sizes
All tables are sortable

* Update site layout
Add search to update packages

* Reenable Datadog

* remove dev stuff

src/components/Cars/SendCommand/index.jsx

@@ -9,7 +9,7 @@ import useStyles from "../../useStyles";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 
-const SendCommand = ({ vin }) => {
+const SendCommand = ({ vins }) => {
   const classes = useStyles();
   const { sendCommand, busy } = useVehicleContext();
   const {
@@ -17,25 +17,59 @@ const SendCommand = ({ vin }) => {
       idToken: { jwtToken: token },
     },
   } = useUserContext();
+  const NoParameters = {
+    value: "",
+    label: "None",
+  };
   const { setMessage } = useStatusContext();
   const [command, setCommand] = useState("");
+  const [parameters, setParameters] = useState([NoParameters]);
+  const [parameter, setParameter] = useState("");
+  const changeCommandHandler = (e) => {
+    selectCommand(e.target.value);
+  };
 
-  const changeHandler = (e) => {
-    setCommand(e.target.value);
+  const selectCommand = (cmd) => {
+    const params = getParameters(cmd);
+    setCommand(cmd);
+    setParameters(params);
+    setParameter(params[0].value);
+  };
+
+  const changeParametersHandler = (e) => {
+    setParameter(e.target.value);
   };
 
   const clickHandler = async (e) => {
     try {
-      await sendCommand(vin, command, token);
-      setMessage(`Sent command to ${vin}`);
+      await sendCommand(vins, command, parameter, token);
+      if (vins.length === 1) {
+        setMessage(`Sent command to ${vins[0]}`);
+      } else {
+        setMessage(`Sent command to ${vins.length} cars`);
+      }
     } catch (e) {
       setMessage(e.message);
     }
   };
 
+  const getParameters = (command) => {
+    for (let i = 0, len = commands.length; i < len; i += 1) {
+      const item = commands[i];
+      if (item.value === command) {
+        if (!item.parameters) {
+          break;
+        }
+        return item.parameters;
+      }
+    }
+    return [NoParameters];
+  };
+
   useEffect(() => {
     if (!commands || commands.length === 0) return;
-    setCommand(commands[0].value);
+    selectCommand(commands[0].value);
+    // eslint-disable-next-line
   }, []);
 
   return (
@@ -52,7 +86,7 @@ const SendCommand = ({ vin }) => {
             name: "send-command",
             id: "send-command",
           }}
-          onChange={changeHandler}
+          onChange={changeCommandHandler}
         >
           {commands.map((item) => (
             <option key={item.value} value={item.value}>
@@ -61,12 +95,37 @@ const SendCommand = ({ vin }) => {
           ))}
         </Select>
       </FormControl>
+      <FormControl className={classes.formControlInline} variant="outlined">
+        <InputLabel
+          htmlFor="send-parameter"
+          style={{ backgroundColor: "White" }}
+        >
+          Parameter
+        </InputLabel>
+        <Select
+          native
+          value={parameter}
+          variant="outlined"
+          inputProps={{
+            name: "send-parameter",
+            id: "send-parameter",
+          }}
+          onChange={changeParametersHandler}
+          disabled={parameters.length === 0}
+        >
+          {parameters.map((item) => (
+            <option key={item.value} value={item.value}>
+              {item.label}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
       <IconButton
         color="primary"
         aria-label="send command"
         component="span"
         onClick={clickHandler}
-        disabled={busy}
+        disabled={busy || vins.length === 0}
       >
         <SendIcon fontSize="large" />
       </IconButton>
@@ -75,7 +134,7 @@ const SendCommand = ({ vin }) => {
 };
 
 SendCommand.propTypes = {
-  vin: PropTypes.string.isRequired,
+  vins: PropTypes.array.isRequired,
 };
 
 export default SendCommand;