From 932bd7c77047088c9381fbc0a08b752d48ee4545 Mon Sep 17 00:00:00 2001
From: Korina Cordero <cordero.korina@gmail.com>
Date: Wed, 15 Apr 2020 07:32:05 +0000
Subject: [PATCH] Add mobile customer layer to the dashboard map.

---
 public/assets/js/dashboard_map.js | 46 +++++++++++++++++++++++++++++--
 src/Controller/HomeController.php | 21 ++++++++++++++
 templates/home.html.twig          | 13 +++++++--
 3 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/public/assets/js/dashboard_map.js b/public/assets/js/dashboard_map.js
index 6cba7d68..16f8a78d 100644
--- a/public/assets/js/dashboard_map.js
+++ b/public/assets/js/dashboard_map.js
@@ -1,14 +1,16 @@
 class DashboardMap {
-    constructor(options, rider_markers, cust_markers) {
+    constructor(options, rider_markers, cust_markers, mc_markers) {
         this.options = options;
         this.rider_markers = rider_markers;
         this.cust_markers = cust_markers;
+        this.mobile_cust_markers = mc_markers;
 
         // layer groups
         this.layer_groups = {
             'rider_available': L.layerGroup(),
             'rider_active_jo': L.layerGroup(),
-            'customer': L.layerGroup()
+            'customer': L.layerGroup(),
+            'mobile_customer': L.layerGroup(),
         };
     }
 
@@ -31,6 +33,7 @@ class DashboardMap {
         this.layer_groups.rider_available.addTo(this.map);
         this.layer_groups.rider_active_jo.addTo(this.map);
         this.layer_groups.customer.addTo(this.map);
+        this.layer_groups.mobile_customer.addTo(this.map);
 
         // base layer
         var baseMaps = {
@@ -42,7 +45,8 @@ class DashboardMap {
             var overlayMaps = {
                 'Available Riders' : this.layer_groups.rider_available,
                 'JO Riders' : this.layer_groups.rider_active_jo,
-                'Customers' : this.layer_groups.customer
+                'Customers' : this.layer_groups.customer,
+                'Mobile Customers': this.layer_groups.mobile_customer
             }
 
             L.control.layers(baseMaps, overlayMaps).addTo(this.map);
@@ -133,6 +137,32 @@ class DashboardMap {
         layer_group.removeLayer(markers[id]);
     }
 
+    putMobileCustomerMarker(id, lat, lng) {
+        this.putMarker(
+            id,
+            lat,
+            lng,
+            this.mobile_cust_markers,
+            this.options.icons.mobile_customer,
+            this.layer_groups.mobile_customer,
+            this.options.cust_popup_url
+        );
+    }
+
+    removeMobileCustomerMarker(id) {
+        console.log('removing mobile customer marker for ' + id);
+        var layer_group = this.layer_groups.mobile_customer;
+        var markers = this.mobile_cust_markers;
+
+        // no customer marker with that id
+        if (!markers.hasOwnProperty(id)) {
+            console.log('no such marker to remove');
+            return;
+        }
+
+        layer_group.removeLayer(markers[id]);
+    }
+
     putRiderAvailableMarker(id, lat, lng) {
         this.putMarker(
             id,
@@ -180,10 +210,12 @@ class DashboardMap {
             my.layer_groups.rider_available.clearLayers();
             my.layer_groups.rider_active_jo.clearLayers();
             my.layer_groups.customer.clearLayers();
+            my.layer_groups.mobile_customer.clearLayers();
 
             // get riders and job orders
             var riders = response.riders;
             var jos = response.jos;
+            var mobile_jos = response.mobile_jos;
 
             // job orders
             $.each(jos, function(id, data) {
@@ -193,6 +225,14 @@ class DashboardMap {
                 my.putCustomerMarker(id, lat, lng);
             });
 
+            // mobile app job orders
+            $.each(mobile_jos, function(id, data) {
+                var lat = data.latitude;
+                var lng = data.longitude;
+
+                my.putMobileCustomerMarker(id, lat, lng);
+            });
+
             // riders
             $.each(riders, function(id, data) {
                 var lat = data.latitude;
diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php
index 5ba473af..cbc4afa7 100644
--- a/src/Controller/HomeController.php
+++ b/src/Controller/HomeController.php
@@ -13,7 +13,9 @@ use App\Service\JobOrderCache;
 use App\Service\RiderCache;
 
 use App\Entity\Rider;
+use App\Entity\JobOrder;
 
+use App\Ramcar\TransactionOrigin;
 
 class HomeController extends Controller
 {
@@ -63,6 +65,24 @@ class HomeController extends Controller
                 $riders[$rider_id]['has_jo'] = true;
         }
 
+        // get JOs with transaction origin TransactionOrigin::MOBILE_APP from list of active_jos
+        $mobile_jos = [];
+        foreach ($active_jos as $jo_id => $jo_data)
+        {
+            $jo = $em->getRepository(JobOrder::class)->find($jo_id);
+            if ($jo == null)
+            {
+                unset($active_jos[$jo_id]);
+                continue;
+            }
+
+            if ($jo->getSource() == TransactionOrigin::MOBILE_APP)
+            {
+                $mobile_jos[$jo_id] = $jo_data;
+                unset($active_jos[$jo_id]);
+            }
+        }
+
         // get active riders from cache
         // get all riders
         /*
@@ -120,6 +140,7 @@ class HomeController extends Controller
         return $this->json([
             'jos' => $active_jos,
             'riders' => $riders,
+            'mobile_jos' => $mobile_jos,
         ]);
 
     }
diff --git a/templates/home.html.twig b/templates/home.html.twig
index 05fedfd9..c9e4953e 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -20,7 +20,7 @@
 {% endif %}
 <script>
 
-function initMap(r_markers, c_markers, icons) {
+function initMap(r_markers, c_markers, mc_markers, icons) {
     var default_lat = {% trans %}default_lat{% endtrans %};
     var default_lng = {% trans %}default_long{% endtrans %};
 
@@ -38,7 +38,7 @@ function initMap(r_markers, c_markers, icons) {
         'icons': icons
     };
 
-    var dashmap = new DashboardMap(options, r_markers, c_markers);
+    var dashmap = new DashboardMap(options, r_markers, c_markers, mc_markers);
     dashmap.initialize();
     dashmap.loadLocations('{{ path('rider_locations') }}');
 
@@ -81,13 +81,20 @@ var icons = {
         html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
         iconSize: [39, 42],
         iconAnchor: [15, 42]
+    }),
+    'mobile_customer': L.divIcon({
+        className: 'map-div-icon',
+        html: "<div style='background-color:#A200FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
+        iconSize: [39, 42],
+        iconAnchor: [15, 42]
     })
 };
 
     var r_markers = {};
     var c_markers = {};
+    var mc_markers = {};
 
-    var dashmap = initMap(r_markers, c_markers, icons);
+    var dashmap = initMap(r_markers, c_markers, mc_markers, icons);
     initEventHandler(dashmap, icons);
 {% endif %}