diff options
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/DevicePage.js | 37 |
1 files changed, 30 insertions, 7 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js index a4b2e8b..7d20be3 100644 --- a/modern/src/DevicePage.js +++ b/modern/src/DevicePage.js @@ -5,6 +5,7 @@ import t from './common/localization'; import EditItemView from './EditItemView'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { useEffectAsync } from './reactHelper'; const useStyles = makeStyles(() => ({ details: { @@ -40,6 +41,14 @@ const DevicePage = () => { const classes = useStyles(); const [item, setItem] = useState(); + const [groups, setGroups] = useState(); + + useEffectAsync(async () => { + const response = await fetch('/api/groups'); + if (response.ok) { + setGroups(await response.json()); + } + }, []); return ( <EditItemView endpoint="devices" setItem={setItem} getItem={() => item}> @@ -55,13 +64,13 @@ const DevicePage = () => { <TextField margin="normal" defaultValue={item.name} - onChange={(event) => setItem({...item, name: event.target.value})} + onChange={event => setItem({...item, name: event.target.value})} label={t('sharedName')} variant="filled" /> <TextField margin="normal" defaultValue={item.uniqueId} - onChange={(event) => setItem({...item, uniqueId: event.target.value})} + onChange={event => setItem({...item, uniqueId: event.target.value})} label={t('deviceIdentifier')} variant="filled" /> </AccordionDetails> @@ -73,22 +82,36 @@ const DevicePage = () => { </Typography> </AccordionSummary> <AccordionDetails className={classes.details}> + {groups && + <FormControl margin="normal" variant="filled"> + <InputLabel>{t('groupParent')}</InputLabel> + <Select + native + defaultValue={item.groupId} + onChange={event => setItem({...item, groupId: Number(event.target.value)})}> + <option value={0}></option> + {groups.map(group => ( + <option value={group.id}>{group.name}</option> + ))} + </Select> + </FormControl> + } <TextField margin="normal" defaultValue={item.phone} - onChange={(event) => setItem({...item, phone: event.target.value})} + onChange={event => setItem({...item, phone: event.target.value})} label={t('sharedPhone')} variant="filled" /> <TextField margin="normal" defaultValue={item.model} - onChange={(event) => setItem({...item, model: event.target.value})} + onChange={event => setItem({...item, model: event.target.value})} label={t('deviceModel')} variant="filled" /> <TextField margin="normal" defaultValue={item.contact} - onChange={(event) => setItem({...item, contact: event.target.value})} + onChange={event => setItem({...item, contact: event.target.value})} label={t('deviceContact')} variant="filled" /> <FormControl margin="normal" variant="filled"> @@ -96,8 +119,8 @@ const DevicePage = () => { <Select native defaultValue={item.category} - onChange={(event) => setItem({...item, category: event.target.value})}> - {deviceCategories.map((category) => ( + onChange={event => setItem({...item, category: event.target.value})}> + {deviceCategories.map(category => ( <option value={category}>{t(`category${category.replace(/^\w/, c => c.toUpperCase())}`)}</option> ))} </Select> |