aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-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
3 files changed, 16 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}