Fixes to geo-fencing ui

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs

@@ -43,6 +43,7 @@
 data-device-location="{{lastLocation}}"></span>
 
 <div class="map-wrapper">
+    {{#unless @unit.params.hideSearch}}
     <div class="navbar-collapse collapse" style="display:inline-block;">
         <ul class="nav navbar-nav-right">
             <li>
@@ -58,75 +59,7 @@ data-device-location="{{lastLocation}}"></span>
             </li>
         </ul>
     </div>
-
+    {{/unless}}
-
-    <div id="left_side_pannel" class="col-lg-2">
-        <ul class="nav nav-sidebar">
-            <li>
-                <a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
-                    <span class="fw fw-notification"></span> Set alerts <span class="caret pull-right"></span>
-                </a>
-                <div class="collapse" id="toggleDemo" style="height: 0px;">
-                    <ul class="nav nav-list">
-                        <li><a data-target="#commonModal" data-toggle="modal" href="{{@unit.publicUri}}/assets/html_templates/modal/speed_alert.html"><i class="glyphicon glyphicon-dashboard"></i> Speed Alert</a></li>
-                        <li><a data-target="#commonModal" data-toggle="modal" href="{{@unit.publicUri}}/assets/html_templates/modal/stationery_alert.html"><i class="glyphicon glyphicon-link"></i> Stationary Alert</a></li>
-                    </ul>
-                </div>
-            </li>
-            <li>
-                <a href="#" data-toggle="collapse" data-target="#toggleGeoFencing" data-parent="#sidenav01" class="collapsed">
-                    <span class="fw fw-map-location"></span> Geo Fencing <span class="caret pull-right"></span>
-                </a>
-                <div class="collapse" id="toggleGeoFencing" style="height: 0px;">
-                    <ul class="nav nav-list">
-                        <li><a data-target="#commonModal" data-toggle="modal"
-                               href="{{@unit.publicUri}}/assets/html_templates/modal/within_alert.html">
-                            <i class="glyphicon glyphicon-edit"></i> Within Alert</a></li>
-                    </ul>
-                </div>
-            </li>
-        </ul>
-
-        <!--<div class="uk-offcanvas-bar" style="box-shadow: 3px 14px 13px -2px #211404;">-->
-            <!--<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>-->
-                <!--<li class="uk-parent" style="box-shadow: 0 2px 12px 1px #2D1600;min-height: 50px;line-height: 25px;">-->
-                    <!--<a style="min-height: 50px;">-->
-                        <!--<span style="color: #d58512">WSO<sub style="font-size: medium;">2</sub></span> Geo Dashboard-->
-                    <!--</a>-->
-                <!--</li>-->
-                <!--<li class="uk-nav-header">Alerts</li>-->
-                <!--<li class="uk-parent">-->
-                    <!--<a href="#"><i class="fa fa-pencil-square-o"></i> Set alerts</a>-->
-                    <!--<ul class="uk-nav-sub">-->
-                        <!--<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/speed_alert.jag"-->
-                               <!--data-target="#commonModal"><i class="fa fa-tachometer"></i> Speed alert</a></li>-->
-                        <!--<li id = "proximity_alert"><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/proximity_alert.jag"-->
-                                                      <!--data-target="#commonModal"><i class="fa fa-link"></i> Proximity alert</a></li>-->
-                        <!--<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/stationery_alert.jag"-->
-                               <!--data-target="#commonModal"><i class="fa fa-chain-broken"></i> Stationary alert</a></li>-->
-                        <!--&lt;!&ndash;<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/traffic_point.jag"&ndash;&gt;-->
-                                           <!--&lt;!&ndash;data-target="#commonModal"><i class="fa fa-square-o"></i> Congestion Alert</a></li>&ndash;&gt;-->
-                    <!--</ul>-->
-                <!--</li>-->
-                <!--<li class="uk-parent">-->
-                    <!--<a href="#"><i class="fa fa-filter"></i> Geo-fencing</a>-->
-                    <!--<ul class="uk-nav-sub">-->
-                        <!--<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/within_alert.jag"-->
-                               <!--data-target="#commonModal"><i class="fa fa-square-o"></i> Within</a></li>-->
-                    <!--</ul>-->
-                <!--</li>-->
-
-                <!--<li class="uk-sub">-->
-                    <!--<a onclick="-->
-                    <!--$('.removeGeoFence').tooltip(); openTools('Prediction')"><i class="fa fa-paper-plane"></i> Traffic-->
-                        <!--Prediction</a>-->
-                <!--</li>-->
-
-            <!--</ul>
-
-        </div>-->
-    </div>
-
 
     <div id="" style="height: 100vh;">
         <!-- Sidebar -->
@@ -187,13 +120,6 @@ data-device-location="{{lastLocation}}"></span>
         </div>
     </div>
 
-
-
-
-
-
-
-
     <div id="loading">
         <div class="loading-indicator">
             <div class="progress progress-striped active">
@@ -202,7 +128,6 @@ data-device-location="{{lastLocation}}"></span>
         </div>
     </div>
 
-
     <div class="modal" id="aboutModal" tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
@@ -769,6 +694,28 @@ data-device-location="{{lastLocation}}"></span>
     {{js "js/app.js" }}
     {{js "js/websocket.js" }}
     {{js "js/geo_fencing.js" }}
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+            var geoLocationLink = $(".initGeoLocationLink");
+            if (geoLocationLink) {
+                geoLocationLink.on('click', function () {
+                    initializeGeoLocation()
+                });
+                {{#if showGeoFencingTools}}
+                    var locationItems = geoLocationLink.closest('li');
+                    var geoToolsMenu = $("<ul/>", {class: 'collapse list-group geo-tools'}).appendTo(locationItems);
+                    geoPublicUri = $("#geo-charts").data("geo-public-uri");
+                    createGeoToolListItem(geoPublicUri + '/assets/html_templates/modal/speed_alert.html',
+                                          'Set Speed Alert', 'glyphicon glyphicon-dashboard', geoToolsMenu);
+                    createGeoToolListItem(geoPublicUri + '/assets/html_templates/modal/stationery_alert.html',
+                                          'Add Stationary Alert', 'glyphicon glyphicon-link', geoToolsMenu);
+                    createGeoToolListItem(geoPublicUri + '/assets/html_templates/modal/within_alert.html',
+                                          'Add Geo Fence Alert', 'glyphicon glyphicon-edit', geoToolsMenu);
+                {{/if}}
+            }
+        });
+    </script>
 {{/zone}}
 
 

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.js

@@ -54,5 +54,6 @@ function onRequest(context) {
     } else {
         viewModel.lastLocation = stringify({});
     }
+    viewModel.showGeoFencingTools = true;
     return viewModel;
 }

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/css/app.css

@@ -13,7 +13,6 @@ input[type="radio"], input[type="checkbox"] {
 #map {
     width: auto;
     height: 100%;
-    box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 #loading {
     position: absolute;

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/css/leaflet.css

@@ -86,7 +86,7 @@
 .leaflet-top,
 .leaflet-bottom {
 	position: absolute;
-	z-index: 1000;
+	z-index: 999;
 	pointer-events: none;
 	}
 .leaflet-top {

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js

@@ -31,6 +31,10 @@ $('body').on('hidden.bs.modal', '.modal', function () {
 /*Map layer configurations*/
 var map;
 
+var zoomLevel = 15;
+var tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+var attribution = "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
+
 function initialLoad() {
     if (document.getElementById('map') == null) {
         setTimeout(initialLoad, 500); // give everything some time to render
@@ -101,6 +105,8 @@ function initializeMap() {
         maxZoom: 20,
         maxNativeZoom: 18
     });
+    L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
+
     map.zoomControl.setPosition('bottomleft');
     map.on('click', function (e) {
         $.noty.closeAll();
@@ -291,7 +297,7 @@ function focusOnSpatialObject(objectId) {
         return true;
     }
 
-    map.setView(spatialObject.marker.getLatLng(), 15, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
+    map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
 
     $('#objectInfo').find('#objectInfoId').html(selectedSpatialObject);
     spatialObject.marker.openPopup();
@@ -315,15 +321,6 @@ var getProviderData = function (timeFrom, timeTo) {
     deviceId = deviceDetails.data("deviceid");
     deviceType = deviceDetails.data("type");
 
-    // $.ajax({
-    //     url: context + '/api/geo-location/' + deviceType + '/' + deviceId + '?from=' + timeFrom + '&to=' + timeTo,
-    //     method: "GET",
-    //     contentType: "application/json",
-    //     async: false,
-    //     success: function (data) {
-    //         tableData = data;
-    //     }
-    // });
     var serviceUrl = '/api/device-mgt/v1.0/geo-services/stats/' + deviceType + '/' + deviceId + '?from=' + timeFrom + '&to=' + timeTo;
     invokerUtil.get(serviceUrl,
                     function (data) {
@@ -445,7 +442,7 @@ function InitSpatialObject() {
         return true;
     }
 
-    map.setView(spatialObject.marker.getLatLng(), 15, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
+    map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
 
     $('#objectInfo').find('#objectInfoId').html(selectedSpatialObject);
     spatialObject.marker.openPopup();
@@ -510,7 +507,7 @@ function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) {
             return true;
         }
 
-        map.setView(spatialObject.marker.getLatLng(), 15, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
+        map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
 
         $('#objectInfo').find('#objectInfoId').html(selectedSpatialObject);
         spatialObject.marker.openPopup();
@@ -535,3 +532,11 @@ function clearFocus() {
         selectedSpatialObject = null;
     }
 }
+
+function createGeoToolListItem(link, text, icon, menuRoot) {
+    var listItem = $("<li/>", { class: 'list-group-item'}).appendTo(menuRoot);
+    var anchor = $("<a/>", {href: link, text: ' ' + text}).appendTo(listItem);
+    anchor.attr('data-toggle', 'modal');
+    anchor.attr('data-target', '#commonModal');
+    $("<i/>", {class: icon}).prependTo(anchor);
+}

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

@@ -308,7 +308,12 @@ function updateDrawing(updatedGeoJson) {
 }
 
 function viewFence(geoFenceElement,id) {
-    var geoJson = JSON.parse($(geoFenceElement).attr('data-geoJson').replace(/'/g, '"'));
+    var geoJson = $(geoFenceElement).attr('data-geoJson');
+    var matchResults = /(?:"geoFenceGeoJSON"):"{(.*)}"/g.exec(geoJson);
+    if (matchResults.length > 1) {
+        geoJson = "{" + matchResults[1] + "}";
+    }
+    geoJson = JSON.parse(geoJson.replace(/'/g, '"'));
     var queryName = $(geoFenceElement).attr('data-queryName');
     var areaName = $(geoFenceElement).attr('data-areaName');
     var geometryShape;

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_stationary.js

@@ -24,7 +24,6 @@ function initStationaryAlert() {
     invokerUtil.get(serverUrl, function (response) {
         if (response) {
             response = JSON.parse(response);
-            console.log(response);
             $(".fence-not-exist").hide();
             for (var index in response) {
                 var alert = response[index];

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/websocket.js

@@ -638,7 +638,7 @@ function initializeOnAlertWebSocket() {
     onAlertWebsocket.onopen = webSocketOnAlertOpen;
 }
 
-function initializeGeoFencing() {
+function initializeGeoLocation() {
     var deviceDetails = $(".device-id");
     deviceId = deviceDetails.data("deviceid");
     deviceType = deviceDetails.data("type");

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-common.css

@@ -275,3 +275,18 @@ header .username {
 ul#noty_topRight_layout_container li{
     margin-bottom: 10px;
 }
+
+.list-group-item.active > .list-group{
+    display: block;
+    margin-bottom: 0px;
+}
+
+.list-group-item.active > .list-group > .list-group-item > a{
+    background: none;
+}
+
+.list-group-item.active > .list-group > .list-group-item > a:active,
+.list-group-item.active > .list-group > .list-group-item > a:focus,
+.list-group-item.active > .list-group > .list-group-item > a:hover{
+    color : whitesmoke;
+}