import React, { useState } from 'react'; import TextField from '@mui/material/TextField'; import { Accordion, AccordionSummary, AccordionDetails, Typography, FormControlLabel, Checkbox, } 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 LinkField from '../common/components/LinkField'; 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 useFeatures from '../common/util/useFeatures'; import { useCatch } from '../reactHelper'; import { formatNotificationTitle } from '../common/util/formatter'; 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 features = useFeatures(); 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={['sharedDevice']} > {item && ( <> }> {t('sharedRequired')} setItem({ ...item, name: event.target.value })} label={t('sharedName')} /> setItem({ ...item, uniqueId: event.target.value })} label={t('deviceIdentifier')} /> }> {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')} /> {admin && ( setItem({ ...item, disabled: event.target.checked })} />} label={t('sharedDisabled')} /> )} {item.id && ( }> {t('attributeDeviceImage')} )} setItem({ ...item, attributes })} definitions={{ ...commonDeviceAttributes, ...deviceAttributes }} /> {item.id && ( }> {t('sharedConnections')} formatNotificationTitle(t, it)} label={t('sharedNotifications')} /> {!features.disableDrivers && ( )} {!features.disableComputedAttributes && ( it.description} label={t('sharedComputedAttributes')} /> )} it.description} label={t('sharedSavedCommands')} /> {!features.disableMaintenance && ( )} )} )} ); }; export default DevicePage;