Added All Device handler

Extended Devices with buttons and status
Added componentDidMount heatmap initializer
2020-11-18 18:34:48 +01:00 · 2020-11-18 14:04:57 +01:00 · 2020-11-18 12:35:33 +01:00 · 2020-11-18 12:04:32 +01:00 · 2020-11-18 09:56:30 +01:00 · 2020-11-18 09:19:05 +01:00
26 changed files with 612 additions and 245 deletions
--- a/Birdmap.API/Birdmap.API.csproj
+++ b/Birdmap.API/Birdmap.API.csproj
@@ -49,8 +49,6 @@

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

  <ItemGroup>
    <TypeScriptCompile Include="ClientApp\src\components\auth\Auth.tsx" />
-	<TypeScriptCompile Include="ClientApp\src\common\components\BirdmapTitle.tsx" />
  </ItemGroup>

  <ItemGroup>
+    <Folder Include="ClientApp\src\common\components\" />
    <Folder Include="ClientApp\src\components\dashboard\" />
  </ItemGroup>

--- a/Birdmap.API/ClientApp/public/index.html
+++ b/Birdmap.API/ClientApp/public/index.html
@@ -22,11 +22,11 @@
    -->
    <title>Birdmap</title>
  </head>
-  <body>
+  <body style="height: 100vh;">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100vh;"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
--- a/Birdmap.API/ClientApp/src/App.tsx
+++ b/Birdmap.API/ClientApp/src/App.tsx
@@ -1,8 +1,6 @@
 import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 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 { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 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 React, { useState, } from 'react';
 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 AuthService from './components/auth/AuthService';
 import { ClickAwayListener } from '@material-ui/core';
 import MapContainer from './components/heatmap/Heatmap';
+import Devices from './components/devices/Devices';
+import { blueGrey, blue, orange, grey } from '@material-ui/core/colors';
+import DevicesContextProvider from './contexts/DevicesContextProvider'


 const theme = createMuiTheme({
    palette: {
        primary: {
-            main: blue[900],
+            main: blueGrey[900],
+            dark: grey[400],
        },
        secondary: {
            main: orange[200],
+            dark: blueGrey[50],
        }
    },
 });
@@ -45,11 +48,11 @@ function App() {
    }

    const DashboardComponent = () => {
-        return <Typography>Dashboard</Typography>;
+        return <Link to="/devices/5">This is a link</Link>;
    };

    const DevicesComponent = () => {
-        return <Typography>Devices</Typography>;
+        return <Devices isAdmin={isAdmin}/>;

    };
    const HeatmapComponent = () => {
@@ -62,14 +65,16 @@ function App() {

    return (
        <ThemeProvider theme={theme}>
-                <BrowserRouter>
-                    <Switch>
-                        <PublicRoute path="/login" component={AuthComponent} />
-                        <PrivateRoute path="/" exact authenticated={authenticated} isAdmin={isAdmin} component={DashboardComponent} />
-                        <PrivateRoute path="/devices" exact authenticated={authenticated} isAdmin={isAdmin} component={DevicesComponent} />
-                        <PrivateRoute path="/heatmap" exact authenticated={authenticated} isAdmin={isAdmin} component={HeatmapComponent} />
-                    </Switch>
-                </BrowserRouter>
+            <BrowserRouter>
+                <Switch>
+                    <PublicRoute path="/login" component={AuthComponent} />
+                    <DevicesContextProvider>
+                        <PrivateRoute path="/" exact authenticated={authenticated} component={DashboardComponent} />
+                        <PrivateRoute path="/devices/:id?" exact authenticated={authenticated} component={DevicesComponent} />
+                        <PrivateRoute path="/heatmap" exact authenticated={authenticated} component={HeatmapComponent} />
+                    </DevicesContextProvider>
+                </Switch>
+            </BrowserRouter>
        </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 (
        <Route {...rest} render={matchProps => (
            Authenticated
-                ? <DefaultLayout component={Component} authenticated={Authenticated} isAdmin={IsAdmin} {...matchProps} />
+                ? <DefaultLayout component={Component} authenticated={Authenticated} {...matchProps} />
                : <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 [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef<HTMLButtonElement>(null);
@@ -141,7 +146,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
        return Authenticated
            ? <Container className={classes.nav_menu}>
                <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>
                <IconButton className={classes.nav_menu_icon}
                    ref={anchorRef}
@@ -172,7 +177,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA

    return (
        <React.Fragment>
-            <AppBar position="static">
+            <AppBar position="static" className={classes.bar_root}>
                <Toolbar>
                    <BirdmapTitle />
                    <Typography component={'span'} className={classes.typo}>
@@ -180,8 +185,8 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
                    </Typography>
                </Toolbar>
            </AppBar>
-            <Box zIndex="modal">
-                <Component isAdmin={IsAdmin} {...rest} />
+            <Box zIndex="modal" className={classes.box_root}>
+                <Component {...rest} />
            </Box>
        </React.Fragment>
    );
@@ -189,6 +194,13 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA

 const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
    createStyles({
+        bar_root: {
+            height: '7%',
+        },
+        box_root: {
+            backgroundColor: theme.palette.primary.dark,
+            height: '93%',
+        },
        typo: {
            marginLeft: 'auto',
            color: 'white',
--- a/Birdmap.API/ClientApp/src/common/Constants.js
+++ b/Birdmap.API/ClientApp/src/common/Constants.js
@@ -0,0 +1,5 @@
+export default {
+    probability_method_name: 'NotifyDeviceAsync',
+    update_method_name: 'NotifyDeviceUpdatedAsync',
+    update_all_method_name: 'NotifyAllUpdatedAsync',
+};
--- a/Birdmap.API/ClientApp/src/components/devices/DeviceService.js
+++ b/Birdmap.API/ClientApp/src/components/devices/DeviceService.js
@@ -21,7 +21,7 @@ var __extends = (this && this.__extends) || (function () {
    };
 })();
 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 () {
    function DeviceService(baseUrl, http) {
        this.jsonParseReviver = undefined;
@@ -430,7 +430,9 @@ var DeviceService = /** @class */ (function () {
        url_ = url_.replace(/[?&]$/, "");
        var options_ = {
            method: "POST",
-            headers: {}
+            headers: {
+                'Authorization': sessionStorage.getItem('user')
+            }
        };
        return this.http.fetch(url_, options_).then(function (_response) {
            return _this.processOnlinesensor(_response);
@@ -462,7 +464,7 @@ var DeviceService = /** @class */ (function () {
    };
    return DeviceService;
 }());
-exports.DeviceService = DeviceService;
+exports.default = DeviceService;
 var Device = /** @class */ (function () {
    function Device(data) {
        if (data) {
--- a/Birdmap.API/ClientApp/src/components/devices/DeviceService.js.map
+++ b/Birdmap.API/ClientApp/src/components/devices/DeviceService.js.map
--- a/Birdmap.API/ClientApp/src/components/devices/DeviceService.ts
+++ b/Birdmap.API/ClientApp/src/components/devices/DeviceService.ts
@@ -7,7 +7,7 @@
 //----------------------
 // ReSharper disable InconsistentNaming

-export class DeviceService {
+export default class DeviceService {
    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
    private baseUrl: string;
    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
@@ -391,6 +391,7 @@ export class DeviceService {
        let options_ = <RequestInit>{
            method: "POST",
            headers: {
+                'Authorization': sessionStorage.getItem('user')
            }
        };

--- a/Birdmap.API/ClientApp/src/common/ErrorDispatcher.js
+++ b/Birdmap.API/ClientApp/src/common/ErrorDispatcher.js
@@ -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
--- a/Birdmap.API/ClientApp/src/common/ErrorDispatcher.js.map
+++ b/Birdmap.API/ClientApp/src/common/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"}
--- a/Birdmap.API/ClientApp/src/common/ErrorDispatcher.ts
+++ b/Birdmap.API/ClientApp/src/common/ErrorDispatcher.ts
@@ -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;
--- a/Birdmap.API/ClientApp/src/common/ServiceBase.js
+++ b/Birdmap.API/ClientApp/src/common/ServiceBase.js
@@ -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
--- a/Birdmap.API/ClientApp/src/common/ServiceBase.js.map
+++ b/Birdmap.API/ClientApp/src/common/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"}
--- a/Birdmap.API/ClientApp/src/common/ServiceBase.ts
+++ b/Birdmap.API/ClientApp/src/common/ServiceBase.ts
@@ -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
-};
--- a/Birdmap.API/ClientApp/src/components/appBar/BirdmapTitle.tsx
+++ b/Birdmap.API/ClientApp/src/components/appBar/BirdmapTitle.tsx
--- a/Birdmap.API/ClientApp/src/components/auth/AuthService.js
+++ b/Birdmap.API/ClientApp/src/components/auth/AuthService.js
@@ -20,7 +20,7 @@ exports.default = {
        });
        return service.authenticate(request)
            .then(function (response) {
-            console.log(response);
+            //console.log(response);
            sessionStorage.setItem('user', response.tokenType + " " + response.accessToken);
            sessionStorage.setItem('role', response.userRole);
            return Promise.resolve();
--- a/Birdmap.API/ClientApp/src/components/auth/AuthService.js.map
+++ b/Birdmap.API/ClientApp/src/components/auth/AuthService.js.map
@@ -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"}
--- a/Birdmap.API/ClientApp/src/components/auth/AuthService.ts
+++ b/Birdmap.API/ClientApp/src/components/auth/AuthService.ts
@@ -24,7 +24,7 @@ export default {

        return service.authenticate(request)
            .then(response => {
-                console.log(response);
+                //console.log(response);
                sessionStorage.setItem('user', `${response.tokenType} ${response.accessToken}`);
                sessionStorage.setItem('role', response.userRole);
                return Promise.resolve();
--- a/Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx
+++ b/Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx
@@ -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));
--- a/Birdmap.API/ClientApp/src/components/devices/Devices.jsx
+++ b/Birdmap.API/ClientApp/src/components/devices/Devices.jsx
@@ -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);
--- a/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx
+++ b/Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx
@@ -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);
--- a/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
+++ b/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
@@ -1,93 +1,59 @@
 /*global google*/
 import GoogleMapReact from 'google-map-react';
 import React, { Component } from 'react';
-import DevicesService, { DeviceService } from '../devices/DeviceService'
-import { HubConnectionBuilder } from '@microsoft/signalr';
+import DeviceMarker from './DeviceMarker'
+import C from '../../common/Constants'
+import DevicesContext from '../../contexts/DevicesContext';

-const hub_url = '/hubs/devices';
-const probability_method_name = 'NotifyDeviceAsync';
-const update_method_name = 'NotifyDeviceUpdatedAsync';
-const update_all_method_name = 'NotifyAllUpdatedAsync';
+const lat_offset = 0.000038;
+const lng_offset = -0.000058;

 export default class MapContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
-            devices: [],
            center: {
                lat: 48.275939, lng: 21.469640
            },
-            points: [],
            heatmapPoints: [],
-            connection: null,
-        }
+        };
+
+        this.probabilityHandler = this.probabilityHandler.bind(this);
    }

-    handleAllDevicesUpdated(service = null) {
-        if (service === null) {
-            service = new DevicesService();
+    static contextType = DevicesContext;
+
+    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() {
-        const service = new DeviceService();
-        this.handleAllDevicesUpdated(service);
+        this.context.addHandler(C.probability_method_name, this.probabilityHandler);
+        const newPoints = [];
+        for (var p of this.context.heatmapPoints) {
+            if (p.prob > 0.5) {
+                newPoints.push(p)
+            }
+        }

-        const newConnection = new HubConnectionBuilder()
-            .withUrl(hub_url)
-            .withAutomaticReconnect()
-            .build();
-
-        this.setState({ connection: newConnection });
-
-        newConnection.start()
-            .then(result => {
-                console.log('Hub Connected!');
-
-                newConnection.on(probability_method_name, (id, date, prob) => {
-                    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));
+        this.setState({ heatmapPoints: newPoints });
    }

    componentWillUnmount() {
-        if (this.state.connection) {
-            this.state.connection.off(probability_method_name);
-            this.state.connection.off(update_all_method_name);
-            this.state.connection.off(update_method_name);
-        }
+        this.context.removeHandler(C.probability_method_name, this.probabilityHandler);
    }

    render() {
@@ -100,12 +66,26 @@ export default class MapContainer extends Component {
        }

        const mapOptions = {
+            disableDefaultUI: true,
+            zoomControl: true,
+            mapTypeControl: 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 (
-            <div style={{ height: '91vh', width: '100%' }}>
+            <div style={{ height: '93vh', width: '100%' }}>
                <GoogleMapReact
                    bootstrapURLKeys={{
                        key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
@@ -117,6 +97,7 @@ export default class MapContainer extends Component {
                    heatmapLibrary={true}
                    heatmap={heatMapData}
                    defaultCenter={this.state.center}>
+                    {Markers}
                </GoogleMapReact>
            </div>
        );
--- a/Birdmap.API/ClientApp/src/contexts/DevicesContext.js
+++ b/Birdmap.API/ClientApp/src/contexts/DevicesContext.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default React.createContext({
+    devices: [],
+    heatmapPoints: [],
+
+    addHandler: (_, __) => { },
+    removeHandler: (_, __) => { },
+
+    updateDevice: () => { },
+    updateAllDevices: () => { },
+});
--- a/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js
+++ b/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js
@@ -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>
+            );
+    };
+}
--- a/Birdmap.API/Controllers/DevicesController.cs
+++ b/Birdmap.API/Controllers/DevicesController.cs
@@ -131,6 +131,7 @@ namespace Birdmap.API.Controllers
            _logger.LogInformation($"Turning off sensor [{sensorID}] of device [{deviceID}]...");

            await _service.OfflinesensorAsync(deviceID, sensorID);
+            await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);

            return Ok();
        }
@@ -146,6 +147,7 @@ namespace Birdmap.API.Controllers
            _logger.LogInformation($"Turning on sensor [{sensorID}] of device [{deviceID}]...");

            await _service.OnlinesensorAsync(deviceID, sensorID);
+            await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);

            return Ok();
        }
--- a/Birdmap.API/nlog.config
+++ b/Birdmap.API/nlog.config
@@ -20,6 +20,9 @@
 	<target xsi:type="File" name="mqttFile" fileName="${basedir}Log/birdmap-mqtt-${shortdate}.log"
 			layout="${longdate} [${threadname:whenEmpty=${threadid}}] ${uppercase:${level}} ${logger} - ${message} ${exception:format=tostring}" />

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

+	<!--Skip non-critical Hub logs-->
+	<logger name="*.*Hubs*.*" minlevel="Trace" maxlevel="Warning" writeTo="hubsFile" final="true"/>
+
    <!--Skip non-critical Microsoft logs-->
    <logger name="Microsoft.*" maxlevel="Info" final="true" />

--- a/Birdmap.BLL/Services/DummyDeviceAndInputService.cs
+++ b/Birdmap.BLL/Services/DummyDeviceAndInputService.cs
@@ -10,7 +10,7 @@ namespace Birdmap.BLL.Services
 {
    public class DummyDeviceAndInputService : DeviceAndInputServiceBase
    {
-        private const int numberOfDevices = 50;
+        private const int numberOfDevices = 15;

        private const double centerLong = 21.469640;
        private const double centerLat = 48.275939;
Author	SHA1	Message	Date
kunkliricsi	779e21909c	Added All Device handler	2020-11-18 18:34:48 +01:00
kunkliricsi	f84ea8f0c5	Extended Devices with buttons and status	2020-11-18 14:04:57 +01:00
kunkliricsi	181985859e	Added componentDidMount heatmap initializer	2020-11-18 12:35:33 +01:00
kunkliricsi	39a38fe8eb	Added context to heatmap, and devices	2020-11-18 12:04:32 +01:00
kunkliricsi	490f0f3265	Added context	2020-11-18 09:56:30 +01:00
kunkliricsi	41bf14a4e5	Merge branch 'master' into feature/Contexts	2020-11-18 09:19:05 +01:00
kunkliricsi	3f267cb009	Added background color, Added Accordion onChange handler	2020-11-17 22:20:50 +01:00
kunkliricsi	0e3eb8720f	Added Devices Accordions	2020-11-17 21:51:53 +01:00
kunkliricsi	3f2467f6c6	Added Device Context (not working)	2020-11-17 18:58:28 +01:00
kunkliricsi	2a83856622	Removed exact from NavLink to fix highlighting	2020-11-13 19:11:25 +01:00
kunkliricsi	d726273431	Added position offset, changed color	2020-11-12 22:11:42 +01:00
kunkliricsi	412647617b	Added markers with device openers	2020-11-12 21:20:04 +01:00
kunkliricsi	53ff60ae5a	Added devices id route parameter	2020-11-12 18:57:27 +01:00
				`@@ -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 +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"}