Added background color, Added Accordion onChange handler

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';
@@ -15,15 +13,19 @@ 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';
 
 
 const theme = createMuiTheme({
     palette: {
         primary: {
             main: blue[900],
+            dark: blueGrey[50],
         },
         secondary: {
             main: orange[200],
+            dark: blueGrey[50],
         }
     },
 });
@@ -45,11 +47,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/>;
 
     };
     const HeatmapComponent = () => {
@@ -66,7 +68,7 @@ function App() {
                     <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="/devices/:id?" exact authenticated={authenticated} isAdmin={isAdmin} component={DevicesComponent} />
                         <PrivateRoute path="/heatmap" exact authenticated={authenticated} isAdmin={isAdmin} component={HeatmapComponent} />
                     </Switch>
                 </BrowserRouter>
@@ -141,7 +143,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}
@@ -180,7 +182,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
                     </Typography>
                 </Toolbar>
             </AppBar>
-            <Box zIndex="modal">
+            <Box zIndex="modal" className={classes.box_root}>
                 <Component isAdmin={IsAdmin} {...rest} />
             </Box>
         </React.Fragment>
@@ -189,6 +191,9 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
 
 const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
     createStyles({
+        box_root: {
+            color: theme.palette.secondary.dark,
+        },
         typo: {
             marginLeft: 'auto',
             color: 'white',

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();

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"}

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();

Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import Accordion from '@material-ui/core/Accordion';
+import { blue, 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 } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
+import { withRouter } from "react-router";
+
+const styles = theme => ({
+    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,
+    }
+});
+
+class DeviceComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            expanded: "",
+        }
+    }
+
+    getColor(status) {
+        if (status == "Online") {
+            return { color: blue[800] };
+        } else if (status == "Offline") {
+            return { color: yellow[800] };
+        } else /* if (device.status == "unknown") */ {
+            return { color: red[800] };
+        }
+    }
+
+    componentDidMount() {
+        const id = this.props.match.params.id;
+        this.setState({ expanded: id });
+    }
+
+    render() {
+        const { classes } = this.props;
+        const Sensors = this.props.device.sensors.map((sensor, index) => (
+            <Grid item className={classes.grid_item} key={sensor.id}>
+                <Typography className={classes.grid_item_typo}>Sensor {index}</Typography>
+                <Typography className={classes.grid_item_typo_2}>{sensor.id}</Typography>
+            </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
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls={"device-panel-/" + this.props.device.id}
+                    id={"device-panel-/" + this.props.device.id}>
+                    <Typography className={classes.grid_typo}>Device {this.props.index}</Typography>
+                    <Typography className={classes.grid_typo_2}>{this.props.device.id}</Typography>
+                </AccordionSummary>
+                    <AccordionDetails>
+                    <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));

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;
@@ -462,7 +462,7 @@ var DeviceService = /** @class */ (function () {
     };
     return DeviceService;
 }());
-exports.DeviceService = DeviceService;
+exports.default = DeviceService;
 var Device = /** @class */ (function () {
     function Device(data) {
         if (data) {

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;

Birdmap.API/ClientApp/src/components/devices/Devices.jsx

@@ -1,5 +1,48 @@
 import React, { Component } from 'react'
+import DeviceService from './DeviceService'
+import Accordion from '@material-ui/core/Accordion';
+import DeviceComponent from './DeviceComponent'
+import SensorComponent from './DeviceComponent'
+import { withStyles } from '@material-ui/styles';
+import { Box } from '@material-ui/core';
+import { grey } from '@material-ui/core/colors';
 
-export default class Devices extends React.Component {
-
+const styles = theme => ({
+    root: {
+        padding: '64px',
+        backgroundColor: theme.palette.primary.dark,
     }
+});
+
+class Devices extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            devices: [],
+        };
+    }
+
+    componentDidMount() {
+        new DeviceService().getall().then(result => {
+            this.setState({ devices: result });
+        }).catch(ex => {
+            console.log(ex);
+        });
+    }
+
+    render() {
+        const { classes } = this.props;
+        const Devices = this.state.devices.map((device, index) => (
+            <DeviceComponent device={device} index={index} key={device.id}/>
+        ));
+
+        return (
+            <Box className={classes.root}>
+                {Devices}
+            </Box>
+        );
+    }
+}
+
+export default withStyles(styles)(Devices);

Birdmap.API/ClientApp/src/components/devices/SensorComponent.jsx

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

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);

Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx

@@ -1,13 +1,17 @@
 /*global google*/
 import GoogleMapReact from 'google-map-react';
 import React, { Component } from 'react';
-import DevicesService, { DeviceService } from '../devices/DeviceService'
+import DeviceService from '../devices/DeviceService'
+import DeviceMarker from './DeviceMarker'
 import { HubConnectionBuilder } from '@microsoft/signalr';
 
 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;
+const heatmapPoints_session_name = 'heatmapPoints';
 
 export default class MapContainer extends Component {
     constructor(props) {
@@ -18,7 +22,6 @@ export default class MapContainer extends Component {
             center: {
                 lat: 48.275939, lng: 21.469640
             },
-            points: [],
             heatmapPoints: [],
             connection: null,
         }
@@ -26,7 +29,7 @@ export default class MapContainer extends Component {
 
     handleAllDevicesUpdated(service = null) {
         if (service === null) {
-            service = new DevicesService();
+            service = new DeviceService();
         }
         service.getall().then(result => {
             this.setState({ devices: result });
@@ -51,8 +54,7 @@ export default class MapContainer extends Component {
                 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 + "]");
+                    //console.log(probability_method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
                     if (prob > 0.5) {
                         var device = this.state.devices.filter(function (x) { return x.id === id })[0]
                         var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude };
@@ -87,6 +89,7 @@ export default class MapContainer extends Component {
             this.state.connection.off(probability_method_name);
             this.state.connection.off(update_all_method_name);
             this.state.connection.off(update_method_name);
+            console.log('Hub Disconnected!');
         }
     }
 
@@ -100,12 +103,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.state.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: '93.5vh', width: '100%' }}>
                 <GoogleMapReact
                     bootstrapURLKeys={{
                         key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
@@ -117,6 +134,7 @@ export default class MapContainer extends Component {
                     heatmapLibrary={true}
                     heatmap={heatMapData}
                     defaultCenter={this.state.center}>
+                    {Markers}
                 </GoogleMapReact>
             </div>
         );

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;