Add rows table to geofence page with Delete action. #220
This commit is contained in:
parent
0f6229405e
commit
eaf77fc634
4 changed files with 178 additions and 24 deletions
|
|
@ -172,6 +172,8 @@ access_keys:
|
|||
label: List
|
||||
- id: geofence.add
|
||||
label: Add
|
||||
- id: geofence.delete
|
||||
label: Delete
|
||||
|
||||
- id: rider
|
||||
label: Rider Access
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 id="m_gmap" style="height:600px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</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 %}
|
||||
var pointsArray = new Array();
|
||||
{% if areas %}
|
||||
{% for obj in areas %}
|
||||
var pointsArray = new Array();
|
||||
|
||||
{% for point in obj.getCoverageArea.getRing(0).getPoints() %}
|
||||
var polylatlng = new google.maps.LatLng(
|
||||
{{ point.getLatitude }},
|
||||
{{ point.getLongitude }});
|
||||
{% for point in obj.getCoverageArea.getRing(0).getPoints() %}
|
||||
var polylatlng = new google.maps.LatLng(
|
||||
{{ point.getLatitude }},
|
||||
{{ 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 %}
|
||||
|
||||
var coveredarea = new google.maps.Polygon({
|
||||
paths: pointsArray,
|
||||
fillColor: "#FF0000",
|
||||
fillOpacity: .5,
|
||||
mapTypeId: 'roadmap'
|
||||
});
|
||||
coveredarea.setMap(map);
|
||||
{% 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 = '';
|
||||
|
||||
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 %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue