import React, { useState } from 'react'; import TextField from '@material-ui/core/TextField'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditItemView from './EditItemView'; import EditAttributesView from './attributes/EditAttributesView'; import SelectField from './form/SelectField'; import deviceCategories from './common/deviceCategories'; import LinkField from './form/LinkField'; import { prefixString } from './common/stringUtils'; import { useTranslation } from './LocalizationProvider'; import { useDeviceAttributes } from './attributes/deviceAttributes'; const useStyles = makeStyles(() => ({ details: { flexDirection: 'column', }, })); const DevicePage = () => { const classes = useStyles(); const t = useTranslation(); const deviceAttributes = useDeviceAttributes(t); const [item, setItem] = useState(); return ( {item && ( <> }> {t('sharedRequired')} setItem({ ...item, name: event.target.value })} label={t('sharedName')} variant="filled" /> setItem({ ...item, uniqueId: event.target.value })} label={t('deviceIdentifier')} variant="filled" /> }> {t('sharedExtra')} setItem({ ...item, groupId: Number(event.target.value) })} endpoint="/api/groups" label={t('groupParent')} variant="filled" /> setItem({ ...item, phone: event.target.value })} label={t('sharedPhone')} variant="filled" /> setItem({ ...item, model: event.target.value })} label={t('deviceModel')} variant="filled" /> setItem({ ...item, contact: event.target.value })} label={t('deviceContact')} variant="filled" /> setItem({ ...item, category: event.target.value })} data={deviceCategories.map((category) => ({ id: category, name: t(`category${category.replace(/^\w/, (c) => c.toUpperCase())}`), }))} label={t('deviceCategory')} variant="filled" /> setItem({ ...item, disabled: event.target.checked })} />} label={t('sharedDisabled')} /> }> {t('sharedAttributes')} setItem({ ...item, attributes })} definitions={deviceAttributes} /> {item.id && ( }> {t('sharedConnections')} t(prefixString('event', it.type))} label={t('sharedNotifications')} variant="filled" /> it.description} label={t('sharedComputedAttributes')} variant="filled" /> )} )} ); }; export default DevicePage;