Add rows table to geofence page with Delete action. #220

config/acl.yaml

@@ -172,6 +172,8 @@ access_keys:
           label: List
         - id: geofence.add
           label: Add
+        - id: geofence.delete
+          label: Delete
 
     - id: rider
       label: Rider Access

config/routes/geofence.yaml

@@ -4,6 +4,11 @@ geofence_list:
     path: /geofence
     controller: App\Controller\GeofenceController::index
 
+geofence_rows:
+    path: /geofence/rows
+    controller: App\Controller\GeofenceController::rows
+    methods: [POST]
+
 geofence_upload_kml:
     path: /geofence/upload
     controller: App\Controller\GeofenceController::uploadKML
@@ -13,3 +18,8 @@ geofence_create:
     path: /geofence/create
     controller: App\Controller\GeofenceController::addForm
     methods: [GET]
+
+geofence_delete:
+    path: /geofence/{id}
+    controller: App\Controller\GeofenceController::destroy
+    methods: [DELETE]

src/Controller/GeofenceController.php

@@ -26,13 +26,53 @@ class GeofenceController extends BaseController
 
         $params = $this->initParameters('geofence_list');
 
-        // get query builder
         $params['areas'] = $this->getDoctrine()
+                ->getRepository(SupportedArea::class)
+                ->findAll();;
+
+        return $this->render('geofence/list.html.twig', $params);
+    }
+
+    public function rows(Request $req)
+    {
+        $this->denyAccessUnlessGranted('geofence.list', null, 'No access.');
+
+        $params = $this->initParameters('geofence_list');
+
+        // get query builder
+        $obj_rows = $this->getDoctrine()
                 ->getRepository(SupportedArea::class)
                 ->findAll();
 
+        // add metadata
+        $meta = [
+            'sort' => 'asc',
+            'field' => 'id'
+        ];
+
+        // process rows
+        $rows = [];
+        foreach($obj_rows as $orow) {
+            // add row data
+            $row['id'] = $orow->getID();
+            $row['name'] = $orow->getName();
+
+            // add row metadata
+            $row['meta'] = [
+                'delete_url' => ''
+            ];
+
+            if ($this->isGranted('geofence.delete'))
+                $row['meta']['delete_url'] = $this->generateUrl('geofence_delete', ['id' => $row['id']]);
+
+            $rows[] = $row;
+        }
+
         // response
-        return $this->render('geofence/list.html.twig', $params);
+        return $this->json([
+            'meta' => $meta,
+            'data' => $rows
+        ]);
     }
 
     public function addForm()
@@ -64,4 +104,27 @@ class GeofenceController extends BaseController
             'filename' => $filename
         ]);
     }
+
+    public function destroy($id)
+    {
+        $this->denyAccessUnlessGranted('geofence.delete', null, 'No access.');
+
+        $params = $this->initParameters('geofence_list');
+
+        // get object data
+        $em = $this->getDoctrine()->getManager();
+        $obj = $em->getRepository(SupportedArea::class)->find($id);
+
+        if (empty($obj))
+            throw $this->createNotFoundException('The item does not exist');
+
+        // delete this object
+        $em->remove($obj);
+        $em->flush();
+
+        // response
+        $response = new Response();
+        $response->setStatusCode(Response::HTTP_OK);
+        $response->send();
+    }
 } 

templates/geofence/list.html.twig

@@ -32,17 +32,19 @@
                                         </span>
                                        </a>
                                 </h3>
-
                             </div>
                         </div>
                     </div>
                     <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" }}">
                         <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
-                                <div class="col-lg-12">
+                               <div class="col-lg-12">
-                                    <div id="m_gmap" style="height:600px;"></div>
+                                   <div id="m_gmap" style="height:600px;"></div>
-                                </div>
+                               </div>
-                            </div>
+                           </div>
+                           <!--begin: Datatable -->
+                           <div id="data-rows"></div>
+                           <!--end: Datatable -->
                         </div>
                     </form>
                 </div>
@@ -56,9 +58,10 @@
 <script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
 
 <script>
+// BEGIN google maps stuff
 
 initMap();
-// BEGIN google maps stuff
+
 function initMap() {
     var map = new google.maps.Map(document.getElementById('m_gmap'),
     {
@@ -67,29 +70,105 @@ function initMap() {
         zoom: 13 
     });
 
-    {% for obj in areas %}
+    {% if areas %}
-        var pointsArray = new Array();
+        {% for obj in areas %}
+            var pointsArray = new Array();
 
-        {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
+            {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
-            var polylatlng = new google.maps.LatLng(
+                var polylatlng = new google.maps.LatLng(
-                {{ point.getLatitude }},
+                    {{ point.getLatitude }},
-                {{ point.getLongitude }});
+                    {{ point.getLongitude }});
 
-            pointsArray.push(polylatlng);
+                pointsArray.push(polylatlng);
+            {% endfor %}
+
+            var coveredarea = new google.maps.Polygon({
+                paths: pointsArray,
+                fillColor: "#FF0000",
+                fillOpacity: .5,
+                mapTypeId: 'roadmap'
+            });
+            coveredarea.setMap(map);
         {% endfor %}
-
+    {% endif %}
-        var coveredarea = new google.maps.Polygon({
-            paths: pointsArray,
-            fillColor: "#FF0000",
-            fillOpacity: .5,
-            mapTypeId: 'roadmap'
-        });
-        coveredarea.setMap(map);
-    {% endfor %}
 }
 
 // END google maps stuff
 
+$(function() {
+    var options = {
+        data: {
+            type: 'remote',
+            source: {
+                read: {
+                    url: '{{ url("geofence_rows") }}',
+                    method: 'POST',
+                }
+            },
+            saveState: {
+                cookie: false,
+                webstorage: false
+            },
+            serverFiltering: false,
+            serverSorting: true
+        },
+        columns: [
+        {
+            field: 'id',
+            title: 'ID',
+            width: 30
+        },
+        {
+            field: 'name',
+            title: 'Name'
+        },
+        {
+            field: 'Actions',
+            width: 110,
+            title: 'Actions',
+            sortable: false,
+            overflow: 'visible',
+            template: function (row, index, datatable) {
+                var actions = '';
+
+                if (row.meta.delete_url != '') {
+                    actions += '<a href="' + row.meta.delete_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" data-id="' + row.name + '" title="Delete"><i class="la la-trash"></i></a>';
+                } 
+
+                return actions;
+            },
+        }
+        ],
+    };
+
+    var table = $("#data-rows").mDatatable(options);
+
+    $(document).on('click', '.btn-delete', function(e) {
+        var url = $(this).prop('href');
+        var id = $(this).data('id');
+        var btn = $(this);
+
+        e.preventDefault();
+
+        swal({
+            title: 'Confirmation',
+            html: 'Are you sure you want to delete <strong>' + id + '</strong>?',
+            type: 'warning',
+            showCancelButton: true
+        }).then((result) => {
+            if (result.value) {
+                $.ajax({
+                    method: "DELETE",
+                    url: url
+                }).done(function(response) {
+                    table.row(btn.parents('tr')).remove();
+                    table.reload();
+                });
+            }
+        });
+    });
+});
+
 </script>
 {% endblock %}