preliminary map for vehicles

src/components/Contexts/VehicleContext.jsx

@@ -103,7 +103,7 @@ export const VehicleProvider = ({ children }) => {
       const result = await api.getConnections(vins, token);
 
       if (result.error) {
-        throw new Error(`Get connections error. ${result.message}`);
+        throw new Error(`Add connections error. ${result.message}`);
       }
       cars.forEach((car) => {
         car.connected = result[car.vin] || false;
@@ -125,6 +125,18 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const getLocations = async (token) => {
+    try {
+      setBusy(true);
+      const result = await api.getLocations(token);
+      if (result.error)
+        throw new Error(`Get locations error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <VehicleContext.Provider
       value={{
@@ -139,6 +151,7 @@ export const VehicleProvider = ({ children }) => {
         getYears,
         sendCommand,
         getConnections,
+        getLocations,
       }}
     >
       {children}

src/components/Home/index.jsx

@@ -1,10 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Typography } from "@material-ui/core";
 import useStyles from "../useStyles";
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
 
 import { useUserContext } from "../Contexts/UserContext";
 import { useStatusContext } from "../Contexts/StatusContext";
+import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { parsePayload } from "../../utils/jwt";
+import { VehicleMap } from "../VehicleMap";
 
 const DEFAULT_GREETING = "Welcome";
 
@@ -19,24 +22,84 @@ const getGreeting = (token) => {
   return `Welcome ${payload.given_name}!`;
 };
 
-const Home = () => {
+const MainForm = () => {
   const classes = useStyles();
   const { token } = useUserContext();
   const greeting = getGreeting(token);
   const { setTitle } = useStatusContext();
+  const { getLocations } = useVehicleContext();
 
   useEffect(() => {
     setTitle("");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const position = [37.76405462601394, -122.41375345900552];
+  const [markers, setMarkers] = useState([]);
+
+  useEffect(() => {
+    var now = new Date();
+    var timeStart = Math.round(now.getTime() / 1000) - 60 * 60 * 24;
+
+    getLocations(token)
+      .then((result) => console.log(result));
+
+    // var queryPath = `api/datasources/proxy/2/?query=SELECT%0A%20%20%20%20t1.timestamp%20as%20%22timestamp%22%2C%0A%20%20%20%20t1.vin%20as%20%22vin%22%2C%0A%20%20%20%20t1.value%20as%20%22lat%22%2C%0A%20%20%20%20t2.value%20as%20%22lon%22%2C%0A%20%20%20%20t3.value%20as%20%22alt%22%0AFROM%20default.vehicle_signal%20t1%0A%0AJOIN%20default.vehicle_signal%20t2%0A%20%0A%20ON%20%20t1.timestamp%3Dt2.timestamp%20AND%20t1.vin%3Dt2.vin%0A%0AJOIN%20default.vehicle_signal%20t3%0A%20%0A%20ON%20%20t1.timestamp%3Dt3.timestamp%20AND%20t1.vin%3Dt3.vin%0A%0AJOIN%0A(%0A%20%20%20%20SELECT%0A%20%20%20%20%20%20%20%20vin%2C%0A%20%20%20%20%20%20%20%20MAX(timestamp)%20as%20%22timestamp%22%0A%20%20%20%20FROM%20default.vehicle_signal%0A%0A%20%20%20%20GROUP%20BY%20vin%0A%0A)%20%20mostRecent%0A%20ON%20%20t1.timestamp%3DmostRecent.timestamp%20AND%20t1.vin%3DmostRecent.vin%0A%0AWHERE%0A%20%20%20%20toDateTime64(timestamp%2C%203)%20%3E%3D%20toDateTime64(${timeStart}%2C%203)%0A%20%20%20%20AND%20t1.name%20%3D%20'EHU_GPSLati'%0A%20%20%20%20AND%20t2.name%20%3D%20'EHU_GPSLongi'%0A%20%20%20%20AND%20t3.name%20%3D%20'EHU_GPSHei'%20FORMAT%20JSON`
+    // var TIMEOUT = 10000
+
+    // const interval = setInterval(() => {
+    // fetch(`https://grafana.fiskerdps.com/${queryPath}`)
+    //   .then(response => response.json())
+    //   .then(payload => {
+    //     console.log(payload.data)
+    //     setMarkers(payload.data.filter((coord) => [coord.lat, coord.lon]))
+    //   })
+    //   .then(() => console.log(markers));
+    //   console.log("hit interval");
+    // }, TIMEOUT);
+
+  }, []);
+
   return (
     <div className={classes.paper}>
       <Typography component="h1" variant="h5">
         {greeting}
       </Typography>
+
+      <br />
+
+      <MapContainer
+        center={position}
+        zoom={13}
+        style={{
+          width: '100%',
+          height: '900px'
+        }}
+      >
+        <TileLayer
+          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {
+          markers.map((position) => {
+            return (
+              <Marker position={position}>
+                <Popup>
+                  VIN123 <br /> Stat1 <br /> Stat2 <br /> Stat 3
+                </Popup>
+              </Marker>
+            )
+          })
+        }
+      </MapContainer>
     </div>
   );
 };
 
+const Home = () => (
+  <VehicleProvider>
+    <MainForm />
+  </VehicleProvider>
+);
+
 export default Home;

src/components/Layouts/SideMenu.jsx

@@ -14,7 +14,7 @@ const menuData = [
   {
     label: "Dashboard",
     to: "/dashboard",
-    roles: [],
+    roles: [Roles.CREATE, Roles.READ],
   },
   {
     label: "Deploy Packages",
@@ -40,7 +40,7 @@ const menuData = [
     label: "Send Command",
     to: "/vehicles-command",
     roles: [Roles.CREATE],
-  },
+  }
 ];
 
 export default function SideMenu() {

src/components/Routes/SiteRoutes.jsx

@@ -19,6 +19,7 @@ const CarUpdates = React.lazy(() => import("../Cars/Status"));
 const VehiclesList = React.lazy(() => import("../Cars/List"));
 const SendCommandBulk = React.lazy(() => import("../Cars/SendCommandBulk"));
 const Dashboard = React.lazy(() => import("../Dashboard"));
+const VehicleMap = React.lazy(() => import("../VehicleMap"))
 
 const SiteRoutes = () => {
   const { token, groups } = useUserContext();

src/services/monitoring.js

@@ -6,24 +6,24 @@ const clientToken = 'pubeb25449bb91773fc993855c7378e375a';
 const site = 'datadoghq.com';
 const service = 'ota-portal';
 
-datadogRum.init({
-    applicationId,
-    clientToken,
-    site,
-    service,
-    // Specify a version number to identify the deployed version of your application in Datadog 
-    // version: '1.0.0',
-    sampleRate: 100,
-    trackInteractions: true
-});
+// datadogRum.init({
+//     applicationId,
+//     clientToken,
+//     site,
+//     service,
+//     // Specify a version number to identify the deployed version of your application in Datadog 
+//     // version: '1.0.0',
+//     sampleRate: 100,
+//     trackInteractions: true
+// });
 
-datadogLogs.init({
-    clientToken,
-    site,
-    service,
-    forwardErrorsToLogs: true,
-    sampleRate: 100,
-});
+// datadogLogs.init({
+//     clientToken,
+//     site,
+//     service,
+//     forwardErrorsToLogs: true,
+//     sampleRate: 100,
+// });
 
 const logger = datadogLogs.logger;
 

src/services/vehicles.js

@@ -9,10 +9,10 @@ const vehiclesAPI = {
     body: JSON.stringify(vehicle),
   })
     .then(fetchRespHandler),
-  
+
   getVehicles: async (search, token) => {
     const u = addQueryParams(`${API_ENDPOINT}/vehicles`, search);
-    return  fetch(u, {
+    return fetch(u, {
       method: "GET",
       headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
     })
@@ -20,10 +20,10 @@ const vehiclesAPI = {
   },
 
   getModels: async (token) => fetch(`${API_ENDPOINT}/vehiclemodels`, {
-      method: "GET",
-      headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
-    })
-      .then(fetchRespHandler),
+    method: "GET",
+    headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+  })
+    .then(fetchRespHandler),
 
   getYears: async (token) => fetch(`${API_ENDPOINT}/vehicleyears`, {
     method: "GET",
@@ -39,15 +39,22 @@ const vehiclesAPI = {
     }),
   })
     .then(fetchRespHandler),
-  
+
   getConnections: async (vins, token) => {
     const u = `${API_ENDPOINT}/carsconnected?vins=${vins.join(",")}`
-    return  fetch(u, {
+    return fetch(u, {
       method: "GET",
       headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
     })
       .then(fetchRespHandler)
   },
+
+  getLocations: async (token) => fetch(`${API_ENDPOINT}/carslocations`, {
+    method: "GET",
+    headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+  })
+    .then(fetchRespHandler),
+
 };
 
 export default vehiclesAPI;