From 89928e3a9a9356b96c2d02c9682161295ad73641 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Tue, 5 Jul 2022 17:48:00 -0700
Subject: Support position color (fix #805)

---
 .../src/common/attributes/usePositionAttributes.js |  4 +++
 modern/src/common/theme/palette.js                 | 29 +++++++++++++---------
 modern/src/map/MapPositions.js                     |  2 +-
 modern/src/map/core/preloadImages.js               |  2 +-
 4 files changed, 23 insertions(+), 14 deletions(-)

(limited to 'modern')

diff --git a/modern/src/common/attributes/usePositionAttributes.js b/modern/src/common/attributes/usePositionAttributes.js
index b9eb354c..1eb9d067 100644
--- a/modern/src/common/attributes/usePositionAttributes.js
+++ b/modern/src/common/attributes/usePositionAttributes.js
@@ -336,4 +336,8 @@ export default (t) => useMemo(() => ({
     name: t('positionDriverUniqueId'),
     type: 'string',
   },
+  color: {
+    name: t('attributeColor'),
+    type: 'string',
+  },
 }), [t]);
diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js
index 1ef57713..e0d9c35f 100644
--- a/modern/src/common/theme/palette.js
+++ b/modern/src/common/theme/palette.js
@@ -2,23 +2,28 @@ import {
   amber, grey, green, indigo, red, common,
 } from '@mui/material/colors';
 
+const colors = {
+  white: common.white,
+  background: grey[50],
+  primary: indigo[900],
+  secondary: green[500],
+  positive: green[500],
+  medium: amber[700],
+  negative: red[500],
+  neutral: grey[500],
+  geometry: '#3bb2d0',
+};
+
 export default {
   background: {
-    default: grey[50],
+    default: colors.background,
   },
   primary: {
-    main: indigo[900],
+    main: colors.primary,
   },
   secondary: {
-    main: green[500],
-    contrastText: common.white,
-  },
-  colors: {
-    white: common.white,
-    positive: green[500],
-    medium: amber[700],
-    negative: red[500],
-    neutral: grey[500],
-    geometry: '#3bb2d0',
+    main: colors.secondary,
+    contrastText: colors.white,
   },
+  colors,
 };
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index 070ec0c8..89a48df1 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -20,7 +20,7 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
       deviceId: position.deviceId,
       name: device.name,
       category: device.category || 'default',
-      color: showStatus ? getStatusColor(device.status) : 'neutral',
+      color: showStatus ? position.attributes.color || getStatusColor(device.status) : 'neutral',
     };
   };
 
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
index c66ec5de..8649a347 100644
--- a/modern/src/map/core/preloadImages.js
+++ b/modern/src/map/core/preloadImages.js
@@ -57,7 +57,7 @@ export default async () => {
   mapImages.direction = await prepareIcon(await loadImage(directionSvg));
   await Promise.all(Object.keys(mapIcons).map(async (category) => {
     const results = [];
-    ['positive', 'negative', 'neutral'].forEach((color) => {
+    ['primary', 'positive', 'negative', 'neutral'].forEach((color) => {
       results.push(loadImage(mapIcons[category]).then((icon) => {
         mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette.colors[color]);
       }));
-- 
cgit v1.2.3