aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-09-21 22:17:14 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-09-21 22:17:14 -0700
commitc036e13c6fcf94b1269abeb1300740c1193ab71b (patch)
treedee178a9df63378bb21c2c3692331834eb929955 /modern/src
parentf575540df13fd67881daf6a3359e2d1a53da9fb0 (diff)
downloadetbsa-traccar-web-c036e13c6fcf94b1269abeb1300740c1193ab71b.tar.gz
etbsa-traccar-web-c036e13c6fcf94b1269abeb1300740c1193ab71b.tar.bz2
etbsa-traccar-web-c036e13c6fcf94b1269abeb1300740c1193ab71b.zip
Additional device details
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/DevicePage.js84
1 files changed, 59 insertions, 25 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 48c6afd..900b279 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -3,38 +3,72 @@ import TextField from '@material-ui/core/TextField';
import t from './common/localization';
import EditItemView from './EditItemView';
+import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography } from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-const DevicePage = () => {
- const [item, setItem] = useState();
+const useStyles = makeStyles(() => ({
+ details: {
+ flexDirection: 'column',
+ },
+}));
- const [name, setName] = useState('');
- const [uniqueId, setUniqueId] = useState('');
+const DevicePage = () => {
+ const classes = useStyles();
- const getItem = () => {
- const updatedItem = item;
- updatedItem.name = name || item.name;
- updatedItem.uniqueId = uniqueId || item.uniqueId;
- return updatedItem;
- };
+ const [item, setItem] = useState();
return (
- <EditItemView endpoint="devices" setItem={setItem} getItem={getItem}>
+ <EditItemView endpoint="devices" setItem={setItem} getItem={() => item}>
{item &&
<>
- <TextField
- margin="normal"
- fullWidth
- defaultValue={item.name}
- onChange={(event) => setName(event.target.value)}
- label={t('sharedName')}
- variant="filled" />
- <TextField
- margin="normal"
- fullWidth
- defaultValue={item.uniqueId}
- onChange={(event) => setUniqueId(event.target.value)}
- label={t('deviceIdentifier')}
- variant="filled" />
+ <Accordion defaultExpanded>
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <Typography variant="subtitle1">
+ {t('sharedRequired')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails className={classes.details}>
+ <TextField
+ margin="normal"
+ defaultValue={item.name}
+ onChange={(event) => setItem({...item, name: event.target.value})}
+ label={t('sharedName')}
+ variant="filled" />
+ <TextField
+ margin="normal"
+ defaultValue={item.uniqueId}
+ onChange={(event) => setItem({...item, uniqueId: event.target.value})}
+ label={t('deviceIdentifier')}
+ variant="filled" />
+ </AccordionDetails>
+ </Accordion>
+ <Accordion>
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <Typography variant="subtitle1">
+ {t('sharedExtra')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails className={classes.details}>
+ <TextField
+ margin="normal"
+ defaultValue={item.phone}
+ onChange={(event) => setItem({...item, phone: event.target.value})}
+ label={t('sharedPhone')}
+ variant="filled" />
+ <TextField
+ margin="normal"
+ defaultValue={item.model}
+ onChange={(event) => setItem({...item, model: event.target.value})}
+ label={t('deviceModel')}
+ variant="filled" />
+ <TextField
+ margin="normal"
+ defaultValue={item.contact}
+ onChange={(event) => setItem({...item, contact: event.target.value})}
+ label={t('deviceContact')}
+ variant="filled" />
+ </AccordionDetails>
+ </Accordion>
</>
}
</EditItemView>