From 324d4a9a9252527ee11f3d6dc42849776b210a24 Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Sun, 17 Jul 2016 06:37:36 -0700 Subject: [PATCH 1/2] Port over metrics screen improvements - Add loading screen - Add option to select frequency of binning --- webapp/www/js/metrics.js | 31 +++++++++++++++++++++++++++++-- webapp/www/templates/metrics.html | 8 ++++++-- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/webapp/www/js/metrics.js b/webapp/www/js/metrics.js index 05e7c562d..dc059fbaf 100644 --- a/webapp/www/js/metrics.js +++ b/webapp/www/js/metrics.js @@ -1,6 +1,6 @@ angular.module('starter.metrics', ['nvd3']) -.controller('MetricsCtrl', function($scope, $ionicActionSheet, $http) { +.controller('MetricsCtrl', function($scope, $ionicActionSheet, $ionicLoading, $http) { $scope.options = { chart: { type: 'multiBarChart', @@ -48,14 +48,18 @@ angular.module('starter.metrics', ['nvd3']) $scope.getMetrics = function() { var data = { - freq: 'DAILY', + freq: $scope.selectCtrl.freq, start_time: $scope.selectCtrl.fromDate, end_time: $scope.selectCtrl.toDate, metric: $scope.selectCtrl.metric }; console.log("Sending data "+JSON.stringify(data)); + $ionicLoading.show({ + template: 'Loading...' + }); $http.post("/result/metrics/local_date", data) .then(function(response) { + $ionicLoading.hide(); if (angular.isDefined(response.data.aggregate_metrics)) { console.log("Got aggregate result "+response.data.aggregate_metrics.length); $scope.showCharts(response.data.aggregate_metrics) @@ -64,6 +68,7 @@ angular.module('starter.metrics', ['nvd3']) console.log("did not find aggregate result in response data "+JSON.stringify(response.data)); } }, function(error) { + $ionicLoading.hide(); console.log("Got error %s while trying to read metric data" + JSON.stringify(error)); }); @@ -107,6 +112,12 @@ angular.module('starter.metrics', ['nvd3']) {text: "MEDIAN_SPEED", value: 'median_speed'} ]; + $scope.freqOptions = [ + {text: "DAILY", value:'DAILY'}, + {text: "MONTHLY", value: 'MONTHLY'}, + {text: "YEARLY", value: 'YEARLY'} + ]; + $scope.changeFromWeekday = function() { return $scope.changeWeekday(function(newVal) { $scope.selectCtrl.fromDateWeekdayString = newVal; @@ -157,11 +168,27 @@ angular.module('starter.metrics', ['nvd3']) }); }; + $scope.changeFreq = function() { + $ionicActionSheet.show({ + buttons: $scope.freqOptions, + titleText: "Select summary freq", + cancelText: "Cancel", + buttonClicked: function(index, button) { + $scope.selectCtrl.freqString = button.text; + $scope.selectCtrl.freq = button.value; + return true; + } + }); + }; + + var initSelect = function() { var now = moment(); var monthago = moment().subtract(3, 'M'); $scope.selectCtrl.metric = 'count'; $scope.selectCtrl.metricString = "COUNT"; + $scope.selectCtrl.freq = 'MONTHLY'; + $scope.selectCtrl.freqString = "MONTHLY"; $scope.selectCtrl.fromDate = moment2Localdate(monthago) $scope.selectCtrl.toDate = moment2Localdate(now); $scope.selectCtrl.fromDateWeekdayString = "All" diff --git a/webapp/www/templates/metrics.html b/webapp/www/templates/metrics.html index 28230aed6..a0179f4e1 100644 --- a/webapp/www/templates/metrics.html +++ b/webapp/www/templates/metrics.html @@ -1,11 +1,11 @@
-
+
-
+
@@ -47,6 +47,10 @@
+
+ +
From d8cd33921b94f7348a78ec5a699895eb9c579512 Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Sun, 17 Jul 2016 07:55:25 -0700 Subject: [PATCH 2/2] Enable loading on the webapp heatmap screen as well --- webapp/www/js/heatmap.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/webapp/www/js/heatmap.js b/webapp/www/js/heatmap.js index eb302150e..824170c36 100644 --- a/webapp/www/js/heatmap.js +++ b/webapp/www/js/heatmap.js @@ -21,6 +21,9 @@ angular.module('starter.heatmap', ['ui-leaflet']) }); $scope.getPopRoute = function() { + $ionicLoading.show({ + template: 'Loading...' + }); var data = { modes: $scope.selectCtrl.modes, from_local_date: $scope.selectCtrl.fromDate, @@ -30,6 +33,7 @@ angular.module('starter.heatmap', ['ui-leaflet']) console.log("Sending data "+JSON.stringify(data)); $http.post("/result/heatmap/pop.route", data) .then(function(response) { + $ionicLoading.hide(); if (angular.isDefined(response.data.lnglat)) { console.log("Got points in heatmap "+response.data.lnglat.length); $scope.showHeatmap(response.data.lnglat); @@ -37,6 +41,7 @@ angular.module('starter.heatmap', ['ui-leaflet']) console.log("did not find latlng in response data "+JSON.stringify(response.data)); } }, function(error) { + $ionicLoading.hide(); console.log("Got error %s while trying to read heatmap data" + JSON.stringify(error)); });