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

Compare commits

base: 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
...
compare: 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

7 Commits
3f267cb009 ... 779e21909c

Author SHA1 Message Date
kunkliricsi
779e21909c Added All Device handler 2020-11-18 18:34:48 +01:00
kunkliricsi
f84ea8f0c5 Extended Devices with buttons and status 2020-11-18 14:04:57 +01:00
kunkliricsi
181985859e Added componentDidMount heatmap initializer 2020-11-18 12:35:33 +01:00
kunkliricsi
39a38fe8eb Added context to heatmap, and devices 2020-11-18 12:04:32 +01:00
kunkliricsi
490f0f3265 Added context 2020-11-18 09:56:30 +01:00
kunkliricsi
41bf14a4e5 Merge branch 'master' into feature/Contexts 2020-11-18 09:19:05 +01:00
kunkliricsi
3f2467f6c6 Added Device Context (not working) 2020-11-17 18:58:28 +01:00
22 changed files with 402 additions and 278 deletions
Show Stats Expand all files Collapse all files

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

@ -49,8 +49,6 @@
<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" />
@ -59,10 +57,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> <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.

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

@ -8,20 +8,21 @@ 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 './common/components/BirdmapTitle'; import BirdmapTitle from './components/appBar/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: blue[900], main: blueGrey[900],
dark: blueGrey[50], dark: grey[400],
}, },
secondary: { secondary: {
main: orange[200], main: orange[200],
@ -51,7 +52,7 @@ function App() {
}; };
const DevicesComponent = () => { const DevicesComponent = () => {
return <Devices/>; return <Devices isAdmin={isAdmin}/>;
}; };
const HeatmapComponent = () => { const HeatmapComponent = () => {
@ -67,9 +68,11 @@ function App() {
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<PublicRoute path="/login" component={AuthComponent} /> <PublicRoute path="/login" component={AuthComponent} />
<PrivateRoute path="/" exact authenticated={authenticated} isAdmin={isAdmin} component={DashboardComponent} /> <DevicesContextProvider>
<PrivateRoute path="/devices/:id?" exact authenticated={authenticated} isAdmin={isAdmin} component={DevicesComponent} /> <PrivateRoute path="/" exact authenticated={authenticated} component={DashboardComponent} />
<PrivateRoute path="/heatmap" exact authenticated={authenticated} isAdmin={isAdmin} component={HeatmapComponent} /> <PrivateRoute path="/devices/:id?" exact authenticated={authenticated} component={DevicesComponent} />
<PrivateRoute path="/heatmap" exact authenticated={authenticated} component={HeatmapComponent} />
</DevicesContextProvider>
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
</ThemeProvider> </ThemeProvider>
@ -86,17 +89,17 @@ const PublicRoute = ({ component: Component, ...rest }: { [x: string]: any, comp
); );
} }
const PrivateRoute = ({ component: Component, authenticated: Authenticated, isAdmin: IsAdmin, ...rest }: { [x: string]: any, component: any, authenticated: any, isAdmin: any }) => { const PrivateRoute = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
return ( return (
<Route {...rest} render={matchProps => ( <Route {...rest} render={matchProps => (
Authenticated Authenticated
? <DefaultLayout component={Component} authenticated={Authenticated} isAdmin={IsAdmin} {...matchProps} /> ? <DefaultLayout component={Component} authenticated={Authenticated} {...matchProps} />
: <Redirect to='/login' /> : <Redirect to='/login' />
)} /> )} />
); );
}; };
const DefaultLayout = ({ component: Component, authenticated: Authenticated, isAdmin: IsAdmin, ...rest }: { [x: string]: any, component: any, authenticated: any, isAdmin: any }) => { const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: 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);
@ -174,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}>
@ -183,7 +186,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Box zIndex="modal" className={classes.box_root}> <Box zIndex="modal" className={classes.box_root}>
<Component isAdmin={IsAdmin} {...rest} /> <Component {...rest} />
</Box> </Box>
</React.Fragment> </React.Fragment>
); );
@ -191,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',

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

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

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

@ -430,7 +430,9 @@ 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/components/devices/DeviceService.js.map → Birdmap.API/ClientApp/src/common/DeviceService.js.map
View File

File diff suppressed because one or more lines are too long

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

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

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

@ -1,14 +0,0 @@
"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
View File

@ -1 +0,0 @@
{"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
View File

@ -1,14 +0,0 @@
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
View File

@ -1,50 +0,0 @@
"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
View File

@ -1 +0,0 @@
{"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
View File

@ -1,59 +0,0 @@
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/common/components/BirdmapTitle.tsx → Birdmap.API/ClientApp/src/components/appBar/BirdmapTitle.tsx
View File

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

@ -1,14 +1,23 @@
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, red, yellow } from '@material-ui/core/colors'; import { blue, blueGrey, green, orange, 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 } from '@material-ui/core'; import { Grid, Typography, Paper, IconButton, Box, FormControlLabel } 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,
@ -32,6 +41,9 @@ 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',
} }
}); });
@ -44,11 +56,13 @@ class DeviceComponent extends Component {
} }
} }
static contextType = DevicesContext;
getColor(status) { getColor(status) {
if (status == "Online") { if (status == "Online") {
return { color: blue[800] }; return { color: green[600] };
} else if (status == "Offline") { } else if (status == "Offline") {
return { color: yellow[800] }; return { color: orange[900] };
} else /* if (device.status == "unknown") */ { } else /* if (device.status == "unknown") */ {
return { color: red[800] }; return { color: red[800] };
} }
@ -59,13 +73,72 @@ 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
spacing={3}
direction="row"
justify="space-between"
alignItems="center">
<Grid item>
<Typography className={classes.grid_item_typo}>Sensor {index}</Typography> <Typography className={classes.grid_item_typo}>Sensor {index}</Typography>
</Grid>
<Grid item>
<Typography className={classes.grid_item_typo_2}>{sensor.id}</Typography> <Typography className={classes.grid_item_typo_2}>{sensor.id}</Typography>
</Grid> </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) => { const handleChange = (panel) => (event, isExpanded) => {
@ -74,14 +147,33 @@ 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 <AccordionSummary className={classes.acc_summary}
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
spacing={3}
direction="row"
justify="space-between"
alignItems="center">
<Grid item>
<Typography className={classes.grid_typo}>Device {this.props.index}</Typography> <Typography className={classes.grid_typo}>Device {this.props.index}</Typography>
</Grid>
<Grid item>
<Typography className={classes.grid_typo_2}>{this.props.device.id}</Typography> <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> <AccordionDetails className={classes.acc_details}>
<Grid className={classes.grid_item} <Grid className={classes.grid_item}
container container
spacing={3} spacing={3}

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

@ -1,44 +1,86 @@
import React, { Component } from 'react' import { Box, Paper, Typography, IconButton, Grid } from '@material-ui/core';
import DeviceService from './DeviceService' import { blue, blueGrey, green, orange, red, yellow } from '@material-ui/core/colors';
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 { Box } from '@material-ui/core'; import React from 'react';
import { grey } from '@material-ui/core/colors'; import DeviceService from '../../common/DeviceService';
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);
this.state = {
devices: [],
};
} }
static contextType = DevicesContext;
componentDidMount() { componentDidMount() {
new DeviceService().getall().then(result => { }
this.setState({ devices: result });
}).catch(ex => { renderButtons() {
console.log(ex); 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>
);
} }
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const Devices = this.state.devices.map((device, index) => ( const Devices = this.context.devices.map((device, index) => (
<DeviceComponent device={device} index={index} key={device.id}/> <DeviceComponent isAdmin={this.props.isAdmin} 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
View File

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

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

@ -1,96 +1,59 @@
/*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 { 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);
}); const newPoints = [];
for (var p of this.context.heatmapPoints) {
if (p.prob > 0.5) {
newPoints.push(p)
}
}
newConnection.on(update_method_name, (id) => { this.setState({ heatmapPoints: newPoints });
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 +75,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 +85,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"],

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

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

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

@ -0,0 +1,148 @@
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,6 +131,7 @@ 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();
} }
@ -146,6 +147,7 @@ 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,6 +20,9 @@
<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})" />
@ -33,6 +36,9 @@
<!--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" />