From 76f760fe029303ba2ff203759a8332a628a9a7ec Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sat, 30 Mar 2013 15:39:56 +0100 Subject: plugin chooser for settings --- module/web/static/js/views/abstract/modalView.js | 2 +- module/web/static/js/views/configSectionView.js | 97 -------------- module/web/static/js/views/dashboard/fileView.js | 6 +- .../static/js/views/settings/configSectionView.js | 97 ++++++++++++++ .../static/js/views/settings/pluginChooserModal.js | 66 ++++++++++ .../web/static/js/views/settings/settingsView.js | 140 +++++++++++++++++++++ module/web/static/js/views/settingsView.js | 127 ------------------- 7 files changed, 309 insertions(+), 226 deletions(-) delete mode 100644 module/web/static/js/views/configSectionView.js create mode 100644 module/web/static/js/views/settings/configSectionView.js create mode 100644 module/web/static/js/views/settings/pluginChooserModal.js create mode 100644 module/web/static/js/views/settings/settingsView.js delete mode 100644 module/web/static/js/views/settingsView.js (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/abstract/modalView.js b/module/web/static/js/views/abstract/modalView.js index 1e45e942b..170681f06 100644 --- a/module/web/static/js/views/abstract/modalView.js +++ b/module/web/static/js/views/abstract/modalView.js @@ -83,7 +83,7 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, }, renderContent: function() { - return {content: $('

Content!

').html()}; + return {}; }, show: function() { diff --git a/module/web/static/js/views/configSectionView.js b/module/web/static/js/views/configSectionView.js deleted file mode 100644 index 949493731..000000000 --- a/module/web/static/js/views/configSectionView.js +++ /dev/null @@ -1,97 +0,0 @@ -define(['jquery', 'underscore', 'backbone', 'app', './abstract/itemView', './input/inputLoader'], - function($, _, Backbone, App, itemView, load_input) { - - // Renders settings over view page - return itemView.extend({ - - tagName: 'div', - - template: _.compile($("#template-config").html()), - templateItem: _.compile($("#template-config-item").html()), - - // Will only render one time with further attribute updates - rendered: false, - - events: { - 'click .btn-primary': 'submit', - 'click .btn-reset': 'reset' - }, - - initialize: function() { - this.listenTo(this.model, 'destroy', this.destroy); - }, - - render: function() { - if (!this.rendered) { - this.$el.html(this.template(this.model.toJSON())); - - // initialize the popover - this.$('.page-header a').popover({ - placement: 'left', -// trigger: 'hover' - }); - - var container = this.$('.control-content'); - var self = this; - _.each(this.model.get('items'), function(item) { - var el = $('
').html(self.templateItem(item.toJSON())); - var inputView = load_input(item.get('input')); - var input = new inputView(item.get('input'), item.get('value'), - item.get('default_value'), item.get('description')).render(); - item.set('inputView', input); - - self.listenTo(input, 'change', _.bind(self.render, self)); - el.find('.controls').append(input.el); - container.append(el); - }); - this.rendered = true; - } - // Enable button if something is changed - if (this.model.hasChanges()) - this.$('.btn-primary').removeClass('disabled'); - else - this.$('.btn-primary').addClass('disabled'); - - // Mark all inputs that are modified - _.each(this.model.get('items'), function(item) { - var input = item.get('inputView'); - var el = input.$el.parent().parent(); - if (item.isChanged()) - el.addClass('info'); - else - el.removeClass('info'); - }); - - return this; - }, - - onDestroy: function(){ - // TODO: correct cleanup after building up so many views and models - }, - - submit: function(e) { - e.stopPropagation(); - // TODO: success / failure popups - var self = this; - this.model.save({success: function(){ - console.log("saved"); - self.render(); - }}); - - }, - - reset: function(e) { - e.stopPropagation(); - // restore the original value - _.each(this.model.get('items'), function(item) { - if (item.has('inputView')) { - var input = item.get('inputView'); - input.setVal(item.get('value')); - input.render(); - } - }); - this.render(); - } - - }); - }); \ 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 index c673041b5..5d687a111 100644 --- a/module/web/static/js/views/dashboard/fileView.js +++ b/module/web/static/js/views/dashboard/fileView.js @@ -77,7 +77,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst }, progress_changed: function() { - if(!this.model.isDownload()) + if (!this.model.isDownload()) return; if (this.model.get('download').status === Api.DownloadStatus.Downloading) { @@ -89,6 +89,10 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst 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( + " " + formatTime(this.model.get('eta'))); + } else // Every else state can be renderred normally this.render(); diff --git a/module/web/static/js/views/settings/configSectionView.js b/module/web/static/js/views/settings/configSectionView.js new file mode 100644 index 000000000..79f314309 --- /dev/null +++ b/module/web/static/js/views/settings/configSectionView.js @@ -0,0 +1,97 @@ +define(['jquery', 'underscore', 'backbone', 'app', '../abstract/itemView', '../input/inputLoader'], + function($, _, Backbone, App, itemView, load_input) { + + // Renders settings over view page + return itemView.extend({ + + tagName: 'div', + + template: _.compile($("#template-config").html()), + templateItem: _.compile($("#template-config-item").html()), + + // Will only render one time with further attribute updates + rendered: false, + + events: { + 'click .btn-primary': 'submit', + 'click .btn-reset': 'reset' + }, + + initialize: function() { + this.listenTo(this.model, 'destroy', this.destroy); + }, + + render: function() { + if (!this.rendered) { + this.$el.html(this.template(this.model.toJSON())); + + // initialize the popover + this.$('.page-header a').popover({ + placement: 'left', +// trigger: 'hover' + }); + + var container = this.$('.control-content'); + var self = this; + _.each(this.model.get('items'), function(item) { + var el = $('
').html(self.templateItem(item.toJSON())); + var inputView = load_input(item.get('input')); + var input = new inputView(item.get('input'), item.get('value'), + item.get('default_value'), item.get('description')).render(); + item.set('inputView', input); + + self.listenTo(input, 'change', _.bind(self.render, self)); + el.find('.controls').append(input.el); + container.append(el); + }); + this.rendered = true; + } + // Enable button if something is changed + if (this.model.hasChanges()) + this.$('.btn-primary').removeClass('disabled'); + else + this.$('.btn-primary').addClass('disabled'); + + // Mark all inputs that are modified + _.each(this.model.get('items'), function(item) { + var input = item.get('inputView'); + var el = input.$el.parent().parent(); + if (item.isChanged()) + el.addClass('info'); + else + el.removeClass('info'); + }); + + return this; + }, + + onDestroy: function(){ + // TODO: correct cleanup after building up so many views and models + }, + + submit: function(e) { + e.stopPropagation(); + // TODO: success / failure popups + var self = this; + this.model.save({success: function(){ + console.log("saved"); + self.render(); + }}); + + }, + + reset: function(e) { + e.stopPropagation(); + // restore the original value + _.each(this.model.get('items'), function(item) { + if (item.has('inputView')) { + var input = item.get('inputView'); + input.setVal(item.get('value')); + input.render(); + } + }); + this.render(); + } + + }); + }); \ No newline at end of file diff --git a/module/web/static/js/views/settings/pluginChooserModal.js b/module/web/static/js/views/settings/pluginChooserModal.js new file mode 100644 index 000000000..c7cdce244 --- /dev/null +++ b/module/web/static/js/views/settings/pluginChooserModal.js @@ -0,0 +1,66 @@ +define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'text!tpl/default/pluginChooserDialog.html', 'select2'], + function($, _, App, modalView, template) { + return modalView.extend({ + + events: { + 'click .btn-add': 'add' + }, + template: _.compile(template), + plugins: null, + select: null, + + initialize: function() { + // Inherit parent events + this.events = _.extend({}, modalView.prototype.events, this.events); + var self = this; + $.ajax(App.apiRequest('getAvailablePlugins', null, {success: function(data) { + self.plugins = data; + self.render(); + } + })); + }, + + onRender: function() { + // TODO: could be a seperate input type if needed on multiple pages + if (this.plugins) + this.select = this.$('#pluginSelect').select2({ + escapeMarkup: function(m) { + return m; + }, + formatResult: this.format, + formatSelection: this.formatSelection, + data: {results: this.plugins, text: function(item) { + return item.label; + }}, + id: function(item) { + return item.name; + } + }); + }, + + onShow: function() { + }, + + onHide: function() { + }, + + format: function(data) { + var s = '
' + data.label; + s += "
" + data.description + "
"; + return s; + }, + + formatSelection: function(data) { + return ' ' + data.label; + }, + + add: function(e) { + e.stopPropagation(); + if (this.select) { + var plugin = this.select.val(); + App.settingsView.openConfig(plugin); + this.hide(); + } + } + }); + }); \ No newline at end of file diff --git a/module/web/static/js/views/settings/settingsView.js b/module/web/static/js/views/settings/settingsView.js new file mode 100644 index 000000000..58507f51a --- /dev/null +++ b/module/web/static/js/views/settings/settingsView.js @@ -0,0 +1,140 @@ +define(['jquery', 'underscore', 'backbone', 'app', 'models/ConfigHolder', './configSectionView'], + function($, _, Backbone, App, ConfigHolder, configSectionView) { + + // Renders settings over view page + return Backbone.View.extend({ + + el: "body", + templateMenu: _.compile($("#template-menu").html()), + + events: { + 'click .settings-menu li > a': 'change_section', + 'click .btn-add': 'choosePlugin' + }, + + menu: null, + content: null, + modal: null, + + coreConfig: null, // It seems collections are not needed + pluginConfig: null, + + // currently open configHolder + config: null, + lastConfig: null, + isLoading: false, + + + initialize: function() { + this.menu = this.$('.settings-menu'); + this.content = this.$('.setting-box > form'); + // set a height with css so animations will work + this.content.height(this.content.height()); + this.refresh(); + + console.log("Settings initialized"); + }, + + refresh: function() { + var self = this; + $.ajax(App.apiRequest("getCoreConfig", null, {success: function(data) { + self.coreConfig = data; + self.render(); + }})); + $.ajax(App.apiRequest("getPluginConfig", null, {success: function(data) { + self.pluginConfig = data; + self.render(); + }})); + }, + + render: function() { + this.menu.html(this.templateMenu({ + core: this.coreConfig, + plugin: this.pluginConfig + })); + }, + + openConfig: function(name) { + // Do nothing when this config is already open + if (this.config && this.config.get('name') === name) + return; + + this.lastConfig = this.config; + this.config = new ConfigHolder({name: name}); + this.loading(); + + var self = this; + this.config.fetch({success: function() { + if (!self.isLoading) + self.show(); + + }, failure: _.bind(this.failure, this)}); + + }, + + loading: function() { + this.isLoading = true; + var self = this; + this.content.fadeOut({complete: function() { + if (self.config.isLoaded()) + self.show(); + + self.isLoading = false; + }}); + + }, + + show: function() { + // TODO animations are bit sloppy + this.content.css('display', 'block'); + var oldHeight = this.content.height(); + + // this will destroy the old view + if (this.lastConfig) + this.lastConfig.trigger('destroy'); + else + this.content.empty(); + + // reset the height + this.content.css('height', ''); + // append the new element + this.content.append(new configSectionView({model: this.config}).render().el); + // get the new height + var height = this.content.height(); + // set the old height again + this.content.height(oldHeight); + this.content.animate({ + opacity: 'show', + height: height + }); + }, + + failure: function() { + + }, + + change_section: function(e) { + // TODO check for changes + // TODO move this into render? + + var el = $(e.target).parent(); + var name = el.data("name"); + this.openConfig(name); + + this.menu.find("li.active").removeClass("active"); + el.addClass("active"); + e.preventDefault(); + }, + + choosePlugin: function(e){ + var self = this; + _.requireOnce(['views/settings/pluginChooserModal'], function(Modal) { + if (self.modal === null) + self.modal = new Modal(); + + self.modal.show(); + }); + } + + }); + }); \ No newline at end of file diff --git a/module/web/static/js/views/settingsView.js b/module/web/static/js/views/settingsView.js deleted file mode 100644 index 3b8308f19..000000000 --- a/module/web/static/js/views/settingsView.js +++ /dev/null @@ -1,127 +0,0 @@ -define(['jquery', 'underscore', 'backbone', 'app', 'models/ConfigHolder', './configSectionView'], - function($, _, Backbone, App, ConfigHolder, configSectionView) { - - // Renders settings over view page - return Backbone.View.extend({ - - el: "#content", - templateMenu: _.compile($("#template-menu").html()), - - events: { - 'click .settings-menu li > a': 'change_section' - }, - - menu: null, - content: null, - - core_config: null, // It seems models are not needed - plugin_config: null, - - // currently open configHolder - config: null, - lastConfig: null, - isLoading: false, - - - initialize: function() { - this.menu = this.$('.settings-menu'); - this.content = this.$('.setting-box > form'); - // set a height with css so animations will work - this.content.height(this.content.height()); - this.refresh(); - - console.log("Settings initialized"); - }, - - refresh: function() { - var self = this; - $.ajax(App.apiRequest("getCoreConfig", null, {success: function(data) { - self.core_config = data; - self.render(); - }})); - $.ajax(App.apiRequest("getPluginConfig", null, {success: function(data) { - self.plugin_config = data; - self.render(); - }})); - }, - - render: function() { - this.menu.html(this.templateMenu({ - core: this.core_config, - plugin: this.plugin_config - })); - }, - - openConfig: function(name) { - // Do nothing when this config is already open - if (this.config && this.config.get('name') === name) - return; - - this.lastConfig = this.config; - this.config = new ConfigHolder({name: name}); - this.loading(); - - var self = this; - this.config.fetch({success: function() { - if (!self.isLoading) - self.show(); - - }, failure: _.bind(this.failure, this)}); - - }, - - loading: function() { - this.isLoading = true; - var self = this; - this.content.fadeOut({complete: function() { - if (self.config.isLoaded()) - self.show(); - - self.isLoading = false; - }}); - - }, - - show: function() { - // TODO animations are bit sloppy - this.content.css('display', 'block'); - var oldHeight = this.content.height(); - - // this will destroy the old view - if (this.lastConfig) - this.lastConfig.trigger('destroy'); - else - this.content.empty(); - - // reset the height - this.content.css('height', ''); - // append the new element - this.content.append(new configSectionView({model: this.config}).render().el); - // get the new height - var height = this.content.height(); - // set the old height again - this.content.height(oldHeight); - this.content.animate({ - opacity: 'show', - height: height - }); - }, - - failure: function() { - - }, - - change_section: function(e) { - // TODO check for changes - - var el = $(e.target).parent(); - var name = el.data("name"); - this.openConfig(name); - - this.menu.find("li.active").removeClass("active"); - el.addClass("active"); - e.preventDefault(); - } - - }); - }); \ No newline at end of file -- cgit v1.2.3