CEC-3933 - use VehiclePaths for location drawing (#306)

* CEC-3933 - Parse VehiclePaths location data

* changes

* fixes

* stuff

* sort of works

* fix

* progress

* refactor

* fix vehicle paths query

* digital twin shows map

* new dashboard

* wider digital twin map

* snapshot

* latest; using polylines

* lag lng changes

* stuff

* path showing up

* stuff

* things

* revert home page

* whitespace

* validation

* more stuff

* fix button issue

* tests pass without mocking data

* fix code smells

* remove map from digital twin, add to tab

* fix bug

* marker click event working

* individual colors

* possible fix

* fix warning

* merge and remove unused code

* small fixes

* re add dashboard

* snaps

src/services/__mocks__/vehiclesAPI.js

@@ -55,13 +55,15 @@ const ecusData = [
   },
 ];
 
-const signals = {data:[
-  {
-    timestamp: "2021-07-14T20:09:40.98187Z",
-    name: "signal",
-    value: 123
-  },
-]};
+const signals = {
+  data: [
+    {
+      timestamp: "2021-07-14T20:09:40.98187Z",
+      name: "signal",
+      value: 123
+    },
+  ],
+};
 
 const trexLogs = {
   RealOffset: 0,
@@ -127,6 +129,12 @@ const vehiclesAPI = {
     .mockResolvedValue([
       { altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" },
     ]),
+  getLocationsVehiclePaths: async () => {
+    return {
+      '3FAFP13P31R199430': [[16.891136999999986, 26.832352999999955], [56.891136999999986, 66.832352999999955], [26.891136999999986, 36.832352999999955]],
+      '3FAFP13P71R199060': [[36.891136999999986, 46.832352999999955], [76.891136999999986, 16.832352999999955]],
+    };
+  },
   getVehicle: async (vin) => {
     const index = data.findIndex(element => element.vin === vin);
     return data[index];
@@ -134,7 +142,7 @@ const vehiclesAPI = {
   getVehicles: async () => {
     return { data };
   },
-  getFleets: async (vin) => {return { data: ["fleet1", "fleet2"]}},
+  getFleets: async (vin) => { return { data: ["fleet1", "fleet2"] } },
   getYears: async () => {
     return {
       data: [2021, 2022],
@@ -152,29 +160,29 @@ const vehiclesAPI = {
     return vehicle;
   },
   getCANSignals: async (vin, vehicle) => {
-   return signals;
+    return signals;
   },
   getTRexLogs: async (vin, date, offset, count, direction, token) => {
     return trexLogs;
   },
   getVersionLog: async (vin) => ({
-      "data": [
-          {
-              "id": 1,
-              "vin": "${vin}",
-              "version_source": "TREX",
-              "version": "0.9.56",
-              "created_at": "2023-01-13T02:11:33.327214Z"
-          },
-          {
-              "id": 2,
-              "vin": "${vin}",
-              "version_source": "DBC",
-              "version": "386c18977a1be3cda60c953e5902c680dbe82b89523f2527e80cd9db863db991",
-              "created_at": "2023-01-13T02:11:33.330932Z"
-          }
-      ],
-      "total": 2
+    "data": [
+      {
+        "id": 1,
+        "vin": "${vin}",
+        "version_source": "TREX",
+        "version": "0.9.56",
+        "created_at": "2023-01-13T02:11:33.327214Z"
+      },
+      {
+        "id": 2,
+        "vin": "${vin}",
+        "version_source": "DBC",
+        "version": "386c18977a1be3cda60c953e5902c680dbe82b89523f2527e80cd9db863db991",
+        "created_at": "2023-01-13T02:11:33.330932Z"
+      }
+    ],
+    "total": 2
   })
 };
 

src/services/customDashboards.js

@@ -1,8 +1,30 @@
+import VehiclePathsMap from "../components/VehiclePathsMap";
+
 const INVALID_DASHBOARD = {
   label: "Invalid Dashboard",
   error: "Invalid Dashboard"
 }
 
+const vinsToShowOnMapColors = new Map([
+  ['3FAFP13P71R199267', 'red'],
+  ['3FAFP13P71R199270', 'orange'],
+  ['3FAFP13P71R199222', 'blue'],
+  ['3FAFP13P61R199339', 'yellow'],
+  ['3FAFP13P71R199057', 'turquoise'],
+  ['3FAFP13P61R199387', 'lime'],
+  ['3FAFP13P71R199334', 'purple'],
+  ['3FAFP13P71R199284', 'green'],
+  ['3FAFP13P71R199303', 'sienna'],
+  ['3FAFP13P31R199430', 'navy'],
+  ['3FAFP13P81R199083', 'cadetblue'],
+  ['3FAFP13P71R199060', 'coral'],
+  ['3FAFP13P71R199317', 'darkkhaki'],
+  ['3FAFP13P71R199320', 'fuchsia'],
+  ['3FAFP13P61R199390', 'indigo'],
+  ['3FAFP13P61R199373', 'cyan'],
+])
+const lookbackHours = 24
+
 export const CustomDashboardList = [
   /*
   {
@@ -14,6 +36,11 @@ export const CustomDashboardList = [
     component: <MyCustomComponent />
   }
   */
+
+  {
+    label: "Vehicle Map",
+    component: <VehiclePathsMap vinsToShowOnMapColors={vinsToShowOnMapColors} lookbackHours={lookbackHours} />
+  }
 ];
 
 export const getCustomDashboard = (index) => {

src/services/vehiclesAPI.js

@@ -76,6 +76,17 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
+  getLocationsVehiclePaths: async (token, vinsParam) =>
+    fetch(`${API_ENDPOINT}/vehicle_paths?${vinsParam}`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
   getState: async (token, vin) =>
     fetch(`${API_ENDPOINT}/carstate?vin=${vin}`, {
       method: "GET",
@@ -185,7 +196,7 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  getVersionLog: async ({vin, ...search}, token) => {
+  getVersionLog: async ({ vin, ...search }, token) => {
     const u = addQueryParams(`${API_ENDPOINT}/vehicle/${vin}/version/logs`, search);
     return fetch(u, {
       method: "GET",