Added context to heatmap, and devices
This commit is contained in:
parent
490f0f3265
commit
39a38fe8eb
@ -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.
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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();
|
||||
}
|
||||
service.getall().then(result => {
|
||||
this.setState({ devices: result });
|
||||
}).catch(ex => {
|
||||
console.log(ex);
|
||||
});
|
||||
}
|
||||
static contextType = DevicesContext;
|
||||
|
||||
componentDidMount() {
|
||||
const service = new DeviceService();
|
||||
this.handleAllDevicesUpdated(service);
|
||||
probabilityHandler(point) {
|
||||
if (point.prob > 0.5) {
|
||||
|
||||
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]
|
||||
heatmapPoints: [...this.state.heatmapPoints, point]
|
||||
});
|
||||
|
||||
if (this._googleMap !== undefined) {
|
||||
const point = { location: new google.maps.LatLng(newPoint.lat, newPoint.lng), weight: prob };
|
||||
this._googleMap.heatmap.data.push(point)
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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));
|
||||
componentDidMount() {
|
||||
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"],
|
||||
|
||||
@ -5,4 +5,5 @@ export default React.createContext({
|
||||
heatmapPoints: [],
|
||||
|
||||
addHandler: (_, __) => { },
|
||||
removeHandler: (_, __) => { },
|
||||
});
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user