diff options
Diffstat (limited to 'modern/src/settings/UserPage.js')
| -rw-r--r-- | modern/src/settings/UserPage.js | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js new file mode 100644 index 00000000..abb12edf --- /dev/null +++ b/modern/src/settings/UserPage.js @@ -0,0 +1,194 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; + +import { + Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select, MenuItem, +} from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { useDispatch, useSelector } from 'react-redux'; +import EditItemView from './components/EditItemView'; +import EditAttributesView from '../common/attributes/EditAttributesView'; +import LinkField from '../common/components/LinkField'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import useUserAttributes from '../common/attributes/useUserAttributes'; +import { sessionActions } from '../store'; +import SelectField from '../common/components/SelectField'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const UserPage = () => { + const classes = useStyles(); + const dispatch = useDispatch(); + const t = useTranslation(); + + const currentUserId = useSelector((state) => state.session.user.id); + + const userAttributes = useUserAttributes(t); + + const [item, setItem] = useState(); + + const onItemSaved = (result) => { + if (result.id === currentUserId) { + dispatch(sessionActions.updateUser(result)); + } + }; + + const validate = () => item && item.name && item.email && (item.id || item.password); + + return ( + <EditItemView endpoint="users" item={item} setItem={setItem} validate={validate} onItemSaved={onItemSaved}> + {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" + /> + <TextField + margin="normal" + value={item.email || ''} + onChange={(event) => setItem({ ...item, email: event.target.value })} + label={t('userEmail')} + variant="filled" + /> + <TextField + margin="normal" + type="password" + onChange={(event) => setItem({ ...item, password: event.target.value })} + label={t('userPassword')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedPreferences')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.phone || ''} + onChange={(event) => setItem({ ...item, phone: event.target.value })} + label={t('sharedPhone')} + variant="filled" + /> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsSpeedUnit')}</InputLabel> + <Select + value={item.attributes.speedUnit || 'kn'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, speedUnit: e.target.value } })} + > + <MenuItem value="kn">{t('sharedKn')}</MenuItem> + <MenuItem value="kmh">{t('sharedKmh')}</MenuItem> + <MenuItem value="mph">{t('sharedMph')}</MenuItem> + </Select> + </FormControl> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsDistanceUnit')}</InputLabel> + <Select + value={item.attributes.distanceUnit || 'km'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, distanceUnit: e.target.value } })} + > + <MenuItem value="km">{t('sharedKm')}</MenuItem> + <MenuItem value="mi">{t('sharedMi')}</MenuItem> + <MenuItem value="nmi">{t('sharedNmi')}</MenuItem> + </Select> + </FormControl> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('settingsVolumeUnit')}</InputLabel> + <Select + value={item.attributes.volumeUnit || 'ltr'} + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, volumeUnit: e.target.value } })} + > + <MenuItem value="ltr">{t('sharedLiter')}</MenuItem> + <MenuItem value="usGal">{t('sharedUsGallon')}</MenuItem> + <MenuItem value="impGal">{t('sharedImpGallon')}</MenuItem> + </Select> + </FormControl> + <SelectField + margin="normal" + value={item.attributes.timezone || ''} + emptyValue="" + onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })} + endpoint="/api/server/timezones" + keyGetter={(it) => it} + titleGetter={(it) => it} + label={t('sharedTimezone')} + variant="filled" + /> + <TextField + margin="normal" + value={item.poiLayer || ''} + onChange={(event) => setItem({ ...item, poiLayer: event.target.value })} + label={t('mapPoiLayer')} + 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={userAttributes} + /> + </AccordionDetails> + </Accordion> + {item.id && ( + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedConnections')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <LinkField + margin="normal" + endpointAll="/api/devices?all=true" + endpointLinked={`/api/devices?userId=${item.id}`} + baseId={item.id} + keyBase="userId" + keyLink="deviceId" + label={t('deviceTitle')} + variant="filled" + /> + <LinkField + margin="normal" + endpointAll="/api/groups?all=true" + endpointLinked={`/api/groups?userId=${item.id}`} + baseId={item.id} + keyBase="userId" + keyLink="groupId" + label={t('settingsGroups')} + variant="filled" + /> + </AccordionDetails> + </Accordion> + )} + </> + )} + </EditItemView> + ); +}; + +export default UserPage; |