feat: unassigned jobs have different color markers

 references #447

Author: blackbirdem

src/fragments/html-marker/HtmlMarker.vue

@@ -2,7 +2,7 @@
   <div>
     <div :style="{background: color}" class="custom-html-icon-div">
       <img alt="Map marker icon"v-if="markerImg" class="custom-html-icon-img" :src="markerImg">
-      <div v-else-if="markerNumber" class="custom-html-icon-txt" :class="{'double-digit-text': doubleDigitText, 'triple-digit-text': tripleDigitText, 'four-digit-text': fourDigitText}">{{markerNumber}} </div>
+      <div v-else-if="markerNumber" class="custom-html-icon-txt" :style="{color: textColor}" :class="{'double-digit-text': doubleDigitText, 'triple-digit-text': tripleDigitText, 'four-digit-text': fourDigitText}">{{markerNumber}} </div>
     </div>
   </div>
 </template>

src/fragments/html-marker/html-marker.css

@@ -23,8 +23,7 @@
   margin-left: 7px;
   margin-top: 7px;
   height: 21px;
-  font-weight: 600;
-  color:white
+  font-weight: 600
 }
 
 .custom-html-icon-txt.double-digit-text {

src/fragments/html-marker/html-marker.js

@@ -4,6 +4,10 @@ export default {
       Type: String,
       default: 'white'
     },
+    textColor: {
+      Type: String,
+      default: 'white'
+    },
     markerImg: {
       type: String,
       required: false

src/fragments/map-view/map-view.js

@@ -399,7 +399,7 @@ export default {
         markers = this.$root.appHooks.run('markersCreated', markers)
         return markers
       } else if (markersMapViewData.jobs.length || markersMapViewData.vehicles.length) {
-        return GeoUtils.buildOptimizationMarkers(markersMapViewData.jobs, markersMapViewData.vehicles)
+        return GeoUtils.buildOptimizationMarkers(markersMapViewData.jobs, markersMapViewData.vehicles, this.localMapViewData.rawData.unassigned)
       }
     },
     /**

src/support/geo-utils.js

@@ -606,13 +606,18 @@ const geoUtils = {
     }
     return lng
   },
-  buildOptimizationMarkers(jobs, vehicles) {
-    const markers = []
+  buildOptimizationMarkers(jobs, vehicles, unassignedJobs) {
+    let markers = []
+    let unassignedJobIds = []
+    for (const uaj of unassignedJobs) {
+      unassignedJobIds.push(uaj.id)
+    }
     for (const job of jobs) {
       if (job.lng && job.lat) {
         // Build the marker
         let propsData = {
-          color: theme.dark,
+          color: unassignedJobIds.includes(job.id) ? theme.neutral : theme.dark,
+          textColor: unassignedJobIds.includes(job.id) ? 'black' : 'white',
           markerNumber: job.id.toString()
         }
         const htmlMarkerClass = Vue.extend(HtmlMarker)