269 lines
8.6 KiB
JavaScript
269 lines
8.6 KiB
JavaScript
class DashboardMap {
|
|
constructor(options, rider_markers, cust_markers) {
|
|
this.options = options;
|
|
this.rider_markers = rider_markers;
|
|
this.cust_markers = cust_markers;
|
|
this.rider_availability = {};
|
|
|
|
// layer groups
|
|
this.layer_groups = {
|
|
'rider_available': L.layerGroup(),
|
|
'rider_active_jo': L.layerGroup(),
|
|
'customer': L.layerGroup(),
|
|
'mobile_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.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}',{
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
minZoom: 1,
|
|
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
|
|
crossOrigin: true,
|
|
accessToken: this.options.access_token
|
|
}).addTo(this.map);
|
|
|
|
/*
|
|
// NOTE: this is for mapbox
|
|
var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
|
attribution: 'Map data © <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);
|
|
this.layer_groups.mobile_customer.addTo(this.map);
|
|
|
|
// base layer
|
|
var baseMaps = {
|
|
'Streets': streets
|
|
};
|
|
|
|
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,
|
|
'Mobile Customers': this.layer_groups.mobile_customer
|
|
}
|
|
|
|
L.control.layers(baseMaps, overlayMaps).addTo(this.map);
|
|
}
|
|
|
|
return this.map;
|
|
}
|
|
|
|
switchRiderStatus(rider_id, rider_status) {
|
|
console.log('switching rider ' + rider_id + ' to ' + rider_status);
|
|
|
|
// find the marker
|
|
console.log(this.rider_markers);
|
|
if (this.rider_markers.hasOwnProperty(rider_id)) {
|
|
var marker = this.rider_markers[rider_id];
|
|
} else {
|
|
// TODO: call ajax to get location and create marker
|
|
console.log('marker not found for rider');
|
|
return true;
|
|
}
|
|
|
|
// add it to proper layer group
|
|
console.log(rider_status);
|
|
if (rider_status == 'available') {
|
|
this.layer_groups.rider_active_jo.removeLayer(marker);
|
|
this.layer_groups.rider_available.addLayer(marker);
|
|
marker.setIcon(this.options.icons.rider_available);
|
|
} else if (rider_status == 'jo') {
|
|
this.layer_groups.rider_available.removeLayer(marker);
|
|
this.layer_groups.rider_active_jo.addLayer(marker);
|
|
marker.setIcon(this.options.icons.rider_active_jo);
|
|
}
|
|
}
|
|
|
|
switchJobOrderOrigin(jo_id, jo_origin) {
|
|
console.log('switching jo ' + jo_id + ' to ' + jo_origin);
|
|
|
|
// find the marker
|
|
if (this.cust_markers.hasOwnProperty(jo_id)) {
|
|
var marker = this.cust_markers[jo_id];
|
|
} else {
|
|
console.log('marker not found for customer');
|
|
return true;
|
|
}
|
|
|
|
// add marker to proper layer group
|
|
console.log(jo_origin);
|
|
if (jo_origin == 'mobile') {
|
|
this.layer_groups.customer.removeLayer(marker);
|
|
this.layer_groups.mobile_customer.addLayer(marker);
|
|
marker.setIcon(this.options.icons.mobile_customer);
|
|
} else {
|
|
this.layer_groups.mobile_customer.removeLayer(marker);
|
|
this.layer_groups.customer.addLayer(marker);
|
|
marker.setIcon(this.options.icons.customer);
|
|
}
|
|
}
|
|
|
|
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 }
|
|
).addTo(layer_group);
|
|
|
|
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) {
|
|
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 markers = this.cust_markers;
|
|
|
|
// no customer marker with that id
|
|
if (!markers.hasOwnProperty(id)) {
|
|
console.log('no such marker to remove');
|
|
return;
|
|
}
|
|
|
|
this.layer_groups.customer.removeLayer(markers[id]);
|
|
this.layer_groups.mobile_customer.removeLayer(markers[id]);
|
|
}
|
|
|
|
putMobileCustomerMarker(id, lat, lng) {
|
|
this.putMarker(
|
|
id,
|
|
lat,
|
|
lng,
|
|
this.cust_markers,
|
|
this.options.icons.mobile_customer,
|
|
this.layer_groups.mobile_customer,
|
|
this.options.cust_popup_url
|
|
);
|
|
}
|
|
|
|
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
|
|
);
|
|
}
|
|
|
|
removeRiderMarker(id) {
|
|
console.log('removing rider marker for ' + id);
|
|
var markers = this.rider_markers;
|
|
|
|
if (!markers.hasOwnProperty(id)) {
|
|
console.log('no such marker to remove');
|
|
return;
|
|
}
|
|
|
|
this.layer_groups.rider_active_jo.removeLayer(markers[id]);
|
|
this.layer_groups.rider_available.removeLayer(markers[id]);
|
|
}
|
|
|
|
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();
|
|
my.layer_groups.mobile_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;
|
|
|
|
if (data.is_mobile)
|
|
my.putMobileCustomerMarker(id, lat, lng);
|
|
else
|
|
my.putCustomerMarker(id, lat, lng);
|
|
});
|
|
|
|
// riders
|
|
$.each(riders, function(id, data) {
|
|
var lat = data.latitude;
|
|
var lng = data.longitude;
|
|
|
|
if (data.has_jo) {
|
|
my.rider_availability[id] = false;
|
|
my.putRiderActiveJOMarker(id, lat, lng);
|
|
} else {
|
|
my.rider_availability[id] = true;
|
|
my.putRiderAvailableMarker(id, lat, lng);
|
|
}
|
|
});
|
|
|
|
// console.log(rider_markers);
|
|
});
|
|
}
|
|
}
|