aboutsummaryrefslogtreecommitdiff
path: root/modern/src/DevicePage.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-30 22:44:54 -0700
committerGitHub <noreply@github.com>2020-09-30 22:44:54 -0700
commitc8aadd6a14fd540fab0ad869d9daba4f9428a4fb (patch)
tree1817859d1baab737de93e433315b9e549e6f0895 /modern/src/DevicePage.js
parent542f96da0ef323f286aa9caa8cfffaa98094467e (diff)
parent66d2b91dfdcfb4b5c5fe90ddb7a3e3e66e01e502 (diff)
downloadtrackermap-web-c8aadd6a14fd540fab0ad869d9daba4f9428a4fb.tar.gz
trackermap-web-c8aadd6a14fd540fab0ad869d9daba4f9428a4fb.tar.bz2
trackermap-web-c8aadd6a14fd540fab0ad869d9daba4f9428a4fb.zip
Merge pull request #786 from traccar/migrate-select
Migrate Select to SelectField
Diffstat (limited to 'modern/src/DevicePage.js')
-rw-r--r--modern/src/DevicePage.js54
1 files changed, 19 insertions, 35 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 45eba3fa..d4b83e6e 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -3,11 +3,11 @@ import TextField from '@material-ui/core/TextField';
import t from './common/localization';
import EditItemView from './EditItemView';
-import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useEffectAsync } from './reactHelper';
import EditAttributesView from './attributes/EditAttributesView';
import deviceAttributes from './attributes/deviceAttributes';
+import SelectField from './form/SelectField';
const useStyles = makeStyles(() => ({
details: {
@@ -43,14 +43,6 @@ 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" item={item} setItem={setItem}>
@@ -84,20 +76,13 @@ 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 key={group.id} value={group.id}>{group.name}</option>
- ))}
- </Select>
- </FormControl>
- }
+ <SelectField
+ margin="normal"
+ defaultValue={item.groupId}
+ onChange={event => setItem({...item, groupId: Number(event.target.value)})}
+ endpoint="/api/groups"
+ label={t('groupParent')}
+ variant="filled" />
<TextField
margin="normal"
defaultValue={item.phone}
@@ -116,17 +101,16 @@ const DevicePage = () => {
onChange={event => setItem({...item, contact: event.target.value})}
label={t('deviceContact')}
variant="filled" />
- <FormControl margin="normal" variant="filled">
- <InputLabel>{t('deviceCategory')}</InputLabel>
- <Select
- native
- defaultValue={item.category}
- onChange={event => setItem({...item, category: event.target.value})}>
- {deviceCategories.map(category => (
- <option key={category} value={category}>{t(`category${category.replace(/^\w/, c => c.toUpperCase())}`)}</option>
- ))}
- </Select>
- </FormControl>
+ <SelectField
+ margin="normal"
+ defaultValue={item.category}
+ onChange={event => setItem({...item, category: event.target.value})}
+ data={deviceCategories.map(category => ({
+ id: category,
+ name: t(`category${category.replace(/^\w/, c => c.toUpperCase())}`)
+ }))}
+ label={t('deviceCategory')}
+ variant="filled" />
<FormControlLabel
control={<Checkbox checked={item.disabled} onChange={event => setItem({...item, disabled: event.target.checked})} />}
label={t('sharedDisabled')} />