Improving geo fence ui

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

@@ -66,40 +66,6 @@
         <div id="map"></div>
     </div>
 
-
-    <div id="objectInfo" style="background: darkgray;display: none;border-radius: 13px;height: 94%;padding: 0; top: 20%; left: 83.54%; position: absolute"
-         class="col-md-2 pull-right">
-        <div class="panel-heading text-center">
-            <h4> Device ID: <span id="objectInfoId" class="text-info"></span>
-                <i id="objectInfoCloseButton" class="fa fa-times pull-right"
-                   onclick="$('#objectInfo').animate({width: ['toggle','swing']},200);toggled = false;spatialObject = currentSpatialObjects[selectedSpatialObject];spatialObject.removePath();spatialObject.marker.closePopup();selectedSpatialObject = null;">
-                </i>
-            </h4>
-        </div>
-        <br>
-        <div class="panel panel-default" style="overflow: auto;box-shadow: 0 0 8px 0 #635749">
-            <div class="panel-heading text-center"><h4>Speed variation</h4>
-            </div>
-            <br>
-            <div class="panel-body">
-                <div style="max-height: 100%;margin: 0;border: none;margin-left: -25px" id="chart_div"></div>
-            </div>
-        </div>
-
-
-        <div class="panel panel-default" style="max-height: 47%;overflow: auto;box-shadow: 0px 0px 8px 0px #635749">
-            <div class="panel-heading text-center">
-                <div class="panel-title"><h4>Alerts</h4></div>
-            </div>
-            <div class="panel-body" style="padding: 0px">
-                <div id="showAlertsArea" class="list-group" style="margin-top: 15px">
-
-                </div>
-
-            </div>
-        </div>
-    </div>
-
     <div id="predictionResults" style="background: darkgray;display: none;border-radius: 13px;height: 94%;padding: 0"
          class="col-md-2 pull-right">
         <div class="panel-heading text-center">
@@ -515,6 +481,7 @@
                 <p id="information" class="bg-primary" style="margin: 0px;padding: 0px;"></p>
                 <h6>Speed<span class="label label-primary pull-right"><span id="speed"></span> km/h</span></h6>
                 <h6>Heading<span id="heading" class="label label-primary pull-right"></span></h6>
+                <button type="button" class="btn btn-info btn-xs" onClick="toggleSpeedGraph();return false;">Speed Graph</button>
                 <button type="button" class="btn btn-info btn-xs" onClick="focusOnSpatialObject(document.getElementById('objectId').innerHTML);return false;">Recent History</button>
                 <button type="button" class="btn btn-info btn-xs" onClick="popupDateRange();">Full History</button>
             </div>
@@ -693,6 +660,7 @@
     {{js "js/leaflet/leaflet.markercluster.js" }}
     {{js "js/leaflet/L.Control.Locate.js" }}
     {{js "js/leaflet/L.Control.Focus.js" }}
+    {{js "js/leaflet/L.Control.GeoAlerts.js" }}
     {{js "js/leaflet/leaflet.groupedlayercontrol.js" }}
     {{js "js/leaflet/Leaflet.fullscreen.min.js" }}
     {{js "js/leaflet/Marker.Rotate.js" }}

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

@@ -113,6 +113,22 @@ input[type="radio"], input[type="checkbox"] {
         display: none;
     }
 }
+
+.leaflet-geo-alerts{
+    border-radius: 4px;
+    border: none;
+    background-color: white;
+    padding: 5px;
+    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+    width: 200px;
+    font-size: 11px;
+}
+
+.leaflet-geo-alerts a{
+    padding: 5px 10px;
+}
+
+
 /*
 
 !* Print Handling *!

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

@@ -44,11 +44,6 @@
     margin: 6px;
 }
 
-#objectInfoCloseButton:hover {
-    cursor: pointer;
-    color: firebrick;
-}
-
 .sectionJointStyle {
     stroke-dasharray: 3, 20;
 }

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

@@ -45,26 +45,10 @@ function initialLoad() {
         processAfterInitializationMap();
         //Access gps and make zoom to server location as map center
         //navigator.geolocation.getCurrentPosition(success, error);
-        setPageTitle();
         $("#loading").hide();
     }
 }
 
-function setPageTitle() {
-    var hash = window.parent.location.hash;
-    if(hash) {
-        var startIdx = hash.indexOf("/") + 1;
-        var lastIdx = hash.length;
-        var deviceInfoString = hash.substring(startIdx,lastIdx);
-        var deviceInfo = JSON.parse(deviceInfoString);
-        if(deviceInfo) {
-            var newTitle = "[ " + deviceInfo.device.id + "]" + " - Geo Dashboard ["  + deviceInfo.device.type + "]";
-            window.parent.document.title =  newTitle;
-            $("#title").val(newTitle)
-        }
-    }
-}
-
 //function success(position) {
 //    var browserLatitude = position.coords.latitude;
 //    var browserLongitude = position.coords.longitude;
@@ -150,6 +134,7 @@ function updateAttribution(e) {
 }
 
 var attributionControl;
+var geoAlertsBar;
 var groupedOverlays;
 var layerControl;
 
@@ -164,6 +149,9 @@ function processAfterInitializationMap() {
     };
     // map.addControl(attributionControl);
     map.addControl(L.control.fullscreen({position: 'bottomright'}));
+
+    geoAlertsBar = L.control.geoAlerts({position: 'topright'});
+    map.addControl(geoAlertsBar);
     //L.control.fullscreen({
     //    position: 'bottomright'
     //}).addTo(map);
@@ -300,18 +288,15 @@ function focusOnSpatialObject(objectId) {
     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();
-    if (!toggled) {
-        $('#objectInfo').animate({width: 'toggle'}, 100);
-        toggled = true;
-    }
     getAlertsHistory(deviceType, deviceId, new Date($('#timeFrom').val()).getTime(), new Date($('#timeTo').val()).getTime());
     spatialObject.drawPath();
+    if (speedGraphControl) {
         setTimeout(function () {
             createChart();
             chart.load({columns: [spatialObject.speedHistory.getArray()]});
         }, 100);
+    }
     map.addControl(L.control.focus({position: 'bottomright', marker: spatialObject.marker, zoomLevel: zoomLevel}));
 }
 
@@ -359,29 +344,41 @@ function timeSince(date) {
     }
 
     var seconds = Math.floor((new Date() - date) / 1000);
+    var intervalType;
 
     var interval = Math.floor(seconds / 31536000);
-
+    if (interval >= 1) {
-    if (interval > 1) {
+        intervalType = 'year';
-        return interval + " years";
+    } else {
-    }
         interval = Math.floor(seconds / 2592000);
-    if (interval > 1) {
+        if (interval >= 1) {
-        return interval + " months";
+            intervalType = 'month';
-    }
+        } else {
             interval = Math.floor(seconds / 86400);
-    if (interval > 1) {
+            if (interval >= 1) {
-        return interval + " days";
+                intervalType = 'day';
-    }
+            } else {
                 interval = Math.floor(seconds / 3600);
-    if (interval > 1) {
+                if (interval >= 1) {
-        return interval + " hours";
+                    intervalType = "hour";
-    }
+                } else {
                     interval = Math.floor(seconds / 60);
-    if (interval > 1) {
+                    if (interval >= 1) {
-        return interval + " minutes";
+                        intervalType = "minute";
+                    } else {
+                        interval = seconds;
+                        intervalType = "second";
+                    }
+                }
+            }
+        }
+    }
+
+    if (interval > 1 || interval === 0) {
+        intervalType += 's';
     }
-    return Math.floor(seconds) + " seconds ago";
+
+    return interval + ' ' + intervalType + ' ago';
 }
 
 function notifyError(message) {
@@ -404,6 +401,10 @@ function enableRealTime() {
 
 function InitSpatialObject() {
     var spatialObject = drawSpatialObject();
+    setTimeout(function () {
+                   map.setView(spatialObject.marker.getLatLng(), spatialObject.marker.zoomLevel, {animate: true});
+               }, 1000
+    );
     map.addControl(L.control.focus({position: 'bottomright', marker: spatialObject.marker, zoomLevel: zoomLevel}));
 }
 
@@ -456,17 +457,17 @@ function drawSpatialObject() {
 
     map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
 
-    $('#objectInfo').find('#objectInfoId').html(selectedSpatialObject);
+    var alertsFromDate = new Date();
+    alertsFromDate.setHours(alertsFromDate.getHours() - 24); //last 24 hours
+    getAlertsHistory(deviceType, deviceId, alertsFromDate.valueOf(), toDate.valueOf());
     spatialObject.marker.openPopup();
-    if (!toggled) {
-        $('#objectInfo').animate({width: 'toggle'}, 100);
-        toggled = true;
-    }
     spatialObject.drawPath();
+    if (speedGraphControl) {
         setTimeout(function () {
             createChart();
             chart.load({columns: [spatialObject.speedHistory.getArray()]});
         }, 100);
+    }
     return spatialObject;
 }
 
@@ -525,20 +526,17 @@ function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) {
         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();
-        if (!toggled) {
-            $('#objectInfo').animate({width: 'toggle'}, 100);
-            toggled = true;
-        }
         getAlertsHistory(deviceType, deviceId, new Date($('#timeFrom').val()).getTime(), new Date($('#timeTo').val()).getTime());
         spatialObject.drawPath();
+        if (speedGraphControl) {
             setTimeout(function () {
                 createChart();
                 chart.load({columns: [spatialObject.speedHistory.getArray()]});
             }, 100);
         }
     }
+}
 
 // Unfocused on current searched spatial object
 function clearFocus() {

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

@@ -17,6 +17,7 @@
  */
 
 var drawControl;
+var speedGraphControl;
 var removeAllControl;
 var drawnItems;
 var lastId;
@@ -285,6 +286,20 @@ function createPopup(layer,id) {
     $(layer._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
 }
 
+function toggleSpeedGraph(){
+    if (speedGraphControl) {
+        try {
+            map.removeControl(speedGraphControl);
+            speedGraphControl = null;
+        } catch (e) {
+            console.log("error: " + e.message);
+        }
+    } else {
+        speedGraphControl = new L.control.speedChart({'position' : 'topright'});
+        map.addControl(speedGraphControl);
+    }
+}
+
 function closeTools(leafletId) {
     map.removeLayer(map._layers[leafletId]);
     map.removeControl(drawControl);
@@ -336,7 +351,6 @@ function updateDrawing(updatedGeoJson) {
     map.addLayer(polygon);
     createPopup(polygon);
     closeAll();
-
 }
 
 function viewFence(geoFenceElement,id) {

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

@@ -531,6 +531,8 @@ function removeGeoFence(geoFenceElement, id) {
                        });
 }
 
+
+
 function getAlertsHistory(deviceType, deviceId, timeFrom, timeTo) {
     var timeRange = '';
     if (timeFrom && timeTo) {
@@ -539,42 +541,27 @@ function getAlertsHistory(deviceType, deviceId, timeFrom, timeTo) {
     var serviceUrl = '/api/device-mgt/v1.0/geo-services/alerts/history/' + deviceType + '/' + deviceId + timeRange;
     invokerUtil.get(serviceUrl,
                     function (data) {
-                        var alertsContainer = $('#showAlertsArea').empty();
+                        geoAlertsBar.clearAllAlerts();
                         var alerts = JSON.parse(data);
                         $.each(alerts, function (key, val) {
                             if(val.values){
                                 val = val.values;
                             }
-                            var alertDOMElement = document.createElement('a'); // Reason for using
+                            var msg = deviceType.charAt(0).toUpperCase() + deviceType.slice(1)  +
-                                                                               // document.createElement
+                                      " " +  deviceId +" "+ val.information.replace("Alerts: ,", "") + " - " + timeSince(val.timeStamp);
-                                                                               // (performance issue)
-                                                                               // http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent
                             switch (val.state) {
                                 case "NORMAL":
-//                                       $(alertDOMElement).addClass("list-group-item list-group-item-info");
                                     return;
                                 case "WARNING":
-                                    $(alertDOMElement).addClass("list-group-item list-group-item-warning");
+                                    geoAlertsBar.addAlert('warn', msg, val);
                                     break;
                                 case "ALERTED":
-                                    $(alertDOMElement).addClass("list-group-item list-group-item-danger");
+                                    geoAlertsBar.addAlert('danger', msg, val);
                                     break;
                                 case "OFFLINE":
-                                    $(alertDOMElement).addClass("list-group-item list-group-item-success");
+                                    geoAlertsBar.addAlert('info', msg, val);
                                     break;
                             }
-                            $(alertDOMElement).html(val.information);
-                            $(alertDOMElement).css({marginTop: "5px"});
-                            $(alertDOMElement).attr('onClick', 'showAlertInMap(this)');
-
-                            // Set HTML5 data attributes for later use
-                            $(alertDOMElement).attr('data-id', val.id);
-                            $(alertDOMElement).attr('data-latitude', val.latitude);
-                            $(alertDOMElement).attr('data-longitude', val.longitude);
-                            $(alertDOMElement).attr('data-state', val.state);
-                            $(alertDOMElement).attr('data-information', val.information);
-
-                            alertsContainer.append(alertDOMElement);
                         });
                     }, function (message) {
             console.log(message);

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

@@ -40,22 +40,12 @@ L.Control.Focus = L.Control.extend({
             .on(link, 'click', L.DomEvent.stopPropagation)
             .on(link, 'click', L.DomEvent.preventDefault)
             .on(link, 'click', function () {
-                    focus();
-            })
-            .on(link, 'dblclick', L.DomEvent.stopPropagation);
-
-        var focus = function () {
-            visualizeLocation();
-        };
-
-        var visualizeLocation = function () {
                 // self.options.latlng
                 map.setView(self.options.marker.getLatLng(), self.options.marker.zoomLevel, {animate: true});
                 self.options.marker.openPopup();
-        };
+            })
+            .on(link, 'dblclick', L.DomEvent.stopPropagation);
 
-        // make focus functions available to outside world
-        this.focus = focus;
         return container;
     }
 });
@@ -70,21 +60,3 @@ L.Map.addInitHook(function () {
 L.control.focus = function (options) {
     return new L.Control.Focus(options);
 };
-
-(function () {
-    // leaflet.js raises bug when trying to addClass / removeClass multiple classes at once
-    // Let's create a wrapper on it which fixes it.
-    var LDomUtilApplyClassesMethod = function (method, element, classNames) {
-        classNames = classNames.split(' ');
-        classNames.forEach(function (className) {
-            L.DomUtil[method].call(this, element, className);
-        });
-    };
-
-    L.DomUtil.addClasses = function (el, names) {
-        LDomUtilApplyClassesMethod('addClass', el, names);
-    };
-    L.DomUtil.removeClasses = function (el, names) {
-        LDomUtilApplyClassesMethod('removeClass', el, names);
-    };
-})();

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

@@ -0,0 +1,186 @@
+/*
+ *  Copyright (c) 2017, 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.
+ */
+L.Control.GeoAlertCompact = L.Control.extend({
+   options: {
+       position: 'topright',
+       icon: 'fw fw-notification',  // icon-location or icon-direction
+       strings: {
+           title: "Show the device"
+       },
+       marker: {},
+       zoomLevel: 13,
+       alerts: {}
+   },
+
+   onAdd: function (map) {
+       var self = this;
+       var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+
+       var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
+       link.href = '#';
+       link.title = this.options.strings.title;
+
+       var alertsCount = this.options.alerts.length;
+       if (alertsCount > 0) {
+           var spanMain = L.DomUtil.create('i', 'fw-stack', link);
+           L.DomUtil.create('i', this.options.icon + ' fw-stack-2x', spanMain);
+           var span = L.DomUtil.create('span', 'fw-stack fw-move-right fw-move-bottom', spanMain);
+           L.DomUtil.create('i', 'fw fw-circle fw-stack-2x fw-stroke', span);
+           var num = L.DomUtil.create('i', 'fw fw-number fw-stack-1x fw-inverse', span);
+           num.innerHTML = (alertsCount < 100) ? alertsCount + "" : "99+";
+       } else {
+           L.DomUtil.create('i', this.options.icon, link);
+       }
+
+       L.DomEvent
+           .on(link, 'click', L.DomEvent.stopPropagation)
+           .on(link, 'click', L.DomEvent.preventDefault)
+           .on(link, 'click', function () {
+               link.remove();
+               self.removeFrom(map);
+               toggleSpeedGraph();
+               map.addControl(L.control.geoAlerts());
+               for (var i = 0; i < self.options.alerts.length; i++) {
+                   var alert = self.options.alerts[i];
+                   L.DomUtil.get("geoAlertContainer").appendChild(alert);
+                   i--; //because dom manipulation
+               }
+               toggleSpeedGraph();
+               self = null;
+           })
+           .on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+       return container;
+   }
+});
+
+L.control.geoAlertCompact = function (options) {
+    return new L.Control.GeoAlertCompact(options);
+};
+
+L.Control.GeoAlerts = L.Control.extend({
+    options: {
+        position: 'topright'
+    },
+
+    onAdd: function (map) {
+        var self = this;
+        var container = L.DomUtil.create('div', 'leaflet-control list-group leaflet-geo-alerts');
+        container.id = "geoAlertContainer";
+
+        var title = L.DomUtil.create('h5', '', container);
+        title.innerHTML = "Geo Alerts";
+
+        var closeBtn = L.DomUtil.create('a', 'leaflet-popup-close-button', container);
+        closeBtn.href = "#close";
+        closeBtn.innerHTML = "×";
+        L.DomEvent
+            .addListener(closeBtn, 'click', L.DomEvent.stopPropagation)
+            .addListener(closeBtn, 'click', L.DomEvent.preventDefault)
+            .addListener(closeBtn, 'click', function () {
+                closeBtn.remove();
+                var alerts = L.DomUtil.get("geoAlertContainer").getElementsByClassName("leaflet-geo-alert");
+                self.removeFrom(map);
+                var alertCompactControl = L.control.geoAlertCompact({'alerts':alerts});
+                toggleSpeedGraph();
+                map.addControl(alertCompactControl);
+                toggleSpeedGraph();
+                self = null;
+            });
+
+        this.options.alertContainer = container;
+        return container;
+    },
+
+    addAlert: function (state, text, alert){
+        var container = L.DomUtil.get("geoAlertContainer");
+        var link = L.DomUtil.create('a', 'leaflet-geo-alert list-group-item list-group-item alert alert-' + state, container);
+        link.href = 'javascript:void()';
+        link.innerHTML = text;
+        link.setAttribute('onClick', 'showAlertInMap(this)');
+
+        // Set HTML5 data attributes for later use
+        link.setAttribute('data-id', alert.id);
+        link.setAttribute('data-latitude', alert.latitude);
+        link.setAttribute('data-longitude', alert.longitude);
+        link.setAttribute('data-state', alert.state);
+        link.setAttribute('data-information', alert.information);
+    },
+
+    getAllAlerts: function (){
+        return L.DomUtil.get("geoAlertContainer").getElementsByClassName("leaflet-geo-alert");
+    },
+
+    clearAllAlerts: function () {
+        var alerts = L.DomUtil.get("geoAlertContainer").getElementsByClassName("leaflet-geo-alert");
+        while(alerts[0]){
+            alerts[0].parentNode.removeChild(alerts[0]);
+        }
+    }
+});
+
+L.Map.addInitHook(function () {
+    if (this.options.geoAlertsControl) {
+        this.geoAlertsControl = L.control.geoAlerts();
+        this.addControl(this.geoAlertsControl);
+    }
+});
+
+L.control.geoAlerts = function (options) {
+    return new L.Control.GeoAlerts(options);
+};
+
+L.Control.SpeedChart = L.Control.extend({
+   options: {
+       position: 'topleft',
+       alerts: {}
+   },
+
+   onAdd: function (map) {
+       var self = this;
+       var container = L.DomUtil.create('div', 'leaflet-control list-group leaflet-geo-alerts');
+
+       var title = L.DomUtil.create('h5', '', container);
+       title.innerHTML = "Speed";
+
+       var closeBtn = L.DomUtil.create('a', 'leaflet-popup-close-button', container);
+       closeBtn.href = "#close";
+       closeBtn.innerHTML = "×";
+       L.DomEvent
+           .addListener(closeBtn, 'click', L.DomEvent.stopPropagation)
+           .addListener(closeBtn, 'click', L.DomEvent.preventDefault)
+           .addListener(closeBtn, 'click', function () {
+               closeBtn.remove();
+               speedGraphControl.removeFrom(map);
+               speedGraphControl = null;
+           });
+
+       var chartDiv = L.DomUtil.create('div', '', container);
+       chartDiv.id = 'chart_div';
+       this.options.alertContainer = container;
+       return container;
+   },
+
+   updateGraph: function () {
+       var alerts = L.DomUtil.get("chart_div");
+   }
+});
+
+L.control.speedChart = function (options) {
+    return new L.Control.SpeedChart(options);
+};