Merge development (#86)

src/components/VehicleMap/index.jsx

@@ -27,20 +27,21 @@ const Component = () => {
   const [markers, setMarkers] = useState([]);
 
   useEffect(() => {
-    retrieveAndStoreLocations().then((points) => {
+    if (!token) return;
+    retrieveAndStoreLocations(token).then((points) => {
       centerAroundMarkers(points);
     });
     const id = setInterval(function () {
-      retrieveAndStoreLocations();
+      retrieveAndStoreLocations(token);
     }, REQUEST_INTERVAL);
     return () => {
       clearInterval(id);
     };
     // eslint-disable-next-line
-  }, []);
+  }, [token]);
 
-  const retrieveAndStoreLocations = () => {
-    return getLocations(token)
+  const retrieveAndStoreLocations = (accessToken) => {
+    return getLocations(accessToken)
       .then((result) => {
         if (result.data != null) {
           const points = result.data.map((point) => [
@@ -73,6 +74,7 @@ const Component = () => {
   const [connections, setConnections] = useState({});
 
   useEffect(() => {
+    if (!token) return;
     if (markers.length > 0) {
       const vins = markers.map((marker) => marker[2]);
       getConnections(vins, token).then((connections) => {
@@ -177,6 +179,7 @@ const Component = () => {
           doors={carState.doors}
           location={carState.location}
           windows={carState.windows}
+          updatedAt={carState.updated}
           className={classes.popup}
           onClose={handleClose}
         />

src/components/VehicleMap/popup.jsx

@@ -6,10 +6,11 @@ import CloseIcon from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';
 
 import useStyles from "../useStyles";
+import { LocalDateTimeString } from "../../utils/dates";
 
 const VehiclePopUp = (props) => {
     const classes = useStyles();
-    const { vin, online, battery, doors, location, windows, onClose } = props;
+    const { vin, online, battery, doors, location, updatedAt, windows, onClose } = props;
 
     return (
         <Dialog
@@ -24,24 +25,35 @@ const VehiclePopUp = (props) => {
                 {online && (
                     <div>
                         {battery != null && (
-                            <p><b>battery</b>: {battery.percent}%</p>
+                            <p><b>Battery</b>: {battery.percent}%</p>
                         )}
                         {doors != null && (
-                            <div>
+                            <div className={classes.popupSection}>
                                 <h3>Doors</h3>
                                 {Object.entries(doors).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
                             </div>
                         )}
                         {windows != null && (
-                            <div>
+                            <div className={classes.popupSection}>
                                 <h3>Windows</h3>
                                 {Object.entries(windows).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
                             </div>
                         )}
                         {location != null && (
-                            <div>
+                            <div className={classes.popupSection}>
                                 <h3>Location</h3>
-                                {Object.entries(location).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1]}</p>))}
+                                {Object.entries(location).map((value) => {
+                                    if (value[0] === "altitude") {
+                                        return (<p key={value[0]}><b>{value[0]}</b>: {value[1]}</p>);
+                                    } else {
+                                        return (<p key={value[0]}><b>{value[0]}</b>: {value[1]}°</p>)
+                                    }
+                                })}
+                            </div>
+                        )}
+                        {updatedAt != null && (
+                            <div className={classes.popupSection}>
+                                <p><b>Updated at</b>: {LocalDateTimeString(updatedAt)}</p>
                             </div>
                         )}
                     </div>