Added All Device handler

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

@@ -9,6 +9,7 @@ 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: {
@@ -55,6 +56,8 @@ class DeviceComponent extends Component {
         }
     }
 
+    static contextType = DevicesContext;
+
     getColor(status) {
         if (status == "Online") {
             return { color: green[600] };
@@ -75,7 +78,7 @@ class DeviceComponent extends Component {
         return this.renderButtons(
             () => service.onlinesensor(device.id, sensor.id),
             () => service.offlinesensor(device.id, sensor.id),
-            () => service.getsensor(device.id, sensor.id)
+            () => this.context.updateDevice(device.id)
         );
     }
 
@@ -84,7 +87,7 @@ class DeviceComponent extends Component {
         return this.renderButtons(
             () => service.onlinedevice(device.id),
             () => service.offlinedevice(device.id),
-            () => service.getdevice(device.id)
+            () => this.context.updateDevice(device.id)
         );
     }
 

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

@@ -1,14 +1,26 @@
-import { Box } from '@material-ui/core';
+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/';
 
 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 {
@@ -21,6 +33,32 @@ class Devices extends React.Component {
     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) => (
@@ -29,6 +67,20 @@ class Devices extends React.Component {
 
         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>
         );

Birdmap.API/ClientApp/src/contexts/DevicesContext.js

@@ -6,4 +6,7 @@ export default React.createContext({
 
     addHandler: (_, __) => { },
     removeHandler: (_, __) => { },
+
+    updateDevice: () => { },
+    updateAllDevices: () => { },
 });

Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js

@@ -40,13 +40,21 @@ export default class DevicesContextProvider extends Component {
         this.setState({ handlers: updatedHandlers });
     }
 
+    updateDevice = (id) => {
+        this.updateDeviceInternal(id);
+    }
+
+    updateAllDevices = () => {
+        this.updateAllDevicesInternal();
+    }
+
     invokeHandlers(methodName, context) {
         this.state.handlers[methodName].forEach(function (handler) {
             handler(context);
         });
     }
 
-    handleAllDevicesUpdated(service = null) {
+    updateAllDevicesInternal(service = null) {
         if (service === null) {
             service = new DeviceService();
         }
@@ -57,9 +65,27 @@ export default class DevicesContextProvider extends Component {
         });
     }
 
+    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.handleAllDevicesUpdated(service);
+        this.updateAllDevicesInternal(service);
 
         const newConnection = new HubConnectionBuilder()
             .withUrl(hub_url)
@@ -84,24 +110,11 @@ export default class DevicesContextProvider extends Component {
                 });
 
                 newConnection.on(C.update_all_method_name, () => {
-                    this.handleAllDevicesUpdated(service);
+                    this.updateAllDevicesInternal(service);
                     this.invokeHandlers(C.update_all_method_name, null);
                 });
 
-                newConnection.on(C.update_method_name, (id) => {
+                newConnection.on(C.update_method_name, (id) => this.updateDeviceInternal(id, service));
-                    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));
-                })
             }).catch(e => console.log('Hub Connection failed: ', e));
     }
 
@@ -123,6 +136,9 @@ export default class DevicesContextProvider extends Component {
 
                     addHandler: this.addHandler,
                     removeHandler: this.removeHandler,
+
+                    updateDevice: this.updateDevice,
+                    updateAllDevices: this.updateAllDevices,
                 }}
             >
                 {this.props.children}

Birdmap.API/Controllers/DevicesController.cs

@@ -75,7 +75,6 @@ namespace Birdmap.API.Controllers
         {
             _logger.LogInformation($"Getting device [{deviceID}]...");
 
-            await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
             return await _service.GetdeviceAsync(deviceID);
         }
 
@@ -118,7 +117,6 @@ namespace Birdmap.API.Controllers
         {
             _logger.LogInformation($"Getting sensor [{sensorID}] of device [{deviceID}]...");
 
-            await _hubContext.Clients.All.NotifyDeviceUpdatedAsync(deviceID);
             return await _service.GetsensorAsync(deviceID, sensorID);
         }