added live counts to tabs

openid-connect-server-webapp/src/main/webapp/resources/js/grant.js

@@ -66,6 +66,11 @@ var ApprovedSiteListView = Backbone.View.extend({
 	render:function (eventName) {
 		$(this.el).html($('#tmpl-grant-table').html());
 		
+		var approvedSiteCount = 0;
+		var whitelistCount = 0;
+		
+		var _self = this;
+		
 		_.each(this.model.models, function(approvedSite) {
 			// look up client
 			var client = this.options.clientList.getByClientId(approvedSite.get('clientId'));
@@ -73,9 +78,15 @@ var ApprovedSiteListView = Backbone.View.extend({
 			if (client != null) {
 				
 				if (approvedSite.get('whitelistedSite') != null) {
-					$('#grant-whitelist-table', this.el).append(new ApprovedSiteView({model: approvedSite, client: client, systemScopeList: this.options.systemScopeList}).render().el);
+					var view = new ApprovedSiteView({model: approvedSite, client: client, systemScopeList: this.options.systemScopeList});
+					view.parentView = _self;
+					$('#grant-whitelist-table', this.el).append(view.render().el);
+					whitelistCount = whitelistCount + 1;
 				} else {
-					$('#grant-table', this.el).append(new ApprovedSiteView({model: approvedSite, client: client, systemScopeList: this.options.systemScopeList}).render().el);
+					var view = new ApprovedSiteView({model: approvedSite, client: client, systemScopeList: this.options.systemScopeList});
+					view.parentView = _self;
+					$('#grant-table', this.el).append(view.render().el);
+					approvedSiteCount = approvedSiteCount + 1;
 				}
 				
 			}
@@ -113,6 +124,11 @@ var ApprovedSiteListView = Backbone.View.extend({
 			$('#grant-table', this.el).hide();
 			$('#grant-table-empty', this.el).show();
 		}
+		
+		$('#approvde-site-count', this.el).html(gr);
+		$('#whitelist-count', this.el).html(wl);
+	
+		
 	},
 	
     refreshTable:function(e) {
@@ -240,7 +256,7 @@ var ApprovedSiteView = Backbone.View.extend({
                     self.$el.fadeTo("fast", 0.00, function () { //fade
                         $(this).slideUp("fast", function () { //slide up
                             $(this).remove(); //then remove from the DOM
-                            app.approvedSiteListView.togglePlaceholder();
+                            self.parentView.togglePlaceholder();
                         });
                     });
                 },

openid-connect-server-webapp/src/main/webapp/resources/js/token.js

@@ -101,16 +101,16 @@ var AccessTokenView = Backbone.View.extend({
 
         if (confirm("Are you sure sure you would like to revoke this token?")) {
         	
-            var self = this;
+            var _self = this;
 
             this.model.destroy({
                 success:function () {
                 	
-                    self.$el.fadeTo("fast", 0.00, function () { //fade
+                    _self.$el.fadeTo("fast", 0.00, function () { //fade
                         $(this).slideUp("fast", function () { //slide up
                             $(this).remove(); //then remove from the DOM
                             // refresh the table in case we removed an id token, too
-                            app.tokensListView.refreshTable();
+                            _self.parentView.refreshTable();
                         });
                     });
                 },
@@ -131,7 +131,7 @@ var AccessTokenView = Backbone.View.extend({
             	}
             });
 
-            app.tokensListView.delegateEvents();
+            this.parentView.delegateEvents();
         }
 
         return false;
@@ -250,16 +250,16 @@ var RefreshTokenView = Backbone.View.extend({
 
         if (confirm("Are you sure sure you would like to revoke this refresh token and its associated access tokens?")) {
         	
-            var self = this;
+            var _self = this;
 
             this.model.destroy({
                 success:function () {
                 	
-                    self.$el.fadeTo("fast", 0.00, function () { //fade
+                    _self.$el.fadeTo("fast", 0.00, function () { //fade
                         $(this).slideUp("fast", function () { //slide up
                             $(this).remove(); //then remove from the DOM
                             // refresh the table in case the access tokens have changed, too
-                            app.tokensListView.refreshTable();
+                            _self.parentView.refreshTable();
                         });
                     });
                 },
@@ -373,7 +373,6 @@ var TokenListView = Backbone.View.extend({
 	},
 	
     refreshTable:function(e) {
-    	e.preventDefault();
     	$('#loadingbox').sheet('show');
     	$('#loading').html('<span class="label" id="loading-access">Access Tokens</span> ' +
     			'<span class="label" id="loading-refresh">Refresh Tokens</span> ' + 
@@ -406,6 +405,9 @@ var TokenListView = Backbone.View.extend({
 			$('#refresh-token-table', this.el).hide();
 			$('#refresh-token-table-empty', this.el).show();
 		}
+		
+		$('#access-token-count', this.el).html(this.model.access.length);
+		$('#refresh-token-count', this.el).html(this.model.refresh.length);
 	},
 	
 	render: function (eventName) {
@@ -430,7 +432,9 @@ var TokenListView = Backbone.View.extend({
         _.each(this.model.access.models, function (token, index) {
 			// look up client
 			var client = _self.options.clientList.getByClientId(token.get('clientId'));
-			var element = new AccessTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el;
+			var view = new AccessTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList});
+			view.parentView = _self;
+			var element = view.render().el;
 			$('#access-token-table', _self.el).append(element);
             if (Math.ceil((index + 1) / 10) != 1) {
             	$(element).hide();
@@ -453,7 +457,9 @@ var TokenListView = Backbone.View.extend({
         _.each(this.model.refresh.models, function (token, index) {
 			// look up client
 			var client = _self.options.clientList.getByClientId(token.get('clientId'));
-			var element = new RefreshTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList}).render().el;
+			var view = new RefreshTokenView({model: token, client: client, systemScopeList: _self.options.systemScopeList});
+			view.parentView = _self;
+			var element = view.render().el;
 			$('#refresh-token-table', _self.el).append(element);
             if (Math.ceil((index + 1) / 10) != 1) {
             	$(element).hide();

openid-connect-server-webapp/src/main/webapp/resources/template/grant.html

@@ -25,8 +25,8 @@
 	<div class="tabbable">
 
  		<ul class="nav nav-tabs">
-			<li class="active"><a data-target="#grant-approved-tab" data-toggle="tab" href="#">Approved Sites</a></li>
+			<li class="active"><a data-target="#grant-approved-tab" data-toggle="tab" href="#">Approved Sites <span class="label label-info" id="approvde-site-count">?</span></a></li>
-			<li><a data-target="#grant-whitelist-tab" data-toggle="tab" href="#">Whitelisted Sites</a></li>
+			<li><a data-target="#grant-whitelist-tab" data-toggle="tab" href="#">Whitelisted Sites <span class="label label-info" id="whitelist-count">?</span></a></li>
 		</ul>
 
 	<div class="tab-content">

openid-connect-server-webapp/src/main/webapp/resources/template/token.html

@@ -23,8 +23,8 @@
 	<div class="tabbable">
 
  		<ul class="nav nav-tabs">
-			<li class="active"><a data-target="#token-access-tab" data-toggle="tab" href="#">Access Tokens</a></li>
+			<li class="active"><a data-target="#token-access-tab" data-toggle="tab" href="#">Access Tokens <span class="label label-info" id="access-token-count">?</span></a></li>
-			<li><a data-target="#token-refresh-tab" data-toggle="tab" href="#">Refresh Tokens</a></li>
+			<li><a data-target="#token-refresh-tab" data-toggle="tab" href="#">Refresh Tokens <span class="label label-info" id="refresh-token-count">?</span></a></li>
 		</ul>
 
 	<div class="tab-content">