diff --git a/client/galaxy/scripts/mvc/tools/tools-form.js b/client/galaxy/scripts/mvc/tools/tools-form.js index ffe613b0f7d..89ac2d65ca9 100644 --- a/client/galaxy/scripts/mvc/tools/tools-form.js +++ b/client/galaxy/scripts/mvc/tools/tools-form.js @@ -8,6 +8,21 @@ define(['utils/utils', 'mvc/ui/ui-misc', 'mvc/tools/tools-form-base', 'mvc/tools var View = ToolFormBase.extend({ // initialize initialize: function(options) { + // execute button + var self = this; + var execute = new Ui.Button({ + icon : 'fa-check', + tooltip : 'Execute: ' + options.name, + title : 'Execute', + cls : 'btn btn-primary', + floating : 'clear', + onclick : function() { + execute.wait(); + ToolJobs.submit(self.form, options, function() { + execute.unwait(); + }); + } + }); // add remap button if (options.job_id && options.job_remap) { options.inputs['rerun_remap_job_id'] = { @@ -22,20 +37,10 @@ define(['utils/utils', 'mvc/ui/ui-misc', 'mvc/tools/tools-form-base', 'mvc/tools } } // create options dictionary - var self = this; options = Utils.merge(options, { update_url : galaxy_config.root + 'api/tools/' + options.id + '/build', buttons : { - execute : new Ui.Button({ - icon : 'fa-check', - tooltip : 'Execute: ' + options.name, - title : 'Execute', - cls : 'btn btn-primary', - floating : 'clear', - onclick : function() { - ToolJobs.submit(self.form, options); - } - }) + execute : execute } }); ToolFormBase.prototype.initialize.call(this, options); diff --git a/client/galaxy/scripts/mvc/tools/tools-jobs.js b/client/galaxy/scripts/mvc/tools/tools-jobs.js index c78c9d41112..ccd746630bb 100644 --- a/client/galaxy/scripts/mvc/tools/tools-jobs.js +++ b/client/galaxy/scripts/mvc/tools/tools-jobs.js @@ -3,7 +3,7 @@ */ define(['utils/utils', 'mvc/tools/tools-template'], function(Utils, ToolTemplate) { return { - submit: function(form, options) { + submit: function(form, options, callback) { // link this var self = this; @@ -20,33 +20,25 @@ return { // validate job definition if (!this._validation(form, job_def)) { console.debug('tools-jobs::submit - Submission canceled. Validation failed.'); + callback && callback(); return; } // debug console.debug(job_def); - // show progress modal - var user_is_waiting = true; - form.modal.show({title: 'Please wait...', body: 'progress', buttons: { - 'Close' : function () { - form.modal.hide(); - user_is_waiting = false; - } - }}); - // post job Utils.request({ type : 'POST', url : galaxy_config.root + 'api/tools', data : job_def, success : function(response) { - form.modal.hide(); + callback && callback(); form.reciept(ToolTemplate.success(response)); self._refreshHdas(); }, error : function(response, response_full) { - form.modal.hide(); + callback && callback(); if (response && response.message && response.message.data) { var error_messages = form.data.matchResponse(response.message.data); for (var input_id in error_messages) { @@ -56,7 +48,7 @@ return { } else { // show error message with details console.debug(response); - user_is_waiting && form.modal.show({ + response && form.modal.show({ title : 'Job submission failed', body : ToolTemplate.error(job_def), buttons : { diff --git a/client/galaxy/scripts/mvc/ui/ui-misc.js b/client/galaxy/scripts/mvc/ui/ui-misc.js index 69fc8672322..f1d49263f34 100644 --- a/client/galaxy/scripts/mvc/ui/ui-misc.js +++ b/client/galaxy/scripts/mvc/ui/ui-misc.js @@ -12,7 +12,7 @@ define(['utils/utils', /** * This class contains backbone wrappers for basic ui elements such as Images, Labels, Buttons, Input fields etc. */ - + // plugin var Image = Backbone.View.extend({ // options @@ -20,7 +20,7 @@ var Image = Backbone.View.extend({ url : '', cls : '' }, - + // initialize initialize : function(options) { // get options @@ -29,7 +29,7 @@ var Image = Backbone.View.extend({ // create new element this.setElement(this._template(this.options)); }, - + // template _template: function(options) { return ''; @@ -43,7 +43,7 @@ var Label = Backbone.View.extend({ title : '', cls : '' }, - + // initialize initialize : function(options) { // get options @@ -52,17 +52,17 @@ var Label = Backbone.View.extend({ // create new element this.setElement(this._template(this.options)); }, - + // title title: function(new_title) { this.$el.html(new_title); }, - + // template _template: function(options) { return ''; }, - + // value value: function() { return options.title; @@ -80,19 +80,19 @@ var Icon = Backbone.View.extend({ title : '', cls : '' }, - + // initialize initialize : function(options) { // get options this.options = Utils.merge(options, this.optionsDefault); - + // create new element this.setElement(this._template(this.options)); - + // add tooltip $(this.el).tooltip({title: options.tooltip, placement: 'bottom'}); }, - + // element _template: function(options) { return '
' + @@ -112,37 +112,51 @@ var Button = Backbone.View.extend({ cls : 'ui-button btn btn-default', icon : '' }, - + // initialize initialize : function(options) { // get options this.options = Utils.merge(options, this.optionsDefault); - + // create new element this.setElement(this._template(this.options)); - + // add event $(this.el).on('click', function() { // hide all tooltips $('.tooltip').hide(); - + // execute onclick callback if (options.onclick) { options.onclick(); } }); - + // add tooltip $(this.el).tooltip({title: options.tooltip, placement: 'bottom'}); }, - + + // show spinner + wait: function() { + this.$el.removeClass(this.options.cls).addClass('btn btn-info').prop('disabled', true); + this.$('.icon').removeClass(this.options.icon).addClass('fa-spinner fa-spin'); + this.$('.title').html('Sending...'); + }, + + // hide spinner + unwait: function() { + this.$el.removeClass('btn btn-info').addClass(this.options.cls).prop('disabled', false); + this.$('.icon').removeClass('fa-spinner fa-spin').addClass(this.options.icon); + this.$('.title').html(this.options.title); + }, + // element _template: function(options) { var str = ''; return str; } @@ -160,52 +174,52 @@ var ButtonIcon = Backbone.View.extend({ tooltip : '', onclick : null }, - + // initialize initialize : function(options) { // get options this.options = Utils.merge(options, this.optionsDefault); - + // create new element this.setElement(this._template(this.options)); - + // link button element this.$button = this.$el.find('.button'); - + // add event var self = this; $(this.el).on('click', function() { // hide all tooltips $('.tooltip').hide(); - + // execute onclick callback if (options.onclick && !self.disabled) { options.onclick(); } }); - + // add tooltip $(this.el).tooltip({title: options.tooltip, placement: 'bottom'}); }, - + // disable disable: function() { this.$button.addClass('disabled'); this.disabled = true; }, - + // enable enable: function() { this.$button.removeClass('disabled'); this.disabled = false; }, - + // change icon setIcon: function(icon_cls) { this.$('i').removeClass(this.options.icon).addClass(icon_cls); this.options.icon = icon_cls; }, - + // template _template: function(options) { // width @@ -213,10 +227,10 @@ var ButtonIcon = Backbone.View.extend({ if (options.title) { width = 'width: auto;'; } - + // string var str = '
'; - + // title if (options.title) { str += '
' + @@ -238,19 +252,19 @@ var Anchor = Backbone.View.extend({ title : '', cls : '' }, - + // initialize initialize : function(options) { // get options this.options = Utils.merge(options, this.optionsDefault); - + // create new element this.setElement(this._template(this.options)); - + // add event $(this.el).on('click', options.onclick); }, - + // element _template: function(options) { return '
' + options.title + '
'; @@ -265,37 +279,37 @@ var Message = Backbone.View.extend({ status : 'info', persistent : false }, - + // initialize initialize : function(options) { // configure options this.options = Utils.merge(options, this.optionsDefault); - + // create new element this.setElement('
'); - + // show initial message if (this.options.message) { this.update(this.options); } }, - + // update update : function(options) { // get options this.options = Utils.merge(options, this.optionsDefault); - + // show message if (options.message != '') { this.$el.html(this._template(this.options)); this.$el.find('.alert').append(options.message); this.$el.fadeIn(); - + // clear previous timeouts if (this.timeout) { window.clearTimeout(this.timeout); } - + // set timeout if message is not persistent if (!options.persistent) { var self = this; @@ -311,7 +325,7 @@ var Message = Backbone.View.extend({ this.$el.fadeOut(); } }, - + // element _template: function(options) { return '
'; @@ -325,15 +339,15 @@ var Searchbox = Backbone.View.extend({ onclick : null, searchword : '' }, - + // initialize initialize : function(options) { // configure options this.options = Utils.merge(options, this.optionsDefault); - + // create new element this.setElement(this._template(this.options)); - + // add click event var self = this; if (this.options.onclick) { @@ -343,7 +357,7 @@ var Searchbox = Backbone.View.extend({ }); } }, - + // element _template: function(options) { return '