Resolution configurable is now a Vue component

bower.json

@@ -21,7 +21,6 @@
         "datatables.net": "~1.10.12",
         "datatables.net-dt": "~1.10.12",
         "admin-lte": "~2.3.8",
-        "handlebars": "~4.0.5",
         "underscore": "~1.8.3",
         "html5shiv": "~3.7.3",
         "respond": "~1.4.2",

jstests/tests/home/test_configurables.js

@@ -1,26 +1,17 @@
 define([
+    "jquery",
     "home/configurables"
-], function (configurables) {
+], function ($, configurables) {
     "use strict";
 
     QUnit.module("home.configurables");
     QUnit.test("instantiation", function (assert) {
-        var resolution_class = configurables.from_tag("resolution");
-        var resolution = new resolution_class();
+        var resolution = $.extend(true, {}, configurables["resolution"]);
+
         assert.equal(resolution.tag, "resolution");
-        assert.equal(resolution.resolution, "Window");
-
-        resolution.resolution = "1024x768";
-        assert.equal(resolution.as_config_dict().resolution, "1024x768");
-    });
-
-    QUnit.test("view", function (assert) {
-        var resolution_class = configurables.from_tag("resolution");
-        var resolution = new resolution_class();
+        assert.equal(resolution.value, "Window");
 
-        var view = resolution.view();
-        assert.notEqual(view.find("select"), null);
-        assert.equal(view.find("option").length, 
-            resolution.resolution_options.length);
+        resolution.value = "1024x768";
+        assert.equal(resolution.as_config_dict().resolution, "1024x768");
     });
-});
+});

jstests/tests/home/test_models.js

@@ -2,15 +2,15 @@ define([
     "home/models"
 ], function (models) {
     "use strict";
-    
+
     QUnit.module("home.models");
     QUnit.test("instantiation", function (assert) {
         var model = new models.ApplicationListModel();
         assert.equal(model.app_list.length, 0);
         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].value, "Window");
         });
     });
 });

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: "/"

remoteappmanager/static/js/home/configurables.js

@@ -1,85 +1,53 @@
 define([
-    "jquery",
-    "handlebars",
-    "utils"
-], function($, hb, utils) {
+    "utils",
+    "components/vue/dist/vue.min"
+], function(utils, Vue) {
     "use strict";
 
-    var view_template = hb.compile(
-        '<div class="form-group">' +
-        '<label for="resolution-model-{{index}}">Resolution</label>' +
-        '<select class="form-control" id="resolution-model-{{ index }}">' +
-        '{{#each options}}' +
-           '<option value="{{this}}">{{this}}</option>' +
-        '{{/each}}' +
-        '</div>'
-    );
+    var resolution_tag = 'resolution';
+    Vue.component(resolution_tag, {
+        // Your configurable must have a "value" property
+        props: ['value'],
 
-    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;
-        };
-    };
-
-    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;
-
-        if (resolution === 'Window') {
-            var max_size = utils.max_iframe_size();
-            resolution = max_size[0]+"x"+max_size[1];
+        template:
+            '<div class="form-group">' +
+            '  <label>Resolution</label>' +
+            '  <select class="form-control" v-model="sel_value">' +
+            '    <option v-for="resolution_option in resolution_options">' +
+            '      {{resolution_option}}' +
+            '    </option>' +
+            '  </select>' +
+            '</div>',
+
+        data: function() {
+            return {
+                sel_value: this.value,
+                resolution_options: ['Window', '1920x1080', '1280x1024', '1280x800', '1024x768']
+            };
+        },
+
+        watch: {
+            value: function() {this.sel_value = this.value;}, // model -> view update
+            sel_value: function() {this.$emit('update:value', this.sel_value);} // view -> model update
         }
-        
-        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];
+    });
+
+    // Export all your configurable models here
+    // (must implement tag and value attributes and as_config_dict method)
+    return {
+        resolution: {
+            tag: resolution_tag,
+            value: 'Window',
+            as_config_dict: function() {
+                var resolution = this.value;
+
+                if (this.value === 'Window') {
+                    var max_size = utils.max_iframe_size();
+                    resolution = max_size[0] + 'x' + max_size[1];
+                }
+
+                return { 'resolution': resolution };
             }
         }
-        return null; 
     };
-
-    var ns = {
-        from_tag: from_tag
-    };
-
-    return $.extend(ns, configurables);
-
 });

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));
     };
@@ -121,15 +120,15 @@ define([
         // to its client-side model.
         app.configurables = [];
 
-        app.app_data.image.configurables.forEach(function(tag) {
+        app.app_data.image.configurables.forEach(function(conf_name) {
             // If this returns null, the tag has not been recognized
             // 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 configurable = configurables[conf_name];
 
-            if (ConfigurableCls !== null) {
-                app.configurables.push(new ConfigurableCls());
+            if (configurable !== null) {
+                app.configurables.push($.extend(true, {}, configurable));
             }
         });
     };
@@ -151,8 +150,7 @@ define([
 
         var configurables_data = {};
         current_app.configurables.forEach(function(configurable) {
-            var tag = configurable.tag;
-            configurables_data[tag] = configurable.as_config_dict();
+            configurables_data[configurable.tag] = configurable.as_config_dict();
         });
 
         resources.Container.create({

remoteappmanager/static/js/home/views/application_view.js

@@ -42,7 +42,15 @@ define([
             '          </ul>' +
 
             '          <h4>Configuration</h4>' +
-            '          <form class="configuration"><fieldset></fieldset></form>' +
+            '          <form class="configuration">' +
+            '            <fieldset v-if="current_app.configurables.length === 0">No configurable options for this image</fieldset>' +
+            '            <fieldset v-else :disabled="current_app.is_starting()">' +
+            '              <component v-for="configurable in current_app.configurables"' +
+            '                         :is="configurable.tag"' +
+            '                         :value="configurable.value"' +
+            '                         @update:value="value => configurable.value = value"></component>' +
+            '            </fieldset>' +
+            '          </form>' +
             '        </div>' +
 
             '        <!-- Start Button -->' +