import React, { useState } from 'react'; import TextField from '@material-ui/core/TextField'; import t from './common/localization'; import EditItemView from './EditItemView'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditAttributesView from './attributes/EditAttributesView'; import deviceAttributes from './attributes/deviceAttributes'; import SelectField from './form/SelectField'; import { deviceCategories } from './common/deviceCategories'; const useStyles = makeStyles(() => ({ details: { flexDirection: 'column', }, })); const DevicePage = () => { const classes = useStyles(); 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} /> } ); } export default DevicePage;