New: show indicator when testing indexers, connections and download clients

This commit is contained in:
Mark McDowall 2014-08-02 20:05:21 -07:00
parent 1ed45625df
commit d9445eab84
8 changed files with 84 additions and 16 deletions

View File

@ -19,7 +19,8 @@ define([
ui: { ui: {
path : '.x-path', path : '.x-path',
modalBody : '.modal-body' modalBody : '.modal-body',
indicator : '.x-indicator'
}, },
events: { events: {
@ -44,6 +45,8 @@ define([
}, },
_save: function () { _save: function () {
this.ui.indicator.show();
var self = this; var self = this;
var promise = this.model.save(); var promise = this.model.save();
@ -52,10 +55,16 @@ define([
self.targetCollection.add(self.model, { merge: true }); self.targetCollection.add(self.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand); vent.trigger(vent.Commands.CloseModalCommand);
}); });
promise.fail(function () {
self.ui.indicator.hide();
});
} }
}, },
_saveAndAdd: function () { _saveAndAdd: function () {
this.ui.indicator.show();
var self = this; var self = this;
var promise = this.model.save(); var promise = this.model.save();
@ -65,6 +74,10 @@ define([
require('Settings/DownloadClient/Add/DownloadClientSchemaModal').open(self.targetCollection); require('Settings/DownloadClient/Add/DownloadClientSchemaModal').open(self.targetCollection);
}); });
promise.fail(function () {
self.ui.indicator.hide();
});
} }
}, },
@ -78,7 +91,13 @@ define([
}, },
_test: function () { _test: function () {
this.model.test(); var self = this;
this.ui.indicator.show();
this.model.test().always(function () {
self.ui.indicator.hide();
});
} }
}); });

View File

@ -46,6 +46,7 @@
<button class="btn pull-left x-back">back</button> <button class="btn pull-left x-back">back</button>
{{/if}} {{/if}}
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button> <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
<button class="btn" data-dismiss="modal">cancel</button> <button class="btn" data-dismiss="modal">cancel</button>

View File

@ -8,22 +8,25 @@ define([
'Commands/CommandController', 'Commands/CommandController',
'Mixins/AsModelBoundView', 'Mixins/AsModelBoundView',
'Mixins/AsValidatedView', 'Mixins/AsValidatedView',
'underscore',
'Form/FormBuilder', 'Form/FormBuilder',
'Mixins/AutoComplete', 'Mixins/AutoComplete',
'bootstrap' 'bootstrap'
], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, _) { ], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView) {
var view = Marionette.ItemView.extend({ var view = Marionette.ItemView.extend({
template: 'Settings/Indexers/Edit/IndexerEditViewTemplate', template: 'Settings/Indexers/Edit/IndexerEditViewTemplate',
ui: {
indicator : '.x-indicator'
},
events: { events: {
'click .x-save' : '_save', 'click .x-save' : '_save',
'click .x-save-and-add': '_saveAndAdd', 'click .x-save-and-add' : '_saveAndAdd',
'click .x-delete' : '_delete', 'click .x-delete' : '_delete',
'click .x-back' : '_back', 'click .x-back' : '_back',
'click .x-close' : '_close', 'click .x-close' : '_close',
'click .x-test' : '_test' 'click .x-test' : '_test'
}, },
initialize: function (options) { initialize: function (options) {
@ -31,6 +34,8 @@ define([
}, },
_save: function () { _save: function () {
this.ui.indicator.show();
var self = this; var self = this;
var promise = this.model.save(); var promise = this.model.save();
@ -39,10 +44,16 @@ define([
self.targetCollection.add(self.model, { merge: true }); self.targetCollection.add(self.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand); vent.trigger(vent.Commands.CloseModalCommand);
}); });
promise.fail(function () {
self.ui.indicator.hide();
});
} }
}, },
_saveAndAdd: function () { _saveAndAdd: function () {
this.ui.indicator.show();
var self = this; var self = this;
var promise = this.model.save(); var promise = this.model.save();
@ -52,6 +63,10 @@ define([
require('Settings/Indexers/Add/IndexerSchemaModal').open(self.targetCollection); require('Settings/Indexers/Add/IndexerSchemaModal').open(self.targetCollection);
}); });
promise.fail(function () {
self.ui.indicator.hide();
});
} }
}, },
@ -82,7 +97,13 @@ define([
}, },
_test: function () { _test: function () {
this.model.test(); var self = this;
this.ui.indicator.show();
this.model.test().always(function () {
self.ui.indicator.hide();
});
} }
}); });

View File

@ -45,7 +45,7 @@
{{else}} {{else}}
<button class="btn pull-left x-back">back</button> <button class="btn pull-left x-back">back</button>
{{/if}} {{/if}}
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button> <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
<button class="btn x-close">cancel</button> <button class="btn x-close">cancel</button>

View File

@ -16,9 +16,10 @@ define([
template: 'Settings/Notifications/Edit/NotificationEditViewTemplate', template: 'Settings/Notifications/Edit/NotificationEditViewTemplate',
ui: { ui: {
onDownloadToggle: '.x-on-download', onDownloadToggle : '.x-on-download',
onUpgradeSection: '.x-on-upgrade' onUpgradeSection : '.x-on-upgrade',
}, indicator : '.x-indicator'
},
events: { events: {
'click .x-save' : '_save', 'click .x-save' : '_save',
@ -39,6 +40,8 @@ define([
}, },
_save: function () { _save: function () {
this.ui.indicator.show();
var self = this; var self = this;
var promise = this.model.save(); var promise = this.model.save();
@ -47,10 +50,16 @@ define([
self.targetCollection.add(self.model, { merge: true }); self.targetCollection.add(self.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand); vent.trigger(vent.Commands.CloseModalCommand);
}); });
promise.fail(function () {
self.ui.indicator.hide();
});
} }
}, },
_saveAndAdd: function () { _saveAndAdd: function () {
this.ui.indicator.show();
var self = this; var self = this;
var promise = this.model.save(); var promise = this.model.save();
@ -60,6 +69,10 @@ define([
require('Settings/Notifications/Add/NotificationSchemaModal').open(self.targetCollection); require('Settings/Notifications/Add/NotificationSchemaModal').open(self.targetCollection);
}); });
promise.fail(function () {
self.ui.indicator.hide();
});
} }
}, },
@ -83,7 +96,13 @@ define([
}, },
_test: function () { _test: function () {
this.model.test(); var self = this;
this.ui.indicator.show();
this.model.test().always(function () {
self.ui.indicator.hide();
});
}, },
_onDownloadChanged: function () { _onDownloadChanged: function () {

View File

@ -94,6 +94,7 @@
<button class="btn pull-left x-back">back</button> <button class="btn pull-left x-back">back</button>
{{/if}} {{/if}}
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button> <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
<button class="btn x-cancel" data-dismiss="modal">cancel</button> <button class="btn x-cancel" data-dismiss="modal">cancel</button>

View File

@ -31,6 +31,8 @@ define([
promise.fail(function (response) { promise.fail(function (response) {
self.trigger('validation:failed', response); self.trigger('validation:failed', response);
}); });
return promise;
} }
}); });
}); });

View File

@ -118,3 +118,8 @@ li.save-and-add:hover {
} }
} }
} }
.indicator {
display : none;
padding-right : 5px;
}