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

Compare commits

base: birbnetes:779e21909cfce0526e80255f23fb043c94f3eb79
Branches Tags
birbnetes:master
birbnetes:feature/rabbit-mq
birbnetes:feature/thesis
birbnetes:feature/docker-image
birbnetes:feature/process-with-timeouts
birbnetes:feature/Contexts
birbnetes:feature/NET5-migration
..
compare: birbnetes:3f267cb009d7ea471795e85951acaa10d601f353
Branches Tags
birbnetes:master
birbnetes:feature/rabbit-mq
birbnetes:feature/thesis
birbnetes:feature/docker-image
birbnetes:feature/process-with-timeouts
birbnetes:feature/Contexts
birbnetes:feature/NET5-migration

No commits in common. "779e21909cfce0526e80255f23fb043c94f3eb79" and "3f267cb009d7ea471795e85951acaa10d601f353" have entirely different histories.
779e21909c ... 3f267cb009

22 changed files with 278 additions and 402 deletions
Show Stats Expand all files Collapse all files

4
Birdmap.API/Birdmap.API.csproj
View File

@ -49,6 +49,8 @@
<ItemGroup>
<None Remove="ClientApp\src\common\components\BirdmapTitle.tsx" />
<None Remove="ClientApp\src\common\ErrorDispatcher.ts" />
<None Remove="ClientApp\src\common\ServiceBase.ts" />
<None Remove="ClientApp\src\components\auth\Auth.tsx" />
<None Remove="ClientApp\src\components\auth\AuthClient.ts" />
<None Remove="ClientApp\src\components\auth\AuthService.ts" />
@ -57,10 +59,10 @@
<ItemGroup>
<TypeScriptCompile Include="ClientApp\src\components\auth\Auth.tsx" />
<TypeScriptCompile Include="ClientApp\src\common\components\BirdmapTitle.tsx" />
</ItemGroup>
<ItemGroup>
<Folder Include="ClientApp\src\common\components\" />
<Folder Include="ClientApp\src\components\dashboard\" />
</ItemGroup>

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

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

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

@ -8,21 +8,20 @@ import Typography from '@material-ui/core/Typography';
import { ThemeProvider } from '@material-ui/styles';
import React, { useState, } from 'react';
import { BrowserRouter, NavLink, Redirect, Route, Switch, Link } from 'react-router-dom';
import BirdmapTitle from './components/appBar/BirdmapTitle';
import BirdmapTitle from './common/components/BirdmapTitle';
import Auth from './components/auth/Auth';
import AuthService from './components/auth/AuthService';
import { ClickAwayListener } from '@material-ui/core';
import MapContainer from './components/heatmap/Heatmap';
import Devices from './components/devices/Devices';
import { blueGrey, blue, orange, grey } from '@material-ui/core/colors';
import DevicesContextProvider from './contexts/DevicesContextProvider'
const theme = createMuiTheme({
palette: {
primary: {
main: blueGrey[900],
dark: grey[400],
main: blue[900],
dark: blueGrey[50],
},
secondary: {
main: orange[200],
@ -52,7 +51,7 @@ function App() {
};
const DevicesComponent = () => {
return <Devices isAdmin={isAdmin}/>;
return <Devices/>;
};
const HeatmapComponent = () => {
@ -68,11 +67,9 @@ function App() {
<BrowserRouter>
<Switch>
<PublicRoute path="/login" component={AuthComponent} />
<DevicesContextProvider>
<PrivateRoute path="/" exact authenticated={authenticated} component={DashboardComponent} />
<PrivateRoute path="/devices/:id?" exact authenticated={authenticated} component={DevicesComponent} />
<PrivateRoute path="/heatmap" exact authenticated={authenticated} component={HeatmapComponent} />
</DevicesContextProvider>
<PrivateRoute path="/" exact authenticated={authenticated} isAdmin={isAdmin} component={DashboardComponent} />
<PrivateRoute path="/devices/:id?" exact authenticated={authenticated} isAdmin={isAdmin} component={DevicesComponent} />
<PrivateRoute path="/heatmap" exact authenticated={authenticated} isAdmin={isAdmin} component={HeatmapComponent} />
</Switch>
</BrowserRouter>
</ThemeProvider>
@ -89,17 +86,17 @@ const PublicRoute = ({ component: Component, ...rest }: { [x: string]: any, comp
);
}
const PrivateRoute = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
const PrivateRoute = ({ component: Component, authenticated: Authenticated, isAdmin: IsAdmin, ...rest }: { [x: string]: any, component: any, authenticated: any, isAdmin: any }) => {
return (
<Route {...rest} render={matchProps => (
Authenticated
? <DefaultLayout component={Component} authenticated={Authenticated} {...matchProps} />
? <DefaultLayout component={Component} authenticated={Authenticated} isAdmin={IsAdmin} {...matchProps} />
: <Redirect to='/login' />
)} />
);
};
const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
const DefaultLayout = ({ component: Component, authenticated: Authenticated, isAdmin: IsAdmin, ...rest }: { [x: string]: any, component: any, authenticated: any, isAdmin: any }) => {
const classes = useDefaultLayoutStyles();
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef<HTMLButtonElement>(null);
@ -177,7 +174,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...
return (
<React.Fragment>
<AppBar position="static" className={classes.bar_root}>
<AppBar position="static">
<Toolbar>
<BirdmapTitle />
<Typography component={'span'} className={classes.typo}>
@ -186,7 +183,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...
</Toolbar>
</AppBar>
<Box zIndex="modal" className={classes.box_root}>
<Component {...rest} />
<Component isAdmin={IsAdmin} {...rest} />
</Box>
</React.Fragment>
);
@ -194,12 +191,8 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...
const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
createStyles({
bar_root: {
height: '7%',
},
box_root: {
backgroundColor: theme.palette.primary.dark,
height: '93%',
color: theme.palette.secondary.dark,
},
typo: {
marginLeft: 'auto',

5
Birdmap.API/ClientApp/src/common/Constants.js
View File

@ -1,5 +0,0 @@
export default {
probability_method_name: 'NotifyDeviceAsync',
update_method_name: 'NotifyDeviceUpdatedAsync',
update_all_method_name: 'NotifyAllUpdatedAsync',
};

14
Birdmap.API/ClientApp/src/common/ErrorDispatcher.js Normal file
View File

@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ErrorDispatcher = {
errorHandlers: [],
registerErrorHandler: function (errorHandlerFn) {
this.errorHandlers.push(errorHandlerFn);
},
raiseError: function (errorMessage) {
for (var i = 0; i < this.errorHandlers.length; i++)
this.errorHandlers[i](errorMessage);
}
};
exports.default = ErrorDispatcher;
//# sourceMappingURL=ErrorDispatcher.js.map

1
Birdmap.API/ClientApp/src/common/ErrorDispatcher.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"ErrorDispatcher.js","sourceRoot":"","sources":["ErrorDispatcher.ts"],"names":[],"mappings":";;AAAA,IAAM,eAAe,GAAG;IACtB,aAAa,EAAE,EAAE;IAEjB,oBAAoB,YAAC,cAAc;QACjC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1C,CAAC;IAED,UAAU,YAAC,YAAY;QACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE;YAChD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IACxC,CAAC;CACF,CAAC;AAEF,kBAAe,eAAe,CAAC"}

14
Birdmap.API/ClientApp/src/common/ErrorDispatcher.ts Normal file
View File

@ -0,0 +1,14 @@
const ErrorDispatcher = {
errorHandlers: [],
registerErrorHandler(errorHandlerFn) {
this.errorHandlers.push(errorHandlerFn);
},
raiseError(errorMessage) {
for (let i = 0; i < this.errorHandlers.length; i++)
this.errorHandlers[i](errorMessage);
}
};
export default ErrorDispatcher;

50
Birdmap.API/ClientApp/src/common/ServiceBase.js Normal file
View File

@ -0,0 +1,50 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ErrorDispatcher_1 = require("./ErrorDispatcher");
function get(url) {
var options = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem('user')
}
};
return makeRequest(url, options);
}
function post(url, request) {
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem('user')
},
body: "",
};
if (request)
options.body = JSON.stringify(request);
return makeRequest(url, options);
}
function makeRequest(url, options) {
return fetch(url, options)
.then(ensureResponseSuccess)
.catch(errorHandler);
}
function ensureResponseSuccess(response) {
if (!response.ok)
return response.json()
.then(function (data) { return errorHandler(data); });
return response.text()
.then(function (text) { return text.length ? JSON.parse(text) : {}; });
}
function errorHandler(response) {
console.log(response);
if (response && response.Error)
ErrorDispatcher_1.default.raiseError(response.Error);
return Promise.reject();
}
exports.default = {
get: get,
post: post,
makeRequest: makeRequest
};
//# sourceMappingURL=ServiceBase.js.map

1
Birdmap.API/ClientApp/src/common/ServiceBase.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"ServiceBase.js","sourceRoot":"","sources":["ServiceBase.ts"],"names":[],"mappings":";;AAAA,qDAAgD;AAEhD,SAAS,GAAG,CAAC,GAAW;IACpB,IAAI,OAAO,GAAG;QACV,MAAM,EAAE,KAAK;QACb,OAAO,EAAE;YACL,cAAc,EAAE,kBAAkB;YAClC,eAAe,EAAE,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC;SAClD;KACJ,CAAC;IAEF,OAAO,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,IAAI,CAAC,GAAW,EAAE,OAAY;IACnC,IAAI,OAAO,GAAG;QACV,MAAM,EAAE,MAAM;QACd,OAAO,EAAE;YACL,cAAc,EAAE,kBAAkB;YAClC,eAAe,EAAE,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC;SAClD;QACD,IAAI,EAAE,EAAE;KACX,CAAC;IAEF,IAAI,OAAO;QACP,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE3C,OAAO,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,WAAW,CAAC,GAAW,EAAE,OAAY;IAC1C,OAAO,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC;SACrB,IAAI,CAAC,qBAAqB,CAAC;SAC3B,KAAK,CAAC,YAAY,CAAC,CAAC;AAC7B,CAAC;AAED,SAAS,qBAAqB,CAAC,QAAa;IACxC,IAAI,CAAC,QAAQ,CAAC,EAAE;QACZ,OAAO,QAAQ,CAAC,IAAI,EAAE;aACjB,IAAI,CAAC,UAAC,IAAS,IAAK,OAAA,YAAY,CAAC,IAAI,CAAC,EAAlB,CAAkB,CAAC,CAAC;IAEjD,OAAO,QAAQ,CAAC,IAAI,EAAE;SACjB,IAAI,CAAC,UAAC,IAAS,IAAK,OAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,EAAnC,CAAmC,CAAC,CAAC;AAClE,CAAC;AAED,SAAS,YAAY,CAAC,QAAa;IAC/B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAEtB,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK;QAC1B,yBAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/C,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;AAC5B,CAAC;AAED,kBAAe;IACX,GAAG,KAAA;IACH,IAAI,MAAA;IACJ,WAAW,aAAA;CACd,CAAC"}

59
Birdmap.API/ClientApp/src/common/ServiceBase.ts Normal file
View File

@ -0,0 +1,59 @@
import ErrorDispatcher from './ErrorDispatcher';
function get(url: string) {
let options = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem('user')
}
};
return makeRequest(url, options);
}
function post(url: string, request: any) {
let options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem('user')
},
body: "",
};
if (request)
options.body = JSON.stringify(request);
return makeRequest(url, options);
}
function makeRequest(url: string, options: any) {
return fetch(url, options)
.then(ensureResponseSuccess)
.catch(errorHandler);
}
function ensureResponseSuccess(response: any) {
if (!response.ok)
return response.json()
.then((data: any) => errorHandler(data));
return response.text()
.then((text: any) => text.length ? JSON.parse(text) : {});
}
function errorHandler(response: any) {
console.log(response);
if (response && response.Error)
ErrorDispatcher.raiseError(response.Error);
return Promise.reject();
}
export default {
get,
post,
makeRequest
};

0
Birdmap.API/ClientApp/src/components/appBar/BirdmapTitle.tsx → Birdmap.API/ClientApp/src/common/components/BirdmapTitle.tsx
View File

104
Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx
View File

@ -1,23 +1,14 @@
import React, { Component } from 'react';
import Accordion from '@material-ui/core/Accordion';
import { blue, blueGrey, green, orange, red, yellow } from '@material-ui/core/colors';
import { blue, red, yellow } from '@material-ui/core/colors';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Grid, Typography, Paper, IconButton, Box, FormControlLabel } from '@material-ui/core';
import { Grid, Typography, Paper } from '@material-ui/core';
import { withStyles } from '@material-ui/styles';
import { withRouter } from "react-router";
import { Power, PowerOff, Refresh } from '@material-ui/icons/';
import DeviceService from '../../common/DeviceService'
import DevicesContext from '../../contexts/DevicesContext';
const styles = theme => ({
acc_summary: {
backgroundColor: blueGrey[50],
},
acc_details: {
backgroundColor: blueGrey[100],
},
grid_typo: {
fontSize: theme.typography.pxToRem(20),
fontWeight: theme.typography.fontWeightRegular,
@ -41,9 +32,6 @@ const styles = theme => ({
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
color: theme.palette.text.secondary,
},
icon_box: {
marginRight: '15px',
}
});
@ -56,13 +44,11 @@ class DeviceComponent extends Component {
}
}
static contextType = DevicesContext;
getColor(status) {
if (status == "Online") {
return { color: green[600] };
return { color: blue[800] };
} else if (status == "Offline") {
return { color: orange[900] };
return { color: yellow[800] };
} else /* if (device.status == "unknown") */ {
return { color: red[800] };
}
@ -73,72 +59,13 @@ class DeviceComponent extends Component {
this.setState({ expanded: id });
}
renderSensorButtons(device, sensor) {
var service = new DeviceService();
return this.renderButtons(
() => service.onlinesensor(device.id, sensor.id),
() => service.offlinesensor(device.id, sensor.id),
() => this.context.updateDevice(device.id)
);
}
renderDeviceButtons(device) {
var service = new DeviceService();
return this.renderButtons(
() => service.onlinedevice(device.id),
() => service.offlinedevice(device.id),
() => this.context.updateDevice(device.id)
);
}
renderButtons(onPower, onPowerOff, onRefresh) {
const renderOnOff = () => {
return (
<React.Fragment>
<IconButton color="primary" onClick={onPower}>
<Power />
</IconButton>
<IconButton color="primary" onClick={onPowerOff}>
<PowerOff />
</IconButton>
</React.Fragment>
);
}
const { classes } = this.props;
return (
<Box className={classes.icon_box}>
{this.props.isAdmin ? renderOnOff() : null}
<IconButton color="primary" onClick={onRefresh}>
<Refresh />
</IconButton>
</Box>
);
}
render() {
const { classes } = this.props;
const Sensors = this.props.device.sensors.map((sensor, index) => (
<Grid item className={classes.grid_item} key={sensor.id}>
<Grid container
spacing={3}
direction="row"
justify="space-between"
alignItems="center">
<Grid item>
<Typography className={classes.grid_item_typo}>Sensor {index}</Typography>
</Grid>
<Grid item>
<Typography className={classes.grid_item_typo_2}>{sensor.id}</Typography>
</Grid>
<Grid item>
<Typography style={this.getColor(sensor.status)}>Status: <b>{sensor.status}</b></Typography>
</Grid>
<Grid item>
{this.renderSensorButtons(this.props.device, sensor)}
</Grid>
</Grid>
</Grid>
));
const handleChange = (panel) => (event, isExpanded) => {
@ -147,33 +74,14 @@ class DeviceComponent extends Component {
return (
<Accordion expanded={this.state.expanded === this.props.device.id} onChange={handleChange(this.props.device.id)}>
<AccordionSummary className={classes.acc_summary}
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={"device-panel-/" + this.props.device.id}
id={"device-panel-/" + this.props.device.id}>
<Grid container
spacing={3}
direction="row"
justify="space-between"
alignItems="center">
<Grid item>
<Typography className={classes.grid_typo}>Device {this.props.index}</Typography>
</Grid>
<Grid item>
<Typography className={classes.grid_typo_2}>{this.props.device.id}</Typography>
</Grid>
<Grid item>
<Typography style={this.getColor(this.props.device.status)}>Status: <b>{this.props.device.status}</b></Typography>
</Grid>
<Grid item>
<FormControlLabel
onClick={(event) => event.stopPropagation()}
onFocus={(event) => event.stopPropagation()}
control={this.renderDeviceButtons(this.props.device)}/>
</Grid>
</Grid>
</AccordionSummary>
<AccordionDetails className={classes.acc_details}>
<AccordionDetails>
<Grid className={classes.grid_item}
container
spacing={3}

4
Birdmap.API/ClientApp/src/common/DeviceService.js → Birdmap.API/ClientApp/src/components/devices/DeviceService.js
View File

@ -430,9 +430,7 @@ var DeviceService = /** @class */ (function () {
url_ = url_.replace(/[?&]$/, "");
var options_ = {
method: "POST",
headers: {
'Authorization': sessionStorage.getItem('user')
}
headers: {}
};
return this.http.fetch(url_, options_).then(function (_response) {
return _this.processOnlinesensor(_response);

2
Birdmap.API/ClientApp/src/common/DeviceService.js.map → Birdmap.API/ClientApp/src/components/devices/DeviceService.js.map
View File

File diff suppressed because one or more lines are too long

1
Birdmap.API/ClientApp/src/common/DeviceService.ts → Birdmap.API/ClientApp/src/components/devices/DeviceService.ts
View File

@ -391,7 +391,6 @@ export default class DeviceService {
let options_ = <RequestInit>{
method: "POST",
headers: {
'Authorization': sessionStorage.getItem('user')
}
};

80
Birdmap.API/ClientApp/src/components/devices/Devices.jsx
View File

@ -1,86 +1,44 @@
import { Box, Paper, Typography, IconButton, Grid } from '@material-ui/core';
import { blue, blueGrey, green, orange, red, yellow } from '@material-ui/core/colors';
import React, { Component } from 'react'
import DeviceService from './DeviceService'
import Accordion from '@material-ui/core/Accordion';
import DeviceComponent from './DeviceComponent'
import SensorComponent from './DeviceComponent'
import { withStyles } from '@material-ui/styles';
import React from 'react';
import DeviceService from '../../common/DeviceService';
import DevicesContext from '../../contexts/DevicesContext';
import DeviceComponent from './DeviceComponent';
import { Power, PowerOff, Refresh } from '@material-ui/icons/';
import { Box } from '@material-ui/core';
import { grey } from '@material-ui/core/colors';
const styles = theme => ({
root: {
padding: '64px',
backgroundColor: theme.palette.primary.dark,
},
paper: {
backgroundColor: blueGrey[50],
height: '60px',
margin: 'auto',
},
typo: {
fontSize: theme.typography.pxToRem(20),
fontWeight: theme.typography.fontWeightRegular,
},
}
});
class Devices extends React.Component {
constructor(props) {
super(props);
}
static contextType = DevicesContext;
this.state = {
devices: [],
};
}
componentDidMount() {
}
renderButtons() {
var service = new DeviceService();
const renderOnOff = () => {
return (
<React.Fragment>
<IconButton color="primary" onClick={() => service.onlineall()}>
<Power />
</IconButton>
<IconButton color="primary" onClick={() => service.offlineall()}>
<PowerOff />
</IconButton>
</React.Fragment>
);
}
return (
<Box>
{this.props.isAdmin ? renderOnOff() : null}
<IconButton color="primary" onClick={() => this.context.updateAllDevices()}>
<Refresh />
</IconButton>
</Box>
);
new DeviceService().getall().then(result => {
this.setState({ devices: result });
}).catch(ex => {
console.log(ex);
});
}
render() {
const { classes } = this.props;
const Devices = this.context.devices.map((device, index) => (
<DeviceComponent isAdmin={this.props.isAdmin} device={device} index={index} key={device.id}/>
const Devices = this.state.devices.map((device, index) => (
<DeviceComponent device={device} index={index} key={device.id}/>
));
return (
<Box className={classes.root}>
<Paper className={classes.paper} square>
<Grid container
spacing={3}
direction="row"
justify="center"
alignItems="center">
<Grid item>
<Typography className={classes.typo}>All Devices</Typography>
</Grid>
{this.renderButtons()}
<Grid item>
</Grid>
</Grid>
</Paper>
{Devices}
</Box>
);

15
Birdmap.API/ClientApp/src/components/devices/SensorComponent.jsx Normal file
View File

@ -0,0 +1,15 @@
import React, { Component } from 'react';
import AccordionDetails from '@material-ui/core/AccordionDetails';
export default class SensorComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
);
}
}

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

@ -1,59 +1,96 @@
/*global google*/
import GoogleMapReact from 'google-map-react';
import React, { Component } from 'react';
import DeviceService from '../devices/DeviceService'
import DeviceMarker from './DeviceMarker'
import C from '../../common/Constants'
import DevicesContext from '../../contexts/DevicesContext';
import { HubConnectionBuilder } from '@microsoft/signalr';
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: [],
};
this.probabilityHandler = this.probabilityHandler.bind(this);
connection: null,
}
}
static contextType = DevicesContext;
probabilityHandler(point) {
if (point.prob > 0.5) {
this.setState({
heatmapPoints: [...this.state.heatmapPoints, point]
handleAllDevicesUpdated(service = null) {
if (service === null) {
service = new DeviceService();
}
service.getall().then(result => {
this.setState({ devices: result });
}).catch(ex => {
console.log(ex);
});
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)
}
}
}
}
componentDidMount() {
this.context.addHandler(C.probability_method_name, this.probabilityHandler);
const newPoints = [];
for (var p of this.context.heatmapPoints) {
if (p.prob > 0.5) {
newPoints.push(p)
}
}
const service = new DeviceService();
this.handleAllDevicesUpdated(service);
this.setState({ heatmapPoints: newPoints });
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));
}
componentWillUnmount() {
this.context.removeHandler(C.probability_method_name, this.probabilityHandler);
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!');
}
}
render() {
@ -75,7 +112,7 @@ export default class MapContainer extends Component {
mapTypeId: 'satellite'
}
const Markers = this.context.devices.map((device, index) => (
const Markers = this.state.devices.map((device, index) => (
<DeviceMarker
key={device.id}
lat={device.coordinates.latitude + lat_offset}
@ -85,7 +122,7 @@ export default class MapContainer extends Component {
));
return (
<div style={{ height: '93vh', width: '100%' }}>
<div style={{ height: '93.5vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],

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

@ -1,12 +0,0 @@
import React from 'react';
export default React.createContext({
devices: [],
heatmapPoints: [],
addHandler: (_, __) => { },
removeHandler: (_, __) => { },
updateDevice: () => { },
updateAllDevices: () => { },
});

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

@ -1,148 +0,0 @@
import Context from './DevicesContext'
import { HubConnectionBuilder } from '@microsoft/signalr';
import DeviceService from '../common/DeviceService';
import C from '../common/Constants'
import React, { Component } from 'react'
const hub_url = '/hubs/devices';
export default class DevicesContextProvider extends Component {
constructor(props) {
super(props);
const handlers = {};
for (var property in C) {
handlers[C[property]] = [];
};
this.state = {
hubConnection: null,
devices: [],
heatmapPoints: [],
handlers: handlers,
};
}
addHandler = (methodName, handler) => {
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;
var index = updatedHandlers[methodName].findIndex((h => h === handler));
if (index > -1) {
updatedHandlers[methodName].splice(index, 1);
//console.log("Removed '" + methodName + "' handler.");
}
this.setState({ handlers: updatedHandlers });
}
updateDevice = (id) => {
this.updateDeviceInternal(id);
}
updateAllDevices = () => {
this.updateAllDevicesInternal();
}
invokeHandlers(methodName, context) {
this.state.handlers[methodName].forEach(function (handler) {
handler(context);
});
}
updateAllDevicesInternal(service = null) {
if (service === null) {
service = new DeviceService();
}
service.getall().then(result => {
this.setState({ devices: result });
}).catch(ex => {
console.log(ex);
});
}
updateDeviceInternal(id, service = null) {
if (service === null) {
service = new DeviceService();
}
service.getdevice(id).then(result => {
const updatedDevices = [...this.state.devices];
var index = updatedDevices.findIndex((d => d.id == id));
if (index > -1) {
updatedDevices[index] = result;
}
else {
updatedDevices.push(result);
}
this.setState({ devices: updatedDevices });
this.invokeHandlers(C.update_method_name, result);
}).catch(ex => console.log("Device update failed.", ex));
}
componentDidMount() {
const service = new DeviceService();
this.updateAllDevicesInternal(service);
const newConnection = new HubConnectionBuilder()
.withUrl(hub_url)
.withAutomaticReconnect()
.build();
this.setState({ hubConnection: newConnection });
newConnection.start()
.then(_ => {
console.log('Hub Connected!');
newConnection.on(C.probability_method_name, (id, date, prob) => {
//console.log(method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
var device = this.state.devices.filter(function (x) { return x.id === id })[0]
var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude, prob: prob, date: date };
this.setState({
heatmapPoints: [...this.state.heatmapPoints, newPoint]
});
this.invokeHandlers(C.probability_method_name, newPoint);
});
newConnection.on(C.update_all_method_name, () => {
this.updateAllDevicesInternal(service);
this.invokeHandlers(C.update_all_method_name, null);
});
newConnection.on(C.update_method_name, (id) => this.updateDeviceInternal(id, service));
}).catch(e => console.log('Hub Connection failed: ', e));
}
componentWillUnmount() {
if (this.state.hubConnection != null) {
this.state.hubConnection.off(C.probability_method_name);
this.state.hubConnection.off(C.update_all_method_name);
this.state.hubConnection.off(C.update_method_name);
console.log('Hub Disconnected!');
}
}
render() {
return (
<Context.Provider
value={{
devices: this.state.devices,
heatmapPoints: this.state.heatmapPoints,
addHandler: this.addHandler,
removeHandler: this.removeHandler,
updateDevice: this.updateDevice,
updateAllDevices: this.updateAllDevices,
}}
>
{this.props.children}
</Context.Provider>
);
};
}

2
Birdmap.API/Controllers/DevicesController.cs
View File

@ -131,7 +131,6 @@ namespace Birdmap.API.Controllers
_logger.LogInformation($"Turning off sensor [{sensorID}] of device [{deviceID}]...");
await _service.OfflinesensorAsync(deviceID, sensorID);
await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
return Ok();
}
@ -147,7 +146,6 @@ namespace Birdmap.API.Controllers
_logger.LogInformation($"Turning on sensor [{sensorID}] of device [{deviceID}]...");
await _service.OnlinesensorAsync(deviceID, sensorID);
await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
return Ok();
}

6
Birdmap.API/nlog.config
View File

@ -20,9 +20,6 @@
<target xsi:type="File" name="mqttFile" fileName="${basedir}Log/birdmap-mqtt-${shortdate}.log"
layout="${longdate} [${threadname:whenEmpty=${threadid}}] ${uppercase:${level}} ${logger} - ${message} ${exception:format=tostring}" />
<target xsi:type="File" name="hubsFile" fileName="${basedir}Log/birdmap-hubs-${shortdate}.log"
layout="${longdate} [${threadname:whenEmpty=${threadid}}] ${uppercase:${level}} ${logger} - ${message} ${exception:format=tostring}" />
<!-- another file log, only own logs. Uses some ASP.NET core renderers -->
<target xsi:type="File" name="ownFile" fileName="${basedir}Log/birdmap-own-${shortdate}.log"
layout="${longdate} [${threadname:whenEmpty=${threadid}}] ${uppercase:${level}} ${callsite} - ${message} ${exception:format=tostring} (url: ${aspnet-request-url})(action: ${aspnet-mvc-action})" />
@ -36,9 +33,6 @@
<!--Skip non-critical Mqtt logs-->
<logger name="*.*Mqtt*.*" minlevel="Trace" maxlevel="Warning" writeTo="mqttFile" final="true"/>
<!--Skip non-critical Hub logs-->
<logger name="*.*Hubs*.*" minlevel="Trace" maxlevel="Warning" writeTo="hubsFile" final="true"/>
<!--Skip non-critical Microsoft logs-->
<logger name="Microsoft.*" maxlevel="Info" final="true" />