From c97016729940502bc0f7e3ea15b21f0954ac49a0 Mon Sep 17 00:00:00 2001
From: Rasika Perera <info.rasika@gmail.com>
Date: Mon, 12 Jun 2017 22:43:36 +0530
Subject: [PATCH] UI fixes for geo fencing

---
 .../cdmf.unit.geo-dashboard/geo-dashboard.hbs | 49 +++++++----
 .../cdmf.unit.geo-dashboard/geo-dashboard.js  |  2 -
 .../html_templates/modal/exit_alert.html      |  2 +-
 .../html_templates/modal/within_alert.html    |  2 +-
 .../html_templates/view_fence_popup.html      | 68 ++++++---------
 .../Geo-ExecutionPlan-Exit_alert.siddhiql     | 20 +++++
 .../public/js/geo_fencing.js                  | 54 +++++++++---
 .../public/js/geo_remote.js                   | 82 ++++++++++++++-----
 8 files changed, 189 insertions(+), 90 deletions(-)
 create mode 100644 components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/conf/alerts/Geo-ExecutionPlan-Exit_alert.siddhiql

diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs
index 1697936404..1293710eea 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs
@@ -557,10 +557,6 @@
         <div id="setWithinAlert">
             <form role="form" style="width: auto;">
                 <div class="form-group">
-                    <label class="text-primary" for="queryName">Query name</label>
-                    <input class="form-control" id="queryName" placeholder="Query name" type="text">
-                    <span class="help-block">Can use this name to locate the execution plan</span>
-
                     <label class="text-primary" for="areaName">Fence name</label>
                     <input class="form-control" id="areaName" placeholder="Fence name" type="text">
                     <span class="help-block">Name of the selected area(i.e colombo)</span>
@@ -581,7 +577,38 @@
                         </div>
                         <div class="btn-group">
                             <a id="exportGeoJson" download="geoJson.json" href="#"
-                               onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
+                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
+                               class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
+                               title="Export selected area as a geoJson file">Export</a>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div id="setExitAlert">
+            <form role="form" style="width: auto;">
+                <div class="form-group">
+                    <label class="text-primary" for="areaName">Fence name</label>
+                    <input class="form-control" id="areaName" placeholder="Fence name" type="text">
+                    <span class="help-block">Name of the selected area(i.e colombo)</span>
+                </div>
+                <div>
+                    <div class="btn-group btn-group-sm btn-group-justified">
+                        <div class="btn-group">
+                            <button id="addExitAlert" onclick="setExitAlert($(this).attr('leaflet_id'))" type="button"
+                                    class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left"
+                                    title="Save selected area for alerts">Save
+                            </button>
+                        </div>
+                        <div class="btn-group">
+                            <button id="editGeoJson"
+                                    onclick="$('#editExitGeoJSON #updateGeoJson').attr('leaflet_id',$(this).attr('leaflet_id'));$('#editExitGeoJSON textarea').text(JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'));$('#editExitGeoJSON').modal('toggle')"
+                                    type="button" class="btn btn-default btn-xs">Edit
+                            </button>
+                        </div>
+                        <div class="btn-group">
+                            <a id="exportGeoJson" download="geoJson.json" href="#"
+                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
                                class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
                                title="Export selected area as a geoJson file">Export</a>
                         </div>
@@ -593,10 +620,6 @@
         <div id="setStationeryAlert">
             <form role="form" style="width: auto;">
                 <div class="form-group">
-                    <label class="text-primary" for="queryName">Query name</label>
-                    <input class="form-control" id="queryName" placeholder="Query name" type="text">
-                    <span class="help-block">Can use this name to locate the execution plan</span>
-
                     <label class="text-primary" for="areaName">Fence name</label>
                     <input class="form-control" id="areaName" placeholder="Stationery name" type="text">
                     <span class="help-block">Name of the selected area(i.e colombo)</span>
@@ -623,7 +646,7 @@
                         </div>
                         <div class="btn-group">
                             <a id="exportGeoJson" download="geoJson.json" href="#"
-                               onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
+                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
                                class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
                                title="Export selected area as a geoJson file">Export</a>
                         </div>
@@ -634,10 +657,6 @@
         <div id="setTrafficAlert">
             <form role="form" style="width: auto;">
                 <div class="form-group">
-                    <label class="text-primary" for="queryName">Query name</label>
-                    <input class="form-control" id="queryName" placeholder="Query name" type="text">
-                    <span class="help-block">Can use this name to locate the execution plan</span>
-
                     <label class="text-primary" for="areaName">Fence name</label>
                     <input class="form-control" id="areaName" placeholder="Area Name" type="text">
                     <span class="help-block">Name of the selected area(i.e colombo)</span>
@@ -658,7 +677,7 @@
                         </div>
                         <div class="btn-group">
                             <a id="exportGeoJson" download="geoJson.json" href="#"
-                               onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
+                               onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
                                class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
                                title="Export selected area as a geoJson file">Export</a>
                         </div>
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.js
index cba63457dc..a01115ce1d 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.js
@@ -45,8 +45,6 @@ function onRequest(context) {
     viewModel.device = device;
     viewModel.wsToken = token;
     viewModel.wsEndpoint = wsEndpoint;
-    log.error("----error-----");
-    log.error(device);
     if (device.latestDeviceInfo) {
         viewModel.lastLocation = stringify(device.latestDeviceInfo.location);
     } else if (device.location) {
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/exit_alert.html b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/exit_alert.html
index a10d767be2..8a9c9ea78c 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/exit_alert.html
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/exit_alert.html
@@ -23,7 +23,7 @@
                     </tr>
                     </thead>
                     <tbody>
-                    <div class="alert alert-danger fence-not-exist" role="alert">
+                    <div class="alert alert-info fence-not-exist" role="alert">
                         <strong>Oh snap!</strong> Can't find any geo-fence areas,please draw a new area or try again.
                     </div>
 
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/within_alert.html b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/within_alert.html
index b28f6d81e1..6055a12452 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/within_alert.html
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/within_alert.html
@@ -23,7 +23,7 @@
                     </tr>
                     </thead>
                     <tbody>
-                    <div class="alert alert-danger fence-not-exist" role="alert">
+                    <div class="alert alert-info fence-not-exist" role="alert">
                         <strong>Oh snap!</strong> Can't find any geo-fence areas,please draw a new area or try again.
                     </div>
 
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/view_fence_popup.html b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/view_fence_popup.html
index 4284bb5e6c..60eefbe9ab 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/view_fence_popup.html
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/view_fence_popup.html
@@ -20,50 +20,36 @@
     <title></title>
 </head>
 <body>
+<div id="viewExitAlert" >
+    <div class="popover-content">
+        <form role="form" style="width: auto">
+            <h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
+            <h6>Area name<span id="viewAreaName" class="label label-primary pull-right">N/A</span></h6>
+            <button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON($('#downloadLinkFwrd'),JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</button>
+            <button type="button" id="hideViewFence" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</button>
+        </form>
+    </div>
+</div>
 <div id="viewWithinAlert" >
-    <form role="form" style="width: auto">
-        <div class="form-group">
-            <label class="text-info">Query name</label>
-            <div id="viewQueryName" class="well well-sm"></div>
-
-            <label class="text-info">Area name</label>
-            <div id="viewAreaName" class="well well-sm"></div>
-        </div>
-        <div>
-            <div class="btn-group btn-group-sm btn-group-justified">
-                <div class="btn-group">
-                    <a id="exportGeoJson" download="geoJson.json" href="#" onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</a>
-                </div>
-                <div class="btn-group">
-                    <a id="hideViewFence" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</a>
-                </div>
-            </div>
-        </div>
-    </form>
+    <div class="popover-content">
+        <form role="form" style="width: auto">
+            <h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
+            <h6>Area name<span id="viewAreaName" class="label label-primary pull-right">N/A</span></h6>
+            <button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON($('#downloadLinkFwrd'),JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</button>
+            <button type="button" id="hideViewFence" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</button>
+        </form>
+    </div>
 </div>
 <div id="viewStationeryAlert" >
-    <form role="form" style="width: auto">
-        <div class="form-group">
-            <label class="text-info">Query name</label>
-            <div id="viewQueryName" class="well well-sm"></div>
-
-            <label class="text-info">Stationery name</label>
-            <div id="viewAreaName" class="well well-sm"></div>
-
-            <label class="text-info">Stationery time(Seconds)</label>
-            <div id="viewAreaTime" class="well well-sm"></div>
-        </div>
-        <div>
-            <div class="btn-group btn-group-sm btn-group-justified">
-                <div class="btn-group">
-                    <a id="exportGeoJson" download="geoJson.json" href="#" onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</a>
-                </div>
-                <div class="btn-group">
-                    <a id="hideViewFence" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</a>
-                </div>
-            </div>
-        </div>
-    </form>
+    <div class="popover-content">
+        <form role="form" style="width: auto">
+            <h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
+            <h6>Stationery name<span id="viewAreaName" class="label label-primary pull-right">N/A</span></h6>
+            <h6>Stationery time(Seconds)<span id="viewAreaTime" class="label label-primary pull-right">N/A</span></h6>
+            <button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON($('#downloadLinkFwrd'),JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</button>
+            <button type="button" id="hideViewFence" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</button>
+        </form>
+    </div>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/conf/alerts/Geo-ExecutionPlan-Exit_alert.siddhiql b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/conf/alerts/Geo-ExecutionPlan-Exit_alert.siddhiql
new file mode 100644
index 0000000000..53902ccfe5
--- /dev/null
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/conf/alerts/Geo-ExecutionPlan-Exit_alert.siddhiql
@@ -0,0 +1,20 @@
+/* Enter a unique ExecutionPlan */
+@Plan:name('$executionPlanName')
+
+/* Enter a unique description for ExecutionPlan */
+-- @Plan:description('ExecutionPlan')
+
+/* define streams/tables and write queries here ... */
+
+@Import('org.wso2.geo.StandardSpatialEvents:1.0.0')
+define stream dataIn (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string);
+
+@Export('org.wso2.geo.ProcessedSpatialEvents:1.0.0')
+define stream dataOut (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string, state string, information string);
+
+from dataIn[geo:within(longitude,latitude,"$geoFenceGeoJSON")==false and id == "$deviceId"]#geodashboard:subscribe()
+select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "ALERTED" as state, "This device is in $areaName restricted area!!!" as information
+insert into dataOut;
+from dataIn[geo:within(longitude,latitude,"$geoFenceGeoJSON")!=false and id == "$deviceId"]
+select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "NORMAL" as state, "" as information
+insert into dataOut;
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_fencing.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_fencing.js
index 7a67e92765..62eeeb0b16 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_fencing.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_fencing.js
@@ -138,6 +138,33 @@ function openTools(id) {
                 featureGroup: drawnItems
             }
         });
+    } else if(id=="Exit"){
+        // Initialise the draw control and pass it the FeatureGroup of editable layers
+        drawControl = new L.Control.Draw({
+                                             draw: {
+                                                 polygon: {
+                                                     allowIntersection: false, // Restricts shapes to simple polygons
+                                                     drawError: {
+                                                         color: '#e1e100', // Color the shape will turn when intersects
+                                                         message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
+                                                     },
+                                                     shapeOptions: {
+                                                         color: '#ff0043'
+                                                     }
+                                                 },
+                                                 rectangle: {
+                                                     shapeOptions: {
+                                                         color: '#002bff'
+                                                     }
+                                                 },
+                                                 polyline: false,
+                                                 circle: false, // Turns off this drawing tool
+                                                 marker: false // Markers are not applicable for within geo fencing
+                                             },
+                                             edit: {
+                                                 featureGroup: drawnItems
+                                             }
+                                         });
     } else if(id=="Stationery"){
         // Initialise the draw control and pass it the FeatureGroup of editable layers
 
@@ -235,6 +262,9 @@ function createPopup(layer,id) {
     if(id=="WithIn"){
         var popupTemplate = $('#setWithinAlert');
         popupTemplate.find('#addWithinAlert').attr('leaflet_id', layer._leaflet_id);
+    } else if(id=="Exit"){
+        var popupTemplate = $('#setExitAlert');
+        popupTemplate.find('#addExitAlert').attr('leaflet_id', layer._leaflet_id);
     } else if(id=="Stationery"){
         var popupTemplate = $('#setStationeryAlert');
         popupTemplate.find('#addStationeryAlert').attr('leaflet_id', layer._leaflet_id);
@@ -263,16 +293,18 @@ function closeTools(leafletId) {
 }
 
 /* Export selected area on the map as a json encoded geoJson standard file, no back-end calls simple HTML5 trick ;) */
-function exportToGeoJSON(link, content) {
+function exportToGeoJSON(element, content) {
     // HTML5 features has been used here
     var geoJsonData = 'data:application/json;charset=utf-8,' + encodeURIComponent(content);
     // TODO: replace closest()  by using persistence id for templates, template id prefixed by unique id(i.e leaflet_id)
-    var fileName = $(link).closest('form').find('#areaName').val() || 'geoJson';
-    $(link).attr({
-        'href': geoJsonData,
-        'target': '_blank',
-        'download': fileName + '.json' // Use the fence name given by the user as the file name of the JSON file
-    });
+    var fileName = $(element).closest('form').find('#areaName').val() || 'geoJson';
+    var link = document.createElement("a");
+    link.download = fileName + '.json'; // Use the fence name given by the user as the file name of the JSON file;
+    link.href = geoJsonData;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    delete link;
 }
 
 $(function () {
@@ -349,7 +381,7 @@ function viewFence(geoFenceElement,id) {
             popupTemplate.find('#viewAreaName').html(areaName);
             popupTemplate.find('#viewQueryName').html(queryName);
             popupTemplate.find('#viewAreaTime').html(stationeryTime);
-            geometryShape.bindPopup(popupTemplate.html(), {closeButton: false}).openPopup();
+            geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup();
             // transparent the layer .leaflet-popup-content-wrapper
             $(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
 
@@ -362,19 +394,19 @@ function viewFence(geoFenceElement,id) {
             popupTemplate.find('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
             popupTemplate.find('#viewAreaName').html(areaName);
             popupTemplate.find('#viewQueryName').html(queryName);
-            geometryShape.bindPopup(popupTemplate.html(), {closeButton: false}).openPopup();
+            geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup();
             // transparent the layer .leaflet-popup-content-wrapper
             $(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
         });
     } else if(id=="Exit"){
 
         $('#templateLoader').load(geoPublicUri + "/assets/html_templates/view_fence_popup.html #viewExitAlert", function () {
-            var popupTemplate = $('#templateLoader').find('#viewWithinAlert');
+            var popupTemplate = $('#templateLoader').find('#viewExitAlert');
             popupTemplate.find('#exportGeoJson').attr('leaflet_id', geometryShape._leaflet_id);
             popupTemplate.find('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
             popupTemplate.find('#viewAreaName').html(areaName);
             popupTemplate.find('#viewQueryName').html(queryName);
-            geometryShape.bindPopup(popupTemplate.html(), {closeButton: false}).openPopup();
+            geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup();
             // transparent the layer .leaflet-popup-content-wrapper
             $(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
         });
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js
index 2ee6393b53..9d157c59cd 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js
@@ -238,14 +238,11 @@ function setWithinAlert(leafletId) {
      * (look in get_alerts for .replace() method)
      * */
     var selectedAreaGeoJson = JSON.stringify(map._layers[leafletId].toGeoJSON().geometry).replace(/"/g, "'");
-    var queryName = $("#queryName").val();
     var areaName = $("#areaName").val();
+    var queryName = areaName;
 
 
-    if (queryName == null || queryName === undefined || queryName == "") {
-        var message = "Query Name cannot be empty.";
-        noty({text: message, type : 'error' });
-    } else if (areaName == null || areaName === undefined || areaName == "") {
+    if (areaName == null || areaName === undefined || areaName == "") {
         var message = "Area Name cannot be empty.";
         noty({text: message, type : 'error' });
     } else {
@@ -287,6 +284,59 @@ function setWithinAlert(leafletId) {
     }
 }
 
+function setExitAlert(leafletId) {
+    /*
+     * TODO: replace double quote to single quote because of a conflict when deploying execution plan in CEP
+     * this is against JSON standards so has been re-replaced when getting the data from governance registry
+     * (look in get_alerts for .replace() method)
+     * */
+    var selectedAreaGeoJson = JSON.stringify(map._layers[leafletId].toGeoJSON().geometry).replace(/"/g, "'");
+    var areaName = $("#areaName").val();
+    var queryName = areaName;
+
+
+    if (areaName == null || areaName === undefined || areaName == "") {
+        var message = "Area Name cannot be empty.";
+        noty({text: message, type : 'error' });
+    } else {
+        var data = {
+            'parseData': JSON.stringify({
+                                            'geoFenceGeoJSON': selectedAreaGeoJson,
+                                            'executionPlanName': createExecutionPlanName(queryName, "Exit", deviceId),
+                                            'areaName': areaName,
+                                            'deviceId' : deviceId
+                                        }),
+            'executionPlan': 'Exit',
+            'customName': areaName, // TODO: fix , When template copies there can be two queryName and areaName id elements in the DOM
+            'queryName': queryName,
+            'cepAction': 'deploy',
+            'deviceId' : deviceId
+        };
+
+        var serviceUrl = '/api/device-mgt/v1.0/geo-services/alerts/Exit/' + deviceType + '/' + deviceId;
+        var responseHandler = function (data, textStatus, xhr) {
+            closeTools(leafletId);
+            if (xhr.status == 200) {
+                noty({text: 'Successfully added alert', type : 'success'});
+            } else {
+                var ptrn = /(?:<am\:description>)(.*)(?:<\/am\:description>)/g;
+                var errorTxt;
+                if (result) {
+                    errorTxt = result.length > 1 ? result[1] : data;
+                } else {
+                    errorTxt = data;
+                }
+                noty({text: textStatus + ' : ' + errorTxt, type : 'error'});
+            }
+        };
+        invokerUtil.post(serviceUrl,
+                         data,
+                         responseHandler, function (xhr) {
+                responseHandler(xhr.responseText, xhr.statusText, xhr);
+            });
+    }
+}
+
 function setStationeryAlert(leafletId) {
 
     var selectedAreaGeoJson = map._layers[leafletId].toGeoJSON().geometry;
@@ -300,15 +350,12 @@ function setStationeryAlert(leafletId) {
 
     var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
 
-    var queryName = $("#queryName").val();
     var stationeryName = $("#areaName").val();
+    var queryName = stationeryName;
     var fluctuationRadius = $("#fRadius").val();
     var time = $("#time").val();
 
-    if (queryName == null || queryName === undefined || queryName == "") {
-        var message = "Query Name cannot be empty.";
-        noty({text: message, type : 'error' });
-    } else if (stationeryName == null || stationeryName === undefined || stationeryName == "") {
+    if (stationeryName == null || stationeryName === undefined || stationeryName == "") {
         var message = "Stationery Name cannot be empty.";
         noty({text: message, type : 'error' });
     } else if (fluctuationRadius == null || fluctuationRadius === undefined || fluctuationRadius == "") {
@@ -418,14 +465,11 @@ function setTrafficAlert(leafletId) {
 
     var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
 
-    var queryName = $("#queryName").val();
     var areaName = $("#areaName").val();
+    var queryName = areaName;
     //var time = $("#time").val();
 
-    if (queryName == null || queryName === undefined || queryName == "") {
-        var message = "Query Name cannot be empty.";
-        noty({text: message, type : 'error' });
-    } else if (areaName == null || areaName === undefined || areaName == "") {
+    if (areaName == null || areaName === undefined || areaName == "") {
         var message = "Area Name cannot be empty.";
         noty({text: message, type : 'error' });
     } else {
@@ -587,11 +631,11 @@ function createExecutionPlanName(queryName, id, deviceId) {
 
     if (id == "WithIn") {
         return 'Geo-ExecutionPlan-Within' + (queryName ? '_' + queryName : '') + "---" + (deviceId ? '_' + deviceId : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
-    }
-    else if (id == "Stationery") {
+    } else if(id == "Exit"){
+        return 'Geo-ExecutionPlan-Exit' + (queryName ? '_' + queryName : '') + "---" + (deviceId ? '_' + deviceId : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
+    } else if (id == "Stationery") {
         return 'Geo-ExecutionPlan-Stationery' + (queryName ? '_' + queryName : '') + "---" + (deviceId ? '_' + deviceId : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
-    }
-    else if (id == "Traffic") {
+    } else if (id == "Traffic") {
         return 'Geo-ExecutionPlan-Traffic' + (queryName ? '_' + queryName : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
     }