Added position offset, changed color

This commit is contained in:
kunkliricsi 2020-11-12 22:11:42 +01:00
parent 412647617b
commit d726273431
2 changed files with 17 additions and 15 deletions

View File

@ -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}>

View File

@ -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}
/> />
)); ));