Better map icon handling

3 files changed, 54 insertions, 7 deletions

diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js
index 022da390..108c3397 100644
--- a/modern/src/main/DevicesList.js
+++ b/modern/src/main/DevicesList.js
@@ -18,7 +18,6 @@ import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
 import FlashOnIcon from '@mui/icons-material/FlashOn';
 import FlashOffIcon from '@mui/icons-material/FlashOff';
 import ErrorIcon from '@mui/icons-material/Error';
-
 import moment from 'moment';
 import { devicesActions } from '../store';
 import { useEffectAsync } from '../reactHelper';
@@ -26,6 +25,7 @@ import {
   formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor,
 } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import { mapIcons } from '../map/core/preloadImages';
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -86,7 +86,7 @@ const DeviceRow = ({ data, index, style }) => {
       <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item.id))}>
         <ListItemAvatar>
           <Avatar>
-            <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
+            <img className={classes.icon} src={mapIcons[item.category || 'default']} alt="" />
           </Avatar>
         </ListItemAvatar>
         <ListItemText
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index d991bd6a..5a65f4c7 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -32,6 +32,7 @@ import usePersistedState from '../common/util/usePersistedState';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { devicesActions } from '../store';
 import { useCatch } from '../reactHelper';
+import { mapIcons } from '../map/core/preloadImages';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -110,7 +111,7 @@ const StatusCard = ({ deviceId, onClose }) => {
           <CardHeader
             avatar={(
               <Avatar>
-                <img className={classes.icon} src={`images/icon/${device.category || 'default'}.svg`} alt="" />
+                <img className={classes.icon} src={mapIcons[device.category || 'default']} alt="" />
               </Avatar>
             )}
             action={(
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
index e0796e1f..24538146 100644
--- a/modern/src/map/core/preloadImages.js
+++ b/modern/src/map/core/preloadImages.js
@@ -1,16 +1,62 @@
 import palette from '../../common/theme/palette';
-import deviceCategories from '../../common/util/deviceCategories';
 import { loadImage, prepareIcon } from './mapUtil';
 
+import backgroundSvg from '../../../public/images/background.svg';
+import animalSvg from '../../../public/images/icon/animal.svg';
+import bicycleSvg from '../../../public/images/icon/bicycle.svg';
+import boatSvg from '../../../public/images/icon/boat.svg';
+import busSvg from '../../../public/images/icon/bus.svg';
+import carSvg from '../../../public/images/icon/car.svg';
+import craneSvg from '../../../public/images/icon/crane.svg';
+import defaultSvg from '../../../public/images/icon/default.svg';
+import helicopterSvg from '../../../public/images/icon/helicopter.svg';
+import motorcycleSvg from '../../../public/images/icon/motorcycle.svg';
+import offroadSvg from '../../../public/images/icon/offroad.svg';
+import personSvg from '../../../public/images/icon/person.svg';
+import pickupSvg from '../../../public/images/icon/pickup.svg';
+import planeSvg from '../../../public/images/icon/plane.svg';
+import scooterSvg from '../../../public/images/icon/scooter.svg';
+import shipSvg from '../../../public/images/icon/ship.svg';
+import tractorSvg from '../../../public/images/icon/tractor.svg';
+import trainSvg from '../../../public/images/icon/train.svg';
+import tramSvg from '../../../public/images/icon/tram.svg';
+import trolleybusSvg from '../../../public/images/icon/trolleybus.svg';
+import truckSvg from '../../../public/images/icon/truck.svg';
+import vanSvg from '../../../public/images/icon/van.svg';
+
+export const mapIcons = {
+  animal: animalSvg,
+  bicycle: bicycleSvg,
+  boat: boatSvg,
+  bus: busSvg,
+  car: carSvg,
+  crane: craneSvg,
+  default: defaultSvg,
+  helicopter: helicopterSvg,
+  motorcycle: motorcycleSvg,
+  offroad: offroadSvg,
+  person: personSvg,
+  pickup: pickupSvg,
+  plane: planeSvg,
+  scooter: scooterSvg,
+  ship: shipSvg,
+  tractor: tractorSvg,
+  train: trainSvg,
+  tram: tramSvg,
+  trolleybus: trolleybusSvg,
+  truck: truckSvg,
+  van: vanSvg,
+};
+
 export const mapImages = {};
 
 export default async () => {
-  const background = await loadImage('images/background.svg');
+  const background = await loadImage(backgroundSvg);
   mapImages.background = await prepareIcon(background);
-  await Promise.all(deviceCategories.map(async (category) => {
+  await Promise.all(Object.keys(mapIcons).map(async (category) => {
     const results = [];
     ['positive', 'negative', 'neutral'].forEach((color) => {
-      results.push(loadImage(`images/icon/${category}.svg`).then((icon) => {
+      results.push(loadImage(mapIcons[category]).then((icon) => {
         mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette.colors[color]);
       }));
     });