diff options
Diffstat (limited to 'module/web/static/js/views/dashboard')
| -rw-r--r-- | module/web/static/js/views/dashboard/dashboardView.js | 164 | ||||
| -rw-r--r-- | module/web/static/js/views/dashboard/fileView.js | 101 | ||||
| -rw-r--r-- | module/web/static/js/views/dashboard/filterView.js | 133 | ||||
| -rw-r--r-- | module/web/static/js/views/dashboard/packageView.js | 74 | ||||
| -rw-r--r-- | module/web/static/js/views/dashboard/selectionView.js | 150 |
5 files changed, 0 insertions, 622 deletions
diff --git a/module/web/static/js/views/dashboard/dashboardView.js b/module/web/static/js/views/dashboard/dashboardView.js deleted file mode 100644 index c888214df..000000000 --- a/module/web/static/js/views/dashboard/dashboardView.js +++ /dev/null @@ -1,164 +0,0 @@ -define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', - './packageView', './fileView', './selectionView', './filterView', 'select2'], - function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView, filterView) { - - // Renders whole dashboard - return Backbone.View.extend({ - - el: '#content', - active: $('.breadcrumb .active'), - - events: { - }, - - // <ul> holding the packages - packageUL: null, - // <ul> displaying the files - fileUL: null, - // Package tree - tree: null, - // Current open files - files: null, - // True when loading animation is running - isLoading: false, - - initialize: function() { - var self = this; - this.tree = new TreeCollection(); - - var view = new selectionView(); - view = new filterView(); - - // When package is added we reload the data - App.vent.on('package:added', function() { - console.log('Package tree caught, package:added event'); - self.tree.fetch(); - }); - - App.vent.on('file:updated', _.bind(this.fileUpdated, this)); - - // TODO: file:added - // TODO: package:deleted - // TODO: package:updated - }, - - init: function() { - var self = this; - // TODO: put in separated function - // TODO: order of elements? - // Init the tree and callback for package added - this.tree.fetch({success: function() { - self.render(); - self.tree.get('packages').on('add', function(pack) { - console.log('Package ' + pack.get('pid') + ' added to tree'); - self.appendPackage(pack, 0, true); - self.openPackage(pack); - }); - }}); - - this.$('.input').select2({tags: ["a", "b", "sdf"]}); - }, - - render: function() { - console.log('Render package list'); - var packs = this.tree.get('packages'); - this.files = this.tree.get('files'); - - this.packageUL = this.$('.package-list'); - packs.each(_.bind(this.appendPackage, this)); - - this.fileUL = this.$('.file-list'); - if (this.files.length === 0) { - // no files are displayed - this.files = null; - // Open the first package - if (packs.length >= 1) - this.openPackage(packs.at(0)); - } - else - this.files.each(_.bind(this.appendFile, this)); - - return this; - }, - - // TODO sorting ?! - // Append a package to the list, index, animate it - appendPackage: function(pack, i, animation) { - var el = new packageView({model: pack}).render().el; - this.packageUL.appendWithAnimation(el, animation); - }, - - appendFile: function(file, i, animation) { - var el = new fileView({model: file}).render().el; - this.fileUL.appendWithAnimation(el, animation); - }, - - // Show content of the packages on main view - openPackage: function(pack) { - var self = this; - - // load animation only when something is shown and its different from current package - if (this.files && this.files !== pack.get('files')) - self.loading(); - - pack.fetch({silent: true, success: function() { - console.log('Package ' + pack.get('pid') + ' loaded'); - self.active.text(pack.get('name')); - self.contentReady(pack.get('files')); - }, failure: function() { - self.failure(); - }}); - - }, - - contentReady: function(files) { - var old_files = this.files; - this.files = files; - App.vent.trigger('dashboard:contentReady'); - - // show the files when no loading animation is running and not already open - if (!this.isLoading && old_files !== files) - this.show(); - }, - - // Do load animation, remove the old stuff - loading: function() { - this.isLoading = true; - this.files = null; - var self = this; - this.fileUL.fadeOut({complete: function() { - // All file views should vanish - App.vent.trigger('dashboard:destroyContent'); - - // Loading was faster than animation - if (self.files) - self.show(); - - self.isLoading = false; - }}); - }, - - failure: function() { - // TODO - }, - - show: function() { - // fileUL has to be resetted before - this.files.each(_.bind(this.appendFile, this)); - //TODO: show placeholder when nothing is displayed (filtered content empty) - this.fileUL.fadeIn(); - App.vent.trigger('dashboard:updated'); - }, - - // Refresh the file if it is currently shown - fileUpdated: function(data) { - // this works with ids and object - var file = this.files.get(data); - if (file) - if (_.isObject(data)) // update directly - file.set(data); - else // fetch from server - file.fetch(); - } - }); - });
\ No newline at end of file diff --git a/module/web/static/js/views/dashboard/fileView.js b/module/web/static/js/views/dashboard/fileView.js deleted file mode 100644 index 5d687a111..000000000 --- a/module/web/static/js/views/dashboard/fileView.js +++ /dev/null @@ -1,101 +0,0 @@ -define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView', 'helpers/formatTime'], - function($, Backbone, _, App, Api, ItemView, formatTime) { - - // Renders single file item - return ItemView.extend({ - - tagName: 'li', - className: 'file-view row-fluid', - template: _.compile($("#template-file").html()), - events: { - 'click .checkbox': 'select', - 'click .btn-delete': 'deleteItem', - 'click .btn-restart': 'restart' - }, - - initialize: function() { - this.listenTo(this.model, 'change', this.render); - // This will be triggered manually and changed before with silent=true - this.listenTo(this.model, 'change:visible', this.visibility_changed); - this.listenTo(this.model, 'change:progress', this.progress_changed); - this.listenTo(this.model, 'remove', this.unrender); - this.listenTo(App.vent, 'dashboard:destroyContent', this.destroy); - }, - - onDestroy: function() { - }, - - render: function() { - var data = this.model.toJSON(); - if (data.download) { - var status = data.download.status; - if (status === Api.DownloadStatus.Offline || status === Api.DownloadStatus.TempOffline) - data.offline = true; - else if (status === Api.DownloadStatus.Online) - data.online = true; - else if (status === Api.DownloadStatus.Waiting) - data.waiting = true; - else if (status === Api.DownloadStatus.Downloading) - data.downloading = true; - else if (this.model.isFailed()) - data.failed = true; - else if (this.model.isFinished()) - data.finished = true; - } - - this.$el.html(this.template(data)); - if (this.model.get('selected')) - this.$el.addClass('ui-selected'); - else - this.$el.removeClass('ui-selected'); - - if (this.model.get('visible')) - this.$el.show(); - else - this.$el.hide(); - - return this; - }, - - select: function(e) { - e.preventDefault(); - var checked = this.$el.hasClass('ui-selected'); - // toggle class immediately, so no re-render needed - this.model.set('selected', !checked, {silent: true}); - this.$el.toggleClass('ui-selected'); - App.vent.trigger('file:selection'); - }, - - visibility_changed: function(visible) { - // TODO: improve animation, height is not available when element was not visible - if (visible) - this.$el.slideOut(true); - else { - this.$el.calculateHeight(true); - this.$el.slideIn(true); - } - }, - - progress_changed: function() { - if (!this.model.isDownload()) - return; - - if (this.model.get('download').status === Api.DownloadStatus.Downloading) { - var bar = this.$('.progress .bar'); - if (!bar) { // ensure that the dl bar is rendered - this.render(); - bar = this.$('.progress .bar'); - } - - bar.width(this.model.get('progress') + '%'); - bar.html(' ' + formatTime(this.model.get('eta'))); - } else if (this.model.get('download').status === Api.DownloadStatus.Waiting) { - this.$('.second').html( - "<i class='iconf-time'></i> " + formatTime(this.model.get('eta'))); - - } else // Every else state can be renderred normally - this.render(); - - } - }); - });
\ No newline at end of file diff --git a/module/web/static/js/views/dashboard/filterView.js b/module/web/static/js/views/dashboard/filterView.js deleted file mode 100644 index 14968f2cc..000000000 --- a/module/web/static/js/views/dashboard/filterView.js +++ /dev/null @@ -1,133 +0,0 @@ -define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'models/Package'], - function($, Backbone, _, App, Api, Package) { - - // Modified version of type ahead show, nearly the same without absolute positioning - function show() { - this.$menu - .insertAfter(this.$element) - .show(); - - this.shown = true; - return this; - } - - // Renders the actionbar for the dashboard, handles everything related to filtering displayed files - return Backbone.View.extend({ - el: 'ul.actionbar', - - events: { - 'click .filter-type': 'filter_type', - 'click .filter-state': 'switch_filter', - 'submit .form-search': 'search' - }, - - state: null, - stateMenu: null, - - initialize: function() { - - // use our modified method - $.fn.typeahead.Constructor.prototype.show = show; - this.$('.search-query').typeahead({ - minLength: 2, - source: this.getSuggestions - }); - - this.stateMenu = this.$('.dropdown-toggle .state'); - this.state = Api.DownloadState.All; - - // Apply the filter before the content is shown - App.vent.on('dashboard:contentReady', _.bind(this.apply_filter, this)); - }, - - render: function() { - return this; - }, - - // TODO: app level api request - - search: function(e) { - e.stopPropagation(); - var input = this.$('.search-query'); - var query = input.val(); - input.val(''); - - var pack = new Package(); - // Overwrite fetch method to use a search - // TODO: quite hackish, could be improved to filter packages - // or show performed search - pack.fetch = function(options) { - pack.search(query, options); - }; - - App.dashboard.openPackage(pack); - }, - - getSuggestions: function(query, callback) { - $.ajax('/api/searchSuggestions', { - method: 'POST', - data: {pattern: JSON.stringify(query)}, - success: function(data) { - callback(data); - } - }); - }, - - switch_filter: function(e) { - e.stopPropagation(); - var element = $(e.target); - var state = parseInt(element.data('state'), 10); - var menu = this.stateMenu.parent().parent(); - menu.removeClass('open'); - - if (state === Api.DownloadState.Finished) { - menu.removeClass().addClass('dropdown finished'); - } else if (state === Api.DownloadState.Unfinished) { - menu.removeClass().addClass('dropdown active'); - } else if (state === Api.DownloadState.Failed) { - menu.removeClass().addClass('dropdown failed'); - } else { - menu.removeClass().addClass('dropdown'); - } - - this.state = state; - this.stateMenu.text(element.text()); - this.apply_filter(); - }, - - // Applies the filtering to current open files - apply_filter: function() { - if (!App.dashboard.files) - return; - - var self = this; - App.dashboard.files.map(function(file) { - var visible = file.get('visible'); - if (visible !== self.is_visible(file)) { - file.set('visible', !visible, {silent: true}); - file.trigger('change:visible', !visible); - } - }); - - App.vent.trigger('dashboard:filtered'); - }, - - // determine if a file should be visible - // TODO: non download files - is_visible: function(file) { - if (this.state === Api.DownloadState.Finished) - return file.isFinished(); - else if (this.state === Api.DownloadState.Unfinished) - return file.isUnfinished(); - else if (this.state === Api.DownloadState.Failed) - return file.isFailed(); - - return true; - }, - - filter_type: function(e) { - - } - - }); - });
\ No newline at end of file diff --git a/module/web/static/js/views/dashboard/packageView.js b/module/web/static/js/views/dashboard/packageView.js deleted file mode 100644 index 547c1470d..000000000 --- a/module/web/static/js/views/dashboard/packageView.js +++ /dev/null @@ -1,74 +0,0 @@ -define(['jquery', 'app', 'views/abstract/itemView', 'underscore'], - function($, App, itemView, _) { - - // Renders a single package item - return itemView.extend({ - - tagName: 'li', - className: 'package-view', - template: _.compile($("#template-package").html()), - events: { - 'click .package-name, .btn-open': 'open', - 'click .iconf-refresh': 'restart', - 'click .select': 'select', - 'click .btn-delete': 'deleteItem' - }, - - // Ul for child packages (unused) - ul: null, - // Currently unused - expanded: false, - - initialize: function() { - this.listenTo(this.model, 'filter:added', this.hide); - this.listenTo(this.model, 'filter:removed', this.show); - this.listenTo(this.model, 'change', this.render); - this.listenTo(this.model, 'remove', this.unrender); - - // Clear drop down menu - var self = this; - this.$el.on('mouseleave', function() { - self.$('.dropdown-menu').parent().removeClass('open'); - }); - }, - - onDestroy: function() { - }, - - // Render everything, optional only the fileViews - render: function() { - this.$el.html(this.template(this.model.toJSON())); - this.$el.initTooltips(); - - return this; - }, - - unrender: function() { - itemView.prototype.unrender.apply(this); - - // TODO: display other package - App.vent.trigger('dashboard:loading', null); - }, - - - // TODO - // Toggle expanding of packages - expand: function(e) { - e.preventDefault(); - }, - - open: function(e) { - e.preventDefault(); - App.dashboard.openPackage(this.model); - }, - - select: function(e) { - e.preventDefault(); - var checked = this.$('.select').hasClass('iconf-check'); - // toggle class immediately, so no re-render needed - this.model.set('selected', !checked, {silent: true}); - this.$('.select').toggleClass('iconf-check').toggleClass('iconf-check-empty'); - App.vent.trigger('package:selection'); - } - }); - });
\ No newline at end of file diff --git a/module/web/static/js/views/dashboard/selectionView.js b/module/web/static/js/views/dashboard/selectionView.js deleted file mode 100644 index 546cda847..000000000 --- a/module/web/static/js/views/dashboard/selectionView.js +++ /dev/null @@ -1,150 +0,0 @@ -define(['jquery', 'backbone', 'underscore', 'app'], - function($, Backbone, _, App) { - - // Renders context actions for selection packages and files - return Backbone.View.extend({ - el: '#selection-area', - template: _.compile($("#template-select").html()), - - events: { - 'click .iconf-check': 'deselect', - 'click .iconf-pause': 'pause', - 'click .iconf-trash': 'trash', - 'click .iconf-refresh': 'restart' - }, - - // Element of the action bar - actionBar: null, - // number of currently selected elements - current: 0, - - initialize: function() { - this.$el.calculateHeight().height(0); - - var render = _.bind(this.render, this); - - App.vent.on('dashboard:updated', render); - App.vent.on('dashboard:filtered', render); - App.vent.on('package:selection', render); - App.vent.on('file:selection', render); - - this.actionBar = $('.actionbar .btn-check'); - this.actionBar.parent().click(_.bind(this.select_toggle, this)); - - // API events, maybe better to rely on internal ones? - App.vent.on('package:deleted', render); - App.vent.on('file:deleted', render); - }, - - get_files: function(all) { - var files = []; - if (App.dashboard.files) - if (all) - files = App.dashboard.files.where({visible: true}); - else - files = App.dashboard.files.where({selected: true, visible: true}); - - return files; - }, - - get_packs: function() { - return App.dashboard.tree.get('packages').where({selected: true}); - }, - - render: function() { - var files = this.get_files().length; - var packs = this.get_packs().length; - - if (files + packs > 0) { - this.$el.html(this.template({files: files, packs: packs})); - this.$el.initTooltips('bottom'); - } - - if (files + packs > 0 && this.current === 0) - this.$el.slideOut(); - else if (files + packs === 0 && this.current > 0) - this.$el.slideIn(); - - if (files > 0) { - this.actionBar.addClass('iconf-check').removeClass('iconf-check-empty'); - App.dashboard.packageUL.addClass('ui-files-selected'); - } - else { - this.actionBar.addClass('iconf-check-empty').removeClass('iconf-check'); - App.dashboard.packageUL.removeClass('ui-files-selected'); - } - - this.current = files + packs; - }, - - // Deselects all items - deselect: function() { - this.get_files().map(function(file) { - file.set('selected', false); - }); - - this.get_packs().map(function(pack) { - pack.set('selected', false); - }); - - this.render(); - }, - - pause: function() { - alert("Not implemented yet"); - this.deselect(); - }, - - trash: function() { - _.confirm('default/confirmDialog.html', function() { - - var pids = []; - // TODO: delete many at once - this.get_packs().map(function(pack) { - pids.push(pack.get('pid')); - pack.destroy(); - }); - - // get only the fids of non deleted packages - var fids = _.filter(this.get_files(),function(file) { - return !_.contains(pids, file.get('package')); - }).map(function(file) { - file.destroyLocal(); - return file.get('fid'); - }); - - if (fids.length > 0) - $.ajax(App.apiRequest('deleteFiles', {fids: fids})); - - this.deselect(); - }, this); - }, - - restart: function() { - this.get_files().map(function(file) { - file.restart(); - }); - this.get_packs().map(function(pack) { - pack.restart(); - }); - - this.deselect(); - }, - - // Select or deselect all visible files - select_toggle: function() { - var files = this.get_files(); - if (files.length === 0) { - this.get_files(true).map(function(file) { - file.set('selected', true); - }); - - } else - files.map(function(file) { - file.set('selected', false); - }); - - this.render(); - } - }); - });
\ No newline at end of file |