diff --git a/bower.json b/bower.json
index 851068977..6dd59a7be 100644
--- a/bower.json
+++ b/bower.json
@@ -21,7 +21,6 @@
"datatables.net": "~1.10.12",
"datatables.net-dt": "~1.10.12",
"admin-lte": "~2.3.11",
- "handlebars": "~4.0.5",
"underscore": "~1.8.3",
"html5shiv": "~3.7.3",
"respond": "~1.4.2",
diff --git a/jstests/tests/home/test_configurables.js b/jstests/tests/home/test_configurables.js
index 1d011295c..df49f6a6e 100644
--- a/jstests/tests/home/test_configurables.js
+++ b/jstests/tests/home/test_configurables.js
@@ -5,22 +5,21 @@ define([
QUnit.module("home.configurables");
QUnit.test("instantiation", function (assert) {
- var resolution_class = configurables.from_tag("resolution");
- var resolution = new resolution_class();
- assert.equal(resolution.tag, "resolution");
- assert.equal(resolution.resolution, "Window");
-
- resolution.resolution = "1024x768";
- assert.equal(resolution.as_config_dict().resolution, "1024x768");
+ var resolution_conf = new configurables.resolution();
+
+ assert.equal(resolution_conf.tag, "resolution");
+ assert.deepEqual(resolution_conf.config_dict, { resolution: "Window" });
+ assert.notEqual(resolution_conf.as_config_dict().resolution, "Window");
+
+ resolution_conf.config_dict = { resolution: '1280x1024' };
+ assert.equal(resolution_conf.as_config_dict().resolution, '1280x1024');
});
-
+
QUnit.test("view", function (assert) {
- var resolution_class = configurables.from_tag("resolution");
- var resolution = new resolution_class();
+ var propsData = { config_dict: { resolution: "Window" } };
+ var component = new configurables.resolution_component({propsData: propsData}).$mount();
- var view = resolution.view();
- assert.notEqual(view.find("select"), null);
- assert.equal(view.find("option").length,
- resolution.resolution_options.length);
+ assert.notEqual(component.$el.querySelector("select"), null);
+ assert.equal(component.$el.querySelector("select").children.length, 5);
});
-});
+});
\ No newline at end of file
diff --git a/jstests/tests/home/test_models.js b/jstests/tests/home/test_models.js
index 90ab0e4d4..1fdad11a8 100644
--- a/jstests/tests/home/test_models.js
+++ b/jstests/tests/home/test_models.js
@@ -2,7 +2,7 @@ define([
"home/models"
], function (models) {
"use strict";
-
+
QUnit.module("home.models");
QUnit.test("instantiation", function (assert) {
var model = new models.ApplicationListModel();
@@ -10,7 +10,7 @@ define([
model.update().done(function() {
assert.equal(model.app_list.length, 2);
assert.equal(model.app_list[0].app_data.image.configurables[0], "resolution");
- assert.equal(model.app_list[0].configurables[0].resolution, "Window");
+ assert.equal(model.app_list[0].configurables[0].config_dict.resolution, "Window");
});
});
});
diff --git a/jstests/testsuite.js b/jstests/testsuite.js
index e143b43c6..3ac86753d 100644
--- a/jstests/testsuite.js
+++ b/jstests/testsuite.js
@@ -7,7 +7,6 @@
bootstrap: '../components/bootstrap/js/bootstrap.min',
moment: "../components/moment/moment",
"jsapi/v1/resources": "../../../jstests/tests/home/mock_jsapi",
- handlebars: "../components/handlebars/handlebars.amd.min",
underscore: "../components/underscore/underscore-min",
vue: "../components/vue/dist/vue"
},
@@ -25,7 +24,7 @@
"tests/home/test_views.js",
"tests/test_utils.js",
"tests/test_analytics.js"
- ], function(init) {
+ ], function() {
window.apidata = {
base_url: "/",
prefix: "/"
diff --git a/remoteappmanager/static/js/home/configurables.js b/remoteappmanager/static/js/home/configurables.js
index 514df06da..2e6927eaa 100644
--- a/remoteappmanager/static/js/home/configurables.js
+++ b/remoteappmanager/static/js/home/configurables.js
@@ -1,85 +1,57 @@
define([
- "jquery",
- "handlebars",
- "utils"
-], function($, hb, utils) {
+ "utils",
+ "components/vue/dist/vue"
+], function(utils, Vue) {
"use strict";
- var view_template = hb.compile(
- '' +
- '' +
- '
'
- );
+ var resolution_tag = 'resolution';
+ var resolution_component = Vue.component(resolution_tag + '-component', {
+ // Your configurable must have a "config_dict" property from the model
+ props: ['config_dict'],
- var ResolutionModel = function () {
- // Model for the resolution configurable.
- var self = this;
- this.resolution = "Window";
- this.resolution_options = ["Window", "1920x1080", "1280x1024", "1280x800", "1024x768"];
-
- self.view = function (index) {
- // Creates the View to add to the application entry.
- var widget = $(view_template({
- options: self.resolution_options,
- index: index
- }));
-
- widget.find("select").change(function() {
- if (this.selectedIndex) {
- self.resolution = this.options[this.selectedIndex].value;
- }
- });
-
- return widget;
- };
+ template:
+ '' +
+ ' ' +
+ ' ' +
+ '
',
+
+ data: function() {
+ return {
+ resolution: this.config_dict.resolution,
+ resolution_options: ['Window', '1920x1080', '1280x1024', '1280x800', '1024x768']
+ };
+ },
+
+ watch: {
+ config_dict: function() { this.resolution = this.config_dict.resolution; }, // model -> view update
+ resolution: function() { this.$emit('update:config_dict', { resolution: this.resolution }); } // view -> model update
+ }
+ });
+
+ // Your configurable class must implement a tag and default config_dict
+ var ResolutionModel = function() {
+ this.tag = resolution_tag;
+ this.config_dict = { resolution: 'Window' };
};
-
- ResolutionModel.prototype.tag = "resolution";
-
+
ResolutionModel.prototype.as_config_dict = function() {
- // Returns the configuration dict to hand over to the API request.
- // e.g.
- // {
- // "resolution" : "1024x768"
- // }
- // The returned dictionary must be added to the configurable
- // parameter under the key given by the tag member.
- var resolution = this.resolution;
-
+ var resolution = this.config_dict.resolution;
+
if (resolution === 'Window') {
var max_size = utils.max_iframe_size();
- resolution = max_size[0]+"x"+max_size[1];
+ resolution = max_size[0] + 'x' + max_size[1];
}
-
- return {
- "resolution": resolution
- };
- };
-
- // Define all your configurables here.
- var configurables = {
- ResolutionModel: ResolutionModel
- };
-
- var from_tag = function (tag) {
- // Given a tag, lookup the appropriate configurable and
- // return it. If the tag matches no configurable, returns null
- for (var conf in configurables) {
- if (configurables[conf].prototype.tag === tag) {
- return configurables[conf];
- }
- }
- return null;
- };
- var ns = {
- from_tag: from_tag
+ return { resolution: resolution };
};
- return $.extend(ns, configurables);
-
+ // Export all your configurable models here
+ return {
+ resolution: ResolutionModel,
+ resolution_component: resolution_component
+ };
});
diff --git a/remoteappmanager/static/js/home/models.js b/remoteappmanager/static/js/home/models.js
index 2eba0ea05..feb71e6c2 100644
--- a/remoteappmanager/static/js/home/models.js
+++ b/remoteappmanager/static/js/home/models.js
@@ -110,7 +110,6 @@ define([
.done(function(new_data) {
app.app_data = new_data;
- this._update_configurables(app);
this._update_status(app);
}.bind(this));
};
@@ -126,9 +125,9 @@ define([
// by the client. skip it and let the server deal with the
// missing data, either by using a default or throwing
// an error.
- var ConfigurableCls = configurables.from_tag(tag);
+ var ConfigurableCls = configurables[tag];
- if (ConfigurableCls !== null) {
+ if (ConfigurableCls !== undefined) {
app.configurables.push(new ConfigurableCls());
}
});
diff --git a/remoteappmanager/static/js/home/views/application_view.js b/remoteappmanager/static/js/home/views/application_view.js
index 09f42190a..7f846d3ca 100644
--- a/remoteappmanager/static/js/home/views/application_view.js
+++ b/remoteappmanager/static/js/home/views/application_view.js
@@ -44,7 +44,15 @@ define([
' ' +
' Configuration
' +
- ' ' +
+ ' ' +
' ' +
' ' +