aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-21 22:50:26 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-09-21 22:50:26 -0700
commit5ddf1e04451239ddc64e8a06f36f99a50d64d37b (patch)
tree67455ff06013ab03f992c9fbc09cc4215258eb9d /modern
parentc25bacf17fe72fdcb8102503f3f1c4c208d469b8 (diff)
downloadtrackermap-web-5ddf1e04451239ddc64e8a06f36f99a50d64d37b.tar.gz
trackermap-web-5ddf1e04451239ddc64e8a06f36f99a50d64d37b.tar.bz2
trackermap-web-5ddf1e04451239ddc64e8a06f36f99a50d64d37b.zip
Add device group selection
Diffstat (limited to 'modern')
-rw-r--r--modern/src/DevicePage.js37
1 files changed, 30 insertions, 7 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index a4b2e8b0..7d20be39 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>