From 4e9319f2f932a3baf7a8c9c0548eafe8647238f2 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Fri, 16 Aug 2013 19:59:25 +0200 Subject: settings for individual accounts --- pyload/web/app/scripts/helpers/pluginIcon.js | 2 +- pyload/web/app/scripts/models/Account.js | 21 ++++++++++++++++++-- pyload/web/app/scripts/models/ConfigItem.js | 13 +++++++----- .../web/app/scripts/views/accounts/accountEdit.js | 10 +++++++--- .../web/app/scripts/views/input/inputRenderer.js | 22 +++++++++++++++++++++ .../scripts/views/settings/configSectionView.js | 23 +++++++--------------- pyload/web/app/styles/default/accounts.less | 15 ++++++++++++++ .../templates/default/accounts/editAccount.html | 5 ++--- 8 files changed, 81 insertions(+), 30 deletions(-) create mode 100644 pyload/web/app/scripts/views/input/inputRenderer.js (limited to 'pyload/web') diff --git a/pyload/web/app/scripts/helpers/pluginIcon.js b/pyload/web/app/scripts/helpers/pluginIcon.js index 6b2fdc67f..1004c2487 100644 --- a/pyload/web/app/scripts/helpers/pluginIcon.js +++ b/pyload/web/app/scripts/helpers/pluginIcon.js @@ -3,7 +3,7 @@ define('helpers/pluginIcon', ['handlebars', 'app'], function(Handlebars, App) { 'use strict'; function pluginIcon(name) { - if (typeof name === 'object' && typeof name.get === 'function') + if (name && typeof name === 'object' && typeof name.get === 'function') name = name.get('plugin'); return App.apiUrl('icons/' + name); diff --git a/pyload/web/app/scripts/models/Account.js b/pyload/web/app/scripts/models/Account.js index d98d3374f..94893f3e2 100644 --- a/pyload/web/app/scripts/models/Account.js +++ b/pyload/web/app/scripts/models/Account.js @@ -1,4 +1,4 @@ -define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], function($, Backbone, _, App, Api) { +define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', './ConfigItem'], function($, Backbone, _, App, Api, ConfigItem) { 'use strict'; return Backbone.Model.extend({ @@ -30,6 +30,15 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], function($ }, + parse: function(resp) { + // Convert config to models + resp.config = _.map(resp.config, function(item) { + return new ConfigItem(item); + }); + + return resp; + }, + fetch: function(options) { var refresh = _.has(options, 'refresh') && options.refresh; options = App.apiRequest('getAccountInfo', @@ -47,8 +56,16 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], function($ }, save: function() { + // use changed config items only + var data = this.toJSON(); + data.config = _.map(_.filter(data.config, function(c){ + return c.isChanged(); + }), function(c) { + return c.prepareSave(); + }); + // On success wait 1sec and trigger event to reload info - var options = App.apiRequest('updateAccountInfo', {account: this.toJSON()}, { + var options = App.apiRequest('updateAccountInfo', {account: data}, { success: function() { _.delay(function() { App.vent.trigger('account:updated'); diff --git a/pyload/web/app/scripts/models/ConfigItem.js b/pyload/web/app/scripts/models/ConfigItem.js index ecb44cbbc..8c75f45f6 100644 --- a/pyload/web/app/scripts/models/ConfigItem.js +++ b/pyload/web/app/scripts/models/ConfigItem.js @@ -4,6 +4,8 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], return Backbone.Model.extend({ + idAttribute: 'name', + defaults: { name: '', label: '', @@ -29,11 +31,12 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], if (this.get('inputView')) this.set('value', this.get('inputView').getVal()); - var data = this.toJSON(); - delete data.inputView; - delete data.description; - - return data; + // These values are enough to be handled correctly + return { + name: this.get('name'), + value: this.get('value'), + '@class': this.get('@class') + }; } }); }); \ No newline at end of file diff --git a/pyload/web/app/scripts/views/accounts/accountEdit.js b/pyload/web/app/scripts/views/accounts/accountEdit.js index b9109390b..503860a5e 100644 --- a/pyload/web/app/scripts/views/accounts/accountEdit.js +++ b/pyload/web/app/scripts/views/accounts/accountEdit.js @@ -1,5 +1,5 @@ -define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'hbs!tpl/accounts/editAccount'], - function($, _, App, modalView, template) { +define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'views/input/inputRenderer', 'hbs!tpl/accounts/editAccount', 'hbs!tpl/settings/configItem'], + function($, _, App, modalView, renderForm, template, templateItem) { 'use strict'; return modalView.extend({ @@ -16,6 +16,10 @@ define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'hbs!tpl/acco }, onRender: function() { + renderForm(this.$('.account-config'), + this.model.get('config'), + templateItem + ); }, save: function() { @@ -23,7 +27,7 @@ define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'hbs!tpl/acco if (password !== '') { this.model.setPassword(password); } - + this.model.save(); this.hide(); return false; }, diff --git a/pyload/web/app/scripts/views/input/inputRenderer.js b/pyload/web/app/scripts/views/input/inputRenderer.js new file mode 100644 index 000000000..c20f15708 --- /dev/null +++ b/pyload/web/app/scripts/views/input/inputRenderer.js @@ -0,0 +1,22 @@ +define(['jquery', 'underscore', './inputLoader'], function($, _, load_input) { + 'use strict'; + + // Renders list of ConfigItems to an container + // Optionally binds change event to view + return function(container, items, template, onChange, view) { + _.each(items, function(item) { + var json = item.toJSON(); + var el = $('
').html(template(json)); + var InputView = load_input(item.get('input')); + var input = new InputView(json).render(); + item.set('inputView', input); + + if (_.isFunction(onChange) && view) { + view.listenTo(input, 'change', onChange); + } + + el.find('.controls').append(input.el); + container.append(el); + }); + }; +}); \ No newline at end of file diff --git a/pyload/web/app/scripts/views/settings/configSectionView.js b/pyload/web/app/scripts/views/settings/configSectionView.js index 0d9b0762f..38d4cb869 100644 --- a/pyload/web/app/scripts/views/settings/configSectionView.js +++ b/pyload/web/app/scripts/views/settings/configSectionView.js @@ -1,6 +1,6 @@ -define(['jquery', 'underscore', 'backbone', 'app', '../abstract/itemView', '../input/inputLoader', +define(['jquery', 'underscore', 'backbone', 'app', '../abstract/itemView', '../input/inputRenderer', 'hbs!tpl/settings/config', 'hbs!tpl/settings/configItem'], - function($, _, Backbone, App, itemView, load_input, template, templateItem) { + function($, _, Backbone, App, itemView, renderForm, template, templateItem) { 'use strict'; // Renders settings over view page @@ -9,7 +9,6 @@ define(['jquery', 'underscore', 'backbone', 'app', '../abstract/itemView', '../i tagName: 'div', template: template, - templateItem: templateItem, // Will only render one time with further attribute updates rendered: false, @@ -33,19 +32,11 @@ define(['jquery', 'underscore', 'backbone', 'app', '../abstract/itemView', '../i // trigger: 'hover' }); - var container = this.$('.control-content'); - var self = this; - _.each(this.model.get('items'), function(item) { - var json = item.toJSON(); - var el = $('
').html(self.templateItem(json)); - var InputView = load_input(item.get('input')); - var input = new InputView(json).render(); - item.set('inputView', input); - - self.listenTo(input, 'change', _.bind(self.render, self)); - el.find('.controls').append(input.el); - container.append(el); - }); + // Renders every single element + renderForm(this.$('.control-content'), + this.model.get('items'), templateItem, + _.bind(this.render, this), this); + this.rendered = true; } // Enable button if something is changed diff --git a/pyload/web/app/styles/default/accounts.less b/pyload/web/app/styles/default/accounts.less index 3891d8e45..efc8b5518 100644 --- a/pyload/web/app/styles/default/accounts.less +++ b/pyload/web/app/styles/default/accounts.less @@ -16,6 +16,21 @@ } +.form-account { + + // Bit wider control labels / same as config page + .control-label { + width: 180px; + } + .controls { + margin-left: 200px; + } + .form-actions { + padding-left: 200px; + } + +} + .logo-select { width: 20px; height: 20px; diff --git a/pyload/web/app/templates/default/accounts/editAccount.html b/pyload/web/app/templates/default/accounts/editAccount.html index 45cbf95f6..57c767226 100755 --- a/pyload/web/app/templates/default/accounts/editAccount.html +++ b/pyload/web/app/templates/default/accounts/editAccount.html @@ -3,14 +3,14 @@

{{_ "Edit account" }}

-
+
- + {{ loginname }}
@@ -27,7 +27,6 @@ {{ _ "Configuration" }} - TODO {{/if}} -- cgit v1.2.3