birbnetes/birbmap
birbnetes/birbmap
4
0
Fork 0
Code Pull Requests Releases Activity

Added position offset, changed color

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx
View File

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

8
Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
View File

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