Merge branch '220-display-geofence-area-coverage' into 'master'
Resolve "Display geofence area coverage" Closes #220 See merge request jankstudio/resq!257
This commit is contained in:
commit
4359a8a95b
7 changed files with 401 additions and 1 deletions
|
|
@ -189,6 +189,17 @@ access_keys:
|
||||||
label: Update
|
label: Update
|
||||||
- id: hub.delete
|
- id: hub.delete
|
||||||
label: Delete
|
label: Delete
|
||||||
|
- id: geofence
|
||||||
|
label: Geofence
|
||||||
|
acls:
|
||||||
|
- id: geofence.menu
|
||||||
|
label: Menu
|
||||||
|
- id: geofence.list
|
||||||
|
label: List
|
||||||
|
- id: geofence.add
|
||||||
|
label: Add
|
||||||
|
- id: geofence.delete
|
||||||
|
label: Delete
|
||||||
|
|
||||||
- id: rider
|
- id: rider
|
||||||
label: Rider Access
|
label: Rider Access
|
||||||
|
|
|
||||||
|
|
@ -88,6 +88,10 @@ main_menu:
|
||||||
acl: hub.menu
|
acl: hub.menu
|
||||||
label: Hub
|
label: Hub
|
||||||
parent: location
|
parent: location
|
||||||
|
- id: geofence_list
|
||||||
|
acl: geofence.menu
|
||||||
|
label: Geofence
|
||||||
|
parent: location
|
||||||
|
|
||||||
|
|
||||||
- id: joborder
|
- id: joborder
|
||||||
|
|
|
||||||
20
config/routes/geofence.yaml
Normal file
20
config/routes/geofence.yaml
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
#geofence
|
||||||
|
|
||||||
|
geofence_list:
|
||||||
|
path: /geofence
|
||||||
|
controller: App\Controller\GeofenceController::index
|
||||||
|
|
||||||
|
geofence_upload_kml:
|
||||||
|
path: /geofence/upload
|
||||||
|
controller: App\Controller\GeofenceController::uploadKML
|
||||||
|
methods: [POST]
|
||||||
|
|
||||||
|
geofence_create:
|
||||||
|
path: /geofence/create
|
||||||
|
controller: App\Controller\GeofenceController::addForm
|
||||||
|
methods: [GET]
|
||||||
|
|
||||||
|
geofence_delete:
|
||||||
|
path: /geofence/{id}
|
||||||
|
controller: App\Controller\GeofenceController::destroy
|
||||||
|
methods: [DELETE]
|
||||||
88
src/Controller/GeofenceController.php
Normal file
88
src/Controller/GeofenceController.php
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Controller;
|
||||||
|
|
||||||
|
use App\Ramcar\BaseController;
|
||||||
|
use App\Entity\SupportedArea;
|
||||||
|
|
||||||
|
use App\Service\KMLFileImporter;
|
||||||
|
use App\Service\FileUploader;
|
||||||
|
|
||||||
|
use Doctrine\ORM\Query;
|
||||||
|
use Doctrine\ORM\QueryBuilder;
|
||||||
|
use Symfony\Component\HttpFoundation\Request;
|
||||||
|
use Symfony\Component\HttpFoundation\Response;
|
||||||
|
use Symfony\Component\Security\Core\Encoder\EncoderFactoryInterface;
|
||||||
|
use Symfony\Component\Validator\Validator\ValidatorInterface;
|
||||||
|
|
||||||
|
use CrEOF\Spatial\PHP\Types\Geometry\Point;
|
||||||
|
use DateTime;
|
||||||
|
|
||||||
|
class GeofenceController extends BaseController
|
||||||
|
{
|
||||||
|
public function index()
|
||||||
|
{
|
||||||
|
$this->denyAccessUnlessGranted('geofence.list', null, 'No access.');
|
||||||
|
|
||||||
|
$params = $this->initParameters('geofence_list');
|
||||||
|
|
||||||
|
$params['areas'] = $this->getDoctrine()
|
||||||
|
->getRepository(SupportedArea::class)
|
||||||
|
->findAll();;
|
||||||
|
|
||||||
|
return $this->render('geofence/list.html.twig', $params);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function addForm()
|
||||||
|
{
|
||||||
|
$this->denyAccessUnlessGranted('geofence.add', null, 'No access.');
|
||||||
|
|
||||||
|
$params = $this->initParameters('geofence_list');
|
||||||
|
$params['obj'] = new SupportedArea();
|
||||||
|
|
||||||
|
// response
|
||||||
|
return $this->render('geofence/form.html.twig', $params);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function uploadKML(Request $req, FileUploader $uploader, KMLFileImporter $importer)
|
||||||
|
{
|
||||||
|
// retrieve temporary info for file
|
||||||
|
$file = $req->files->get('kml_file');
|
||||||
|
|
||||||
|
// upload the file
|
||||||
|
$filename = $uploader->upload($file);
|
||||||
|
|
||||||
|
// process the kml file
|
||||||
|
$kml_file = $uploader->getTargetDir() . '/' . $filename;
|
||||||
|
$importer->getMapdata($kml_file);
|
||||||
|
|
||||||
|
// return response
|
||||||
|
return $this->json([
|
||||||
|
'success' => true,
|
||||||
|
'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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -17,7 +17,8 @@ class FileUploader
|
||||||
{
|
{
|
||||||
do
|
do
|
||||||
{
|
{
|
||||||
$filename = md5(uniqid()) . '.' . $file->guessExtension();
|
//$filename = md5(uniqid()) . '.' . $file->guessExtension();
|
||||||
|
$filename = md5(uniqid()) . '.' . $file->getClientOriginalExtension();
|
||||||
}
|
}
|
||||||
while(file_exists($this->getTargetDir() . '/' . $filename));
|
while(file_exists($this->getTargetDir() . '/' . $filename));
|
||||||
|
|
||||||
|
|
|
||||||
96
templates/geofence/form.html.twig
Normal file
96
templates/geofence/form.html.twig
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
{% extends 'base.html.twig' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<!-- BEGIN: Subheader -->
|
||||||
|
<div class="m-subheader">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="mr-auto">
|
||||||
|
<h3 class="m-subheader__title">Geofence</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END: Subheader -->
|
||||||
|
<div class="m-content">
|
||||||
|
<!--Begin::Section-->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-12">
|
||||||
|
<div class="m-portlet m-portlet--mobile">
|
||||||
|
<div class="m-portlet__head">
|
||||||
|
<div class="m-portlet__head-caption">
|
||||||
|
<div class="m-portlet__head-title">
|
||||||
|
<span class="m-portlet__head-icon">
|
||||||
|
<i class="fa fa-building"></i>
|
||||||
|
</span>
|
||||||
|
<h3 class="m-portlet__head-text">
|
||||||
|
New Coverage Area
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form id="row-form" class="m-form m-form--label-align-right">
|
||||||
|
<div class="m-portlet__body">
|
||||||
|
<div class="form-group m-form__group row no-border">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<label data-field="kml_file">
|
||||||
|
KML File
|
||||||
|
</label>
|
||||||
|
<div class="m-dropzone dropzone m-dropzone--primary" action="{{ url('geofence_upload_kml') }}" id="kml-file">
|
||||||
|
<div class="m-dropzone__msg dz-message needsclick">
|
||||||
|
<h3 class="m-dropzone__msg-title">
|
||||||
|
Drop files here or click to upload.
|
||||||
|
</h3>
|
||||||
|
<span class="m-dropzone__msg-desc">
|
||||||
|
Upload only valid KML files
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-control-feedback hide" data-field="kml_file"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="m-portlet__foot m-portlet__foot--fit">
|
||||||
|
<div class="m-form__actions m-form__actions--solid m-form__actions--right">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<a href="{{ url('geofence_list') }}" class="btn btn-success">Submit</button>
|
||||||
|
<a href="{{ url('geofence_list') }}" class="btn btn-secondary">Back</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
<script>
|
||||||
|
// image upload
|
||||||
|
Dropzone.options.kmlFile = {
|
||||||
|
paramName: "kml_file", // The name that will be used to transfer the file
|
||||||
|
maxFiles: 1,
|
||||||
|
uploadMultiple: false,
|
||||||
|
maxFilesize: 5, // MB
|
||||||
|
addRemoveLinks: true,
|
||||||
|
acceptedFiles: "text/xml, .kml",
|
||||||
|
accept: function(file, done) {
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
init: function() {
|
||||||
|
this.on("maxfilesexceeded", function(file) {
|
||||||
|
// limit to one file, overwrite old one
|
||||||
|
this.removeAllFiles();
|
||||||
|
this.addFile(file);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
success: function(file, response) {
|
||||||
|
if (response.success) {
|
||||||
|
$("input[name='kml_file']").val(response.filename);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
180
templates/geofence/list.html.twig
Normal file
180
templates/geofence/list.html.twig
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
{% extends 'base.html.twig' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<!-- BEGIN: Subheader -->
|
||||||
|
<div class="m-subheader">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="mr-auto">
|
||||||
|
<h3 class="m-subheader__title">Geofence</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END: Subheader -->
|
||||||
|
<div class="m-content">
|
||||||
|
<!--Begin::Section-->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-12">
|
||||||
|
<div class="m-portlet m-portlet--mobile">
|
||||||
|
<div class="m-portlet__head">
|
||||||
|
<div class="m-portlet__head-caption">
|
||||||
|
<div class="m-portlet__head-title col-xl-12">
|
||||||
|
<span class="m-portlet__head-icon">
|
||||||
|
<i class="fa fa-building"></i>
|
||||||
|
</span>
|
||||||
|
<h3 class="m-portlet__head-text col-xl-4">
|
||||||
|
Covered Areas
|
||||||
|
</h3>
|
||||||
|
<h3 class="m-portlet__head-text col-xl-8" align="right">
|
||||||
|
<a href="{{ url('geofence_create') }}" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-building"></i>
|
||||||
|
<span>New Coverage Area</span>
|
||||||
|
</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" 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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
|
||||||
|
<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// BEGIN google maps stuff
|
||||||
|
|
||||||
|
var polygons = new Array();
|
||||||
|
|
||||||
|
initMap();
|
||||||
|
|
||||||
|
function initMap() {
|
||||||
|
var map = new google.maps.Map(document.getElementById('m_gmap'),
|
||||||
|
{
|
||||||
|
center: {lat: 14.6091, lng: 121.0223},
|
||||||
|
mapTypeId: 'roadmap',
|
||||||
|
zoom: 13
|
||||||
|
});
|
||||||
|
|
||||||
|
{% 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 }});
|
||||||
|
|
||||||
|
pointsArray.push(polylatlng);
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
var coveredarea = new google.maps.Polygon({
|
||||||
|
paths: pointsArray,
|
||||||
|
fillColor: "#FF0000",
|
||||||
|
fillOpacity: .5,
|
||||||
|
mapTypeId: 'roadmap'
|
||||||
|
});
|
||||||
|
coveredarea.setMap(map);
|
||||||
|
|
||||||
|
polygons[{{ obj.getID}}] = coveredarea;
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
}
|
||||||
|
|
||||||
|
// END google maps stuff
|
||||||
|
|
||||||
|
$('tr td').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var currentRow = $(this).closest('tr');
|
||||||
|
var id = currentRow.find('td:eq(0)').text();
|
||||||
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
Loading…
Reference in a new issue