|
| 1 | +/** Renders the collection uploader rows */ |
| 2 | +define( [ 'utils/utils', 'mvc/upload/upload-model', 'mvc/upload/upload-settings', 'mvc/ui/ui-popover', 'mvc/ui/ui-select' ], |
| 3 | +function( Utils, UploadModel, UploadSettings, Popover, Select ) { |
| 4 | + return Backbone.View.extend({ |
| 5 | + /** Dictionary of upload states and associated icons */ |
| 6 | + status_classes : { |
| 7 | + init : 'upload-icon-button fa fa-trash-o', |
| 8 | + queued : 'upload-icon fa fa-spinner fa-spin', |
| 9 | + running : 'upload-icon fa fa-spinner fa-spin', |
| 10 | + success : 'upload-icon-button fa fa-check', |
| 11 | + error : 'upload-icon-button fa fa-exclamation-triangle' |
| 12 | + }, |
| 13 | + |
| 14 | + initialize: function( app, options ) { |
| 15 | + var self = this; |
| 16 | + this.app = app; |
| 17 | + this.model = options.model; |
| 18 | + this.setElement( this._template( options.model ) ); |
| 19 | + this.$mode = this.$( '.upload-mode' ); |
| 20 | + this.$title = this.$( '.upload-title-extended' ); |
| 21 | + this.$text = this.$( '.upload-text' ); |
| 22 | + this.$size = this.$( '.upload-size' ); |
| 23 | + this.$info_text = this.$( '.upload-info-text' ); |
| 24 | + this.$info_progress = this.$( '.upload-info-progress' ); |
| 25 | + this.$text_content = this.$( '.upload-text-content' ); |
| 26 | + this.$symbol = this.$( '.upload-symbol' ); |
| 27 | + this.$progress_bar = this.$( '.upload-progress-bar' ); |
| 28 | + this.$percentage = this.$( '.upload-percentage' ); |
| 29 | + |
| 30 | + // append popup to settings icon |
| 31 | + this.settings = new Popover.View({ |
| 32 | + title : 'Upload configuration', |
| 33 | + container : this.$( '.upload-settings' ), |
| 34 | + placement : 'bottom' |
| 35 | + }); |
| 36 | + |
| 37 | + // identify default genome and extension values |
| 38 | + var default_genome = this.app.select_genome.value(); |
| 39 | + var default_extension = this.app.select_extension.value(); |
| 40 | + |
| 41 | + // handle click event |
| 42 | + this.$symbol.on('click', function() { self._removeRow(); }); |
| 43 | + |
| 44 | + // handle text editing event |
| 45 | + this.$text_content.on( 'change input', function( e ) { |
| 46 | + self.model.set( { 'url_paste': $( e.target ).val(), |
| 47 | + 'file_size': $( e.target ).val().length } ); |
| 48 | + }); |
| 49 | + |
| 50 | + // model events |
| 51 | + this.listenTo( this.model, 'change:percentage', function() { self._refreshPercentage() } ); |
| 52 | + this.listenTo( this.model, 'change:status', function() { self._refreshStatus() } ); |
| 53 | + this.listenTo( this.model, 'change:info', function() { self._refreshInfo() } ); |
| 54 | + this.listenTo( this.model, 'change:file_size', function() { self._refreshFileSize() } ); |
| 55 | + this.listenTo( this.model, 'remove', function() { self.remove() } ); |
| 56 | + this.app.collection.on('reset', function() { self.remove() } ); |
| 57 | + }, |
| 58 | + |
| 59 | + render: function() { |
| 60 | + var options = this.model.attributes; |
| 61 | + this.$title.html( _.escape( options.file_name ) ); |
| 62 | + this.$size.html( Utils.bytesToString ( options.file_size ) ); |
| 63 | + this.$mode.removeClass().addClass( 'upload-mode' ).addClass( 'text-primary' ); |
| 64 | + if ( options.file_mode == 'new' ) { |
| 65 | + this.$text.css( { 'width' : this.$el.width() - 16 + 'px', 'top' : this.$el.height() - 8 + 'px' } ).show(); |
| 66 | + this.$el.height( this.$el.height() - 8 + this.$text.height() + 16 ); |
| 67 | + this.$mode.addClass( 'fa fa-edit' ); |
| 68 | + } else if ( options.file_mode == 'local' ) { |
| 69 | + this.$mode.addClass( 'fa fa-laptop' ); |
| 70 | + } else if ( options.file_mode == 'ftp' ) { |
| 71 | + this.$mode.addClass( 'fa fa-folder-open-o' ); |
| 72 | + } |
| 73 | + }, |
| 74 | + |
| 75 | + /** Refresh info text */ |
| 76 | + _refreshInfo: function() { |
| 77 | + var info = this.model.get( 'info' ); |
| 78 | + if ( info ) { |
| 79 | + this.$info_text.html( '<strong>Failed: </strong>' + info ).show(); |
| 80 | + } else { |
| 81 | + this.$info_text.hide(); |
| 82 | + } |
| 83 | + }, |
| 84 | + |
| 85 | + /** Refresh percentage status */ |
| 86 | + _refreshPercentage : function() { |
| 87 | + var percentage = parseInt( this.model.get( 'percentage' ) ); |
| 88 | + this.$progress_bar.css( { width : percentage + '%' } ); |
| 89 | + this.$percentage.html( percentage != 100 ? percentage + '%' : 'Adding to history...' ); |
| 90 | + }, |
| 91 | + |
| 92 | + /** Refresh status */ |
| 93 | + _refreshStatus : function() { |
| 94 | + var status = this.model.get( 'status' ); |
| 95 | + this.$symbol.removeClass().addClass( 'upload-symbol' ).addClass( this.status_classes[ status ] ); |
| 96 | + this.model.set( 'enabled', status == 'init' ); |
| 97 | + var enabled = this.model.get( 'enabled' ); |
| 98 | + this.$text_content.attr( 'disabled', !enabled ); |
| 99 | + if ( status == 'success' ) { |
| 100 | + this.$el.addClass( 'success' ); |
| 101 | + this.$percentage.html( '100%' ); |
| 102 | + } |
| 103 | + if ( status == 'error' ) { |
| 104 | + this.$el.addClass( 'danger' ); |
| 105 | + this.$info_progress.hide(); |
| 106 | + } |
| 107 | + }, |
| 108 | + |
| 109 | + /** Refresh file size */ |
| 110 | + _refreshFileSize: function() { |
| 111 | + this.$size.html( Utils.bytesToString ( this.model.get( 'file_size' ) ) ); |
| 112 | + }, |
| 113 | + |
| 114 | + /** Remove row */ |
| 115 | + _removeRow: function() { |
| 116 | + if ( [ 'init', 'success', 'error' ].indexOf( this.model.get( 'status' ) ) !== -1 ) { |
| 117 | + this.app.collection.remove( this.model ); |
| 118 | + } |
| 119 | + }, |
| 120 | + |
| 121 | + /** Attach file info popup */ |
| 122 | + _showSettings : function() { |
| 123 | + if ( !this.settings.visible ) { |
| 124 | + this.settings.empty(); |
| 125 | + this.settings.append( ( new UploadSettings( this ) ).$el ); |
| 126 | + this.settings.show(); |
| 127 | + } else { |
| 128 | + this.settings.hide(); |
| 129 | + } |
| 130 | + }, |
| 131 | + |
| 132 | + /** View template */ |
| 133 | + _template: function( options ) { |
| 134 | + return '<tr id="upload-row-' + options.id + '" class="upload-row">' + |
| 135 | + '<td>' + |
| 136 | + '<div class="upload-text-column">' + |
| 137 | + '<div class="upload-mode"/>' + |
| 138 | + '<div class="upload-title-extended"/>' + |
| 139 | + '<div class="upload-text">' + |
| 140 | + '<div class="upload-text-info">You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.</div>' + |
| 141 | + '<textarea class="upload-text-content form-control"/>' + |
| 142 | + '</div>' + |
| 143 | + '</div>' + |
| 144 | + '</td>' + |
| 145 | + '<td>' + |
| 146 | + '<div class="upload-size"/>' + |
| 147 | + '</td>' + |
| 148 | + '<td>' + |
| 149 | + '<div class="upload-info">' + |
| 150 | + '<div class="upload-info-text"/>' + |
| 151 | + '<div class="upload-info-progress progress">' + |
| 152 | + '<div class="upload-progress-bar progress-bar progress-bar-success"/>' + |
| 153 | + '<div class="upload-percentage">0%</div>' + |
| 154 | + '</div>' + |
| 155 | + '</div>' + |
| 156 | + '</td>' + |
| 157 | + '<td>' + |
| 158 | + '<div class="upload-symbol ' + this.status_classes.init + '"/>' + |
| 159 | + '</td>' + |
| 160 | + '</tr>'; |
| 161 | + } |
| 162 | + }); |
| 163 | +}); |
0 commit comments