diff options
author | Anton Tananaev <anton@traccar.org> | 2022-07-04 09:26:43 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-07-04 09:26:43 -0700 |
commit | c3485f12fbd263c5f3d52eefc6165dc3915edc12 (patch) | |
tree | 44027395376f63c5652f7113d10ff76fa65b52f0 /modern/src/settings | |
parent | c252efc594922430ef8b728cac898cb3a956fdb7 (diff) | |
download | trackermap-web-c3485f12fbd263c5f3d52eefc6165dc3915edc12.tar.gz trackermap-web-c3485f12fbd263c5f3d52eefc6165dc3915edc12.tar.bz2 trackermap-web-c3485f12fbd263c5f3d52eefc6165dc3915edc12.zip |
Add device image upload
Diffstat (limited to 'modern/src/settings')
-rw-r--r-- | modern/src/settings/DevicePage.js | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js index fb49dbcc..cecd2066 100644 --- a/modern/src/settings/DevicePage.js +++ b/modern/src/settings/DevicePage.js @@ -11,6 +11,7 @@ import { } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { DropzoneArea } from 'react-mui-dropzone'; import EditItemView from './components/EditItemView'; import EditAttributesView from './components/EditAttributesView'; import SelectField from '../common/components/SelectField'; @@ -23,6 +24,8 @@ import { useAdministrator } from '../common/util/permissions'; import SettingsMenu from './components/SettingsMenu'; import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes'; import useFeatures from '../common/util/useFeatures'; +import components from '../common/theme/components'; +import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ details: { @@ -46,6 +49,20 @@ const DevicePage = () => { const [item, setItem] = useState(); + const handleFiles = useCatch(async (files) => { + if (files.length > 0) { + const response = await fetch(`/api/devices/${item.id}/image`, { + method: 'POST', + body: files[0], + }); + if (response.ok) { + setItem({ ...item, attributes: { ...item.attributes, deviceImage: await response.text() } }); + } else { + throw Error(await response.text()); + } + } + }); + const validate = () => item && item.name && item.uniqueId; return ( @@ -124,6 +141,23 @@ const DevicePage = () => { )} </AccordionDetails> </Accordion> + {item.id && ( + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('attributeDeviceImage')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <DropzoneArea + acceptedFiles={['image/*']} + filesLimit={1} + onChange={handleFiles} + alertSnackbarProps={components.MuiSnackbar.defaultProps} + /> + </AccordionDetails> + </Accordion> + )} <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />}> <Typography variant="subtitle1"> |