In this blog I’ll be explaining how to view, edit and delete connected devices from SUSI.AI webclient. To connect a device open up the SUSI.AI android app, and fill the details accordingly. Device can also be connected by logging in to your raspberry pi. Once the devices is connected you can edit, delete and access specific features for the device from the web client.
My Devices
All the connected devices can be viewed in My Devices tab in the Dashboard. In this tab all the devices connected to your account are listed in a table along with their locations on the map. Each device table row has three action buttons – view, edit and delete. Clicking on the view button takes to device specific page. Clicking on the edit button makes the fields name and room editable in table row. Clicking on the delete button opens a confirm with input dialog. Device can be deleted by entering the device name and clicking on delete.
To fetch all the device getUserDevices action is dispatched on component mounting which sets the reducer state devices in settings reducer. initialiseDevices function is called after all the devices are fetched from the server. This function creates an array of objects of devices with name, room, macId, latitude, longitude and location.
componentDidMount() {
const { accessToken, actions } = this.props;
if (accessToken) {
actions
.getUserDevices()
.then(({ payload }) => {
this.initialiseDevices();
this.setState({
loading: false,
emptyText: 'You do not have any devices connected yet!',
});
})
.catch(error => {
this.setState({
loading: false,
emptyText: 'Some error occurred while fetching the devices!',
});
console.log(error);
});
}
document.title =
'My Devices - SUSI.AI - Open Source Artificial Intelligence for Personal Assistants, Robots, Help Desks and Chatbots';
}
initialiseDevices = () => {
const { devices } = this.props;
if (devices) {
let devicesData = [];
let deviceIds = Object.keys(devices);
let invalidLocationDevices = 0;
deviceIds.forEach(eachDevice => {
const {
name,
room,
geolocation: { latitude, longitude },
} = devices[eachDevice];
let deviceObj = {
macId: eachDevice,
deviceName: name,
room,
latitude,
longitude,
location: `${latitude}, ${longitude}`,
};
if (
deviceObj.latitude === 'Latitude not available.' ||
deviceObj.longitude === 'Longitude not available.'
) {
deviceObj.location = 'Not found';
invalidLocationDevices++;
} else {
deviceObj.latitude = parseFloat(latitude);
deviceObj.longitude = parseFloat(longitude);
}
devicesData.push(deviceObj);
});
this.setState({
devicesData,
invalidLocationDevices,
});
}
};
Device Page
Clicking on the view icon button in my devices redirects to mydevices/:macId. This page consists of device information in tabular format, local configuration settings and location of the device on the map. User can edit and delete the device from actions present in table. Local configuration settings can be accessed only if the user is logged in the local server.
Edit Device
To edit a device click on the edit icon button in the actions column of the table. The name and room field become editable.On changing the values handleChange function is called which updates the devicesData state. Clicking on the tick icon saves the new details by calling the onDeviceSave function. This function class the addUserDevice api which takes in the new device details.
startEditing = rowIndex => {
this.setState({ editIdx: rowIndex });
};
handleChange = (e, fieldName, rowIndex) => {
const value = e.target.value;
let data = this.state.devicesData;
this.setState({
devicesData: data.map((row, index) =>
index === rowIndex ? { ...row, [fieldName]: value } : row,
),
});
};
handleDeviceSave = rowIndex => {
this.setState({
editIdx: -1,
});
const deviceData = this.state.devicesData[rowIndex];
addUserDevice({ ...deviceData })
.then(payload => {})
.catch(error => {
console.log(error);
});
};
Delete Device
To delete a device click on the delete icon button under the actions column in the table. Clicking on the delete device button opens up the confirm with input dialog modal. Type in the name of the device and click on delete. Clicking on delete calls the handeRemoveDevice function which calls the removeUserDevice api which takes in the macId. On deleting the device user is redirected to the My Devices in Dashboard.
handleRemoveConfirmation = () => {
this.props.actions.openModal({
modalType: 'deleteDevice',
name: this.state.devicesData[0].deviceName,
handleConfirm: this.handleRemoveDevice,
handleClose: this.props.actions.closeModal,
});
};
handleRemoveDevice = () => {
const macId = this.macId;
removeUserDevice({ macId })
.then(payload => {
this.props.actions.closeModal();
window.location.replace('/mydevices);
})
.catch(error => {
console.log(error);
});
};
In conclusion, My Devices tab in dashboard helps you manage the devices connected with your account along with specific device configuration. Now the users can edit, view and delete their connected devices.