Add upload KML feature for geofence. #220
This commit is contained in:
Korina Cordero
parent
9e9c59cd0b
commit
f2a180420a
4 changed files with 134 additions and 14 deletions
|
|
@ -4,12 +4,12 @@ geofence_list:
|
||||||
path: /geofence
|
path: /geofence
|
||||||
controller: App\Controller\GeofenceController::index
|
controller: App\Controller\GeofenceController::index
|
||||||
|
|
||||||
|
geofence_upload_kml:
|
||||||
|
path: /geofence/upload
|
||||||
|
controller: App\Controller\GeofenceController::uploadKML
|
||||||
|
methods: [POST]
|
||||||
|
|
||||||
geofence_create:
|
geofence_create:
|
||||||
path: /geofence/create
|
path: /geofence/create
|
||||||
controller: App\Controller\GeofenceController::addForm
|
controller: App\Controller\GeofenceController::addForm
|
||||||
methods: [GET]
|
methods: [GET]
|
||||||
|
|
||||||
geofence_create_submit:
|
|
||||||
path: /geofence/create
|
|
||||||
controller: App\Controller\GeofenceController::addSubmit
|
|
||||||
methods: [POST]
|
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ namespace App\Controller;
|
||||||
use App\Ramcar\BaseController;
|
use App\Ramcar\BaseController;
|
||||||
use App\Entity\SupportedArea;
|
use App\Entity\SupportedArea;
|
||||||
|
|
||||||
|
use App\Service\KMLFileImporter;
|
||||||
|
use App\Service\FileUploader;
|
||||||
|
|
||||||
use Doctrine\ORM\Query;
|
use Doctrine\ORM\Query;
|
||||||
use Doctrine\ORM\QueryBuilder;
|
use Doctrine\ORM\QueryBuilder;
|
||||||
use Symfony\Component\HttpFoundation\Request;
|
use Symfony\Component\HttpFoundation\Request;
|
||||||
|
|
@ -38,12 +41,27 @@ class GeofenceController extends BaseController
|
||||||
|
|
||||||
$params = $this->initParameters('geofence_list');
|
$params = $this->initParameters('geofence_list');
|
||||||
$params['obj'] = new SupportedArea();
|
$params['obj'] = new SupportedArea();
|
||||||
$params['mode'] = 'create';
|
|
||||||
|
|
||||||
$this->fillFormTags($params);
|
|
||||||
|
|
||||||
// response
|
// response
|
||||||
return $this->render('geofence/form.html.twig', $params);
|
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
|
||||||
|
]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
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 %}
|
||||||
|
|
||||||
|
|
@ -17,23 +17,29 @@
|
||||||
<div class="m-portlet m-portlet--mobile">
|
<div class="m-portlet m-portlet--mobile">
|
||||||
<div class="m-portlet__head">
|
<div class="m-portlet__head">
|
||||||
<div class="m-portlet__head-caption">
|
<div class="m-portlet__head-caption">
|
||||||
<div class="m-portlet__head-title">
|
<div class="m-portlet__head-title col-xl-12">
|
||||||
<span class="m-portlet__head-icon">
|
<span class="m-portlet__head-icon">
|
||||||
<i class="fa fa-building"></i>
|
<i class="fa fa-building"></i>
|
||||||
</span>
|
</span>
|
||||||
<h3 class="m-portlet__head-text">
|
<h3 class="m-portlet__head-text col-xl-4">
|
||||||
Covered Areas
|
Covered Areas
|
||||||
</h3>
|
</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>
|
</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" action="{{ url('geofence_create_submit') }}">
|
<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="m-portlet__body">
|
||||||
<div class="form-group m-form__group row">
|
<div class="form-group m-form__group row">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<label data-field="coordinates">
|
|
||||||
Map
|
|
||||||
</label>
|
|
||||||
<div id="m_gmap" style="height:600px;"></div>
|
<div id="m_gmap" style="height:600px;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue