Add functionality to job order tracking page #270

public/assets/js/dashboard_map.js

@@ -37,14 +37,16 @@ class DashboardMap {
             'Streets': streets
         };
 
-        // overlay layer
+        if (this.options.display_overlay) {
-        var overlayMaps = {
+            // overlay layer
-            'Available Riders' : this.layer_groups.rider_available,
+            var overlayMaps = {
-            'JO Riders' : this.layer_groups.rider_active_jo,
+                'Available Riders' : this.layer_groups.rider_available,
-            'Customers' : this.layer_groups.customer
+                'JO Riders' : this.layer_groups.rider_active_jo,
-        }
+                'Customers' : this.layer_groups.customer
+            }
 
-        L.control.layers(baseMaps, overlayMaps).addTo(this.map);
+            L.control.layers(baseMaps, overlayMaps).addTo(this.map);
+        }
 
         return this.map;
     }
@@ -61,19 +63,22 @@ class DashboardMap {
         markers[id] = L.marker(
             [lat, lng],
             { icon: icon }
-        ).bindPopup('Loading...')
+        ).addTo(layer_group);
-        .addTo(layer_group);
 
-        // bind ajax for popup
+        if (my.options.enable_popup) {
-        markers[id].on('click', function(e) {
+            markers[id].bindPopup('Loading...');
-            var popup = e.target.getPopup();
+
-            var url = popup_url.replace('[id]', id);
+            // bind ajax for popup
-            console.log(url);
+            markers[id].on('click', function(e) {
-            $.get(url).done(function(data) {
+                var popup = e.target.getPopup();
-                popup.setContent(data);
+                var url = popup_url.replace('[id]', id);
-                popup.update();
+                console.log(url);
+                $.get(url).done(function(data) {
+                    popup.setContent(data);
+                    popup.update();
+                });
             });
-        });
+        }
     }
 
     putCustomerMarker(id, lat, lng) {
@@ -160,30 +165,6 @@ class DashboardMap {
                     my.putRiderAvailableMarker(id, lat, lng);
             });
 
-            /*
-            $.each(riders, function(rider_id, rider_data) {
-                // rider location
-                var point = rider_data['loc'];
-                var lat = point[0];
-                var lng = point[1];
-
-                // customer location
-                var cloc = rider_data['cust_loc'];
-                var clat = cloc[0];
-                var clng = cloc[1];
-
-                // create rider markers
-                if (rider_data['has_jo']) {
-                    var jo_data = rider_data['jo'];
-
-                    // my.putCustomerMarker(jo_data['id'], clat, clng);
-                    my.putRiderActiveJOMarker(rider_id, lat, lng);
-                } else {
-                    my.putRiderAvailableMarker(rider_id, lat, lng);
-                }
-            });
-            */
-
             // console.log(rider_markers);
         });
     }

public/assets/js/map_mqtt.js

@@ -28,13 +28,17 @@ class MapEventHandler {
         var my = icontext.invocationContext;
 
         // subscribe to rider locations
-        console.log('subscribing to ' + my.options.channels.rider_location);
+        if (my.options.track_rider) {
-        my.mqtt.subscribe(my.options.channels.rider_location);
+            console.log('subscribing to ' + my.options.channels.rider_location);
+            my.mqtt.subscribe(my.options.channels.rider_location);
+        }
 
         // subscribe to jo locations
-        console.log('subscribing to ' + my.options.channels.jo_location);
+        if (my.options.track_jo) {
-        my.mqtt.subscribe(my.options.channels.jo_location);
+            console.log('subscribing to ' + my.options.channels.jo_location);
-        my.mqtt.subscribe(my.options.channels.jo_status);
+            my.mqtt.subscribe(my.options.channels.jo_location);
+            my.mqtt.subscribe(my.options.channels.jo_status);
+        }
     }
 
     onMessage(msg) {

public/assets/js/tracker_map.js

@@ -1,182 +0,0 @@
-class DashboardMap {
-    constructor(options, rider_markers, cust_markers) {
-        this.options = options;
-        this.rider_markers = rider_markers;
-        this.cust_markers = cust_markers;
-
-        // layer groups
-        this.layer_groups = {
-            'rider_available': L.layerGroup(),
-            'rider_active_jo': L.layerGroup(),
-            'customer': L.layerGroup()
-        };
-    }
-
-    initialize() {
-        // main map
-        this.map = L.map(this.options.div_id).setView(
-            [this.options.center_lat, this.options.center_lng],
-            this.options.zoom
-        );
-
-        // add tile layer
-        var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-            maxZoom: 18,
-            id: 'mapbox/streets-v11',
-            accessToken: this.options.access_token
-        }).addTo(this.map);
-
-        // layer groups
-        this.layer_groups.rider_available.addTo(this.map);
-        this.layer_groups.rider_active_jo.addTo(this.map);
-        this.layer_groups.customer.addTo(this.map);
-
-        // base layer
-        var baseMaps = {
-            'Streets': streets
-        };
-
-        // overlay layer
-        return this.map;
-    }
-
-    putMarker(id, lat, lng, markers, icon, layer_group, popup_url) {
-        var my = this;
-        // existing marker
-        if (markers.hasOwnProperty(id)) {
-            markers[id].setLatLng(L.latLng(lat, lng));
-            return;
-        }
-
-        // new marker
-        markers[id] = L.marker(
-            [lat, lng],
-            { icon: icon }
-        ).bindPopup('Loading...')
-        .addTo(layer_group);
-
-        // bind ajax for popup
-        markers[id].on('click', function(e) {
-            var popup = e.target.getPopup();
-            var url = popup_url.replace('[id]', id);
-            console.log(url);
-            $.get(url).done(function(data) {
-                popup.setContent(data);
-                popup.update();
-            });
-        });
-    }
-
-    putCustomerMarker(id, lat, lng) {
-        this.putMarker(
-            id,
-            lat,
-            lng,
-            this.cust_markers,
-            this.options.icons.customer,
-            this.layer_groups.customer,
-            this.options.cust_popup_url
-        );
-    }
-
-    removeCustomerMarker(id) {
-        console.log('removing customer marker for ' + id);
-        var layer_group = this.layer_groups.customer;
-        var markers = this.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,
-            lat,
-            lng,
-            this.rider_markers,
-            this.options.icons.rider_available,
-            this.layer_groups.rider_available,
-            this.options.rider_popup_url
-        );
-    }
-
-    putRiderActiveJOMarker(id, lat, lng) {
-        this.putMarker(
-            id,
-            lat,
-            lng,
-            this.rider_markers,
-            this.options.icons.rider_active_jo,
-            this.layer_groups.rider_active_jo,
-            this.options.rider_popup_url
-        );
-    }
-
-    loadLocations(location_url) {
-        console.log(this.rider_markers);
-        var my = this;
-        $.ajax({
-            url: location_url,
-        }).done(function(response) {
-            // clear all markers
-            my.layer_groups.rider_available.clearLayers();
-            my.layer_groups.rider_active_jo.clearLayers();
-            my.layer_groups.customer.clearLayers();
-
-            // get riders and job orders
-            var riders = response.riders;
-            var jos = response.jos;
-
-            // job orders
-            $.each(jos, function(id, data) {
-                var lat = data.latitude;
-                var lng = data.longitude;
-
-                my.putCustomerMarker(id, lat, lng);
-            });
-
-            // riders
-            $.each(riders, function(id, data) {
-                var lat = data.latitude;
-                var lng = data.longitude;
-
-                if (data.has_jo)
-                    my.putRiderActiveJOMarker(id, lat, lng);
-                else
-                    my.putRiderAvailableMarker(id, lat, lng);
-            });
-
-            /*
-            $.each(riders, function(rider_id, rider_data) {
-                // rider location
-                var point = rider_data['loc'];
-                var lat = point[0];
-                var lng = point[1];
-
-                // customer location
-                var cloc = rider_data['cust_loc'];
-                var clat = cloc[0];
-                var clng = cloc[1];
-
-                // create rider markers
-                if (rider_data['has_jo']) {
-                    var jo_data = rider_data['jo'];
-
-                    // my.putCustomerMarker(jo_data['id'], clat, clng);
-                    my.putRiderActiveJOMarker(rider_id, lat, lng);
-                } else {
-                    my.putRiderAvailableMarker(rider_id, lat, lng);
-                }
-            });
-            */
-
-            // console.log(rider_markers);
-        });
-    }
-}

src/Controller/JobOrderController.php

@@ -940,9 +940,12 @@ class JobOrderController extends Controller
         if ($jo === null)
             return new Response('No job order data');
 
+        $rider = $jo->getRider();
+
         // get map
         $params['jo'] = $jo;
-        $params['rider'] = $jo->getRider();
+        $params['rider'] = $rider;
+        $params['rider_pos'] = $rider_tracker->getRiderLocation($rider->getID());
         $params['service_type'] = CMBServiceType::getName($jo->getServiceType());
         $params['map_js_file'] = $gis_manager->getJSInitFile();
 

templates/home.html.twig

@@ -23,6 +23,8 @@ function initMap(r_markers, c_markers, icons) {
     var default_lng = {% trans %}default_long{% endtrans %};
 
     var options = {
+        'display_overlay': true,
+        'enable_popup': true,
         'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
         'div_id': 'dashboard_map',
         'center_lat': default_lat,
@@ -43,6 +45,8 @@ function initMap(r_markers, c_markers, icons) {
 
 function initEventHandler(dashmap) {
     var options = {
+        'track_jo': true,
+        'track_rider': true,
         'channels': {
             'rider_location': 'rider/+/location',
             'jo_location': 'jo/+/location',

templates/job-order/tracker.html.twig

@@ -22,7 +22,7 @@
 
 {% block scripts %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
-<script src="{{ asset('assets/js/tracker_map.js') }}"></script>
+<script src="{{ asset('assets/js/dashboard_map.js') }}"></script>
 <script src="{{ asset('assets/js/map_mqtt.js') }}"></script>
 {{ include('map/' ~ map_js_file) }}
 <script>
@@ -32,6 +32,8 @@ function initMap(r_markers, c_markers, icons) {
     var default_lng = {% trans %}default_long{% endtrans %};
 
     var options = {
+        'display_overlay': false,
+        'enable_popup': false,
         'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
         'div_id': 'tracker_map',
         'center_lat': default_lat,
@@ -45,17 +47,19 @@ function initMap(r_markers, c_markers, icons) {
 
     var dashmap = new DashboardMap(options, r_markers, c_markers);
     dashmap.initialize();
-    dashmap.loadLocations('{{ path('rider_locations') }}');
+    // dashmap.loadLocations('{{ path('rider_locations') }}');
 
     return dashmap;
 }
 
 function initEventHandler(dashmap) {
     var options = {
+        'track_jo': false,
+        'track_rider': true,
         'channels': {
-            'rider_location': 'rider/+/location',
+            'rider_location': 'rider/{{ rider.getID }}/location',
-            'jo_location': 'jo/+/location',
+            'jo_location': 'none',
-            'jo_status': 'jo/+/status'
+            'jo_status': 'none'
         },
     };
 
@@ -82,14 +86,33 @@ var icons = {
         html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
         iconSize: [39, 42],
         iconAnchor: [15, 42]
+    }),
+    'hub': L.divIcon({
+        className: 'map-div-icon',
+        html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-home awesome'>",
+        iconSize: [39, 42],
+        iconAnchor: [15, 42]
     })
 };
 
 var r_markers = {};
 var c_markers = {};
+var h_markers = {};
 
+{% set hub = jo.getHub %}
 var dashmap = initMap(r_markers, c_markers, icons);
+dashmap.putCustomerMarker({{ jo.getID }}, {{ jo.getCoordinates.getLatitude }}, {{ jo.getCoordinates.getLongitude }});
+dashmap.putRiderActiveJOMarker({{ rider.getID }}, {{ rider_pos.getLatitude }}, {{ rider_pos.getLongitude }});
+dashmap.putMarker(
+    {{ hub.getID }},
+    {{ hub.getCoordinates.getLatitude }},
+    {{ hub.getCoordinates.getLongitude }},
+    h_markers,
+    icons['hub'],
+    dashmap.map,
+    '/'
+);
 initEventHandler(dashmap, icons);
 
 </script>
-{% endblock %}
+{% endblock %}