Modify dashboard to display customers and riders with popup details #270
This commit is contained in:
parent
bd1dd36e5e
commit
008e482fe8
5 changed files with 145 additions and 12 deletions
|
|
@ -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,
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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
|
||||
var marker = L.marker([lat, long]).bindPopup(rider_id);
|
||||
// customer location
|
||||
var cloc = rider_data['cust_loc'];
|
||||
var clat = cloc[0];
|
||||
var clong = cloc[1];
|
||||
|
||||
// add marker/layer to layergroup
|
||||
ridersLayerGroup.addLayer(marker);
|
||||
// rider popup content
|
||||
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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue