diff options
| -rw-r--r-- | modern/src/main/DevicesList.js | 4 | ||||
| -rw-r--r-- | modern/src/main/StatusCard.js | 3 | ||||
| -rw-r--r-- | modern/src/map/core/preloadImages.js | 54 |
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]); })); }); |