diff --git a/Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx b/Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx index e7b3e9f..7415a93 100644 --- a/Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx +++ b/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) ); } diff --git a/Birdmap.API/ClientApp/src/components/devices/Devices.jsx b/Birdmap.API/ClientApp/src/components/devices/Devices.jsx index 49809ab..5e3d2d4 100644 --- a/Birdmap.API/ClientApp/src/components/devices/Devices.jsx +++ b/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 ( + + service.onlineall()}> + + + service.offlineall()}> + + + + ); + } + + return ( + + {this.props.isAdmin ? renderOnOff() : null} + this.context.updateAllDevices()}> + + + + ); + } + render() { const { classes } = this.props; const Devices = this.context.devices.map((device, index) => ( @@ -29,6 +67,20 @@ class Devices extends React.Component { return ( + + + + All Devices + + {this.renderButtons()} + + + + {Devices} ); diff --git a/Birdmap.API/ClientApp/src/contexts/DevicesContext.js b/Birdmap.API/ClientApp/src/contexts/DevicesContext.js index 9c390ae..f483117 100644 --- a/Birdmap.API/ClientApp/src/contexts/DevicesContext.js +++ b/Birdmap.API/ClientApp/src/contexts/DevicesContext.js @@ -6,4 +6,7 @@ export default React.createContext({ addHandler: (_, __) => { }, removeHandler: (_, __) => { }, + + updateDevice: () => { }, + updateAllDevices: () => { }, }); \ No newline at end of file diff --git a/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js b/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js index e2e618a..21e1185 100644 --- a/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js +++ b/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) => { - 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)); - }) + newConnection.on(C.update_method_name, (id) => this.updateDeviceInternal(id, service)); }).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} diff --git a/Birdmap.API/Controllers/DevicesController.cs b/Birdmap.API/Controllers/DevicesController.cs index 61b0f5e..c1cec49 100644 --- a/Birdmap.API/Controllers/DevicesController.cs +++ b/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); }