Add rider name to rider labels. #457

config/routes/rider.yaml

@@ -61,3 +61,9 @@ rider_ajax_avialable:
     path: /riders/{id}/available
     controller: App\Controller\RiderController::ajaxAvailable
     methods: [GET]
+
+rider_ajax_rider_name:
+    path: /riders/{id}/name
+    controller: App\Controller\RiderController::ajaxRiderName
+    methods: [GET]
+

public/assets/js/dashboard_map.js

@@ -4,6 +4,7 @@ class DashboardMap {
         this.rider_markers = rider_markers;
         this.cust_markers = cust_markers;
         this.rider_availability = {};
+        this.rider_names = {};
 
         // layer groups
         this.layer_groups = {
@@ -304,13 +305,41 @@ class DashboardMap {
                 var lng = data.longitude;
                 var name = '';
 
-                if (data.has_jo)
+                if (my.rider_names.hasOwnProperty(id)) {
-                    my.putRiderActiveJOMarker(id, lat, lng, name);
+                    name = my.rider_names[id];
-                else
+
-                    my.putRiderAvailableMarker(id, lat, lng, name);
+                    if (data.has_jo)
+                        my.putRiderActiveJOMarker(id, lat, lng, name);
+                    else
+                        my.putRiderAvailableMarker(id, lat, lng, name)
+
+                } else {
+                    getRiderName(id, my.options.rider_name_url, function(name) {
+                        my.rider_names[id] = name;
+
+                        if (data.has_jo)
+                            my.putRiderActiveJOMarker(id, lat, lng, name);
+                        else
+                            my.putRiderAvailableMarker(id, lat, lng, name)
+                    });
+                }
             });
 
             // console.log(rider_markers);
         });
     }
 }
+
+function getRiderName(id, url, callback) {
+    var name = '';
+    var rider_url = url.replace('[id]', id);
+
+    $.ajax({
+        method: "GET",
+        url: rider_url
+    }).done(function(response) {
+        name = response.rider_name;
+        callback(name);
+    });
+}
+ 

src/Controller/RiderController.php

@@ -616,11 +616,11 @@ class RiderController extends Controller
         return $response;
     }
 
-    public function ajaxRiderName(EntityManagerInterface $em, Request $req)
+    /**
+     * @ParamConverter("rider", class="App\Entity\Rider")
+     */
+    public function ajaxRiderName(EntityManagerInterface $em, Rider $rider)
     {
-        $rider_id = $req->query->get('id');
-
-        $rider = $em->getRepository(Rider::class)->find($rider_id);
         $rider_name = '';
         if ($rider != null)
             $rider_name = $rider->getFullName();
@@ -629,4 +629,5 @@ class RiderController extends Controller
             'rider_name' => $rider_name,
         ]);
     }
+
 }

templates/home.html.twig

@@ -35,7 +35,8 @@ function initMap(r_markers, c_markers, icons) {
         'zoom': 13,
         'rider_popup_url': '/riders/[id]/popup',
         'cust_popup_url': '/job-order/[id]/popup',
-        'icons': icons
+        'icons': icons,
+        'rider_name_url': '/riders/[id]/name'
     };
 
     var dashmap = new DashboardMap(options, r_markers, c_markers);
@@ -45,7 +46,7 @@ function initMap(r_markers, c_markers, icons) {
     return dashmap;
 }
 
-function initEventHandler(dashmap, icons, ssl) {
+function initEventHandler(dashmap) {
     var options = {
         'track_jo': true,
         'track_rider': true,
@@ -54,12 +55,11 @@ function initEventHandler(dashmap, icons, ssl) {
             'rider_status': 'rider/+/status',
             'jo_location': 'jo/+/location',
             'jo_status': 'jo/+/status',
-            'jo_origin': 'jo/+/origin',
+            'jo_origin': 'jo/+/origin'
-            'rider_availability': 'rider/+/availability'
         },
     };
 
-    var event_handler = new MapEventHandler(options, dashmap, ssl);
+    var event_handler = new MapEventHandler(options, dashmap);
     event_handler.connect('{{ app.user.getID }}', '{{ mqtt_host }}', {{ mqtt_port }});
 }
 
@@ -95,13 +95,8 @@ var icons = {
     var r_markers = {};
     var c_markers = {};
 
-    var ssl = false;
-    {% if ssl_enable == 'true' %}
-        ssl = true;
-    {% endif %}
-
     var dashmap = initMap(r_markers, c_markers, icons);
-    initEventHandler(dashmap, icons, ssl);
+    initEventHandler(dashmap, icons);
 {% endif %}
 
 </script>