diff options
Diffstat (limited to 'modern')
| -rw-r--r-- | modern/src/DevicePage.js | 32 | ||||
| -rw-r--r-- | modern/src/UserPage.js | 30 | ||||
| -rw-r--r-- | modern/src/form/LinkField.js | 81 |
3 files changed, 143 insertions, 0 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js index 7c9b5671..a8a3de65 100644 --- a/modern/src/DevicePage.js +++ b/modern/src/DevicePage.js @@ -9,6 +9,8 @@ import EditAttributesView from './attributes/EditAttributesView'; import deviceAttributes from './attributes/deviceAttributes'; import SelectField from './form/SelectField'; import { deviceCategories } from './common/deviceCategories'; +import LinkField from './form/LinkField'; +import { prefixString } from './common/stringUtils'; const useStyles = makeStyles(() => ({ details: { @@ -107,6 +109,36 @@ const DevicePage = () => { /> </AccordionDetails> </Accordion> + {item.id && + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedConnections')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <LinkField + margin="normal" + endpointAll="/api/geofences" + endpointLinked={"/api/geofences?deviceId=" + item.id} + baseId={item.id} + keyBase="deviceId" + keyLink="geofenceId" + label={t('sharedGeofences')} + variant="filled" /> + <LinkField + margin="normal" + endpointAll="/api/notifications" + endpointLinked={"/api/notifications?deviceId=" + item.id} + baseId={item.id} + keyBase="deviceId" + keyLink="notificationId" + titleGetter={it => t(prefixString('event', it.type))} + label={t('sharedNotifications')} + variant="filled" /> + </AccordionDetails> + </Accordion> + } </> } </EditItemView> diff --git a/modern/src/UserPage.js b/modern/src/UserPage.js index 98b9b414..0fa0918b 100644 --- a/modern/src/UserPage.js +++ b/modern/src/UserPage.js @@ -7,6 +7,7 @@ import EditItemView from './EditItemView'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditAttributesView from './attributes/EditAttributesView'; +import LinkField from './form/LinkField'; const useStyles = makeStyles(() => ({ details: { @@ -64,6 +65,35 @@ const UserPage = () => { /> </AccordionDetails> </Accordion> + {item.id && + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedConnections')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <LinkField + margin="normal" + endpointAll="/api/devices?all=true" + endpointLinked={"/api/devices?userId=" + item.id} + baseId={item.id} + keyBase="userId" + keyLink="deviceId" + label={t('deviceTitle')} + variant="filled" /> + <LinkField + margin="normal" + endpointAll="/api/groups?all=true" + endpointLinked={"/api/groups?userId=" + item.id} + baseId={item.id} + keyBase="userId" + keyLink="groupId" + label={t('settingsGroups')} + variant="filled" /> + </AccordionDetails> + </Accordion> + } </> } </EditItemView> diff --git a/modern/src/form/LinkField.js b/modern/src/form/LinkField.js new file mode 100644 index 00000000..b228fb34 --- /dev/null +++ b/modern/src/form/LinkField.js @@ -0,0 +1,81 @@ +import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; +import React, { useState } from 'react'; +import { useEffectAsync } from '../reactHelper'; + +const LinkField = ({ + margin, + variant, + label, + endpointAll, + endpointLinked, + baseId, + keyBase, + keyLink, + keyGetter = item => item.id, + titleGetter = item => item.name, +}) => { + const [items, setItems] = useState(); + const [linked, setLinked] = useState(); + + useEffectAsync(async () => { + const response = await fetch(endpointAll); + if (response.ok) { + setItems(await response.json()); + } + }, []); + + useEffectAsync(async () => { + const response = await fetch(endpointLinked); + if (response.ok) { + const data = await response.json(); + setLinked(data.map(it => it.id)); + } + }, []); + + const createBody = linkId => { + const body = {}; + body[keyBase] = baseId; + body[keyLink] = linkId; + return body; + } + + const onChange = async event => { + const oldValue = linked; + const newValue = event.target.value; + for (const added of newValue.filter(it => !oldValue.includes(it))) { + await fetch('/api/permissions', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(createBody(added)), + }); + } + for (const removed of oldValue.filter(it => !newValue.includes(it))) { + await fetch('/api/permissions', { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(createBody(removed)), + }); + } + setLinked(newValue); + }; + + if (items && linked) { + return ( + <FormControl margin={margin} variant={variant}> + <InputLabel>{label}</InputLabel> + <Select + multiple + value={linked} + onChange={onChange}> + {items.map(item => ( + <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem> + ))} + </Select> + </FormControl> + ); + } else { + return null; + } +} + +export default LinkField; |