Modify dashboard to display customers and riders with popup details #270

src/Controller/HomeController.php

@@ -39,12 +39,44 @@ class HomeController extends Controller
             $rider_id = $rider->getID();
             $coordinates = $rider_tracker->getRiderLocation($rider_id);
 
-            $long = $coordinates->getLongitude();
             $lat = $coordinates->getLatitude();
+            $long = $coordinates->getLongitude();
+
+            $jo = $rider->getActiveJobOrder();
+            if ($jo == null)
+            {
+                $has_jo = false;
+                $clat = 0;
+                $clong = 0;
+                $jo_data = [];
+            }
+            else
+            {
+                $has_jo = true;
+                $cust_loc = $jo->getCoordinates();
+                $clat = $cust_loc->getLatitude();
+                $clong = $cust_loc->getLongitude();
+                $jo_id = $jo->getID();
+                $jo_data = [
+                    'id' => $jo_id,
+                    'status' => $jo->getStatusText(),
+                    'stype' => $jo->getServiceTypeName(),
+                    'url' => $this->generateUrl('jo_all_form', ['id' => $jo_id]),
+                    'plate' => $jo->getCustomerVehicle()->getPlateNumber(),
+                    'cname' => $jo->getCustomer()->getNameDisplay(),
+                ];
+            }
+
 
             // use rider map label as key
             $rider_map_label = $rider->getMapLabel();
-            $locations[$rider_map_label] = array($lat, $long);
+            $locations[$rider_id] = [
+                'label' => $rider->getMapLabel(),
+                'loc' => [$lat, $long],
+                'has_jo' => $has_jo,
+                'cust_loc' => [$clat, $clong],
+                'jo' => $jo_data,
+            ];
 
         }
 

src/Entity/Customer.php

@@ -234,6 +234,11 @@ class Customer
         return $this->last_name;
     }
 
+    public function getNameDisplay()
+    {
+        return $this->first_name . ' ' . $this->last_name;
+    }
+
     public function setCustomerClassification($customer_classification)
     {
         $this->customer_classification = $customer_classification;

src/Entity/Rider.php

@@ -322,7 +322,7 @@ class Rider
 
     public function getMapLabel()
     {
-        $map_label = $this->id . '-' . $this->first_name .' ' . $this->last_name;
+        $map_label = $this->first_name .' ' . $this->last_name;
         return $map_label;
     }
 }

templates/home.html.twig

@@ -1,5 +1,46 @@
 {% extends 'base.html.twig' %}
 
+{% block stylesheets %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
+<style type="text/css">
+.marker-pin {
+  width: 30px;
+  height: 30px;
+  border-radius: 50% 50% 50% 0;
+  background: #c30b82;
+  position: absolute;
+  transform: rotate(-45deg);
+  left: 50%;
+  top: 50%;
+  margin: -15px 0 0 -15px;
+}
+
+.marker-pin::after {
+    content: '';
+    width: 24px;
+    height: 24px;
+    margin: 3px 0 0 3px;
+    background: #fff;
+    position: absolute;
+    border-radius: 50%;
+ }
+
+.custom-div-icon i {
+   position: absolute;
+   width: 22px;
+   font-size: 22px;
+   left: 0;
+   right: 0;
+   margin: 10px auto;
+   text-align: center;
+}
+
+.custom-div-icon i.awesome {
+   margin: 12px auto;
+   font-size: 17px;
+</style>
+{% endblock %}
+
 {% block body %}
     <div id="dashboard_map" style="height:600px;"></div>
     <!-- BEGIN: Subheader -->

templates/map/initOpenStreetMap.js

@@ -20,33 +20,86 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
         accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
     }).addTo(map);
 
-    // rider marker layer group
+    // layer groups
     // .addTo(map) --> this will display your riders by default
-    var ridersLayerGroup = L.layerGroup().addTo(map);
+    var lg_avail_rider = L.layerGroup().addTo(map);
+    var lg_jo_rider = L.layerGroup().addTo(map);
+    var lg_cust = L.layerGroup().addTo(map);
 
     // this little snippet will not display your riders by default.
     // Instead, a toggle button will display in the map, with a checkbox with text Riders.
     // Check that to display the riders
     //var ridersLayerGroup = L.layerGroup();
 
+    // create icons
+    var icon_rider_active_jo = L.divIcon({
+        className: 'custom-div-icon',
+        html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
+        iconSize: [39, 42],
+        iconAnchor: [15, 42]
+    });
+    var icon_rider_available = L.divIcon({
+        className: 'custom-div-icon',
+        html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
+        iconSize: [39, 42],
+        iconAnchor: [15, 42]
+    });
+    var icon_customer = L.divIcon({
+        className: 'custom-div-icon',
+        html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
+        iconSize: [39, 42],
+        iconAnchor: [15, 42]
+    });
+
     $.ajax({
         url: '{{ path('rider_locations') }}',
     }).done(function(response) {
         // clear all markers
-        ridersLayerGroup.clearLayers();
+        lg_avail_rider.clearLayers();
+        lg_jo_rider.clearLayers();
+        lg_cust.clearLayers();
 
         // get riders and mark
         var riders = response.riders;
 
-        $.each(riders, function(rider_id, point) {
+        $.each(riders, function(rider_id, rider_data) {
+            // rider location
+            var point = rider_data['loc'];
             var lat = point[0];
             var long = point[1];
 
-            // create markers
+            // customer location
-            var marker = L.marker([lat, long]).bindPopup(rider_id);
+            var cloc = rider_data['cust_loc'];
+            var clat = cloc[0];
+            var clong = cloc[1];
 
-            // add marker/layer to layergroup
+            // rider popup content
-            ridersLayerGroup.addLayer(marker);
+            rider_popup = '<strong>' + rider_data['label'] + '</strong>';
+
+            // create rider markers
+            if (rider_data['has_jo']) {
+                var jo_data = rider_data['jo'];
+                rider_popup += '<br>';
+                rider_popup += '<a href="' + jo_data['url'] + '">Job Order #' + jo_data['id'] + '</a><br>';
+                rider_popup += jo_data['stype'] + '<br>';
+                rider_popup += jo_data['status'] + '<br><br>';
+                rider_popup += jo_data['cname'] + '<br>';
+                rider_popup += jo_data['plate'];
+
+                var cust_popup = '<strong>' + jo_data['cname'] + '</strong><br>';
+                cust_popup += jo_data['plate'] + '<br>';
+                cust_popup += '<a href="' + jo_data['url'] + '">Job Order #' + jo_data['id'] + '</a><br>';
+                cust_popup += jo_data['stype'] + '<br>';
+                cust_popup += jo_data['status'];
+
+                var rider_marker = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
+                var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup(cust_popup);
+                lg_cust.addLayer(cust_marker);
+                lg_jo_rider.addLayer(rider_marker);
+            } else {
+                var rider_marker = L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
+                lg_avail_rider.addLayer(rider_marker);
+            }
         });
     });
 
@@ -57,7 +110,9 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
 
     // overlay layer
     var overlayMaps = {
-        'Riders' : ridersLayerGroup
+        'Available Riders' : lg_avail_rider,
+        'JO Riders' : lg_jo_rider,
+        'Customers' : lg_cust 
     }
     
     L.control.layers(baseMaps, overlayMaps).addTo(map);