diff options
Diffstat (limited to 'module/web')
| -rw-r--r-- | module/web/static/js/models/ConfigHolder.js | 44 | ||||
| -rw-r--r-- | module/web/static/js/models/ConfigItem.js | 22 | ||||
| -rw-r--r-- | module/web/static/js/views/headerView.js | 3 | ||||
| -rw-r--r-- | module/web/static/js/views/queryModal.js | 1 | ||||
| -rw-r--r-- | module/web/static/js/views/settingsView.js | 89 | ||||
| -rw-r--r-- | module/web/templates/default/settings.html | 148 |
6 files changed, 188 insertions, 119 deletions
diff --git a/module/web/static/js/models/ConfigHolder.js b/module/web/static/js/models/ConfigHolder.js new file mode 100644 index 000000000..8beb31fb8 --- /dev/null +++ b/module/web/static/js/models/ConfigHolder.js @@ -0,0 +1,44 @@ +define(['jquery', 'backbone', 'underscore', 'app', './ConfigItem'], + function($, Backbone, _, App, ConfigItem) { + + return Backbone.Model.extend({ + + defaults: { + name: "", + label: "", + description: "", + long_description: null, + // simple list but no collection + items: null, + info: null + }, + + // Model Constructor + initialize: function() { + + }, + + // Loads it from server by name + fetch: function(options) { + options = App.apiRequest('loadConfig/"' + this.get('name') + '"', null, options); + return Backbone.Model.prototype.fetch.call(this, options); + }, + + save: function(options) { + // TODO + }, + + parse: function(resp) { + // Create item models + resp.items = _.map(resp.items, function(item) { + return new ConfigItem(item); + }); + + return Backbone.Model.prototype.parse.call(this, resp); + }, + + isLoaded: function() { + return this.has('items') || this.has('long_description'); + } + }); + });
\ No newline at end of file diff --git a/module/web/static/js/models/ConfigItem.js b/module/web/static/js/models/ConfigItem.js new file mode 100644 index 000000000..f55bb2b9e --- /dev/null +++ b/module/web/static/js/models/ConfigItem.js @@ -0,0 +1,22 @@ +define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'], + function($, Backbone, _, App, Api) { + + return Backbone.Model.extend({ + + defaults: { + name: "", + label: "", + description: "", + input: null, + default_valie: null, + value: null, + // additional attributes + inputView: null + }, + + // Model Constructor + initialize: function() { + + } + }); + });
\ No newline at end of file diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js index 25127a337..db704a3db 100644 --- a/module/web/static/js/views/headerView.js +++ b/module/web/static/js/views/headerView.js @@ -55,7 +55,8 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle // TODO compare with polling ws.onmessage = _.bind(this.onData, this); ws.onerror = function(error) { - alert(error); + console.log(error); + alert("WebSocket error" + error); }; this.ws = ws; diff --git a/module/web/static/js/views/queryModal.js b/module/web/static/js/views/queryModal.js index 86fd5b78b..5477334a0 100644 --- a/module/web/static/js/views/queryModal.js +++ b/module/web/static/js/views/queryModal.js @@ -2,6 +2,7 @@ define(['jquery', 'underscore', 'app', 'views/abstract/modalView', './input/inpu function($, _, App, modalView, load_input, template) { return modalView.extend({ + // TODO: submit on enter reloads the page sometimes events: { 'click .btn-success': 'submit', 'submit form': 'submit' diff --git a/module/web/static/js/views/settingsView.js b/module/web/static/js/views/settingsView.js index a322cdae7..00c4b3739 100644 --- a/module/web/static/js/views/settingsView.js +++ b/module/web/static/js/views/settingsView.js @@ -1,23 +1,31 @@ -define(['jquery', 'underscore', 'backbone'], - function($, _, Backbone) { +define(['jquery', 'underscore', 'backbone', 'app', './input/inputLoader', 'models/ConfigHolder'], + function($, _, Backbone, App, load_input, ConfigHolder) { // Renders settings over view page return Backbone.View.extend({ el: "#content", - template_menu: _.compile($("#template-menu").html()), + templateMenu: _.compile($("#template-menu").html()), + templateConfig: _.compile($("#template-config").html()), + templateConfigItem: _.compile($("#template-config-item").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, + isLoading: false, + initialize: function() { - this.menu = $('.settings-menu'); + this.menu = this.$('.settings-menu'); + this.content = this.$('#settings-form'); this.refresh(); console.log("Settings initialized"); @@ -25,27 +33,80 @@ define(['jquery', 'underscore', 'backbone'], refresh: function() { var self = this; - $.ajax("/api/getCoreConfig", {success: function(data) { + $.ajax(App.apiRequest("getCoreConfig", null, {success: function(data) { self.core_config = data; - self.render() - }}); - $.ajax("/api/getPluginConfig", {success: function(data) { + self.render(); + }})); + $.ajax(App.apiRequest("getPluginConfig", null, {success: function(data) { self.plugin_config = data; self.render(); - }}); + }})); }, render: function() { - this.menu.html(this.template_menu({ - core: this.core_config, - plugin: this.plugin_config - })); + 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.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: better refactor in separate views + this.content.html(this.templateConfig(this.config.toJSON())); + var container = this.content.find('.control-content'); + var items = this.config.get('items'); + var self = this; + _.each(items, function(item) { + var el = $('<div>').html(self.templateConfigItem(item.toJSON())); + var inputView = load_input("todo"); + el.find('.controls').append( + new inputView(item.get('input'), item.get('value'), + item.get('default_value'), item.get('description')).render().el); + container.append(el); + }); + + this.content.fadeIn(); + }, + + failure: function() { + }, change_section: function(e) { + // TODO check for changes + var el = $(e.target).parent(); var name = el.data("name"); - console.log("Section changed to " + name); + this.openConfig(name); this.menu.find("li.active").removeClass("active"); el.addClass("active"); diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html index 1f9be3db0..7f6bbeb8e 100644 --- a/module/web/templates/default/settings.html +++ b/module/web/templates/default/settings.html @@ -15,119 +15,59 @@ {% block head %}
<script type="text/template" id="template-menu">
<%=if core%>
- <li class="nav-header"><i class="icon-globe icon-white"></i> {{ _("General") }}</li>
- <%=each core%>
- <li data-name="<% this.name %>"><a href="#"><% this.label %></a></li>
- <%/each%>
+ <li class="nav-header"><i class="icon-globe icon-white"></i> {{ _("General") }}</li>
+ <%=each core%>
+ <li data-name="<% this.name %>"><a href="#"><% this.label %></a></li>
+ <%/each%>
<%/if%>
<li class="divider"></li>
<li class="nav-header"><i class="icon-th-large icon-white"></i> {{ _("Addons") }}</li>
<li class="divider"></li>
<li class="nav-header"><i class="icon-th-list icon-white"></i> {{ _("Other") }}</li>
</script>
-{% endblock %}
-
-{% block content %}
- <div class="span2">
- <ul class="nav nav-list well settings-menu">
- </ul>
+ <script type="text/template" id="template-config">
+ <legend>
+ <div class="page-header">
+ <h1><% label %>
+ <small><% description %></small>
+ <a class="btn btn-small " href="#"><i
+ class="icon-question-sign"></i></a>
+ </h1>
</div>
- <!-- Info Popup -->
- <div class="modal hide fade in" id="info">
- <div class="modal-header">
- <button type="button" class="close">×</button>
- <h3>Info Popup</h3>
- </div>
- <div class="modal-body">
- <h4>General</h4>
-
- <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
-
- <h4>And...</h4>
-
- <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
- egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-
- </div>
- <div class="modal-footer">
- <button class="btn">Close</button>
- </div>
- </div>
- <!-- End Info Popup -->
- <div class="span10">
- <div class="well setting-box">
- <form class="form-horizontal">
- <legend>
- <div class="page-header">
- <h1>Example Settings
- <small>Subtext for header</small>
- <a class="btn btn-small " href="#"><i
- class="icon-question-sign"></i></a>
- </h1>
- </div>
- </legend>
- <div class="control-group">
- <label class="control-label">Max Parallel Downloads</label>
-
- <div class="controls">
- <input id="in_mpd" type="text" placeholder="3">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Limit Download Speed</label>
-
- <div class="controls">
- <div class="btn-group" data-toggle="buttons-radio">
- <button type="button" class="btn bnmaxspeed" id="onmaxspeed">On</button>
- <button type="button" class="btn bnmaxspeed active" id="offmaxspeed">Off</button>
- </div>
- <div id="downloadspeed" style="display:none">
- <label>Max Download Speed in kb/s</label>
- <input type="text" placeholder="Tipp etwas ...">
- </div>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">Allow IPv6</label>
-
- <div class="controls">
- <div class="btn-group" data-toggle="buttons-radio">
- <button type="button" class="btn bnip6" id="onip6">On</button>
- <button type="button" class="btn bnip6 active" id="offip6">Off</button>
- </div>
- </div>
- </div>
- <div class="form-actions">
- <button type="submit" class="btn btn-primary">Änderungen Speichern</button>
- <button type="button" class="btn">Abbrechen</button>
- </div>
- </form>
- </div>
+ </legend>
+ <div class="control-content">
+ </div>
+ <div class="form-actions">
+ <button type="submit" class="btn btn-primary disabled">Save changes</button>
+ <button type="button" class="btn">Cancel</button>
+ </div>
+ </script>
+ <script type="text/template" id="template-config-item">
+ <div class="control-group">
+ <label class="control-label"><% label %></label>
+ <div class="controls">
</div>
- <script src="static/js/libs/jquery-1.9.0.js"></script>
- {# <script src="static/js/libs/bootstrap-2.1.1.js"></script>#}
- <script type="text/javascript">
- $(".bnmaxspeed").click(function() {
- $(".bnmaxspeed").removeClass("active");
- $(this).toggleClass("active");
- if ($("#onmaxspeed").hasClass("active")) {
- $("#downloadspeed").show();
- }
- else {
- $("#downloadspeed").hide();
- }
+ </div>
+ </script>
- });
- $(".bnip6").click(function() {
- $(".bnip6").removeClass("active");
- $(this).toggleClass("active");
- });
- $('#info').modal('toggle');
+{% endblock %}
- $('#in_mpd').tooltip({
- placement: 'right',
- title: 'Gib an wie viele Downloads gleichzeitg laufen dürfen.'
- });
+{% block actionbar %}
+{# <ul class="actionbar nav nav-pills span9">#}
+{# <li>Add Plugin</li>#}
+{# </ul>#}
+{% endblock %}
- </script>
+{% block content %}
+ <div class="span2">
+ <ul class="nav nav-list well settings-menu">
+ </ul>
+ </div>
+ <div class="span10">
+ <div class="well setting-box">
+ <form class="form-horizontal" id="settings-form">
+ <h1>Please choose a config section</h1>
+ </form>
+ </div>
+ </div>
{% endblock %}
\ No newline at end of file |