commit 90927efb83c3d8ffb68ed51470b2b0785dc502be Author: Chris Wacek <cwacek@cs.georgetown.edu> Date: Sun Dec 23 00:30:27 2012 -0500 Completely rebuilt and sanitized the way sorting works. There is now a directive to make a sortable-header which auto-shows a loading indicator. --- static/img/ajax-loader.gif | Bin 0 -> 2545 bytes static/js/angularize.js | 75 ++++++++++++++++++++------------------------ templates/index.html | 55 +++++++++++++++++++++++--------- 3 files changed, 74 insertions(+), 56 deletions(-) diff --git a/static/img/ajax-loader.gif b/static/img/ajax-loader.gif new file mode 100644 index 0000000..71e29bc Binary files /dev/null and b/static/img/ajax-loader.gif differ diff --git a/static/js/angularize.js b/static/js/angularize.js index bd786fd..9c6614e 100644 --- a/static/js/angularize.js +++ b/static/js/angularize.js @@ -1,4 +1,4 @@ -var compassModule = angular.module("Compass", ['ui']) +var compassModule = angular.module("Compass", ['ui','oblique.directives']) compassModule.value('ui.config', { select2: { @@ -21,22 +21,39 @@ compassModule.controller('CompassCtrl',function CompassCtrl($scope,$http) { sort: 'cw', reverse: true } - - // We set this to true if the request - // asked for all of the relays - $scope.full_request = false - $scope.request = function(success_cb) { + /** Make a sorting request + * + * Call 'success_cb' if the request is successful + */ + $scope.ajax_sort = function(sortBy, invert, success_cb) { + $scope.query.sort = sortBy + $scope.query.sort_reverse = invert - if ($scope.state != 'sorting') { - $scope.state = 'loading' - } + $http.get('result.json',{"params":$scope.query}) + .success(function(data) { + if (data.results.length > 0) { + $scope.data = data - if ($scope.query.top == '-1') { - $scope.full_request = true - } else { - $scope.full_request = false - } + if (success_cb !== null){ + success_cb() + } + + $('body').animate({scrollTop:$("div#result_table").offset().top},500) + } + else { + $scope.state = "result_empty" + } + }) + + } + + /** Make a data request from the form + * + * Call 'success_cb' if the request is successful + */ + $scope.request = function(success_cb) { + $scope.state = 'loading' $http.get('result.json',{"params":$scope.query}) .success(function(data) { @@ -44,10 +61,11 @@ compassModule.controller('CompassCtrl',function CompassCtrl($scope,$http) { $scope.data = data $scope.state = "loaded" if (success_cb != null){ - success_cb + success_cb() } + $('body').animate({scrollTop:$("div#result_table").offset().top},500) } - else { + else { $scope.state = "result_empty" } }) @@ -57,31 +75,6 @@ compassModule.controller('CompassCtrl',function CompassCtrl($scope,$http) { $scope.state="hidden" } - $scope.setsort = function(field,init) { - $scope.state = 'sorting' - - if (field == $scope.query.sort) { - $scope.query.sort_reverse = !($scope.query.sort_reverse) - } - else { - $scope.query.sort = field - $scope.query.sort_reverse = init - } - - if (! $scope.full_request) { - // We don't have the data we need to sort - $scope.request($scope.query, function() { - $scope.table.sort = $scope.query.sort - $scope.table.reverse = $scope.query.sort_reverse - }); - } - else { - $scope.table.sort = $scope.query.sort - $scope.table.reverse = $scope.query.sort_reverse - } - - } - $http.get("static/data/cc.json").success(function(data) { $scope.cc_data = data }) diff --git a/templates/index.html b/templates/index.html index 3eb6442..741a176 100644 --- a/templates/index.html +++ b/templates/index.html @@ -163,24 +163,48 @@ <div class="hero-unit" ng-show="state == 'result_empty'"> <p>No results found</p> </div> - <div class="hero-unit" ng-show="state == 'loaded' || state == 'sorting'"> + <div id='result_table' class="hero-unit" ng-show="state == 'loaded' || state == 'sorting'"> <table class="table table-striped"> <thead> <tr> - <th ng-click="setsort('index',false)">#</th> - <th ng-click="setsort('cw', true)"> - <span rel="tooltip" title="Relative bandwidth weight assigned to this relay by the directory authorities">Consensus Weights</span> + <th >#</th> + <th sortable='ajax_sort' ui-jq='tooltip' sort_by='cw' invert='true' + class='spinner-small' + icon="static/img/ajax-loader.gif" + title="Relative bandwidth weight assigned to this relay by the directory authorities"> + Consensus Weights </th> - <th ng-click="setsort('adv_bw',true)"><span rel="tooltip" title="Relative advertised bandwidth of this relay compared to the total advertised bandwidth in the network">Advertised Bandwidth</span></th> - <th ng-click="setsort('p_guard',true)"><span rel="tooltip" title=" Probability of this relay to be selected for the guard position">Guard Probability</span></th> - <th ng-click="setsort('p_middle',true)"><span rel="tooltip" title="Probability of this relay to be selected for the middle position">Middle Probability</span></th> - <th ng-click="setsort('p_exit',true)"><span rel="tooltip" title="Probability of this relay to be selected for the exit position">Exit Probability</span></th> - <th ng-click="setsort('nick',false)">Nickname</th> - <th ng-click="setsort('fp',false)">Fingerprint</th> - <th ng-click="setsort('exit',false)">Exit</th> - <th ng-click="setsort('guard',false)">Guard</th> - <th ng-click="setsort('cc',false)">Country</th> - <th ng-click="setsort('as_info',false)">Autonomous System</th> + <th sortable='ajax_sort' ui-jq='tooltip' sort_by='adv_bw' invert='true' + class='spinner-small' + icon="static/img/ajax-loader.gif" + title="Relative advertised bandwidth of this relay compared to the total advertised bandwidth in the network">Advertised Bandwidth</th> + <th sortable='ajax_sort' ui-jq='tooltip' sort_by='p_guard' invert=true + icon="static/img/ajax-loader.gif" class='spinner-small' + title=" Probability of this relay to be selected for the guard position">Guard Probability</th> + <th sortable='ajax_sort' ui-jq='tooltip' sort_by='p_middle' invert=true + icon="static/img/ajax-loader.gif" class='spinner-small' + title="Probability of this relay to be selected for the middle position"> Middle Probability</th > + <th sortable='ajax_sort' ui-jq='tooltip' sort_by='p_exit' invert=true + icon="static/img/ajax-loader.gif" class='spinner-small' + title="Probability of this relay to be selected for the exit position" > Exit Probability</th > + <th sortable='ajax_sort' sort_by='nick' invert=false + icon="static/img/ajax-loader.gif" class='spinner-small' + >Nickname</th> + <th sortable='ajax_sort' sort_by='fp' invert=false + icon="static/img/ajax-loader.gif" class='spinner-small' + >Fingerprint</th> + <th sortable='ajax_sort' sort_by='exit' invert=false + icon="static/img/ajax-loader.gif" class='spinner-small' + >Exit</th> + <th sortable='ajax_sort' sort_by='guard' invert=false + icon="static/img/ajax-loader.gif" class='spinner-small' + >Guard</th> + <th sortable='ajax_sort' sort_by='cc' invert=false + icon="static/img/ajax-loader.gif" class='spinner-small' + >Country</th> + <th sortable='ajax_sort' sort_by='as_info' invert=false + icon="static/img/ajax-loader.gif" class='spinner-small' + >Autonomous System</th> </tr> </thead> <tfoot> @@ -214,7 +238,7 @@ </tr> </tfoot> <tbody> - <tr ng-repeat="relay in data.results | orderBy:table.sort:table.reverse"> + <tr ng-repeat="relay in data.results "> <td> {{ relay.index }} </td> <td> {{ relay.cw | number:4 }}%</td> <td> {{ relay.adv_bw | number:4}}%</td> @@ -254,6 +278,7 @@ <script src="static/lib/select2/select2.js" type="text/javascript"></script> <script src="static/js/angular/angular.js"> </script> <script src="static/lib/angular-ui/angular-ui.js"></script> + <script src="static/js/sortable.js"></script> <script src="static/js/angularize.js"></script> </body> </html>