adding location history to map view

components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.device-view/device-view.hbs

@@ -15,6 +15,7 @@
   specific language governing permissions and limitations
   under the License.
 }}
+{{unit "cdmf.unit.device.type.android_sense.leaflet"}}
 {{#zone "topCss"}}
     <style>
         .thumbnail.icon:before {
@@ -33,12 +34,12 @@
 {{#zone "device-view-tabs"}}
     <li class="active"><a class="list-group-item" href="#device_statistics" role="tab"
                           data-toggle="tab" aria-controls="device_statistics">Device
-                                                                              Statistics</a>
+        Statistics</a>
     </li>
     <li><a class="list-group-item" href="#event_log" role="tab" data-toggle="tab"
            aria-controls="event_log">Operations Log</a></li>
-    <li><a class="list-group-item" href="#geo_dashboard" role="tab" data-toggle="tab"
+    <li><a class="list-group-item location_tab" href="#geo_dashboard" role="tab" data-toggle="tab"
-           aria-controls="geo_dashboard">Geo Fencing</a></li>
+           aria-controls="geo_dashboard">Device Location</a></li>
 {{/zone}}
 
 {{#zone "device-view-tab-contents"}}
@@ -71,18 +72,34 @@
     </div>
     <div class="panel panel-default tab-pane"
          id="geo_dashboard" role="tabpanel" aria-labelledby="geo_dashboard">
-        <div class="panel-heading">Geo Fencing</div>
+        <div class="panel-heading">Device Location</div>
-
+        {{#if locationHistory}}
+            <div id="device-location"
+                 data-locations = "{{locationHistory}}">
+            </div>
+            <br/>
+            <a class="padding-left" target="_blank"
+               href="{{portalUrl}}/portal/dashboards/geo-dashboard/?GLOBAL-STATE={{anchor}}">
+                                <span class="fw-stack">
+                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                    <i class="fw fw-map-location fw-stack-1x"></i>
+                                </span>  Add Geo Fencing
+            </a>
+        {{else}}
+            <div id="map-error" class="message message-warning">
+                <h4 class="remove-margin">
+                    <i class="icon fw fw-warning"></i>
+                    Device location information is not available.
+                </h4>
+            </div>
+            <p class="add-padding-5x"></p>
+            <p class="add-padding-5x"></p>
+            <p class="add-padding-5x"></p>
+        {{/if}}
         <div id="chartWrapper">
         </div>
-
-        <a class="padding-left" target="_blank" 
-           href="{{portalUrl}}/portal/dashboards/geo-dashboard/?GLOBAL-STATE={{anchor}}">
-
-            <span class="fw-stack">
-                <i class="fw fw-circle-outline fw-stack-2x"></i>
-                <i class="fw fw-statistics fw-stack-1x"></i>
-            </span> Add Geo Fencing
-        </a>
     </div>
 {{/zone}}
+{{#zone "bottomJs"}}
+    {{js "js/load-map.js"}}
+{{/zone}}

components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.device-view/device-view.js

@@ -30,13 +30,14 @@ function onRequest(context) {
         var device = deviceModule.viewDevice(deviceType, deviceId);
         if (device && device.status != "error") {
             var anchor = { "device" : { "id" : device.content.deviceIdentifier, "type" : device.content.type}};
-            return {
+            var viewObject = {};
-                "device": device.content,
+            viewObject.device = device.content;
-                "autoCompleteParams": autoCompleteParams,
+            viewObject.autoCompleteParams = autoCompleteParams;
-                "encodedFeaturePayloads": "",
+            viewObject.encodedFeaturePayloads = "";
-                "portalUrl" : devicemgtProps['portalURL'],
+            viewObject.portalUrl = devicemgtProps['portalURL'];
-                "anchor" : encodeURI(JSON.stringify(anchor))
+            viewObject.anchor = encodeURI(JSON.stringify(anchor));
-            };
+            viewObject.locationHistory = stringify(device.content.locationHistory);
+            return viewObject;
         } else {
             response.sendError(404, "Device Id " + deviceId + " of type " + deviceType + " cannot be found!");
             exit();

components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.device-view/public/js/load-map.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+var map;
+
+function loadLeafletMap() {
+    var deviceLocationID = "#device-location",
+        locations = $(deviceLocationID).data("locations"),
+        container = "device-location",
+        zoomLevel = 13,
+        tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        attribution = "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
+    if (locations) {
+
+        var locationSets = locations.locations;
+        map = L.map(container).setView([locationSets[0].lat, locationSets[0].lng], zoomLevel);
+        L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
+
+        for(var i = 0; i < locationSets.length; i++){
+            console.log(locationSets[i]);
+            var m = L.marker(locationSets[i]).addTo(map).bindPopup(new Date(locations.times[i].time).toISOString())
+            m.on('mouseover', function (e) {
+                this.openPopup();
+            });
+            m.on('mouseout', function (e) {
+                this.closePopup();
+            });
+        }
+
+        $("#map-error").hide();
+        $("#device-location").show();
+    } else {
+        $("#device-location").hide();
+        $("#map-error").show();
+    }
+}
+
+$(document).ready(function () {
+    $(".location_tab").on("click", function() {
+                loadLeafletMap();
+            });
+});