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> <ItemGroup>
<None Remove="ClientApp\src\common\components\BirdmapTitle.tsx" /> <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\Auth.tsx" />
<None Remove="ClientApp\src\components\auth\AuthClient.ts" /> <None Remove="ClientApp\src\components\auth\AuthClient.ts" />
<None Remove="ClientApp\src\components\auth\AuthService.ts" /> <None Remove="ClientApp\src\components\auth\AuthService.ts" />
@ -57,10 +59,10 @@
<ItemGroup> <ItemGroup>
<TypeScriptCompile Include="ClientApp\src\components\auth\Auth.tsx" /> <TypeScriptCompile Include="ClientApp\src\components\auth\Auth.tsx" />
<TypeScriptCompile Include="ClientApp\src\common\components\BirdmapTitle.tsx" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<Folder Include="ClientApp\src\common\components\" />
<Folder Include="ClientApp\src\components\dashboard\" /> <Folder Include="ClientApp\src\components\dashboard\" />
</ItemGroup> </ItemGroup>

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

@ -22,11 +22,11 @@
--> -->
<title>Birdmap</title> <title>Birdmap</title>
</head> </head>
<body style="height: 100vh;"> <body>
<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" style="height: 100vh;"></div> <div id="root"></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.

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

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

@ -1,23 +1,14 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Accordion from '@material-ui/core/Accordion'; 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 AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails'; import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; 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 { withStyles } from '@material-ui/styles';
import { withRouter } from "react-router"; 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 => ({ const styles = theme => ({
acc_summary: {
backgroundColor: blueGrey[50],
},
acc_details: {
backgroundColor: blueGrey[100],
},
grid_typo: { grid_typo: {
fontSize: theme.typography.pxToRem(20), fontSize: theme.typography.pxToRem(20),
fontWeight: theme.typography.fontWeightRegular, fontWeight: theme.typography.fontWeightRegular,
@ -41,9 +32,6 @@ const styles = theme => ({
fontSize: theme.typography.pxToRem(15), fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular, fontWeight: theme.typography.fontWeightRegular,
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
},
icon_box: {
marginRight: '15px',
} }
}); });
@ -56,13 +44,11 @@ class DeviceComponent extends Component {
} }
} }
static contextType = DevicesContext;
getColor(status) { getColor(status) {
if (status == "Online") { if (status == "Online") {
return { color: green[600] }; return { color: blue[800] };
} else if (status == "Offline") { } else if (status == "Offline") {
return { color: orange[900] }; return { color: yellow[800] };
} else /* if (device.status == "unknown") */ { } else /* if (device.status == "unknown") */ {
return { color: red[800] }; return { color: red[800] };
} }
@ -73,71 +59,12 @@ class DeviceComponent extends Component {
this.setState({ expanded: id }); 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() { render() {
const { classes } = this.props; const { classes } = this.props;
const Sensors = this.props.device.sensors.map((sensor, index) => ( const Sensors = this.props.device.sensors.map((sensor, index) => (
<Grid item className={classes.grid_item} key={sensor.id}> <Grid item className={classes.grid_item} key={sensor.id}>
<Grid container <Typography className={classes.grid_item_typo}>Sensor {index}</Typography>
spacing={3} <Typography className={classes.grid_item_typo_2}>{sensor.id}</Typography>
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> </Grid>
)); ));
@ -147,41 +74,22 @@ class DeviceComponent extends Component {
return ( return (
<Accordion expanded={this.state.expanded === this.props.device.id} onChange={handleChange(this.props.device.id)}> <Accordion expanded={this.state.expanded === this.props.device.id} onChange={handleChange(this.props.device.id)}>
<AccordionSummary className={classes.acc_summary} <AccordionSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls={"device-panel-/" + this.props.device.id} aria-controls={"device-panel-/" + this.props.device.id}
id={"device-panel-/" + this.props.device.id}> id={"device-panel-/" + this.props.device.id}>
<Grid container <Typography className={classes.grid_typo}>Device {this.props.index}</Typography>
spacing={3} <Typography className={classes.grid_typo_2}>{this.props.device.id}</Typography>
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> </AccordionSummary>
<AccordionDetails className={classes.acc_details}> <AccordionDetails>
<Grid className={classes.grid_item} <Grid className={classes.grid_item}
container container
spacing={3} spacing={3}
direction="column" direction="column"
justify="center" justify="center"
alignItems="flex-start"> alignItems="flex-start">
{Sensors} {Sensors}
</Grid> </Grid>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
); );

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(/[?&]$/, ""); url_ = url_.replace(/[?&]$/, "");
var options_ = { var options_ = {
method: "POST", method: "POST",
headers: { headers: {}
'Authorization': sessionStorage.getItem('user')
}
}; };
return this.http.fetch(url_, options_).then(function (_response) { return this.http.fetch(url_, options_).then(function (_response) {
return _this.processOnlinesensor(_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>{ let options_ = <RequestInit>{
method: "POST", method: "POST",
headers: { 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 React, { Component } from 'react'
import { blue, blueGrey, green, orange, red, yellow } from '@material-ui/core/colors'; 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 { withStyles } from '@material-ui/styles';
import React from 'react'; import { Box } from '@material-ui/core';
import DeviceService from '../../common/DeviceService'; import { grey } from '@material-ui/core/colors';
import DevicesContext from '../../contexts/DevicesContext';
import DeviceComponent from './DeviceComponent';
import { Power, PowerOff, Refresh } from '@material-ui/icons/';
const styles = theme => ({ const styles = theme => ({
root: { root: {
padding: '64px', padding: '64px',
backgroundColor: theme.palette.primary.dark, 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 { class Devices extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
}
static contextType = DevicesContext; this.state = {
devices: [],
};
}
componentDidMount() { componentDidMount() {
} new DeviceService().getall().then(result => {
this.setState({ devices: result });
renderButtons() { }).catch(ex => {
var service = new DeviceService(); console.log(ex);
});
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>
);
} }
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const Devices = this.context.devices.map((device, index) => ( const Devices = this.state.devices.map((device, index) => (
<DeviceComponent isAdmin={this.props.isAdmin} device={device} index={index} key={device.id}/> <DeviceComponent device={device} index={index} key={device.id}/>
)); ));
return ( return (
<Box className={classes.root}> <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} {Devices}
</Box> </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*/ /*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 '../devices/DeviceService'
import DeviceMarker from './DeviceMarker' import DeviceMarker from './DeviceMarker'
import C from '../../common/Constants' import { HubConnectionBuilder } from '@microsoft/signalr';
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);
} }
static contextType = DevicesContext; handleAllDevicesUpdated(service = null) {
if (service === null) {
probabilityHandler(point) { service = new DeviceService();
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() { componentDidMount() {
this.context.addHandler(C.probability_method_name, this.probabilityHandler); const service = new DeviceService();
const newPoints = []; this.handleAllDevicesUpdated(service);
for (var p of this.context.heatmapPoints) {
if (p.prob > 0.5) {
newPoints.push(p)
}
}
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() { 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() { render() {
@ -75,7 +112,7 @@ export default class MapContainer extends Component {
mapTypeId: 'satellite' mapTypeId: 'satellite'
} }
const Markers = this.context.devices.map((device, index) => ( const Markers = this.state.devices.map((device, index) => (
<DeviceMarker <DeviceMarker
key={device.id} key={device.id}
lat={device.coordinates.latitude + lat_offset} lat={device.coordinates.latitude + lat_offset}
@ -85,7 +122,7 @@ export default class MapContainer extends Component {
)); ));
return ( return (
<div style={{ height: '93vh', width: '100%' }}> <div style={{ height: '93.5vh', width: '100%' }}>
<GoogleMapReact <GoogleMapReact
bootstrapURLKeys={{ bootstrapURLKeys={{
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"], 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}]..."); _logger.LogInformation($"Turning off sensor [{sensorID}] of device [{deviceID}]...");
await _service.OfflinesensorAsync(deviceID, sensorID); await _service.OfflinesensorAsync(deviceID, sensorID);
await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
return Ok(); return Ok();
} }
@ -147,7 +146,6 @@ namespace Birdmap.API.Controllers
_logger.LogInformation($"Turning on sensor [{sensorID}] of device [{deviceID}]..."); _logger.LogInformation($"Turning on sensor [{sensorID}] of device [{deviceID}]...");
await _service.OnlinesensorAsync(deviceID, sensorID); await _service.OnlinesensorAsync(deviceID, sensorID);
await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
return Ok(); 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" <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}" /> 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 --> <!-- 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" <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})" /> 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--> <!--Skip non-critical Mqtt logs-->
<logger name="*.*Mqtt*.*" minlevel="Trace" maxlevel="Warning" writeTo="mqttFile" final="true"/> <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--> <!--Skip non-critical Microsoft logs-->
<logger name="Microsoft.*" maxlevel="Info" final="true" /> <logger name="Microsoft.*" maxlevel="Info" final="true" />