aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-07-03 20:18:52 -0700
committerAnton Tananaev <anton@traccar.org>2022-07-03 20:18:52 -0700
commitc252efc594922430ef8b728cac898cb3a956fdb7 (patch)
treea163493ee2ad0ef4268296c3484f65bdae9b49f9
parentec814fb2315f6693d2c8c394da6997db3da15397 (diff)
downloadtrackermap-web-c252efc594922430ef8b728cac898cb3a956fdb7.tar.gz
trackermap-web-c252efc594922430ef8b728cac898cb3a956fdb7.tar.bz2
trackermap-web-c252efc594922430ef8b728cac898cb3a956fdb7.zip
Add device image
-rw-r--r--modern/src/common/attributes/useDeviceAttributes.js4
-rw-r--r--modern/src/common/theme/dimensions.js3
-rw-r--r--modern/src/main/StatusCard.js10
-rw-r--r--web/l10n/en.json1
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",