List SUSI.AI Devices in Admin Panel
In this blog I’ll be explaining about the Devices Tab in SUSI.AI Admin Panel. Admins can now view the connected devices of the users with view, edit and delete actions. Also the admins can directly view the location of the device on the map by clicking on the device location of that user. Implementation List Devices Devices tab displays device name, macId, room, email Id, date added, last active, last login IP and location of the device. loadDevices function is called on componentDidMount which calls the fetchDevices API which fetches the list of devices from /aaa/getDeviceList.json endpoint. List of all devices is stored in devices array. Each device in the array is an object with the above properties. Clicking on the device location opens a popup displaying the device location on the map. loadDevices = () => { fetchDevices() .then(payload => { const { devices } = payload; let devicesArray = []; devices.forEach(device => { const email = device.name; const devices = device.devices; const macIdArray = Object.keys(devices); const lastLoginIP = device.lastLoginIP !== undefined ? device.lastLoginIP : '-'; const lastActive = device.lastActive !== undefined ? new Date(device.lastActive).toDateString() : '-'; macIdArray.forEach(macId => { const device = devices[macId]; let deviceName = device.name !== undefined ? device.name : '-'; deviceName = deviceName.length > 20 ? deviceName.substr(0, 20) + '...' : deviceName; let location = 'Location not given'; if (device.geolocation) { location = ( {device.geolocation.latitude},{device.geolocation.longitude} ); } const dateAdded = device.deviceAddTime !== undefined ? new Date(device.deviceAddTime).toDateString() : '-'; const deviceObj = { deviceName, macId, email, room: device.room, location, latitude: device.geolocation !== undefined ? device.geolocation.latitude : '-', longitude: device.geolocation !== undefined ? device.geolocation.longitude : '-', dateAdded, lastActive, lastLoginIP, }; devicesArray.push(deviceObj); }); }); this.setState({ loadingDevices: false, devices: devicesArray, }); }) .catch(error => { console.log(error); }); }; View Device View action redirects to users /mydevices?email<email>&macid=<macid>. This allows admin to have full control of the My devices section of the user. Admin can change device details and delete device. Also admin can see all the devices of the user from the ALL tab. To edit a device click on edit icon in the table, update the details and click on check icon. To delete a device click on the delete device which then asks for confirmation of device name and on confirmation deletes the device. Edit Device Edit actions opens up a dialog modal which allows the admin to update the device name and room. Clicking on the edit button calls the modifyUserDevices API which takes in email Id, macId, device name and room name as parameters. This calls the API endpoint /aaa/modifyUserDevices.json. handleChange = event => { this.setState({ [event.target.name]: event.target.value }); }; render() { const { macId, email, handleConfirm, handleClose } = this.props; const { room, deviceName } = this.state; return ( <React.Fragment> <DialogTitle>Edit Device Details for {macId}</DialogTitle> <DialogContent> <OutlinedTextField value={deviceName} label="Device Name" name="deviceName" variant="outlined" onChange={this.handleChange} style={{ marginRight: '20px' }} /> <OutlinedTextField value={room} label="Room" name="room" variant="outlined" onChange={this.handleChange} /> </DialogContent> <DialogActions> <Button key={1} color="primary" onClick={() => handleConfirm(email, macId, room, deviceName)}> Change </Button> <Button key={2} color="primary" onClick={handleClose}> Cancel </Button> </DialogActions>…
