diff options
| author | Anton Tananaev <anton@traccar.org> | 2022-07-03 20:18:52 -0700 |
|---|---|---|
| committer | Anton Tananaev <anton@traccar.org> | 2022-07-03 20:18:52 -0700 |
| commit | c252efc594922430ef8b728cac898cb3a956fdb7 (patch) | |
| tree | a163493ee2ad0ef4268296c3484f65bdae9b49f9 | |
| parent | ec814fb2315f6693d2c8c394da6997db3da15397 (diff) | |
| download | trackermap-web-c252efc594922430ef8b728cac898cb3a956fdb7.tar.gz trackermap-web-c252efc594922430ef8b728cac898cb3a956fdb7.tar.bz2 trackermap-web-c252efc594922430ef8b728cac898cb3a956fdb7.zip | |
Add device image
| -rw-r--r-- | modern/src/common/attributes/useDeviceAttributes.js | 4 | ||||
| -rw-r--r-- | modern/src/common/theme/dimensions.js | 3 | ||||
| -rw-r--r-- | modern/src/main/StatusCard.js | 10 | ||||
| -rw-r--r-- | web/l10n/en.json | 1 |
4 files changed, 17 insertions, 1 deletions
diff --git a/modern/src/common/attributes/useDeviceAttributes.js b/modern/src/common/attributes/useDeviceAttributes.js index f272904a..eab9b8f6 100644 --- a/modern/src/common/attributes/useDeviceAttributes.js +++ b/modern/src/common/attributes/useDeviceAttributes.js @@ -10,6 +10,10 @@ export default (t) => useMemo(() => ({ name: t('attributeDevicePassword'), type: 'string', }, + deviceImage: { + name: t('attributeDeviceImage'), + type: 'string', + }, 'processing.copyAttributes': { name: t('attributeProcessingCopyAttributes'), type: 'string', diff --git a/modern/src/common/theme/dimensions.js b/modern/src/common/theme/dimensions.js index 2e8d7e5d..3d014895 100644 --- a/modern/src/common/theme/dimensions.js +++ b/modern/src/common/theme/dimensions.js @@ -8,5 +8,6 @@ export default { eventsDrawerWidth: '320px', bottomBarHeight: 56, popupMapOffset: 300, - popupMaxWidth: 272, + popupMaxWidth: 288, + popupImageHeight: 144, }; diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js index 41cd0b53..e4734437 100644 --- a/modern/src/main/StatusCard.js +++ b/modern/src/main/StatusCard.js @@ -13,6 +13,7 @@ import { TableCell, Menu, MenuItem, + CardMedia, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import CloseIcon from '@mui/icons-material/Close'; @@ -95,6 +96,8 @@ const StatusCard = ({ deviceId, onClose }) => { const device = useSelector((state) => state.devices.items[deviceId]); const position = useSelector((state) => state.positions.items[deviceId]); + const deviceImage = device?.attributes?.deviceImage; + const positionAttributes = usePositionAttributes(t); const [positionItems] = usePersistedState('positionItems', ['speed', 'address', 'totalDistance', 'course']); @@ -118,6 +121,13 @@ const StatusCard = ({ deviceId, onClose }) => { <> {device && ( <Card elevation={3} className={classes.card}> + {deviceImage && ( + <CardMedia + component="img" + height={dimensions.popupImageHeight} + image={`/api/media/${device.uniqueId}/${deviceImage}`} + /> + )} <div className={classes.header}> <Typography variant="body2" color="textSecondary"> {device.name} diff --git a/web/l10n/en.json b/web/l10n/en.json index 4da2fdf1..8a264fbd 100644 --- a/web/l10n/en.json +++ b/web/l10n/en.json @@ -96,6 +96,7 @@ "attributeReportIgnoreOdometer": "Report: Ignore Odometer", "attributeWebReportColor": "Web: Report Color", "attributeDevicePassword": "Device Password", + "attributeDeviceImage": "Device Image", "attributeDeviceInactivityStart": "Device Inactivity Start", "attributeDeviceInactivityPeriod": "Device Inactivity Period", "attributeProcessingCopyAttributes": "Processing: Copy Attributes", |