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

Added context to heatmap, and devices

This commit is contained in:
kunkliricsi 2020-11-18 12:04:32 +01:00
parent 490f0f3265
commit 39a38fe8eb
5 changed files with 45 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Birdmap.API/ClientApp/public/index.html
View File

@ -22,11 +22,11 @@
-->
<title>Birdmap</title>
</head>
<body>
<body style="height: 100vh;">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div id="root" style="height: 100vh;"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

10
Birdmap.API/ClientApp/src/App.tsx
View File

@ -22,7 +22,7 @@ const theme = createMuiTheme({
palette: {
primary: {
main: blueGrey[900],
dark: grey[200],
dark: grey[400],
},
secondary: {
main: orange[200],
@ -177,7 +177,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
return (
<React.Fragment>
<AppBar position="static">
<AppBar position="static" className={classes.bar_root}>
<Toolbar>
<BirdmapTitle />
<Typography component={'span'} className={classes.typo}>
@ -194,8 +194,12 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
createStyles({
bar_root: {
height: '7%',
},
box_root: {
color: theme.palette.secondary.dark,
backgroundColor: theme.palette.primary.dark,
height: '93%',
},
typo: {
marginLeft: 'auto',

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

@ -1,96 +1,52 @@
/*global google*/
import GoogleMapReact from 'google-map-react';
import React, { Component } from 'react';
import DeviceService from '../../common/DeviceService'
import DeviceMarker from './DeviceMarker'
import { HubConnectionBuilder } from '@microsoft/signalr';
import C from '../../common/Constants'
import DevicesContext from '../../contexts/DevicesContext';
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) {
super(props);
this.state = {
devices: [],
center: {
lat: 48.275939, lng: 21.469640
},
heatmapPoints: [],
connection: null,
}
};
this.probabilityHandler = this.probabilityHandler.bind(this);
}
handleAllDevicesUpdated(service = null) {
if (service === null) {
service = new DeviceService();
static contextType = DevicesContext;
probabilityHandler(point) {
if (point.prob > 0.5) {
this.setState({
heatmapPoints: [...this.state.heatmapPoints, point]
});
if (this._googleMap !== undefined) {
const newPoint = { location: new google.maps.LatLng(point.lat, point.lng), weight: point.prob };
if (this._googleMap.heatmap !== null) {
this._googleMap.heatmap.data.push(newPoint)
}
}
}
service.getall().then(result => {
this.setState({ devices: result });
}).catch(ex => {
console.log(ex);
});
}
componentDidMount() {
const service = new DeviceService();
this.handleAllDevicesUpdated(service);
const newConnection = new HubConnectionBuilder()
.withUrl(hub_url)
.withAutomaticReconnect()
.build();
this.setState({ connection: newConnection });
newConnection.start()
.then(result => {
console.log('Hub Connected!');
newConnection.on(probability_method_name, (id, date, prob) => {
//console.log(probability_method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
if (prob > 0.5) {
var device = this.state.devices.filter(function (x) { return x.id === id })[0]
var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude };
this.setState({
heatmapPoints: [...this.state.heatmapPoints, newPoint]
});
if (this._googleMap !== undefined) {
const point = { location: new google.maps.LatLng(newPoint.lat, newPoint.lng), weight: prob };
this._googleMap.heatmap.data.push(point)
}
}
});
newConnection.on(update_all_method_name, () => {
this.handleAllDevicesUpdated(service);
});
newConnection.on(update_method_name, (id) => {
service.getdevice(id).then(result => {
var index = this.state.devices.findIndex((d => d.id === id));
const newDevices = [...this.state.devices];
newDevices[index] = result;
this.setState({ devices: newDevices });
}).catch(ex => console.log("Device update failed.", ex));
})
}).catch(e => console.log('Hub Connection failed: ', e));
this.context.addHandler(C.probability_method_name, this.probabilityHandler);
this.setState({ heatmapPoints: [...this.context.heatmapPoints] });
}
componentWillUnmount() {
if (this.state.connection) {
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!');
}
this.context.removeHandler(C.probability_method_name, this.probabilityHandler);
}
render() {
@ -112,7 +68,7 @@ export default class MapContainer extends Component {
mapTypeId: 'satellite'
}
const Markers = this.state.devices.map((device, index) => (
const Markers = this.context.devices.map((device, index) => (
<DeviceMarker
key={device.id}
lat={device.coordinates.latitude + lat_offset}
@ -122,7 +78,7 @@ export default class MapContainer extends Component {
));
return (
<div style={{ height: '93.5vh', width: '100%' }}>
<div style={{ height: '93vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],

1
Birdmap.API/ClientApp/src/contexts/DevicesContext.js
View File

@ -5,4 +5,5 @@ export default React.createContext({
heatmapPoints: [],
addHandler: (_, __) => { },
removeHandler: (_, __) => { },
});

17
Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js
View File

@ -12,7 +12,7 @@ export default class DevicesContextProvider extends Component {
const handlers = {};
for (var property in C) {
handlers[property] = [];
handlers[C[property]] = [];
};
this.state = {
@ -24,16 +24,18 @@ export default class DevicesContextProvider extends Component {
}
addHandler = (methodName, handler) => {
const updatedHandlers = [...this.state.handlers];
const updatedHandlers = this.state.handlers;
updatedHandlers[methodName].push(handler);
//console.log("Added '" + methodName + "' handler.");
this.setState({ handlers: updatedHandlers });
}
removeHandler = (methodName, handler) => {
const updatedHandlers = [...this.state.handlers];
const updatedHandlers = this.state.handlers;
var index = updatedHandlers[methodName].findIndex((h => h === handler));
if (index > 0) {
delete updatedHandlers[index];
if (index > -1) {
updatedHandlers[methodName].splice(index, 1);
//console.log("Removed '" + methodName + "' handler.");
}
this.setState({ handlers: updatedHandlers });
}
@ -90,7 +92,7 @@ export default class DevicesContextProvider extends Component {
service.getdevice(id).then(result => {
const updatedDevices = [...this.state.devices];
var index = updatedDevices.findIndex((d => d.id == id));
if (index > 0) {
if (index > -1) {
updatedDevices[index] = result;
}
else {
@ -119,7 +121,8 @@ export default class DevicesContextProvider extends Component {
devices: this.state.devices,
heatmapPoints: this.state.heatmapPoints,
addHandler: this.addHandler
addHandler: this.addHandler,
removeHandler: this.removeHandler,
}}
>
{this.props.children}