diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-04 17:12:00 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-04 17:12:00 -0700 |
commit | f559ae8d2f9c4a9bc5f450faa749a8ce13645fdd (patch) | |
tree | 91511c6800e6fba8ba837a43190d89b46ea6edd2 /modern/src/settings/SendCommandPage.js | |
parent | ebbf533b5f8bae16a946852fccef397e4bbe8f7d (diff) | |
download | trackermap-web-f559ae8d2f9c4a9bc5f450faa749a8ce13645fdd.tar.gz trackermap-web-f559ae8d2f9c4a9bc5f450faa749a8ce13645fdd.tar.bz2 trackermap-web-f559ae8d2f9c4a9bc5f450faa749a8ce13645fdd.zip |
Implement send commands
Diffstat (limited to 'modern/src/settings/SendCommandPage.js')
-rw-r--r-- | modern/src/settings/SendCommandPage.js | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/modern/src/settings/SendCommandPage.js b/modern/src/settings/SendCommandPage.js new file mode 100644 index 00000000..91130fa1 --- /dev/null +++ b/modern/src/settings/SendCommandPage.js @@ -0,0 +1,115 @@ +import React, { useState } from 'react'; +import { useHistory, useParams } from 'react-router-dom'; +import { + Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, Button, FormControl, +} from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { useTranslation } from '../LocalizationProvider'; +import OptionsLayout from './OptionsLayout'; +import BaseCommandView from './BaseCommandView'; +import SelectField from '../form/SelectField'; + +const useStyles = makeStyles((theme) => ({ + container: { + marginTop: theme.spacing(2), + }, + buttons: { + display: 'flex', + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '33%', + }, + }, + details: { + flexDirection: 'column', + }, +})); + +const SendCommandPage = () => { + const history = useHistory(); + const classes = useStyles(); + const t = useTranslation(); + + const { deviceId } = useParams(); + + const [savedId, setSavedId] = useState(0); + const [item, setItem] = useState({}); + + const handleSend = async () => { + let command; + if (savedId) { + const response = await fetch(`/api/commands/${savedId}`); + if (response.ok) { + command = await response.json(); + } + } else { + command = item; + } + + command.deviceId = parseInt(deviceId, 10); + + const response = await fetch('/api/commands/send', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(command), + }); + + if (response.ok) { + history.goBack(); + } + }; + + const validate = () => savedId || (item && item.type); + + return ( + <OptionsLayout> + <Container maxWidth="xs" className={classes.container}> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <SelectField + margin="normal" + value={savedId} + emptyTitle={t('sharedNew')} + onChange={(e) => setSavedId(e.target.value)} + endpoint={`/api/commands/send?deviceId=${deviceId}`} + titleGetter={(it) => it.description} + label={t('sharedSavedCommand')} + variant="filled" + /> + {!savedId && ( + <BaseCommandView item={item} setItem={setItem} /> + )} + </AccordionDetails> + </Accordion> + <FormControl fullWidth margin="normal"> + <div className={classes.buttons}> + <Button + type="button" + color="primary" + variant="outlined" + onClick={() => history.goBack()} + > + {t('sharedCancel')} + </Button> + <Button + type="button" + color="primary" + variant="contained" + onClick={handleSend} + disabled={!validate()} + > + {t('commandSend')} + </Button> + </div> + </FormControl> + </Container> + </OptionsLayout> + ); +}; + +export default SendCommandPage; |