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