Make rider markers load popup via ajax #299

config/routes/rider.yaml

@@ -36,3 +36,8 @@ rider_delete:
     path: /riders/{id}
     controller: App\Controller\RiderController::destroy
     methods: [DELETE]
+
+rider_ajax_popup:
+    path: /riders/{id}/popup
+    controller: App\Controller\RiderController::popupInfo
+    methods: [GET]

src/Controller/HomeController.php

@@ -29,6 +29,8 @@ class HomeController extends Controller
 
     public function getRiderLocations(EntityManagerInterface $em, RiderTracker $rider_tracker)
     {
+        // TODO: get active riders from cache
+        // TODO: get active JOs from cache
         // get all riders
         $riders = $em->getRepository(Rider::class)->findAll();
 

src/Controller/RiderController.php

@@ -10,6 +10,7 @@ use App\Entity\User;
 use App\Service\FileUploader;
 
 use Doctrine\ORM\Query;
+use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Security\Core\Encoder\EncoderFactoryInterface;
@@ -500,4 +501,13 @@ class RiderController extends Controller
                 ->setParameter('filter', '%' . $datatable['query']['data-rows-search'] . '%');
         }
     }
+
+    public function popupInfo(EntityManagerInterface $em, $id)
+    {
+        $rider = $em->getRepository(Rider::class)->find($id);
+        if ($rider == null)
+            return new Response('No rider data');
+
+        return $this->render('rider/popup.html.twig', [ 'rider' => $rider ]);
+    }
 }

templates/home.html.twig

@@ -21,12 +21,14 @@ function initMap() {
     var default_lat = {% trans %}default_lat{% endtrans %};
     var default_lng = {% trans %}default_long{% endtrans %};
 
-    map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13);
+    var rider_popup_url = '/riders/[id]/popup';
+    map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13, rider_popup_url);
 }
 </script>
 
 {{ include('map/' ~ map_js_file) }}
 
+
 <script>
 // TODO: put this in .env
 var mqtt;

templates/map/initOpenStreetMap.js

@@ -7,7 +7,7 @@
 
 var rider_markers = {};
 
-function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
+function mapCreate(div_id, center_lat, center_lng, map_type, zoom, rider_popup_url) {
     var map = L.map(div_id).setView(
         [center_lat, center_lng],
         zoom
@@ -80,6 +80,7 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
 
             // 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>';
@@ -93,17 +94,29 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
                 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(rider_popup);
-                // var rider_marker = 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(cust_popup);
+                var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup('Loading...');
                 lg_cust.addLayer(cust_marker);
                 lg_jo_rider.addLayer(rider_markers[rider_id]);
             } 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(rider_popup);
-                // var rider_marker = 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...');
                 lg_avail_rider.addLayer(rider_markers[rider_id]);
             }
+
+            // ajax loading of rider popup
+            rider_markers[rider_id].on('click', function(e) {
+                var popup = e.target.getPopup();
+                var url = rider_popup_url.replace('[id]', rider_id);
+                console.log(url);
+                $.get(url).done(function(data) {
+                    popup.setContent(data);
+                    popup.update();
+                });
+            });
         });
 
         // console.log(rider_markers);

templates/rider/popup.html.twig

@@ -0,0 +1,13 @@
+<strong>{{ rider.getFullName }}</strong>
+{% set jo = rider.getActiveJobOrder %}
+{% if jo is not null %}
+{% set cust = jo.getCustomer %}
+{% set cv = jo.getCustomerVehicle %}
+<br>
+<a href="">Job Order #{{ jo.getID }}</a><br>
+{{ jo.getServiceTypeName }}<br>
+{{ jo.getStatusText }}<br><br>
+{{ cust.getNameDisplay }}<br>
+{{ cv.getPlateNumber }}
+{% endif %}
+

translations/messages.en.yaml

@@ -22,6 +22,8 @@ image_dashboard: /assets/images/century_logo.png
 image_jo_pdf: /public/assets/images/black-text-logo-01-115x115.png
 
 # default point for maps
-default_lat: 3.084216
+default_lat: 14.6091
-default_long: 101.6129996
+default_long: 121.0223
+#default_lat: 3.084216
+#default_long: 101.6129996
 default_region: my