Merge branch '220-display-geofence-area-coverage' into 'master'

Resolve "Display geofence area coverage"

Closes #220

See merge request jankstudio/resq!257

config/acl.yaml

@@ -189,6 +189,17 @@ access_keys:
           label: Update
         - id: hub.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
       label: Rider Access

config/menu.yaml

@@ -88,6 +88,10 @@ main_menu:
       acl: hub.menu
       label: Hub
       parent: location
+    - id: geofence_list
+      acl: geofence.menu
+      label: Geofence
+      parent: location
 
 
     - id: joborder

config/routes/geofence.yaml

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

src/Controller/GeofenceController.php

@@ -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();
+    }
+} 

src/Service/FileUploader.php

@@ -17,7 +17,8 @@ class FileUploader
     {
         do 
         {
-            $filename = md5(uniqid()) . '.' . $file->guessExtension();
+            //$filename = md5(uniqid()) . '.' . $file->guessExtension();
+            $filename = md5(uniqid()) . '.' . $file->getClientOriginalExtension();
         }
         while(file_exists($this->getTargetDir() . '/' . $filename));
 

templates/geofence/form.html.twig

@@ -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 %}
+

templates/geofence/list.html.twig

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