Add highlighting of area in map and row when selecting an area. #220

config/routes/geofence.yaml

@@ -4,11 +4,6 @@ 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

src/Controller/GeofenceController.php

@@ -33,48 +33,6 @@ class GeofenceController extends BaseController
         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->json([
-            'meta' => $meta,
-            'data' => $rows
-        ]);
-    }
-
     public function addForm()
     {
         $this->denyAccessUnlessGranted('geofence.add', null, 'No access.');

templates/geofence/list.html.twig

@@ -35,16 +35,45 @@
                             </div>
                         </div>
                     </div>
-                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" }}">
+                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="POST" }}">
                         <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <div class="col-lg-12">
                                    <div id="m_gmap" style="height:600px;"></div>
                                </div>
                            </div>
-                           <!--begin: Datatable -->
+                           <div id = "area-rows" class="form-group m-form__group row">
-                           <div id="data-rows"></div>
+                               {% if areas is empty %}
-                           <!--end: Datatable -->
+                                   <div class="m-alert m-alert--icon m-alert--icon-solid m-alert--outline alert alert-brand" role="alert">
+                                       <div class="m-alert__icon">
+                                           <i class="flaticon-exclamation-2"></i>
+                                           <span></span>
+                                       </div>
+                                       <div class="m-alert__text">
+                                           No records for coverage area.
+                                       </div>
+                                   </div>
+                               {% else %}
+                                   <table id="area-table" class="table table-striped m-table">
+                                    <thead>
+                                        <tr class="m-table__row--brand">
+                                            <th>ID</th>
+                                            <th>Name</th>
+                                            <th> </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {% for result in areas %}
+                                            <tr>
+                                                <td>{{ result.getID|default("") }}</td>
+                                                <td>{{ result.getName|default("") }}</td>
+                                                <td> <a href="{{ url('geofence_delete', {'id': result.getID }) }}" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete"> <i class="la la-trash"> </a></td>
+                                            </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                               {% endif %}
+                           </div>
                         </div>
                     </form>
                 </div>
@@ -60,6 +89,8 @@
 <script>
 // BEGIN google maps stuff
 
+var polygons = new Array();
+
 initMap();
 
 function initMap() {
@@ -89,87 +120,61 @@ function initMap() {
                 mapTypeId: 'roadmap'
             });
             coveredarea.setMap(map);
+
+            polygons[{{ obj.getID}}] = coveredarea;
+
         {% endfor %}
     {% endif %}
 }
 
 // END google maps stuff
 
-$(function() {
+$('tr td').click(function(e) {
-    var options = {
+    e.preventDefault();
-        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 != '') {
+    var currentRow = $(this).closest('tr');
-                    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>';
+    var id = currentRow.find('td:eq(0)').text();
-                } 
 
-                return actions;
+    if (id in polygons)
-            },
+    {
+        for (var p in polygons)
+        {
+            var pg = polygons[p];
+            pg.setOptions({fillColor: "#FF0000"});
+        };
+        
+        var polygon = polygons[id];
+        polygon.setOptions({fillColor: '#32CD32'});
+    }
+
+    currentRow.addClass('bg-warning').siblings().removeClass('bg-warning');
+
+});
+
+$(document).on('click', '.btn-delete', function(e) {
+    var url = $(this).prop('href');
+    var currentRow = $(this).closest('tr');
+    var id = currentRow.find('td:eq(1)').text();
+    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) {
+                window.location.reload();
+            });
         }
-        ],
-    };
-
-    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 %}
-
-