diff options
Diffstat (limited to 'src/settings/DevicePage.jsx')
| -rw-r--r-- | src/settings/DevicePage.jsx | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/src/settings/DevicePage.jsx b/src/settings/DevicePage.jsx new file mode 100644 index 00000000..8933a210 --- /dev/null +++ b/src/settings/DevicePage.jsx @@ -0,0 +1,176 @@ +import React, { useState } from 'react'; +import dayjs from 'dayjs'; +import { + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + FormControlLabel, + Checkbox, + TextField, +} from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { DropzoneArea } from 'react-mui-dropzone'; +import EditItemView from './components/EditItemView'; +import EditAttributesAccordion from './components/EditAttributesAccordion'; +import SelectField from '../common/components/SelectField'; +import deviceCategories from '../common/util/deviceCategories'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import useDeviceAttributes from '../common/attributes/useDeviceAttributes'; +import { useAdministrator } from '../common/util/permissions'; +import SettingsMenu from './components/SettingsMenu'; +import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes'; +import { useCatch } from '../reactHelper'; +import useQuery from '../common/util/useQuery'; +import useSettingsStyles from './common/useSettingsStyles'; + +const DevicePage = () => { + const classes = useSettingsStyles(); + const t = useTranslation(); + + const admin = useAdministrator(); + + const commonDeviceAttributes = useCommonDeviceAttributes(t); + const deviceAttributes = useDeviceAttributes(t); + + const query = useQuery(); + const uniqueId = query.get('uniqueId'); + + const [item, setItem] = useState(uniqueId ? { uniqueId } : null); + + const handleFiles = useCatch(async (files) => { + if (files.length > 0) { + const response = await fetch(`/api/devices/${item.id}/image`, { + method: 'POST', + body: files[0], + }); + if (response.ok) { + setItem({ ...item, attributes: { ...item.attributes, deviceImage: await response.text() } }); + } else { + throw Error(await response.text()); + } + } + }); + + const validate = () => item && item.name && item.uniqueId; + + return ( + <EditItemView + endpoint="devices" + item={item} + setItem={setItem} + validate={validate} + menu={<SettingsMenu />} + breadcrumbs={['settingsTitle', 'sharedDevice']} + > + {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')} + /> + <TextField + value={item.uniqueId || ''} + onChange={(event) => setItem({ ...item, uniqueId: event.target.value })} + label={t('deviceIdentifier')} + helperText={t('deviceIdentifierHelp')} + disabled={Boolean(uniqueId)} + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedExtra')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <SelectField + value={item.groupId} + onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })} + endpoint="/api/groups" + label={t('groupParent')} + /> + <TextField + value={item.phone || ''} + onChange={(event) => setItem({ ...item, phone: event.target.value })} + label={t('sharedPhone')} + /> + <TextField + value={item.model || ''} + onChange={(event) => setItem({ ...item, model: event.target.value })} + label={t('deviceModel')} + /> + <TextField + value={item.contact || ''} + onChange={(event) => setItem({ ...item, contact: event.target.value })} + label={t('deviceContact')} + /> + <SelectField + value={item.category || 'default'} + 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')} + /> + <SelectField + value={item.calendarId} + onChange={(event) => setItem({ ...item, calendarId: Number(event.target.value) })} + endpoint="/api/calendars" + label={t('sharedCalendar')} + /> + <TextField + label={t('userExpirationTime')} + type="date" + value={(item.expirationTime && dayjs(item.expirationTime).locale('en').format('YYYY-MM-DD')) || '2099-01-01'} + onChange={(e) => setItem({ ...item, expirationTime: dayjs(e.target.value, 'YYYY-MM-DD').locale('en').format() })} + disabled={!admin} + /> + <FormControlLabel + control={<Checkbox checked={item.disabled} onChange={(event) => setItem({ ...item, disabled: event.target.checked })} />} + label={t('sharedDisabled')} + disabled={!admin} + /> + </AccordionDetails> + </Accordion> + {item.id && ( + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('attributeDeviceImage')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <DropzoneArea + dropzoneText={t('sharedDropzoneText')} + acceptedFiles={['image/*']} + filesLimit={1} + onChange={handleFiles} + showAlerts={false} + maxFileSize={500000} + /> + </AccordionDetails> + </Accordion> + )} + <EditAttributesAccordion + attributes={item.attributes} + setAttributes={(attributes) => setItem({ ...item, attributes })} + definitions={{ ...commonDeviceAttributes, ...deviceAttributes }} + /> + </> + )} + </EditItemView> + ); +}; + +export default DevicePage; |