Make customer marker popup load via ajax #299

config/routes/job_order.yaml

@@ -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]
+

src/Controller/CustomerController.php

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

src/Controller/JobOrderController.php

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

templates/home.html.twig

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

templates/job-order/popup.html.twig

@@ -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 }}
+

templates/map/initOpenStreetMap.js

@@ -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...');
+                // var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
-                lg_cust.addLayer(cust_marker);
+                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...');