import React, { useState } from 'react'; import moment from 'moment'; import { Accordion, AccordionSummary, AccordionDetails, Typography, FormControlLabel, Checkbox, TextField, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; 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'; const useStyles = makeStyles((theme) => ({ details: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), paddingBottom: theme.spacing(3), }, })); const DevicePage = () => { const classes = useStyles(); const t = useTranslation(); const admin = useAdministrator(); const commonDeviceAttributes = useCommonDeviceAttributes(t); const deviceAttributes = useDeviceAttributes(t); const [item, setItem] = useState(); 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 ( } breadcrumbs={['settingsTitle', 'sharedDevice']} > {item && ( <> }> {t('sharedRequired')} setItem({ ...item, name: event.target.value })} label={t('sharedName')} /> setItem({ ...item, uniqueId: event.target.value })} label={t('deviceIdentifier')} helperText={t('deviceIdentifierHelp')} /> }> {t('sharedExtra')} setItem({ ...item, groupId: Number(event.target.value) })} endpoint="/api/groups" label={t('groupParent')} /> setItem({ ...item, phone: event.target.value })} label={t('sharedPhone')} /> setItem({ ...item, model: event.target.value })} label={t('deviceModel')} /> setItem({ ...item, contact: event.target.value })} label={t('deviceContact')} /> setItem({ ...item, category: event.target.value })} data={deviceCategories.map((category) => ({ id: category, name: t(`category${category.replace(/^\w/, (c) => c.toUpperCase())}`), }))} label={t('deviceCategory')} /> setItem({ ...item, calendarId: Number(event.target.value) })} endpoint="/api/calendars" label={t('sharedCalendar')} /> setItem({ ...item, expirationTime: moment(e.target.value, moment.HTML5_FMT.DATE).locale('en').format() })} disabled={!admin} /> setItem({ ...item, disabled: event.target.checked })} />} label={t('sharedDisabled')} disabled={!admin} /> {item.id && ( }> {t('attributeDeviceImage')} )} setItem({ ...item, attributes })} definitions={{ ...commonDeviceAttributes, ...deviceAttributes }} /> )} ); }; export default DevicePage;