Added All Device handler

This commit is contained in:
kunkliricsi 2020-11-18 18:34:48 +01:00
parent f84ea8f0c5
commit 779e21909c
5 changed files with 95 additions and 23 deletions

View File

@ -9,6 +9,7 @@ import { withStyles } from '@material-ui/styles';
import { withRouter } from "react-router"; import { withRouter } from "react-router";
import { Power, PowerOff, Refresh } from '@material-ui/icons/'; import { Power, PowerOff, Refresh } from '@material-ui/icons/';
import DeviceService from '../../common/DeviceService' import DeviceService from '../../common/DeviceService'
import DevicesContext from '../../contexts/DevicesContext';
const styles = theme => ({ const styles = theme => ({
acc_summary: { acc_summary: {
@ -55,6 +56,8 @@ class DeviceComponent extends Component {
} }
} }
static contextType = DevicesContext;
getColor(status) { getColor(status) {
if (status == "Online") { if (status == "Online") {
return { color: green[600] }; return { color: green[600] };
@ -75,7 +78,7 @@ class DeviceComponent extends Component {
return this.renderButtons( return this.renderButtons(
() => service.onlinesensor(device.id, sensor.id), () => service.onlinesensor(device.id, sensor.id),
() => service.offlinesensor(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( return this.renderButtons(
() => service.onlinedevice(device.id), () => service.onlinedevice(device.id),
() => service.offlinedevice(device.id), () => service.offlinedevice(device.id),
() => service.getdevice(device.id) () => this.context.updateDevice(device.id)
); );
} }

View File

@ -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 { withStyles } from '@material-ui/styles';
import React from 'react'; import React from 'react';
import DeviceService from '../../common/DeviceService';
import DevicesContext from '../../contexts/DevicesContext'; import DevicesContext from '../../contexts/DevicesContext';
import DeviceComponent from './DeviceComponent'; import DeviceComponent from './DeviceComponent';
import { Power, PowerOff, Refresh } from '@material-ui/icons/';
const styles = theme => ({ const styles = theme => ({
root: { root: {
padding: '64px', padding: '64px',
backgroundColor: theme.palette.primary.dark, 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 { class Devices extends React.Component {
@ -21,6 +33,32 @@ class Devices extends React.Component {
componentDidMount() { 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() { render() {
const { classes } = this.props; const { classes } = this.props;
const Devices = this.context.devices.map((device, index) => ( const Devices = this.context.devices.map((device, index) => (
@ -29,6 +67,20 @@ class Devices extends React.Component {
return ( return (
<Box className={classes.root}> <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} {Devices}
</Box> </Box>
); );

View File

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

View File

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

View File

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