CEC-4517 reset TBOX remote command (#369)

* CEC-4517 Diagnostic Commands tab

* snapshot

src/components/Controls/SendDiagnosticCommand/index.jsx

@@ -0,0 +1,119 @@
+import clsx from "clsx";
+
+import { Button, FormControl, InputLabel, Select, FormControlLabel, FormGroup } from "@material-ui/core";
+import Checkbox from '@mui/material/Checkbox';
+import React, { useEffect, useState } from "react";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { logger } from "../../../services/monitoring";
+
+
+import {
+  useVehicleContext
+} from "../../Contexts/VehicleContext";
+
+const commands = ["Reset"]
+const ecus = ["TBOX"]
+
+const SendDiagnosticCommand = ({ vin, token, classes }) => {
+
+  const { getState, sendDiagnosticCommand } = useVehicleContext();
+
+  const [carState, setCarState] = useState(null);
+  const { setMessage } = useStatusContext();
+
+  const [currentCommand, setCurrentCommand] = useState(commands[0].toLowerCase());
+  const [currentECUs] = useState([ecus[0]]);
+
+  const changeCommandHandler = (e) => {
+    setCurrentCommand(e.target.value);
+  };
+
+
+  //Update online/offline state
+  useEffect(() => {
+    if (!vin) return;
+    getCarState();
+    const interval = setInterval(getCarState, 5000);
+    return () => { clearInterval(interval); }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin]);
+
+  const getCarState = async () => {
+    try {
+      const result = await getState(token, vin);
+      setCarState(result.data);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const clickHandler = async (_) => {
+    try {
+      await sendDiagnosticCommand([vin], { body: { command: currentCommand, ecus: currentECUs } }, token);
+      setMessage(`Sent diagnostic command to ${vin}`);
+    } catch (error) {
+      setMessage(error.message);
+      logger.error(error.stack);
+    }
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <FormControl
+        className={classes.formControl}
+        variant="outlined"
+        size="small"
+      >
+        <InputLabel htmlFor="send-command" className={classes.whiteBackground}>
+          Diagnostic Command
+        </InputLabel>
+        <Select
+          native
+          variant="outlined"
+          inputProps={{
+            name: "send-command",
+            id: "send-command",
+          }}
+          onChange={changeCommandHandler}
+        >
+          {commands.map((command, index) => (
+            <option key={index} value={command.toLowerCase()}>
+              {command}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <FormGroup>
+        {
+          ecus.map((ecu, idx) => {
+            return <FormControlLabel
+              control={<Checkbox key={idx} />}
+              label={ecu}
+              value={ecu}
+              checked={true} />
+          })
+        }
+      </FormGroup>
+      <Button
+        type="submit"
+        aria-label="send command"
+        fullWidth
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        onClick={clickHandler}
+        disabled={!carState.online}
+      >
+        Send
+      </Button>
+      <div>
+        <b>
+          {carState && carState.online ? "ONLINE" : "OFFLINE"}
+        </b>
+      </div>
+    </div >
+  );
+};
+
+export default SendDiagnosticCommand;