Merge branch 'release/0.0.3'

src/components/Controls/CarSelectionTable/index.jsx

@@ -19,7 +19,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
 import ConnectedIcon from "../../Controls/ConnectedIcon";
 import ECUList from "../../Controls/ECUList";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -163,7 +163,8 @@ const CarSelectionTable = (props) => {
                 <TableCell align="center">
                   <ConnectedIcon
                     connected={row.connected}
-                    style={{ marginRight: 5 }}
+                    connectedHMI={row.connectedHMI}
+                    style={{ marginRight: 3 }}
                   />
                   <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
                   {row.ecu_list && (

src/components/Controls/CarUpdatesTable/index.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  LinearProgress,
   Table,
   TableBody,
   TableCell,
@@ -57,14 +58,21 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
-    useCarUpdatesContext();
+  const {
+    cancelUpdate,
+    getCarUpdates,
+    carUpdates,
+    totalCarUpdates,
+    startMonitor,
+    stopMonitor,
+  } = useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
     (async () => {
       try {
         if (!vin || !token) return;
+        stopMonitor();
         await getCarUpdates(
           {
             vin,
@@ -82,6 +90,20 @@ const MainForm = ({ vin, token }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin, token, pageIndex, pageSize, orderBy, order]);
 
+  useEffect(() => {
+    try {
+      if (carUpdates.length === 0) return;
+      startMonitor(token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+    return () => {
+      stopMonitor();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [carUpdates]);
+
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
   };
@@ -141,7 +163,12 @@ const MainForm = ({ vin, token }) => {
                 {updateName(row)}
               </Link>
             </TableCell>
-            <TableCell align="center">{row.status}</TableCell>
+            <TableCell align="center">
+              {row.status}
+              {row.progress > -1 && (
+                <LinearProgress variant="determinate" value={row.progress} />
+              )}
+            </TableCell>
             <TableCell align="center">
               {LocalDateTimeString(row.created)}
             </TableCell>

src/components/Controls/ConnectedIcon/index.jsx

@@ -1,12 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import { Tooltip } from "@material-ui/core";
 
 const ConnectedIcon = (props) => {
-  if (props.connected) {
+  if (props.connected || props.connectedHMI) {
     return (
       <span style={props.style}>
-        <CheckCircleIcon style={{ color: "Green", fontSize: 12 }} />
+        {props.connected && (
+          <Tooltip title="TBOX">
+            <CheckCircleIcon
+              style={{ color: "Green", fontSize: 12, marginRight: 3 }}
+            />
+          </Tooltip>
+        )}
+        {props.connectedHMI && (
+          <Tooltip title="ICC">
+            <CheckBoxIcon
+              style={{ color: "Blue", fontSize: 12, marginRight: 3 }}
+            />
+          </Tooltip>
+        )}
       </span>
     );
   }

src/components/Controls/SendCommand/Parameters.jsx

@@ -1,39 +1,9 @@
 import PropTypes from "prop-types";
-import {FormControl} from "@material-ui/core";
+import { FormControl } from "@material-ui/core";
 import useStyles from "../../useStyles";
-import {MuiPickersUtilsProvider} from "@material-ui/pickers";
-import DateFnsUtils from "@date-io/date-fns";
-
-export const Dates = (
-  {
-    startDateFunc,
-    endDateFunc,
-    startDate,
-    handleStartChange,
-    endDate,
-    handleEndChange,
-  }) => {
-  if (startDateFunc && endDateFunc) {
-    return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
-      {startDateFunc(startDate, handleStartChange)}
-      {endDateFunc(endDate, handleEndChange, startDate)}
-    </MuiPickersUtilsProvider>);
-  }
-
-  return null;
-}
-
-Dates.propTypes = {
-  startDateFunc: PropTypes.func,
-  endDateFunc: PropTypes.func,
-  startDate: PropTypes.instanceOf(Date),
-  handleStartChange: PropTypes.func,
-  endDate: PropTypes.instanceOf(Date),
-  handleEndChange: PropTypes.func
-}
 
 export const Parameters = (props) => {
-  const {params} = props;
+  const { params } = props;
 
   const classes = useStyles();
 
@@ -41,33 +11,19 @@ export const Parameters = (props) => {
     return null;
   }
 
-  const {data, handleDataChange} = props;
-  const {startDate, handleStartChange} = props;
-  const {endDate, handleEndChange} = props;
+  const { data, handleDataChange } = props;
 
   return (
     <FormControl size="small" className={classes.formControl}>
-      <div style={{width: "300px", marginTop: "1em"}}>
+      <div style={{ width: "300px", marginTop: "1em" }}>
         {params.dataFunc(data, handleDataChange)}
       </div>
-      <Dates
-        startDateFunc={params.startDateFunc}
-        endDateFunc={params.endDateFunc}
-        startDate={startDate}
-        handleStartChange={handleStartChange}
-        endDate={endDate}
-        handleEndChange={handleEndChange}
-      ></Dates>
     </FormControl>
-  )
-}
+  );
+};
 
 Parameters.propTypes = {
   params: PropTypes.any,
   data: PropTypes.any,
   handleDataChange: PropTypes.func,
-  startDate: PropTypes.instanceOf(Date),
-  handleStartChange: PropTypes.func,
-  endDate: PropTypes.instanceOf(Date),
-  handleEndChange: PropTypes.func
-};
+};

src/components/Controls/SendCommand/Parameters.test.jsx

@@ -1,140 +1,52 @@
-jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
-
-
-import {render, waitFor} from "@testing-library/react";
-import {Dates, Parameters} from "./Parameters";
+import { render, waitFor } from "@testing-library/react";
+import { Parameters } from "./Parameters";
 import addSnapshotSerializer from "../../../utils/snapshot";
 
-
-const date = Date.parse("2011-10-10T14:48:00")
-
-const renderDates = async (empty) => {
-  if (empty) {
-    await waitFor(() => {
-      /* render */
-    });
-    const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
-
-    return container;
-  }
-
-
-  const [start, setStart] = [date, (_) => {}];
-  const [end, setEnd] = [date, (_) => {}];
-
-  const handleStartChange = (val) => {
-    setStart(val)
-  }
-
-  const handleEndChange = (val) => {
-    setEnd(val)
-  }
-
-  await waitFor(() => {
-    /* render */
-  });
-
-  const {container} = render(
-    <div>
-      <Dates
-        startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
-        endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
-        startDate={start}
-        endDate={end}
-        handleStartChange={handleStartChange}
-        handleEndChange={handleEndChange}
-      />
-    </div>
-  )
-
-  return container
-}
-
-describe("Dates", () => {
-  beforeAll(() => {
-    addSnapshotSerializer(expect);
-  })
-
-  it("Render empty", async () => {
-    const container = await renderDates(true);
-    expect(container).toMatchSnapshot();
-  })
-
-  it("Render filled", async () => {
-    const container = await renderDates(false);
-    expect(container).toMatchSnapshot();
-  })
-})
-
 const renderState = {
   EMPTY: 0,
   JUST_DATA: 1,
-  WITH_DATE: 2,
-}
+};
 
 const renderParameters = async (rs) => {
   await waitFor(() => {
     /* render */
   });
 
-  if (rs===renderState.EMPTY) {
-    const { container } = render(<Parameters/>)
+  if (rs === renderState.EMPTY) {
+    const { container } = render(<Parameters />);
 
     return container;
   }
-  const params = {dataFunc:(val, handleValChange) => <div>val.toString()</div>}
-  const [data, handleDataChange] = [true, (_)=>{}];
+  const params = {
+    dataFunc: (val, handleValChange) => <div>val.toString()</div>,
+  };
+  const [data, handleDataChange] = [true, (_) => {}];
 
-  if (rs===renderState.JUST_DATA) {
-    const { container } = render(<Parameters
-      params={params}
-      data={data}
-      handleDataChange={handleDataChange}
-    />)
-
-    return container;
-  }
-
-  params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
-  params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
-
-  const [start, handleStartChange] = [date, (_)=>{}];
-  const [end, handleEndChange] = [date, (_)=>{}];
-
-  if (rs===renderState.WITH_DATE) {
-    const {container} = render(<Parameters
+  if (rs === renderState.JUST_DATA) {
+    const { container } = render(
+      <Parameters
         params={params}
         data={data}
         handleDataChange={handleDataChange}
-        start={start}
-        handleStartChange={handleStartChange}
-        end={end}
-        handleEndChange={handleEndChange}
       />
-    )
+    );
 
-    return container
+    return container;
   }
-}
-
+};
 
 describe("Params", () => {
   beforeAll(() => {
     addSnapshotSerializer(expect);
-  })
+  });
 
   it("Render empty", async () => {
     const container = await renderParameters(renderState.EMPTY);
     expect(container).toMatchSnapshot();
-  })
+  });
 
   it("Render just data", async () => {
-    const container = await renderDates(renderState.JUST_DATA);
+    const container = await renderParameters(renderState.JUST_DATA);
     expect(container).toMatchSnapshot();
-  })
-
-  it("Render with date", async () => {
-    const container = await renderDates(renderState.WITH_DATE);
-    expect(container).toMatchSnapshot();
-  })
-})
+  });
+});

src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap

@@ -1,24 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dates Render empty 1`] = `<div />`;
+exports[`Params Render empty 1`] = `<div />`;
 
-exports[`Dates Render filled 1`] = `
+exports[`Params Render just data 1`] = `
 <div>
-  <div>
-    <div>
-      1318258080000
-    </div>
-    <div>
-      1318258080000
-      , 
-      1318258080000
+  <div
+    class="MuiFormControl-root makeStyles-formControl-0"
+  >
+    <div
+      style="width: 300px; margin-top: 1em;"
+    >
+      <div>
+        val.toString()
+      </div>
     </div>
   </div>
 </div>
 `;
-
-exports[`Params Render empty 1`] = `<div />`;
-
-exports[`Params Render just data 1`] = `<div />`;
-
-exports[`Params Render with date 1`] = `<div />`;