diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2021-06-27 11:08:26 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2021-06-27 11:08:26 -0700 |
commit | 26916278758cd5e4abb16aa31e31099e066ea8d5 (patch) | |
tree | 5119a65f67cd426ed06b9cb553b7d24ba6dce093 /modern/src/GeofencePage.js | |
parent | d86a3ef187359fbe83a5dd950295868c4ef39d09 (diff) | |
download | trackermap-web-26916278758cd5e4abb16aa31e31099e066ea8d5.tar.gz trackermap-web-26916278758cd5e4abb16aa31e31099e066ea8d5.tar.bz2 trackermap-web-26916278758cd5e4abb16aa31e31099e066ea8d5.zip |
Add geofences screen
Diffstat (limited to 'modern/src/GeofencePage.js')
-rw-r--r-- | modern/src/GeofencePage.js | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/modern/src/GeofencePage.js b/modern/src/GeofencePage.js new file mode 100644 index 00000000..6c5db9bb --- /dev/null +++ b/modern/src/GeofencePage.js @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; + +import t from './common/localization'; +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 geofenceAttributes from './attributes/geofenceAttributes'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const GeofencePage = () => { + const classes = useStyles(); + + const [item, setItem] = useState(); + + return ( + <EditItemView endpoint="geofences" item={item} setItem={setItem}> + {item && + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.name || ''} + onChange={event => setItem({...item, name: event.target.value})} + label={t('sharedName')} + variant="filled" /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedAttributes')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <EditAttributesView + attributes={item.attributes} + setAttributes={attributes => setItem({...item, attributes})} + definitions={geofenceAttributes} + /> + </AccordionDetails> + </Accordion> + </> + } + </EditItemView> + ); +} + +export default GeofencePage; |