diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-06-21 17:42:00 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-06-21 17:42:00 -0700 |
commit | d3a027a92958371acaf35d300770a4c864df7231 (patch) | |
tree | 0f6d28e5cd6603231f7db0c0d9d407687b649cbc | |
parent | 0de52345ecb1bc9137a3d5df1fe753917b677314 (diff) | |
download | trackermap-web-d3a027a92958371acaf35d300770a4c864df7231.tar.gz trackermap-web-d3a027a92958371acaf35d300770a4c864df7231.tar.bz2 trackermap-web-d3a027a92958371acaf35d300770a4c864df7231.zip |
Implement device removal
-rw-r--r-- | modern/src/DeviceList.js | 28 | ||||
-rw-r--r-- | modern/src/RemoveDialog.js | 32 | ||||
-rw-r--r-- | modern/src/SocketController.js | 6 | ||||
-rw-r--r-- | modern/src/store/devices.js | 5 |
4 files changed, 48 insertions, 23 deletions
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js index b047826f..5e09041a 100644 --- a/modern/src/DeviceList.js +++ b/modern/src/DeviceList.js @@ -34,6 +34,7 @@ const useStyles = makeStyles(theme => ({ })); const DeviceList = () => { + const [menuDeviceId, setMenuDeviceId] = useState(null); const [menuAnchorEl, setMenuAnchorEl] = useState(null); const [removeDialogOpen, setRemoveDialogOpen] = useState(false); const devices = useSelector(state => Object.values(state.devices.items)); @@ -41,7 +42,8 @@ const DeviceList = () => { const classes = useStyles(); const history = useHistory(); - const handleMenuClick = (event) => { + const handleMenuClick = (event, deviceId) => { + setMenuDeviceId(deviceId); setMenuAnchorEl(event.currentTarget); } @@ -50,7 +52,7 @@ const DeviceList = () => { } const handleMenuEdit = () => { - history.push('/device'); + history.push(`/device/${menuDeviceId}`); handleMenuClose(); } @@ -59,6 +61,18 @@ const DeviceList = () => { handleMenuClose(); } + const handleAdd = () => { + history.push('/device'); + handleMenuClose(); + } + + const handleRemoveResult = (removed) => { + setRemoveDialogOpen(false); + if (removed) { + dispatch(devicesActions.remove(menuDeviceId)); + } + } + return ( <> <List className={classes.list}> @@ -72,27 +86,25 @@ const DeviceList = () => { </ListItemAvatar> <ListItemText primary={device.name} secondary={device.uniqueId} /> <ListItemSecondaryAction> - <IconButton onClick={handleMenuClick}> + <IconButton onClick={(event) => handleMenuClick(event, device.id)}> <MoreVertIcon /> </IconButton> </ListItemSecondaryAction> </ListItem> {index < list.length - 1 ? <Divider /> : null} </Fragment> - )) - } + ))} </List> - <Fab size="medium" color="primary" className={classes.fab}> + <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}> <AddIcon /> </Fab> <Menu id="device-menu" anchorEl={menuAnchorEl} keepMounted open={Boolean(menuAnchorEl)} onClose={handleMenuClose}> <MenuItem onClick={handleMenuEdit}>{t('sharedEdit')}</MenuItem> <MenuItem onClick={handleMenuRemove}>{t('sharedRemove')}</MenuItem> </Menu> - <RemoveDialog open={removeDialogOpen} onClose={() => { setRemoveDialogOpen(false) }} /> + <RemoveDialog deviceId={menuDeviceId} open={removeDialogOpen} onResult={handleRemoveResult} /> </> ); } export default DeviceList; - diff --git a/modern/src/RemoveDialog.js b/modern/src/RemoveDialog.js index 14952e64..bca936f4 100644 --- a/modern/src/RemoveDialog.js +++ b/modern/src/RemoveDialog.js @@ -7,18 +7,28 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; const RemoveDialog = (props) => { + const handleRemove = () => { + fetch(`/api/devices/${props.deviceId}`, { method: 'DELETE' }).then(response => { + if (response.ok) { + props.onResult(true); + } + }); + } + return ( - <Dialog - open={props.open} - onClose={() => { props.onClose() }}> - <DialogContent> - <DialogContentText>{t('sharedRemoveConfirm')}</DialogContentText> - </DialogContent> - <DialogActions> - <Button color="primary">{t('sharedRemove')}</Button> - <Button color="primary" autoFocus>{t('sharedCancel')}</Button> - </DialogActions> - </Dialog> + <> + <Dialog + open={props.open} + onClose={() => { props.onResult(false) }}> + <DialogContent> + <DialogContentText>{t('sharedRemoveConfirm')}</DialogContentText> + </DialogContent> + <DialogActions> + <Button color="primary" onClick={handleRemove}>{t('sharedRemove')}</Button> + <Button autoFocus onClick={() => props.onResult(false)}>{t('sharedCancel')}</Button> + </DialogActions> + </Dialog> + </> ); }; diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index 6de3369a..13ff0a9d 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -20,7 +20,7 @@ const displayNotifications = events => { } }; -const SocketController = (props) => { +const SocketController = () => { const dispatch = useDispatch(); const connectSocket = () => { @@ -34,10 +34,10 @@ const SocketController = (props) => { socket.onmessage = (event) => { const data = JSON.parse(event.data); if (data.devices) { - props.dispatch(devicesActions.update(data.devices)); + dispatch(devicesActions.update(data.devices)); } if (data.positions) { - props.dispatch(positionsActions.update(data.positions)); + dispatch(positionsActions.update(data.positions)); } if (data.events) { displayNotifications(data.events); diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js index 0d96e98d..3d7be3e6 100644 --- a/modern/src/store/devices.js +++ b/modern/src/store/devices.js @@ -12,7 +12,10 @@ const { reducer, actions } = createSlice({ }, select(state, action) { state.selectedId = action.payload.id; - } + }, + remove(state, action) { + delete state.items[action.payload]; + }, } }); |