diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx index 39bec78..292b11b 100644 --- a/src/components/Contexts/VehicleContext.jsx +++ b/src/components/Contexts/VehicleContext.jsx @@ -137,6 +137,18 @@ export const VehicleProvider = ({ children }) => { } }; + const getState = async (token, vin) => { + try { + setBusy(true); + const result = await api.getState(token, vin); + if (result.error) + throw new Error(`Get state error. ${result.message}`); + return result; + } finally { + setBusy(false); + } + }; + return ( { sendCommand, getConnections, getLocations, + getState, }} > {children} diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index a5392c6..fb2b1da 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -1,13 +1,11 @@ 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"; +import VehicleMap from "../VehicleMap"; const DEFAULT_GREETING = "Welcome"; @@ -22,44 +20,17 @@ const getGreeting = (token) => { return `Welcome ${payload.given_name}!`; }; -const MainForm = () => { +const Home = () => { 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 (
@@ -67,39 +38,9 @@ const MainForm = () => {
- - - - { - markers.map((position) => { - return ( - - - VIN123
Stat1
Stat2
Stat 3 - - - ) - }) - } - +
); }; -const Home = () => ( - - - -); - export default Home; diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx index 7399088..190ed66 100644 --- a/src/components/Routes/SiteRoutes.jsx +++ b/src/components/Routes/SiteRoutes.jsx @@ -19,7 +19,6 @@ 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(); diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx new file mode 100644 index 0000000..5e89ab2 --- /dev/null +++ b/src/components/VehicleMap/index.jsx @@ -0,0 +1,134 @@ +import React, { useEffect, useState } from "react"; +import useStyles from "../useStyles"; +import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet' + +import { useUserContext } from "../Contexts/UserContext"; +import { useStatusContext } from "../Contexts/StatusContext"; +import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext"; +import { VehiclePopUp } from "./popup"; + +const Component = () => { + const classes = useStyles(); + const { token } = useUserContext(); + const { setTitle } = useStatusContext(); + const { getLocations, getState } = useVehicleContext(); + + useEffect(() => { + setTitle(""); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const [center, setCenter] = useState([0, 0]) + const [zoom, setZoom] = useState(2); + const [markers, setMarkers] = useState([]); + + const retrieveLocations = () => { + return getLocations(token) + .then((result) => { + var points = result.data.map(point => [point.latitude, point.longitude, point.vin]); + setMarkers(points); + console.log(points); + return points + }) + .catch(() => console.log("token error")); + } + + const centerAroundMarkers = (markers) => { + var coord = markers.reduce((coord, marker) => { + coord[0] += marker[0] / markers.length; + coord[1] += marker[1] / markers.length; + return coord; + }, [0, 0]) + + console.log(coord); + setCenter(coord); + setZoom(4); + } + + useEffect(() => { + retrieveLocations() + .then(points => { + centerAroundMarkers(points); + }) + }, []); + + useEffect(() => { + const id = setInterval(function () { + retrieveLocations(); + }, 10000) + return () => { clearInterval(id) } + }, []); + + const retrieveState = (e) => { + var vin = e.target.options.title; + getState(token, vin) + .then(results => { + console.log(results); + setSelected({ ...results.data, vin: vin }); + }); + } + + const [selected, setSelected] = useState(null); + + return ( + + + + + { + markers.map((marker) => ( + + + {marker[2]}
see more + + + )) + } + + { + selected != null && ( + + ) + } + + ); +}; + +const ChangeView = ({ center, zoom }) => { + const map = useMap(); + map.flyTo(center, zoom, { duration: 1.5 }); + console.log("centered"); + return null; +} + +const VehicleMap = () => ( + + + +) + +export default VehicleMap; diff --git a/src/components/VehicleMap/popup.jsx b/src/components/VehicleMap/popup.jsx new file mode 100644 index 0000000..4c7c5d8 --- /dev/null +++ b/src/components/VehicleMap/popup.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import Dialog from '@material-ui/core/Dialog'; +import DialogTitle from '@material-ui/core/DialogTitle'; + +const VehiclePopUp = ({ vin, online, doors, location, windows }) => { + console.log(location); + return ( + + {vin} +

{online.toString()}

+ {/* {doors != null && ( + + )} + */} + + ); +}; + +export { VehiclePopUp }; diff --git a/src/services/vehicles.js b/src/services/vehicles.js index d4273a8..0624854 100644 --- a/src/services/vehicles.js +++ b/src/services/vehicles.js @@ -55,6 +55,11 @@ const vehiclesAPI = { }) .then(fetchRespHandler), + getState: async (token, vin) => fetch(`${API_ENDPOINT}/carstate?vin=${vin}`, { + method: "GET", + headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)), + }) + .then(fetchRespHandler), }; export default vehiclesAPI;