added sub indicators to loading sheets

pull/567/head
Justin Richer 2014-03-16 21:46:57 -04:00
parent 6f5d689f7f
commit 7b1477c24e
7 changed files with 86 additions and 96 deletions

View File

@ -24,10 +24,8 @@
<div id="breadcrumbs"></div>
<div id="loadingbox" class="sheet hide fade" data-sheet-parent="#breadcrumbs">
<div class="sheet-body">
Loading <span id="loading"></span>...
<div class="progress progress-striped active">
<div class="bar" style="width: 0%"></div>
</div>
<p>Loading...</p>
<p><span id="loading"></span></p>
</div>
</div>
<span id="content">

View File

@ -460,61 +460,15 @@ var AppRouter = Backbone.Router.extend({
this.breadCrumbView.render();
// set up loading dependencies
/*
this.clientListView.dependsOn = [this.systemScopeList];
this.whiteListListView.dependsOn = [this.whiteListList, this.clientList];
this.accessTokensListView.dependsOn = [this.clientList];
this.refreshTokenListView.dependsOn = [this.clientList];
*/
//
// Several items depend on the clients and whitelists being loaded, so we're going to pre-fetch them here
// and not start the app router until they're loaded.
//
// load things in the right order:
$('#loadingbox').show('slow');
$("#loading").html("server configuration");
$('#loadingbox').sheet('show');
$("#loading").html('<span class="label" id="loading-system">System Configuration</span>');
var base = $('base').attr('href');
$.getJSON(base + '.well-known/openid-configuration', function(data) {
app.serverConfiguration = data;
/** /
$("#content .progress .bar").css("width", "20%");
$("#loading").html("scopes");
app.systemScopeList.fetch({
success: function(collection, response) {
$("#content .progress .bar").css("width", "40%");
$("#loading").html("clients");
app.clientList.fetch({
success: function(collection, response) {
$("#content .progress .bar").css("width", "60%");
$("#loading").html("whitelists");
app.whiteListList.fetch({
success: function(collection, response) {
$("#content .progress .bar").css("width", "80%");
$("#loading").html("statistics");
app.clientStats.fetch({
success: function(model, response) {
/**/
$("#loadingbox .progress .bar").css("width", "100%");
$("#loading").html("console");
var baseUrl = $.url(app.serverConfiguration.issuer);
Backbone.history.start({pushState: true, root: baseUrl.attr('relative') + 'manage/'});
$('#loadingbox').sheet('hide');
/** /
}
});
}
});
}
});
}
});
/**/
$('#loading-system').addClass('label-success');
var baseUrl = $.url(app.serverConfiguration.issuer);
Backbone.history.start({pushState: true, root: baseUrl.attr('relative') + 'manage/'});
$('#loadingbox').sheet('hide');
});
},

View File

@ -248,12 +248,17 @@ var ClientListView = Backbone.View.extend({
}
$('#loadingbox').sheet('show');
$('#loading').html('clients');
$('#loading').html('<span class="label" id="loading-clients">Clients</span> ' +
'<span class="label" id="loading-whitelist">Whitelist</span> ' +
'<span class="label" id="loading-stats">Statistics</span> ' +
'<span class="label" id="loading-scopes">Scopes</span> '
);
$.when(this.model.fetchIfNeeded(),
this.options.whiteListList.fetchIfNeeded(),
this.options.stats.fetchIfNeeded(),
this.options.systemScopeList.fetchIfNeeded()).done(function() {
$.when(this.model.fetchIfNeeded({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.whiteListList.fetchIfNeeded({success:function(e) {$('#loading-whitelist').addClass('label-success');}}),
this.options.stats.fetchIfNeeded({success:function(e) {$('#loading-stats').addClass('label-success');}}),
this.options.systemScopeList.fetchIfNeeded({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
callback();
});
@ -306,13 +311,18 @@ var ClientListView = Backbone.View.extend({
refreshTable:function(e) {
e.preventDefault();
$('#loadingbox').sheet('show');
$('#loading').html('clients');
$('#loading').html('<span class="label" id="loading-clients">Clients</span> ' +
'<span class="label" id="loading-whitelist">Whitelist</span> ' +
'<span class="label" id="loading-stats">Statistics</span> ' +
'<span class="label" id="loading-scopes">Scopes</span> '
);
var _self = this;
$.when(this.model.fetch(),
this.options.whiteListList.fetch(),
this.options.stats.fetch(),
this.options.systemScopeList.fetch()).done(function() {
$.when(this.model.fetch({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.whiteListList.fetch({success:function(e) {$('#loading-whitelist').addClass('label-success');}}),
this.options.stats.fetch({success:function(e) {$('#loading-stats').addClass('label-success');}}),
this.options.systemScopeList.fetch({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
_self.render();
});

View File

@ -45,11 +45,15 @@ var ApprovedSiteListView = Backbone.View.extend({
}
$('#loadingbox').sheet('show');
$('#loading').html('approved sites');
$('#loading').html('<span class="label" id="loading-grants">Approved Sites</span> ' +
'<span class="label" id="loading-clients">Clients</span> ' +
'<span class="label" id="loading-scopes">Scopes</span> '
);
$.when(this.model.fetchIfNeeded(),
this.options.clientList.fetchIfNeeded(),
this.options.systemScopeList.fetchIfNeeded()).done(function() {
$.when(this.model.fetchIfNeeded({success:function(e) {$('#loading-grants').addClass('label-success');}}),
this.options.clientList.fetchIfNeeded({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.systemScopeList.fetchIfNeeded({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
callback();
});
@ -115,11 +119,15 @@ var ApprovedSiteListView = Backbone.View.extend({
e.preventDefault();
var _self = this;
$('#loadingbox').sheet('show');
$('#loading').html('approved sites');
$('#loading').html('<span class="label" id="loading-grants">Approved Sites</span> ' +
'<span class="label" id="loading-clients">Clients</span> ' +
'<span class="label" id="loading-scopes">Scopes</span> '
);
$.when(this.model.fetch(),
this.options.clientList.fetch(),
this.options.systemScopeList.fetch()).done(function() {
$.when(this.model.fetch({success:function(e) {$('#loading-grants').addClass('label-success');}}),
this.options.clientList.fetch({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.systemScopeList.fetch({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
_self.render();
});

View File

@ -143,9 +143,10 @@ var SystemScopeListView = Backbone.View.extend({
}
$('#loadingbox').sheet('show');
$('#loading').html('approved sites');
$('#loading').html('<span class="label" id="loading-scopes">Scopes</span> ');
$.when(this.model.fetchIfNeeded()).done(function() {
$.when(this.model.fetchIfNeeded({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
callback();
});
@ -166,9 +167,10 @@ var SystemScopeListView = Backbone.View.extend({
e.preventDefault();
var _self = this;
$('#loadingbox').sheet('show');
$('#loading').html('approved sites');
$('#loading').html('<span class="label" id="loading-scopes">Scopes</span> ');
$.when(this.model.fetch()).done(function() {
$.when(this.model.fetch({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
_self.render();
});

View File

@ -325,12 +325,17 @@ var TokenListView = Backbone.View.extend({
}
$('#loadingbox').sheet('show');
$('#loading').html('tokens');
$('#loading').html('<span class="label" id="loading-access">Access Tokens</span> ' +
'<span class="label" id="loading-refresh">Refresh Tokens</span> ' +
'<span class="label" id="loading-clients">Clients</span> ' +
'<span class="label" id="loading-scopes">Scopes</span> '
);
$.when(this.model.access.fetchIfNeeded(),
this.model.refresh.fetchIfNeeded(),
this.options.clientList.fetchIfNeeded(),
this.options.systemScopeList.fetchIfNeeded()).done(function() {
$.when(this.model.access.fetchIfNeeded({success:function(e) {$('#loading-access').addClass('label-success');}}),
this.model.refresh.fetchIfNeeded({success:function(e) {$('#loading-refresh').addClass('label-success');}}),
this.options.clientList.fetchIfNeeded({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.systemScopeList.fetchIfNeeded({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
callback();
});
@ -340,12 +345,17 @@ var TokenListView = Backbone.View.extend({
refreshTable:function(e) {
e.preventDefault();
$('#loadingbox').sheet('show');
$('#loading').html('tokens');
$('#loading').html('<span class="label" id="loading-access">Access Tokens</span> ' +
'<span class="label" id="loading-refresh">Refresh Tokens</span> ' +
'<span class="label" id="loading-clients">Clients</span> ' +
'<span class="label" id="loading-scopes">Scopes</span> '
);
var _self = this;
$.when(this.model.access.fetch(),
this.model.refresh.fetch(),
this.options.clientList.fetch(),
this.options.systemScopeList.fetch()).done(function(){
$.when(this.model.access.fetch({success:function(e) {$('#loading-access').addClass('label-success');}}),
this.model.refresh.fetch({success:function(e) {$('#loading-refresh').addClass('label-success');}}),
this.options.clientList.fetch({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.systemScopeList.fetch({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function(){
_self.render();
$('#loadingbox').sheet('hide');
});

View File

@ -59,11 +59,15 @@ var WhiteListListView = Backbone.View.extend({
}
$('#loadingbox').sheet('show');
$('#loading').html('whitelist');
$('#loading').html('<span class="label" id="loading-whitelist">Whitelist</span>' +
'<span class="label" id="loading-clients">Clients</span>' +
'<span class="label" id="loading-scopes">Scopes</span>'
);
$.when(this.model.fetchIfNeeded(),
this.options.clientList.fetchIfNeeded(),
this.options.systemScopeList.fetchIfNeeded()).done(function() {
$.when(this.model.fetchIfNeeded({success:function(e) {$('#loading-whitelist').addClass('label-success');}}),
this.options.clientList.fetchIfNeeded({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.systemScopeList.fetchIfNeeded({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
callback();
});
@ -107,11 +111,15 @@ var WhiteListListView = Backbone.View.extend({
e.preventDefault();
var _self = this;
$('#loadingbox').sheet('show');
$('#loading').html('whitelist');
$('#loading').html('<span class="label" id="loading-whitelist">Whitelist</span> ' +
'<span class="label" id="loading-clients">Clients</span> ' +
'<span class="label" id="loading-scopes">Scopes</span> '
);
$.when(this.model.fetch(),
this.options.clientList.fetch(),
this.options.systemScopeList.fetch()).done(function() {
$.when(this.model.fetch({success:function(e) {$('#loading-whitelist').addClass('label-success');}}),
this.options.clientList.fetch({success:function(e) {$('#loading-clients').addClass('label-success');}}),
this.options.systemScopeList.fetch({success:function(e) {$('#loading-scopes').addClass('label-success');}}))
.done(function() {
$('#loadingbox').sheet('hide');
_self.render();
});