rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

Add functionality to job order tracking page #270

Browse source
This commit is contained in:
Kendrick Chan 2020-01-29 01:13:47 +08:00
parent 4f1a5f2e5e
commit c8157b9509
6 changed files with 69 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
public/assets/js/dashboard_map.js
View file

@ -37,6 +37,7 @@ class DashboardMap {
'Streets': streets
};
if (this.options.display_overlay) {
// overlay layer
var overlayMaps = {
'Available Riders' : this.layer_groups.rider_available,
@ -45,6 +46,7 @@ class DashboardMap {
}
L.control.layers(baseMaps, overlayMaps).addTo(this.map);
}
return this.map;
}
@ -61,8 +63,10 @@ class DashboardMap {
markers[id] = L.marker(
[lat, lng],
{ icon: icon }
).bindPopup('Loading...')
.addTo(layer_group);
).addTo(layer_group);
if (my.options.enable_popup) {
markers[id].bindPopup('Loading...');
// bind ajax for popup
markers[id].on('click', function(e) {
@ -75,6 +79,7 @@ class DashboardMap {
});
});
}
}
putCustomerMarker(id, lat, lng) {
this.putMarker(
@ -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);
});
}

4
public/assets/js/map_mqtt.js
View file

@ -28,14 +28,18 @@ class MapEventHandler {
var my = icontext.invocationContext;
// subscribe to rider locations
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
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) {
// console.log(msg);

182
public/assets/js/tracker_map.js
View file

@ -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);
});
}
}

5
src/Controller/JobOrderController.php
View file

@ -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();

4
templates/home.html.twig
View file

@ -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',

33
templates/job-order/tracker.html.twig
View file

@ -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',
'jo_location': 'jo/+/location',
'jo_status': 'jo/+/status'
'rider_location': 'rider/{{ rider.getID }}/location',
'jo_location': 'none',
'jo_status': 'none'
},
};
@ -82,13 +86,32 @@ 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>