rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Korina Cordero 2019-06-05 06:18:51 +00:00
parent eaf77fc634
commit b2e394d1b2
3 changed files with 79 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
config/routes/geofence.yaml
View file

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

42
src/Controller/GeofenceController.php
View file

@ -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.');

113
templates/geofence/list.html.twig
View file

@ -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="data-rows"></div>
<!--end: Datatable -->
<div id = "area-rows" class="form-group m-form__group row">
{% if areas is empty %}
<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,63 +120,41 @@ function initMap() {
mapTypeId: 'roadmap'
});
coveredarea.setMap(map);
polygons[{{ obj.getID}}] = coveredarea;
{% endfor %}
{% endif %}
}
// 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 = '';
$('tr td').click(function(e) {
e.preventDefault();
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>';
}
var currentRow = $(this).closest('tr');
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 table = $("#data-rows").mDatatable(options);
var polygon = polygons[id];
polygon.setOptions({fillColor: '#32CD32'});
}
$(document).on('click', '.btn-delete', function(e) {
currentRow.addClass('bg-warning').siblings().removeClass('bg-warning');
});
$(document).on('click', '.btn-delete', function(e) {
var url = $(this).prop('href');
var id = $(this).data('id');
var currentRow = $(this).closest('tr');
var id = currentRow.find('td:eq(1)').text();
var btn = $(this);
e.preventDefault();
@ -161,15 +170,11 @@ $(function() {
method: "DELETE",
url: url
}).done(function(response) {
table.row(btn.parents('tr')).remove();
table.reload();
window.location.reload();
});
}
});
});
});
</script>
{% endblock %}