From d7262734318b665bdf97a8a8aab29745f6acf0f5 Mon Sep 17 00:00:00 2001
From: kunkliricsi <kunkli.ricsi@gmail.com>
Date: Thu, 12 Nov 2020 22:11:42 +0100
Subject: [PATCH] Added position offset, changed color

---
 .../src/components/heatmap/DeviceMarker.jsx   | 24 +++++++++----------
 .../src/components/heatmap/Heatmap.jsx        |  8 +++++--
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx b/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx
index 6f77108..80823c3 100644
--- a/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx
+++ b/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx
@@ -1,7 +1,8 @@
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
+import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
 import { shadows } from '@material-ui/system';
-import { Box, Popover, Typography, Tooltip } from '@material-ui/core';
-import { green, red, yellow } from '@material-ui/core/colors';
+import { Box, Popover, Typography, Tooltip, Grid } from '@material-ui/core';
+import { blue, red, yellow } from '@material-ui/core/colors';
 import React, { Component } from 'react';
 import { useHistory, withRouter  } from 'react-router-dom';
 import { makeStyles } from '@material-ui/styles';
@@ -18,25 +19,22 @@ class DeviceMarker extends Component {
     getColor() {
         const { device } = this.props;
         if (device.status == "Online") {
-            return { color: green[500] };
+            return { color: blue[800] };
         } else if (device.status == "Offline") {
-            return { color: red[500] };
+            return { color: yellow[800] };
         } else /* if (device.status == "unknown") */ {
-            return { color: yellow[500] };
+            return { color: red[800] };
         }
     }
 
     useStyles() {
         return makeStyles(theme => ({
             root: {
+                display: 'grid'
             },
-            popover: {
-                pointerEvents: 'none',
-                zIndex: 1000000
-            },
-            paper: {
-                padding: theme.spacing(1),
-            },
+            icon: {
+
+            }
         }));
     }
 
@@ -51,7 +49,7 @@ class DeviceMarker extends Component {
         const open = Boolean(this.state.AnchorEl);
 
         return (
-            <Box>
+            <Box className={classes.root} boxShadow={5}>
                 <Tooltip title={<div>ID: {device.id}<br />Status: {device.status}</div>} placement="top" leaveDelay={200} arrow>
                     <RadioButtonCheckedIcon fontSize="small" style={this.getColor()}
                         onClick={onClick}>
diff --git a/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx b/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
index ea156bc..2ad6fd0 100644
--- a/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
+++ b/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
@@ -9,6 +9,9 @@ const hub_url = '/hubs/devices';
 const probability_method_name = 'NotifyDeviceAsync';
 const update_method_name = 'NotifyDeviceUpdatedAsync';
 const update_all_method_name = 'NotifyAllUpdatedAsync';
+const lat_offset = 0.000038;
+const lng_offset = -0.000058;
+const heatmapPoints_session_name = 'heatmapPoints';
 
 export default class MapContainer extends Component {
     constructor(props) {
@@ -88,6 +91,7 @@ export default class MapContainer extends Component {
             this.state.connection.off(probability_method_name);
             this.state.connection.off(update_all_method_name);
             this.state.connection.off(update_method_name);
+            console.log('Hub Disconnected!');
         }
     }
 
@@ -113,8 +117,8 @@ export default class MapContainer extends Component {
         const Markers = this.state.devices.map((device, index) => (
             <DeviceMarker
                 key={device.id}
-                lat={device.coordinates.latitude}
-                lng={device.coordinates.longitude}
+                lat={device.coordinates.latitude + lat_offset}
+                lng={device.coordinates.longitude + lng_offset}
                 device={device}
             />
         ));