From c8157b950948b436a7a93aae9958207ad6c76974 Mon Sep 17 00:00:00 2001 From: Kendrick Chan Date: Wed, 29 Jan 2020 01:13:47 +0800 Subject: [PATCH] Add functionality to job order tracking page #270 --- public/assets/js/dashboard_map.js | 65 ++++----- public/assets/js/map_mqtt.js | 14 +- public/assets/js/tracker_map.js | 182 -------------------------- src/Controller/JobOrderController.php | 5 +- templates/home.html.twig | 4 + templates/job-order/tracker.html.twig | 35 ++++- 6 files changed, 69 insertions(+), 236 deletions(-) delete mode 100644 public/assets/js/tracker_map.js diff --git a/public/assets/js/dashboard_map.js b/public/assets/js/dashboard_map.js index 57d3c7a3..4691a11d 100644 --- a/public/assets/js/dashboard_map.js +++ b/public/assets/js/dashboard_map.js @@ -37,14 +37,16 @@ class DashboardMap { 'Streets': streets }; - // overlay layer - var overlayMaps = { - 'Available Riders' : this.layer_groups.rider_available, - 'JO Riders' : this.layer_groups.rider_active_jo, - 'Customers' : this.layer_groups.customer - } + if (this.options.display_overlay) { + // overlay layer + var overlayMaps = { + 'Available Riders' : this.layer_groups.rider_available, + '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 - 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(); + if (my.options.enable_popup) { + markers[id].bindPopup('Loading...'); + + // 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) { @@ -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); }); } diff --git a/public/assets/js/map_mqtt.js b/public/assets/js/map_mqtt.js index ebd401bb..6eac1f65 100644 --- a/public/assets/js/map_mqtt.js +++ b/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); - my.mqtt.subscribe(my.options.channels.rider_location); + if (my.options.track_rider) { + 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); - my.mqtt.subscribe(my.options.channels.jo_location); - my.mqtt.subscribe(my.options.channels.jo_status); + if (my.options.track_jo) { + console.log('subscribing to ' + my.options.channels.jo_location); + my.mqtt.subscribe(my.options.channels.jo_location); + my.mqtt.subscribe(my.options.channels.jo_status); + } } onMessage(msg) { diff --git a/public/assets/js/tracker_map.js b/public/assets/js/tracker_map.js deleted file mode 100644 index ecf3df41..00000000 --- a/public/assets/js/tracker_map.js +++ /dev/null @@ -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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', - 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); - }); - } -} diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php index c92638a4..5d6127e3 100644 --- a/src/Controller/JobOrderController.php +++ b/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(); diff --git a/templates/home.html.twig b/templates/home.html.twig index 3bcb6c3b..975b0ea5 100644 --- a/templates/home.html.twig +++ b/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', diff --git a/templates/job-order/tracker.html.twig b/templates/job-order/tracker.html.twig index 42f18746..ca08d381 100644 --- a/templates/job-order/tracker.html.twig +++ b/templates/job-order/tracker.html.twig @@ -22,7 +22,7 @@ {% block scripts %} - + {{ include('map/' ~ map_js_file) }} -{% endblock %} \ No newline at end of file +{% endblock %}