diff options
Diffstat (limited to 'src/settings/GeofencePage.jsx')
-rw-r--r-- | src/settings/GeofencePage.jsx | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/settings/GeofencePage.jsx b/src/settings/GeofencePage.jsx new file mode 100644 index 00000000..c3c96ef8 --- /dev/null +++ b/src/settings/GeofencePage.jsx @@ -0,0 +1,88 @@ +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { + Accordion, AccordionSummary, AccordionDetails, Typography, TextField, +} from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import EditItemView from './components/EditItemView'; +import EditAttributesAccordion from './components/EditAttributesAccordion'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes'; +import SettingsMenu from './components/SettingsMenu'; +import SelectField from '../common/components/SelectField'; +import { geofencesActions } from '../store'; +import useSettingsStyles from './common/useSettingsStyles'; + +const GeofencePage = () => { + const classes = useSettingsStyles(); + const dispatch = useDispatch(); + const t = useTranslation(); + + const geofenceAttributes = useGeofenceAttributes(t); + + const [item, setItem] = useState(); + + const onItemSaved = (result) => { + dispatch(geofencesActions.update([result])); + }; + + const validate = () => item && item.name; + + return ( + <EditItemView + endpoint="geofences" + item={item} + setItem={setItem} + validate={validate} + onItemSaved={onItemSaved} + menu={<SettingsMenu />} + breadcrumbs={['settingsTitle', 'sharedGeofence']} + > + {item && ( + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + value={item.name || ''} + onChange={(event) => setItem({ ...item, name: event.target.value })} + label={t('sharedName')} + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedExtra')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + value={item.description || ''} + onChange={(event) => setItem({ ...item, description: event.target.value })} + label={t('sharedDescription')} + /> + <SelectField + value={item.calendarId} + onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })} + endpoint="/api/calendars" + label={t('sharedCalendar')} + /> + </AccordionDetails> + </Accordion> + <EditAttributesAccordion + attributes={item.attributes} + setAttributes={(attributes) => setItem({ ...item, attributes })} + definitions={geofenceAttributes} + /> + </> + )} + </EditItemView> + ); +}; + +export default GeofencePage; |