Compare commits
13 Commits
feature/NE
...
feature/Co
| Author | SHA1 | Date | |
|---|---|---|---|
| 779e21909c | |||
| f84ea8f0c5 | |||
| 181985859e | |||
| 39a38fe8eb | |||
| 490f0f3265 | |||
| 41bf14a4e5 | |||
| 3f267cb009 | |||
| 0e3eb8720f | |||
| 3f2467f6c6 | |||
| 2a83856622 | |||
| d726273431 | |||
| 412647617b | |||
| 53ff60ae5a |
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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.
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
|
import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
|
||||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||||
import AppBar from '@material-ui/core/AppBar';
|
import AppBar from '@material-ui/core/AppBar';
|
||||||
import blue from '@material-ui/core/colors/blue';
|
|
||||||
import orange from '@material-ui/core/colors/orange';
|
|
||||||
import { positions } from '@material-ui/system';
|
import { positions } from '@material-ui/system';
|
||||||
import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
|
import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
|
||||||
import Toolbar from '@material-ui/core/Toolbar';
|
import Toolbar from '@material-ui/core/Toolbar';
|
||||||
@ -10,20 +8,25 @@ 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 { 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: grey[400],
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
main: orange[200],
|
main: orange[200],
|
||||||
|
dark: blueGrey[50],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -45,11 +48,11 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const DashboardComponent = () => {
|
const DashboardComponent = () => {
|
||||||
return <Typography>Dashboard</Typography>;
|
return <Link to="/devices/5">This is a link</Link>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const DevicesComponent = () => {
|
const DevicesComponent = () => {
|
||||||
return <Typography>Devices</Typography>;
|
return <Devices isAdmin={isAdmin}/>;
|
||||||
|
|
||||||
};
|
};
|
||||||
const HeatmapComponent = () => {
|
const HeatmapComponent = () => {
|
||||||
@ -62,14 +65,16 @@ function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<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" 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} />
|
||||||
</Switch>
|
<PrivateRoute path="/heatmap" exact authenticated={authenticated} component={HeatmapComponent} />
|
||||||
</BrowserRouter>
|
</DevicesContextProvider>
|
||||||
|
</Switch>
|
||||||
|
</BrowserRouter>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -84,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);
|
||||||
@ -141,7 +146,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
|
|||||||
return Authenticated
|
return Authenticated
|
||||||
? <Container className={classes.nav_menu}>
|
? <Container className={classes.nav_menu}>
|
||||||
<NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink>
|
<NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink>
|
||||||
<NavLink exact to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
|
<NavLink to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
|
||||||
<NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink>
|
<NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink>
|
||||||
<IconButton className={classes.nav_menu_icon}
|
<IconButton className={classes.nav_menu_icon}
|
||||||
ref={anchorRef}
|
ref={anchorRef}
|
||||||
@ -172,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}>
|
||||||
@ -180,8 +185,8 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
|
|||||||
</Typography>
|
</Typography>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</AppBar>
|
</AppBar>
|
||||||
<Box zIndex="modal">
|
<Box zIndex="modal" className={classes.box_root}>
|
||||||
<Component isAdmin={IsAdmin} {...rest} />
|
<Component {...rest} />
|
||||||
</Box>
|
</Box>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
@ -189,6 +194,13 @@ 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: {
|
||||||
|
backgroundColor: theme.palette.primary.dark,
|
||||||
|
height: '93%',
|
||||||
|
},
|
||||||
typo: {
|
typo: {
|
||||||
marginLeft: 'auto',
|
marginLeft: 'auto',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
|
|||||||
5
Birdmap.API/ClientApp/src/common/Constants.js
Normal file
5
Birdmap.API/ClientApp/src/common/Constants.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
probability_method_name: 'NotifyDeviceAsync',
|
||||||
|
update_method_name: 'NotifyDeviceUpdatedAsync',
|
||||||
|
update_all_method_name: 'NotifyAllUpdatedAsync',
|
||||||
|
};
|
||||||
@ -21,7 +21,7 @@ var __extends = (this && this.__extends) || (function () {
|
|||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
exports.ApiException = exports.SensorStatus = exports.Coordinates = exports.DeviceStatus = exports.Sensor = exports.Device = exports.DeviceService = void 0;
|
exports.ApiException = exports.SensorStatus = exports.Coordinates = exports.DeviceStatus = exports.Sensor = exports.Device = void 0;
|
||||||
var DeviceService = /** @class */ (function () {
|
var DeviceService = /** @class */ (function () {
|
||||||
function DeviceService(baseUrl, http) {
|
function DeviceService(baseUrl, http) {
|
||||||
this.jsonParseReviver = undefined;
|
this.jsonParseReviver = undefined;
|
||||||
@ -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);
|
||||||
@ -462,7 +464,7 @@ var DeviceService = /** @class */ (function () {
|
|||||||
};
|
};
|
||||||
return DeviceService;
|
return DeviceService;
|
||||||
}());
|
}());
|
||||||
exports.DeviceService = DeviceService;
|
exports.default = DeviceService;
|
||||||
var Device = /** @class */ (function () {
|
var Device = /** @class */ (function () {
|
||||||
function Device(data) {
|
function Device(data) {
|
||||||
if (data) {
|
if (data) {
|
||||||
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@
|
|||||||
//----------------------
|
//----------------------
|
||||||
// ReSharper disable InconsistentNaming
|
// ReSharper disable InconsistentNaming
|
||||||
|
|
||||||
export class DeviceService {
|
export default class DeviceService {
|
||||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||||
private baseUrl: string;
|
private baseUrl: string;
|
||||||
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||||
@ -391,6 +391,7 @@ export class DeviceService {
|
|||||||
let options_ = <RequestInit>{
|
let options_ = <RequestInit>{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
|
'Authorization': sessionStorage.getItem('user')
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -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 +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"}
|
|
||||||
@ -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;
|
|
||||||
@ -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 +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"}
|
|
||||||
@ -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
|
|
||||||
};
|
|
||||||
@ -20,7 +20,7 @@ exports.default = {
|
|||||||
});
|
});
|
||||||
return service.authenticate(request)
|
return service.authenticate(request)
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
console.log(response);
|
//console.log(response);
|
||||||
sessionStorage.setItem('user', response.tokenType + " " + response.accessToken);
|
sessionStorage.setItem('user', response.tokenType + " " + response.accessToken);
|
||||||
sessionStorage.setItem('role', response.userRole);
|
sessionStorage.setItem('role', response.userRole);
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
{"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,2CAA+D;AAE/D,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IACnG,CAAC;IAED,OAAO;QACH,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IACtD,CAAC;IAED,MAAM;QACF,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAClC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAM,OAAO,GAAG,IAAI,oBAAU,EAAE,CAAC;QAEjC,IAAI,OAAO,GAAG,IAAI,gCAAmB,CAAC;YAClC,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;aAC/B,IAAI,CAAC,UAAA,QAAQ;YACV,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACtB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,SAAS,SAAI,QAAQ,CAAC,WAAa,CAAC,CAAC;YAChF,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAClD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"}
|
{"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,2CAA+D;AAE/D,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IACnG,CAAC;IAED,OAAO;QACH,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IACtD,CAAC;IAED,MAAM;QACF,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAClC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAM,OAAO,GAAG,IAAI,oBAAU,EAAE,CAAC;QAEjC,IAAI,OAAO,GAAG,IAAI,gCAAmB,CAAC;YAClC,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;aAC/B,IAAI,CAAC,UAAA,QAAQ;YACV,wBAAwB;YACxB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,SAAS,SAAI,QAAQ,CAAC,WAAa,CAAC,CAAC;YAChF,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAClD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"}
|
||||||
@ -24,7 +24,7 @@ export default {
|
|||||||
|
|
||||||
return service.authenticate(request)
|
return service.authenticate(request)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
console.log(response);
|
//console.log(response);
|
||||||
sessionStorage.setItem('user', `${response.tokenType} ${response.accessToken}`);
|
sessionStorage.setItem('user', `${response.tokenType} ${response.accessToken}`);
|
||||||
sessionStorage.setItem('role', response.userRole);
|
sessionStorage.setItem('role', response.userRole);
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
|
|||||||
191
Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx
Normal file
191
Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
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 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 { 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,
|
||||||
|
},
|
||||||
|
grid_typo_2: {
|
||||||
|
marginLeft: '5px',
|
||||||
|
fontSize: theme.typography.pxToRem(15),
|
||||||
|
fontWeight: theme.typography.fontWeightRegular,
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
},
|
||||||
|
grid_item: {
|
||||||
|
width: '100%',
|
||||||
|
marginLeft: '5px',
|
||||||
|
},
|
||||||
|
grid_item_typo: {
|
||||||
|
fontSize: theme.typography.pxToRem(15),
|
||||||
|
fontWeight: theme.typography.fontWeightRegular,
|
||||||
|
},
|
||||||
|
grid_item_typo_2: {
|
||||||
|
marginLeft: '5px',
|
||||||
|
fontSize: theme.typography.pxToRem(15),
|
||||||
|
fontWeight: theme.typography.fontWeightRegular,
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
},
|
||||||
|
icon_box: {
|
||||||
|
marginRight: '15px',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
class DeviceComponent extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
expanded: "",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static contextType = DevicesContext;
|
||||||
|
|
||||||
|
getColor(status) {
|
||||||
|
if (status == "Online") {
|
||||||
|
return { color: green[600] };
|
||||||
|
} else if (status == "Offline") {
|
||||||
|
return { color: orange[900] };
|
||||||
|
} else /* if (device.status == "unknown") */ {
|
||||||
|
return { color: red[800] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const id = this.props.match.params.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() {
|
||||||
|
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) => {
|
||||||
|
this.setState({ expanded: isExpanded ? panel : "" });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Accordion expanded={this.state.expanded === this.props.device.id} onChange={handleChange(this.props.device.id)}>
|
||||||
|
<AccordionSummary className={classes.acc_summary}
|
||||||
|
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}>
|
||||||
|
<Grid className={classes.grid_item}
|
||||||
|
container
|
||||||
|
spacing={3}
|
||||||
|
direction="column"
|
||||||
|
justify="center"
|
||||||
|
alignItems="flex-start">
|
||||||
|
{Sensors}
|
||||||
|
</Grid>
|
||||||
|
</AccordionDetails>
|
||||||
|
</Accordion>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(withStyles(styles)(DeviceComponent));
|
||||||
@ -1,5 +1,90 @@
|
|||||||
import React, { Component } from 'react'
|
import { Box, Paper, Typography, IconButton, Grid } from '@material-ui/core';
|
||||||
|
import { blue, blueGrey, green, orange, red, yellow } from '@material-ui/core/colors';
|
||||||
|
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/';
|
||||||
|
|
||||||
export default class Devices extends React.Component {
|
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;
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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}/>
|
||||||
|
));
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withStyles(styles)(Devices);
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
|
||||||
|
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
|
||||||
|
import { shadows } from '@material-ui/system';
|
||||||
|
import { Box, Popover, Typography, Tooltip, Grid } from '@material-ui/core';
|
||||||
|
import { blue, red, yellow } from '@material-ui/core/colors';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { useHistory, withRouter } from 'react-router-dom';
|
||||||
|
import { makeStyles } from '@material-ui/styles';
|
||||||
|
|
||||||
|
class DeviceMarker extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
AnchorEl: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getColor() {
|
||||||
|
const { device } = this.props;
|
||||||
|
if (device.status == "Online") {
|
||||||
|
return { color: blue[800] };
|
||||||
|
} else if (device.status == "Offline") {
|
||||||
|
return { color: yellow[800] };
|
||||||
|
} else /* if (device.status == "unknown") */ {
|
||||||
|
return { color: red[800] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useStyles() {
|
||||||
|
return makeStyles(theme => ({
|
||||||
|
root: {
|
||||||
|
display: 'grid'
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const classes = this.useStyles(this.props);
|
||||||
|
const { device } = this.props;
|
||||||
|
|
||||||
|
const onClick = () => {
|
||||||
|
this.props.history.push('/devices/' + device.id)
|
||||||
|
};
|
||||||
|
|
||||||
|
const open = Boolean(this.state.AnchorEl);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box className={classes.root} boxShadow={5}>
|
||||||
|
<Tooltip title={<div>ID: {device.id}<br />Status: {device.status}</div>} placement="top" leaveDelay={200} arrow>
|
||||||
|
<RadioButtonCheckedIcon fontSize="small" style={this.getColor()}
|
||||||
|
onClick={onClick}>
|
||||||
|
</RadioButtonCheckedIcon>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(DeviceMarker);
|
||||||
@ -1,93 +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 DevicesService, { DeviceService } from '../devices/DeviceService'
|
import DeviceMarker from './DeviceMarker'
|
||||||
import { HubConnectionBuilder } from '@microsoft/signalr';
|
import C from '../../common/Constants'
|
||||||
|
import DevicesContext from '../../contexts/DevicesContext';
|
||||||
|
|
||||||
const hub_url = '/hubs/devices';
|
const lat_offset = 0.000038;
|
||||||
const probability_method_name = 'NotifyDeviceAsync';
|
const lng_offset = -0.000058;
|
||||||
const update_method_name = 'NotifyDeviceUpdatedAsync';
|
|
||||||
const update_all_method_name = 'NotifyAllUpdatedAsync';
|
|
||||||
|
|
||||||
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
|
||||||
},
|
},
|
||||||
points: [],
|
|
||||||
heatmapPoints: [],
|
heatmapPoints: [],
|
||||||
connection: null,
|
};
|
||||||
}
|
|
||||||
|
this.probabilityHandler = this.probabilityHandler.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleAllDevicesUpdated(service = null) {
|
static contextType = DevicesContext;
|
||||||
if (service === null) {
|
|
||||||
service = new DevicesService();
|
probabilityHandler(point) {
|
||||||
|
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() {
|
||||||
const service = new DeviceService();
|
this.context.addHandler(C.probability_method_name, this.probabilityHandler);
|
||||||
this.handleAllDevicesUpdated(service);
|
const newPoints = [];
|
||||||
|
for (var p of this.context.heatmapPoints) {
|
||||||
|
if (p.prob > 0.5) {
|
||||||
|
newPoints.push(p)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const newConnection = new HubConnectionBuilder()
|
this.setState({ heatmapPoints: newPoints });
|
||||||
.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) => {
|
|
||||||
this.state.points.push({ id, date, prob });
|
|
||||||
//console.log(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() {
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -100,12 +66,26 @@ export default class MapContainer extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const mapOptions = {
|
const mapOptions = {
|
||||||
|
disableDefaultUI: true,
|
||||||
|
zoomControl: true,
|
||||||
|
mapTypeControl: true,
|
||||||
overviewMapControl: true,
|
overviewMapControl: true,
|
||||||
mapTypeId: 'terrain'
|
streetViewControl: false,
|
||||||
|
scaleControl: true,
|
||||||
|
mapTypeId: 'satellite'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Markers = this.context.devices.map((device, index) => (
|
||||||
|
<DeviceMarker
|
||||||
|
key={device.id}
|
||||||
|
lat={device.coordinates.latitude + lat_offset}
|
||||||
|
lng={device.coordinates.longitude + lng_offset}
|
||||||
|
device={device}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ height: '91vh', width: '100%' }}>
|
<div style={{ height: '93vh', width: '100%' }}>
|
||||||
<GoogleMapReact
|
<GoogleMapReact
|
||||||
bootstrapURLKeys={{
|
bootstrapURLKeys={{
|
||||||
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
|
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
|
||||||
@ -117,6 +97,7 @@ export default class MapContainer extends Component {
|
|||||||
heatmapLibrary={true}
|
heatmapLibrary={true}
|
||||||
heatmap={heatMapData}
|
heatmap={heatMapData}
|
||||||
defaultCenter={this.state.center}>
|
defaultCenter={this.state.center}>
|
||||||
|
{Markers}
|
||||||
</GoogleMapReact>
|
</GoogleMapReact>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
12
Birdmap.API/ClientApp/src/contexts/DevicesContext.js
Normal file
12
Birdmap.API/ClientApp/src/contexts/DevicesContext.js
Normal 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
148
Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -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();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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" />
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@ namespace Birdmap.BLL.Services
|
|||||||
{
|
{
|
||||||
public class DummyDeviceAndInputService : DeviceAndInputServiceBase
|
public class DummyDeviceAndInputService : DeviceAndInputServiceBase
|
||||||
{
|
{
|
||||||
private const int numberOfDevices = 50;
|
private const int numberOfDevices = 15;
|
||||||
|
|
||||||
private const double centerLong = 21.469640;
|
private const double centerLong = 21.469640;
|
||||||
private const double centerLat = 48.275939;
|
private const double centerLat = 48.275939;
|
||||||
|
|||||||
Reference in New Issue
Block a user