Add device image

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}