diff options
Diffstat (limited to 'modern/src/DevicePage.js')
| -rw-r--r-- | modern/src/DevicePage.js | 97 |
1 files changed, 57 insertions, 40 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js index ed5a6cba..699e97c6 100644 --- a/modern/src/DevicePage.js +++ b/modern/src/DevicePage.js @@ -1,14 +1,16 @@ 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 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'; +import deviceCategories from './common/deviceCategories'; import LinkField from './form/LinkField'; import { prefixString } from './common/stringUtils'; @@ -25,7 +27,8 @@ const DevicePage = () => { return ( <EditItemView endpoint="devices" item={item} setItem={setItem}> - {item && + {item + && ( <> <Accordion defaultExpanded> <AccordionSummary expandIcon={<ExpandMoreIcon />}> @@ -37,15 +40,17 @@ const DevicePage = () => { <TextField margin="normal" value={item.name || ''} - onChange={event => setItem({...item, name: event.target.value})} + onChange={(event) => setItem({ ...item, name: event.target.value })} label={t('sharedName')} - variant="filled" /> + variant="filled" + /> <TextField margin="normal" value={item.uniqueId || ''} - onChange={event => setItem({...item, uniqueId: event.target.value})} + onChange={(event) => setItem({ ...item, uniqueId: event.target.value })} label={t('deviceIdentifier')} - variant="filled" /> + variant="filled" + /> </AccordionDetails> </Accordion> <Accordion> @@ -58,42 +63,48 @@ const DevicePage = () => { <SelectField margin="normal" value={item.groupId || 0} - onChange={event => setItem({...item, groupId: Number(event.target.value)})} + onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })} endpoint="/api/groups" label={t('groupParent')} - variant="filled" /> + variant="filled" + /> <TextField margin="normal" value={item.phone || ''} - onChange={event => setItem({...item, phone: event.target.value})} + onChange={(event) => setItem({ ...item, phone: event.target.value })} label={t('sharedPhone')} - variant="filled" /> + variant="filled" + /> <TextField margin="normal" value={item.model || ''} - onChange={event => setItem({...item, model: event.target.value})} + onChange={(event) => setItem({ ...item, model: event.target.value })} label={t('deviceModel')} - variant="filled" /> + variant="filled" + /> <TextField margin="normal" value={item.contact || ''} - onChange={event => setItem({...item, contact: event.target.value})} + onChange={(event) => setItem({ ...item, contact: event.target.value })} label={t('deviceContact')} - variant="filled" /> + variant="filled" + /> <SelectField margin="normal" value={item.category || 'default'} emptyValue={null} - onChange={event => setItem({...item, category: event.target.value})} - data={deviceCategories.map(category => ({ + onChange={(event) => setItem({ ...item, category: event.target.value })} + data={deviceCategories.map((category) => ({ id: category, - name: t(`category${category.replace(/^\w/, c => c.toUpperCase())}`) + name: t(`category${category.replace(/^\w/, (c) => c.toUpperCase())}`), }))} label={t('deviceCategory')} - variant="filled" /> + variant="filled" + /> <FormControlLabel - control={<Checkbox checked={item.disabled} onChange={event => setItem({...item, disabled: event.target.checked})} />} - label={t('sharedDisabled')} /> + control={<Checkbox checked={item.disabled} onChange={(event) => setItem({ ...item, disabled: event.target.checked })} />} + label={t('sharedDisabled')} + /> </AccordionDetails> </Accordion> <Accordion> @@ -105,12 +116,13 @@ const DevicePage = () => { <AccordionDetails className={classes.details}> <EditAttributesView attributes={item.attributes} - setAttributes={attributes => setItem({...item, attributes})} + setAttributes={(attributes) => setItem({ ...item, attributes })} definitions={deviceAttributes} - /> + /> </AccordionDetails> </Accordion> - {item.id && + {item.id + && ( <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />}> <Typography variant="subtitle1"> @@ -121,57 +133,62 @@ const DevicePage = () => { <LinkField margin="normal" endpointAll="/api/geofences" - endpointLinked={"/api/geofences?deviceId=" + item.id} + endpointLinked={`/api/geofences?deviceId=${item.id}`} baseId={item.id} keyBase="deviceId" keyLink="geofenceId" label={t('sharedGeofences')} - variant="filled" /> + variant="filled" + /> <LinkField margin="normal" endpointAll="/api/notifications" - endpointLinked={"/api/notifications?deviceId=" + item.id} + endpointLinked={`/api/notifications?deviceId=${item.id}`} baseId={item.id} keyBase="deviceId" keyLink="notificationId" - titleGetter={it => t(prefixString('event', it.type))} + titleGetter={(it) => t(prefixString('event', it.type))} label={t('sharedNotifications')} - variant="filled" /> + variant="filled" + /> <LinkField margin="normal" endpointAll="/api/drivers" - endpointLinked={"/api/drivers?deviceId=" + item.id} + endpointLinked={`/api/drivers?deviceId=${item.id}`} baseId={item.id} keyBase="deviceId" keyLink="driverId" label={t('sharedDrivers')} - variant="filled" /> + variant="filled" + /> <LinkField margin="normal" endpointAll="/api/attributes/computed" - endpointLinked={"/api/attributes/computed?deviceId=" + item.id} + endpointLinked={`/api/attributes/computed?deviceId=${item.id}`} baseId={item.id} keyBase="deviceId" keyLink="attributeId" - titleGetter={it => it.description} + titleGetter={(it) => it.description} label={t('sharedComputedAttributes')} - variant="filled" /> + variant="filled" + /> <LinkField margin="normal" endpointAll="/api/maintenance" - endpointLinked={"/api/maintenance?deviceId=" + item.id} + endpointLinked={`/api/maintenance?deviceId=${item.id}`} baseId={item.id} keyBase="deviceId" keyLink="maintenanceId" label={t('sharedMaintenance')} - variant="filled" /> + variant="filled" + /> </AccordionDetails> </Accordion> - } + )} </> - } + )} </EditItemView> ); -} +}; export default DevicePage; |