simphony · stefanoborini · Sep 21, 2016 · Sep 20, 2016 · Sep 20, 2016 · Sep 20, 2016
diff --git a/jstests/tests.html b/jstests/tests.html
@@ -12,5 +12,8 @@
 	</head>
 	<body>
 		<div id="qunit"></div>
+        <div id="qunit-fixture">
+            <div id="applist"></div>
+        </div>
 	</body>
 </html>
diff --git a/jstests/tests/home/test_models.js b/jstests/tests/home/test_models.js
@@ -0,0 +1,20 @@
+define(function (require) {
+    "use strict";
+    var models = require("home/models");
+
+    var MockApi = function () {
+        this.available_applications_info = function() {
+            return [{}, {}];
+        };
+    };
+
+    QUnit.module("home.models");
+    QUnit.test("instantiation", function (assert) {
+        var mock_api = new MockApi();
+        var model = new models.ApplicationListModel(mock_api);
+        assert.equal(model.data.length, 0);
+        model.update().done(function() {
+            assert.equal(model.data.length, 2);
+        });
+    });
+});
diff --git a/jstests/tests/home/test_views.js b/jstests/tests/home/test_views.js
@@ -0,0 +1,44 @@
+define(function (require) {
+    "use strict";
+    var models = require("home/models");
+    var views = require("home/views");
+    var $ = require("jquery");
+
+    var MockApi = function () {
+        this.available_applications_info = function() {
+            return [
+                {
+                    image : {
+                        ui_name : "foo",
+                        policy : {
+                            allow_home: true
+                        }
+                    }
+                }, 
+                {
+                    image: {
+                        ui_name : "bar",
+                        policy : {
+                            allow_home: true
+                        }
+                    }
+                }];
+        };
+    };
+
+    QUnit.module("home.views");
+    QUnit.test("rendering", function (assert) {
+        var mock_api = new MockApi();
+        var model = new models.ApplicationListModel(mock_api);
+        var view = new views.ApplicationListView(model);
+        model.update()
+            .done(function() { view.render(); } )
+            .done(function() {
+                var applist = $("#applist");
+                assert.equal(applist.children().length, 2);
+                assert.equal($("#applist > div:nth-child(1) > div > h4").text(), "foo");
+                assert.equal($("#applist > div:nth-child(2) > div > h4").text(), "bar");
+            });
+
+    });
+});
diff --git a/jstests/tests/test_utils.js b/jstests/tests/test_utils.js
@@ -3,6 +3,6 @@ define(function (require) {
 
 	QUnit.module("Utils");
 	QUnit.test("url_path_join", function (assert) { 
-        assert.equal(utils.url_path_join("foo", "bar", "baz"), "foo/bar/baz")
+        assert.equal(utils.url_path_join("foo", "bar", "baz"), "foo/bar/baz");
 	});
 });
diff --git a/jstests/testsuite.js b/jstests/testsuite.js
@@ -16,9 +16,15 @@
     });
 
 	require([
-		"tests/test_remoteappapi.js",
-		"tests/test_utils.js"
+        "tests/home/test_models.js",
+        "tests/home/test_views.js",
+        "tests/test_remoteappapi.js",
+        "tests/test_utils.js"
         ], function() {
+            window.apidata = {
+                base_url: "/",
+                prefix: "/"
+            };
             QUnit.load();
             QUnit.start();
 	    });

diff --git a/remoteappmanager/static/js/home.js b/remoteappmanager/static/js/home.js
diff --git a/remoteappmanager/static/js/home/home.js b/remoteappmanager/static/js/home/home.js
@@ -0,0 +1,72 @@
+/*globals: require, console*/
+require(
+    ["jquery", "utils", "remoteappapi", "home/models", "home/views"],
+    function($, utils, RemoteAppAPI, models, views) {
+        "use strict";
+
+        var base_url = window.apidata.base_url;
+        var appapi = new RemoteAppAPI(base_url);
+
+        // This model keeps the retrieved content from the REST query locally.
+        // It is only synchronized at initial load.
+        var model = new models.ApplicationListModel(appapi);
+        var view = new views.ApplicationListView(model);
+
+        var report_error = function (jqXHR, status, error) {
+            // Writes an error message resulting from an incorrect
+            // ajax operation. Parameters are from the resulting ajax.
+            var msg = utils.log_ajax_error(jqXHR, status, error);
+            $(".spawn-error-msg").text(msg).show();
+        };
+
+        view.view_button_clicked = function (index) {
+            var app_info = model.data[index];
+
+            window.location = utils.url_path_join(
+                base_url,
+                "containers",
+                app_info.container.url_id);
+        };
+
+        view.stop_button_clicked = function (index) {
+            var app_info = model.data[index];
+
+            var url_id = app_info.container.url_id;
+            return appapi.stop_application(url_id, {
+                success: function () {
+                    view.reset_buttons_to_start(index);
+                    app_info.container = null;
+                },
+                error: function (jqXHR, status, error) {
+                    report_error(jqXHR, status, error);
+                }});
+        };
+
+        view.start_button_clicked = function (index) {
+            // The container is not running. This is a start button.
+            var mapping_id = model.data[index].mapping_id;
+            return appapi.start_application(mapping_id, {
+                error: function(jqXHR, status, error) {
+                    report_error(jqXHR, status, error);
+                },
+                statusCode: {
+                    201: function (data, textStatus, request) {
+                        var location = request.getResponseHeader('Location');
+                        var url = utils.parse_url(location);
+                        var arr = url.pathname.replace(/\/$/, "").split('/');
+                        var url_id = arr[arr.length-1];
+
+                        window.location = utils.url_path_join(
+                            base_url,
+                            "containers",
+                            url_id
+                        );
+                    }
+                }
+            });
+        };
+
+        $.when(model.update()).done(function () { view.render(); });
+
+    }
+);
diff --git a/remoteappmanager/static/js/home/models.js b/remoteappmanager/static/js/home/models.js
@@ -0,0 +1,32 @@
+define(['jquery'], function ($) {
+    "use strict";
+
+    var ApplicationListModel = function(remote_app_api) {
+        // (constructor) Model for the application list.
+        // Parameters
+        // remote_app_api : RemoteAppAPI
+        // The remote application API stub object
+        this._appapi = remote_app_api;
+
+        // Contains the data retrieved from the remote API
+        this.data = [];
+    };
+
+    ApplicationListModel.prototype.update = function() {
+        // Requests an update of the object internal data.
+        // This method returns a jQuery Promise object. 
+        // When resolved, this.data will contain a list of the retrieved
+        // data. Note that, in error conditions, this routine resolves
+        // successfully in any case, and the data is set to empty list
+        var self = this;
+        return $.when(
+            self._appapi.available_applications_info()
+        ).done(function (app_data) {
+            self.data = app_data;
+        });
+    };
+
+    return {
+        ApplicationListModel: ApplicationListModel
+    };
+});