Fixing product-iots#1313

Fixed https://github.com/wso2/product-iots/issues/1313

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

@@ -431,3 +431,76 @@ function viewFence(geoFenceElement,id) {
     }
     closeAll();
 }
+
+function viewFenceByData(geoJson, queryName, areaName, stationeryTime, id) {
+    var matchResults = /(?:"geoFenceGeoJSON"):"{(.*)}"/g.exec(geoJson);
+    if (matchResults && matchResults.length > 1) {
+        geoJson = "{" + matchResults[1] + "}";
+    }
+    geoJson = JSON.parse(geoJson.replace(/'/g, '"'));
+    var geometryShape;
+
+    if(geoJson.type=="Point"){
+
+        var circleOptions = {
+            color: '#ff0043'
+        };
+        geometryShape= new L.circle([geoJson.coordinates[1],geoJson.coordinates[0]], geoJson.radius,circleOptions);
+        // var marker=new L.marker([geoJson.coordinates[1],geoJson.coordinates[0]]);
+        map.addLayer(geometryShape);
+        //  map.addLayer(marker);
+    } else if(geoJson.type=="Polygon"){
+        geoJson.coordinates[0].pop(); // popout the last coordinate set(lat,lng pair) due to circular chain
+        var leafletLatLngs = [];
+        $.each(geoJson.coordinates[0], function (idx, pItem) {
+            leafletLatLngs.push({lat: pItem[1], lng: pItem[0]});
+        });
+        geometryShape = new L.Polygon(leafletLatLngs);
+        map.addLayer(geometryShape);
+    }
+
+    var geoPublicUri = $("#geo-charts").data("geo-public-uri");
+
+    if(id=="Stationery"){
+
+        $('#templateLoader').load(geoPublicUri + "/assets/html_templates/view_fence_popup.html #viewStationeryAlert", function () {
+            var popupTemplate = $('#templateLoader').find('#viewStationeryAlert');
+            popupTemplate.find('#exportGeoJson').attr('leaflet_id', geometryShape._leaflet_id);
+            popupTemplate.find('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
+            popupTemplate.find('#viewAreaTime').html(stationeryTime);
+            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=="WithIn"){
+
+        $('#templateLoader').load(geoPublicUri + "/assets/html_templates/view_fence_popup.html #viewWithinAlert", function () {
+            var popupTemplate = $('#templateLoader').find('#viewWithinAlert');
+            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('#withinAlertForm').attr('area-name', areaName);
+            popupTemplate.find('#withinAlertForm').attr('query-name', queryName);
+            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('#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('#exitAlertForm').attr('area-name', areaName);
+            popupTemplate.find('#exitAlertForm').attr('query-name', queryName);
+            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=="Traffic"){
+    }
+    closeAll();
+}
+

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

@@ -278,6 +278,7 @@ function setWithinAlert(leafletId) {
                          responseHandler, function (xhr) {
                 responseHandler(xhr.responseText, xhr.statusText, xhr);
             });
+        viewFenceByData(selectedAreaGeoJson, queryName, areaName, null, 'Within');
     }
 }
 
@@ -335,6 +336,7 @@ function setExitAlert(leafletId) {
                          responseHandler, function (xhr) {
                 responseHandler(xhr.responseText, xhr.statusText, xhr);
             });
+        viewFenceByData(selectedAreaGeoJson, queryName, areaName, null, 'Exit');
     }
 }
 
@@ -407,6 +409,7 @@ function setStationeryAlert(leafletId) {
                          responseHandler, function (xhr) {
                 responseHandler(xhr.responseText, xhr.statusText, xhr);
             });
+        viewFenceByData(selectedProcessedAreaGeoJson, queryName, areaName, time, 'Stationery');
     }