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

Added context to heatmap, and devices

Browse Source
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> <title>Birdmap</title>
</head> </head>
<body> <body style="height: 100vh;">
<noscript> <noscript>
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </noscript>
<div id="root"></div> <div id="root" style="height: 100vh;"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. 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: { palette: {
primary: { primary: {
main: blueGrey[900], main: blueGrey[900],
dark: grey[200], dark: grey[400],
}, },
secondary: { secondary: {
main: orange[200], main: orange[200],
@ -177,7 +177,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
return ( return (
<React.Fragment> <React.Fragment>
<AppBar position="static"> <AppBar position="static" className={classes.bar_root}>
<Toolbar> <Toolbar>
<BirdmapTitle /> <BirdmapTitle />
<Typography component={'span'} className={classes.typo}> <Typography component={'span'} className={classes.typo}>
@ -194,8 +194,12 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
const useDefaultLayoutStyles = makeStyles((theme: Theme) => const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
bar_root: {
height: '7%',
},
box_root: { box_root: {
color: theme.palette.secondary.dark, backgroundColor: theme.palette.primary.dark,
height: '93%',
}, },
typo: { typo: {
marginLeft: 'auto', marginLeft: 'auto',

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

@ -1,96 +1,52 @@
/*global google*/ /*global google*/
import GoogleMapReact from 'google-map-react'; import GoogleMapReact from 'google-map-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import DeviceService from '../../common/DeviceService'
import DeviceMarker from './DeviceMarker' 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 lat_offset = 0.000038;
const lng_offset = -0.000058; 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) {
super(props); super(props);
this.state = { this.state = {
devices: [],
center: { center: {
lat: 48.275939, lng: 21.469640 lat: 48.275939, lng: 21.469640
}, },
heatmapPoints: [], heatmapPoints: [],
connection: null, };
}
this.probabilityHandler = this.probabilityHandler.bind(this);
} }
handleAllDevicesUpdated(service = null) { static contextType = DevicesContext;
if (service === null) {
service = new DeviceService();
}
service.getall().then(result => {
this.setState({ devices: result });
}).catch(ex => {
console.log(ex);
});
}
componentDidMount() { probabilityHandler(point) {
const service = new DeviceService(); if (point.prob > 0.5) {
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({ this.setState({
heatmapPoints: [...this.state.heatmapPoints, newPoint] heatmapPoints: [...this.state.heatmapPoints, point]
}); });
if (this._googleMap !== undefined) { if (this._googleMap !== undefined) {
const point = { location: new google.maps.LatLng(newPoint.lat, newPoint.lng), weight: prob }; const newPoint = { location: new google.maps.LatLng(point.lat, point.lng), weight: point.prob };
this._googleMap.heatmap.data.push(point) if (this._googleMap.heatmap !== null) {
this._googleMap.heatmap.data.push(newPoint)
}
}
} }
} }
});
newConnection.on(update_all_method_name, () => { componentDidMount() {
this.handleAllDevicesUpdated(service); this.context.addHandler(C.probability_method_name, this.probabilityHandler);
}); this.setState({ heatmapPoints: [...this.context.heatmapPoints] });
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));
} }
componentWillUnmount() { componentWillUnmount() {
if (this.state.connection) { this.context.removeHandler(C.probability_method_name, this.probabilityHandler);
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!');
}
} }
render() { render() {
@ -112,7 +68,7 @@ export default class MapContainer extends Component {
mapTypeId: 'satellite' mapTypeId: 'satellite'
} }
const Markers = this.state.devices.map((device, index) => ( const Markers = this.context.devices.map((device, index) => (
<DeviceMarker <DeviceMarker
key={device.id} key={device.id}
lat={device.coordinates.latitude + lat_offset} lat={device.coordinates.latitude + lat_offset}
@ -122,7 +78,7 @@ export default class MapContainer extends Component {
)); ));
return ( return (
<div style={{ height: '93.5vh', width: '100%' }}> <div style={{ height: '93vh', width: '100%' }}>
<GoogleMapReact <GoogleMapReact
bootstrapURLKeys={{ bootstrapURLKeys={{
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"], key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],

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

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

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

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