Make customer marker popup load via ajax #299

This commit is contained in:
Kendrick Chan 2020-01-22 05:10:49 +08:00
parent eac8f41d84
commit ec5e67a641
6 changed files with 49 additions and 18 deletions

View file

@ -195,3 +195,9 @@ jo_onestep_edit_submit:
path: /job-order/onestep/{id}/edit
controller: App\Controller\JobOrderController::oneStepEditSubmit
methods: [POST]
jo_ajax_popup:
path: /job-order/{id}/popup
controller: App\Controller\JobOrderController::popupInfo
methods: [GET]

View file

@ -5,6 +5,9 @@ namespace App\Controller;
use App\Ramcar\CrudException;
use App\Service\CustomerHandlerInterface;
use App\Entity\Customer;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

View file

@ -8,6 +8,7 @@ use App\Ramcar\InvoiceCriteria;
use App\Entity\CustomerVehicle;
use App\Entity\Promo;
use App\Entity\Battery;
use App\Entity\JobOrder;
use App\Service\InvoiceGeneratorInterface;
use App\Service\JobOrderHandlerInterface;
@ -20,6 +21,8 @@ use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
use Catalyst\MenuBundle\Annotation\Menu;
class JobOrderController extends Controller
@ -908,4 +911,15 @@ class JobOrderController extends Controller
'success' => 'Changes have been saved!'
]);
}
/**
* @ParamConverter("jo", class="App\Entity\JobOrder")
*/
public function popupInfo(JobOrder $jo)
{
if ($jo == null)
return new Response('No job order data');
return $this->render('job-order/popup.html.twig', [ 'jo' => $jo ]);
}
}

View file

@ -22,7 +22,8 @@ function initMap() {
var default_lng = {% trans %}default_long{% endtrans %};
var rider_popup_url = '/riders/[id]/popup';
map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url);
var cust_popup_url = '/job-order/[id]/popup';
map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url, cust_popup_url);
}
</script>

View file

@ -0,0 +1,8 @@
{% set cust = jo.getCustomer %}
{% set cv = jo.getCustomerVehicle %}
<strong>{{ cust.getNameDisplay }}</strong><br>
{{ cv.getPlateNumber }}<br>
<a href="">Job Order #{{ jo.getID }}</a><br>
{{ jo.getServiceTypeName }}<br>
{{ jo.getStatusText }}

View file

@ -6,8 +6,9 @@
<script>
var rider_markers = {};
var cust_markers = {};
function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_url) {
function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_url, cust_popup_url) {
var map = L.map(div_id).setView(
[center_lat, center_lng],
zoom
@ -80,27 +81,25 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_u
// 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'];
*/
// rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup('Loading...');
var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
lg_cust.addLayer(cust_marker);
// var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
cust_markers[jo_data['id']] = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
lg_cust.addLayer(cust_markers[jo_data['id']]);
lg_jo_rider.addLayer(rider_markers[rider_id]);
// customer popup ajax
cust_markers[jo_data['id']].on('click', function(e) {
var popup = e.target.getPopup();
var url = cust_popup_url.replace('[id]', jo_data['id']);
console.log(url);
$.get(url).done(function(data) {
popup.setContent(data);
popup.update();
});
});
} else {
// rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup('Loading...');