Added All Device handler

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