[tor-commits] [compass/master] Completely rebuilt and sanitized the way sorting works.
karsten at torproject.org
karsten at torproject.org
Mon Jan 7 07:09:40 UTC 2013
commit 90927efb83c3d8ffb68ed51470b2b0785dc502be
Author: Chris Wacek <cwacek at 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>
More information about the tor-commits
mailing list