aboutsummaryrefslogtreecommitdiff
path: root/modern/src/DevicesList.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-20 23:13:11 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-09-20 23:13:11 -0700
commitb318cfd66ee2fa9918797fc0e0226a01983da746 (patch)
tree9224dc7290011285d6e8cb8829a12f5cb596575a /modern/src/DevicesList.js
parent9238895c99c30c442ce8dae41b61f898a79dd89b (diff)
downloadtrackermap-web-b318cfd66ee2fa9918797fc0e0226a01983da746.tar.gz
trackermap-web-b318cfd66ee2fa9918797fc0e0226a01983da746.tar.bz2
trackermap-web-b318cfd66ee2fa9918797fc0e0226a01983da746.zip
Implement users editing
Diffstat (limited to 'modern/src/DevicesList.js')
-rw-r--r--modern/src/DevicesList.js69
1 files changed, 69 insertions, 0 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
new file mode 100644
index 00000000..28ead786
--- /dev/null
+++ b/modern/src/DevicesList.js
@@ -0,0 +1,69 @@
+import React, { Fragment } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+import { devicesActions } from './store';
+import EditCollectionView from './EditCollectionView';
+import { useEffectAsync } from './reactHelper';
+
+const useStyles = makeStyles(() => ({
+ list: {
+ maxHeight: '100%',
+ overflow: 'auto',
+ },
+}));
+
+const DeviceView = ({ updateTimestamp, onMenuClick }) => {
+ const classes = useStyles();
+ const dispatch = useDispatch();
+
+ const items = useSelector(state => Object.values(state.devices.items));
+
+ useEffectAsync(async () => {
+ const response = await fetch('/api/devices');
+ if (response.ok) {
+ dispatch(devicesActions.refresh(await response.json()));
+ }
+ }, [updateTimestamp]);
+
+ return (
+ <List className={classes.list}>
+ {items.map((item, index, list) => (
+ <Fragment key={item.id}>
+ <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
+ <ListItemAvatar>
+ <Avatar>
+ <LocationOnIcon />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary={item.name} secondary={item.uniqueId} />
+ <ListItemSecondaryAction>
+ <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+ <MoreVertIcon />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ {index < list.length - 1 ? <Divider /> : null}
+ </Fragment>
+ ))}
+ </List>
+ );
+}
+
+const DevicesList = () => {
+ return (
+ <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" />
+ );
+}
+
+export default DevicesList;