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
2022-04-14 18:11:22 -07:00
parent afa3c1e529
commit 07f77cabdb
56 changed files with 5854 additions and 2208 deletions
--- a/src/components/Cars/Status/Details/index.jsx
+++ b/src/components/Cars/Status/Details/index.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import { Redirect } from "react-router";
+import { Link } from 'react-router-dom';
+import {
+  Grid,
+  Tooltip,
+} from "@material-ui/core";
+import EditIcon from "@material-ui/icons/Edit"
+import DeleteIcon from "@material-ui/icons/Delete";
+import clsx from "clsx";
+
+import { useUserContext } from "../../../Contexts/UserContext"
+import { useStatusContext } from "../../../Contexts/StatusContext";
+import useStyles from "../../../useStyles";
+import { logger } from "../../../../services/monitoring";
+import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
+
+const MainForm = ({ vin }) => {
+  const classes = useStyles();
+  const { setMessage } = useStatusContext();
+  const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
+  const [redirect, setRedirect] = useState(null);
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!vin || !token) return;
+        await getVehicle(vin, token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  const onDelete = async () => {
+    try {
+      await deleteVehicle(vin, token);
+      setMessage(`Deleted ${vin}`)
+      setRedirect(`/vehicles`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={12} className={classes.textCenterAlign}>
+          <p><b>VIN</b>: {vin}</p>
+          {vehicle.log_level != null && (
+            <p><b>Log Level</b>: {vehicle.log_level}</p>
+          )}
+        </Grid>
+        {vehicle.canbus && (
+          <Grid item md={12} className={classes.textCenterAlign}>
+            <b>CANBus</b>
+            <p><b>Enabled</b>: {vehicle.canbus.enabled.toString()}</p>
+            <p><b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}</p>
+            <p><b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}</p>
+            <p><b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}</p>
+            <p><b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length() : 0}</p>
+          </Grid>
+        )}
+        <Grid item md={12} className={classes.textCenterAlign}>
+          <Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
+            <Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
+              <EditIcon aria-label={`Update "${vin}"`} />
+            </Link>
+          </Tooltip>
+          <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
+            <Link to="#" onClick={onDelete}>
+              <DeleteIcon aria-label={`Delete "${vin}"`} />
+            </Link>
+          </Tooltip>
+        </Grid>
+      </Grid>
+    </div >
+  );
+};
+
+const CarDetails = (props) => (
+  <VehicleProvider>
+    <MainForm {...props} />
+  </VehicleProvider>
+);
+
+export default CarDetails;