Added position offset, changed color
This commit is contained in:
parent
412647617b
commit
d726273431
@ -1,7 +1,8 @@
|
|||||||
import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
|
import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
|
||||||
|
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
|
||||||
import { shadows } from '@material-ui/system';
|
import { shadows } from '@material-ui/system';
|
||||||
import { Box, Popover, Typography, Tooltip } from '@material-ui/core';
|
import { Box, Popover, Typography, Tooltip, Grid } from '@material-ui/core';
|
||||||
import { green, red, yellow } from '@material-ui/core/colors';
|
import { blue, red, yellow } from '@material-ui/core/colors';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { useHistory, withRouter } from 'react-router-dom';
|
import { useHistory, withRouter } from 'react-router-dom';
|
||||||
import { makeStyles } from '@material-ui/styles';
|
import { makeStyles } from '@material-ui/styles';
|
||||||
@ -18,25 +19,22 @@ class DeviceMarker extends Component {
|
|||||||
getColor() {
|
getColor() {
|
||||||
const { device } = this.props;
|
const { device } = this.props;
|
||||||
if (device.status == "Online") {
|
if (device.status == "Online") {
|
||||||
return { color: green[500] };
|
return { color: blue[800] };
|
||||||
} else if (device.status == "Offline") {
|
} else if (device.status == "Offline") {
|
||||||
return { color: red[500] };
|
return { color: yellow[800] };
|
||||||
} else /* if (device.status == "unknown") */ {
|
} else /* if (device.status == "unknown") */ {
|
||||||
return { color: yellow[500] };
|
return { color: red[800] };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
useStyles() {
|
useStyles() {
|
||||||
return makeStyles(theme => ({
|
return makeStyles(theme => ({
|
||||||
root: {
|
root: {
|
||||||
|
display: 'grid'
|
||||||
},
|
},
|
||||||
popover: {
|
icon: {
|
||||||
pointerEvents: 'none',
|
|
||||||
zIndex: 1000000
|
}
|
||||||
},
|
|
||||||
paper: {
|
|
||||||
padding: theme.spacing(1),
|
|
||||||
},
|
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -51,7 +49,7 @@ class DeviceMarker extends Component {
|
|||||||
const open = Boolean(this.state.AnchorEl);
|
const open = Boolean(this.state.AnchorEl);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box className={classes.root} boxShadow={5}>
|
||||||
<Tooltip title={<div>ID: {device.id}<br />Status: {device.status}</div>} placement="top" leaveDelay={200} arrow>
|
<Tooltip title={<div>ID: {device.id}<br />Status: {device.status}</div>} placement="top" leaveDelay={200} arrow>
|
||||||
<RadioButtonCheckedIcon fontSize="small" style={this.getColor()}
|
<RadioButtonCheckedIcon fontSize="small" style={this.getColor()}
|
||||||
onClick={onClick}>
|
onClick={onClick}>
|
||||||
|
@ -9,6 +9,9 @@ const hub_url = '/hubs/devices';
|
|||||||
const probability_method_name = 'NotifyDeviceAsync';
|
const probability_method_name = 'NotifyDeviceAsync';
|
||||||
const update_method_name = 'NotifyDeviceUpdatedAsync';
|
const update_method_name = 'NotifyDeviceUpdatedAsync';
|
||||||
const update_all_method_name = 'NotifyAllUpdatedAsync';
|
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 {
|
export default class MapContainer extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -88,6 +91,7 @@ export default class MapContainer extends Component {
|
|||||||
this.state.connection.off(probability_method_name);
|
this.state.connection.off(probability_method_name);
|
||||||
this.state.connection.off(update_all_method_name);
|
this.state.connection.off(update_all_method_name);
|
||||||
this.state.connection.off(update_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) => (
|
const Markers = this.state.devices.map((device, index) => (
|
||||||
<DeviceMarker
|
<DeviceMarker
|
||||||
key={device.id}
|
key={device.id}
|
||||||
lat={device.coordinates.latitude}
|
lat={device.coordinates.latitude + lat_offset}
|
||||||
lng={device.coordinates.longitude}
|
lng={device.coordinates.longitude + lng_offset}
|
||||||
device={device}
|
device={device}
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
|
Loading…
Reference in New Issue
Block a user