CEC-222, CEC-214 Send car commands and log filtering (#41)

* Send car commands

* Log filter control

* Fix message format

* Move VehicleContext

src/components/Cars/Status/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import {
+  Grid,
   Table,
   TableBody,
   TableCell,
@@ -16,10 +17,14 @@ import {
   UpdatesProvider,
   useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
+import SendCommand from "../SendCommand";
+import LogFilter from "../LogFilter";
 
 const MainForm = () => {
   const { vin } = useParams();
@@ -109,14 +114,24 @@ const MainForm = () => {
           </TableFooter>
         </Table>
       </TableContainer>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item lg={6} md={12}>
+          <SendCommand vin={vin} />
+        </Grid>
+        <Grid item lg={6} md={12} style={{ textAlign: "right" }}>
+          <LogFilter vin={vin} />
+        </Grid>
+      </Grid>
     </div>
   );
 };
 
 const CarUpdates = () => (
-  <UpdatesProvider>
-    <MainForm />
-  </UpdatesProvider>
+  <VehicleProvider>
+    <UpdatesProvider>
+      <MainForm />
+    </UpdatesProvider>
+  </VehicleProvider>
 );
 
 export default CarUpdates;