Implement GuacUI.GroupView component for easy viewing of groups/connections.

guacamole/src/main/webapp/index.xhtml

@@ -83,9 +83,6 @@
             <div id="all-connections">
             </div>
 
-            <div id="all-connections-buttons">
-            </div>
-
             <h2>Clipboard</h2>
             <div id="clipboardDiv">
                 <p>

guacamole/src/main/webapp/scripts/guac-ui.js

@@ -875,3 +875,96 @@ GuacUI.ListGroup = function(caption) {
     };
 
 }
+
+/**
+ * Component which displays a paginated tree view of all groups and their
+ * connections.
+ * 
+ * @constructor
+ * @param {GuacamoleService.ConnectionGroup} root_group The group to display
+ *                                                      within the view.
+ */
+GuacUI.GroupView = function(root_group) {
+
+    /**
+     * Reference to this GroupView.
+     * @private
+     */
+    var group_view = this;
+
+    // Group view components
+    var element = GuacUI.createElement("div", "group-view");
+    var list = GuacUI.createChildElement(element, "div", "list");
+
+    /**
+     * Set of all connections, indexed by ID.
+     */
+    this.connections = {};
+
+    /**
+     * Returns the element representing this group view.
+     */
+    this.getElement = function() {
+        return element;
+    };
+
+    // Create pager for contents 
+    var pager = new GuacUI.Pager(list);
+    pager.page_capacity = 20;
+
+    /**
+     * Adds the given group to the given display parent object. This object
+     * must have an addElement() function, which will be used for adding all
+     * child elements representing child connections and groups.
+     * 
+     * @param {GuacamoleService.ConnectionGroup} group The group to add.
+     * @param {Function} appendChild A function which, given an element, will add that
+     *                               element the the display as desired.
+     */
+    function addGroup(group, appendChild) {
+
+        var i;
+
+        // Add all contained connections
+        for (i=0; i<group.connections.length; i++) {
+
+            // Add connection to set
+            var connection = group.connections[i];
+            group_view.connections[connection.id] = connection;
+
+            // Add connection to connection list or parent group
+            var guacui_connection = new GuacUI.Connection(connection);
+            appendChild(guacui_connection.getElement());
+
+        } // end for each connection
+
+        // Add all contained groups 
+        for (i=0; i<group.groups.length; i++) {
+
+            // Create display element for group
+            var child_group = group.groups[i];
+            var list_group = new GuacUI.ListGroup(child_group.name);
+
+            // Recursively add all children to the new element
+            addGroup(child_group, list_group.addElement);
+
+            // Add element to display
+            appendChild(list_group.getElement());
+
+        } // end for each gorup
+
+    }
+
+    // Add root group directly to pager
+    addGroup(root_group, pager.addElement);
+
+    // Add buttons if more than one page
+    if (pager.last_page !== 0) {
+        var list_buttons = GuacUI.createChildElement(element, "div", "buttons");
+        list_buttons.appendChild(pager.getElement());
+    }
+
+    // Start at page 0
+    pager.setPage(0);
+
+};

guacamole/src/main/webapp/scripts/root-ui.js

@@ -26,8 +26,7 @@ var GuacamoleRootUI = {
     "sections": {
         "login_form"         : document.getElementById("login-form"),
         "recent_connections" : document.getElementById("recent-connections"),
-        "all_connections"    : document.getElementById("all-connections"),
+        "all_connections"    : document.getElementById("all-connections")
-        "all_connections_buttons" : document.getElementById("all-connections-buttons")
     },
 
     "messages": {
@@ -171,72 +170,10 @@ GuacamoleRootUI.reset = function() {
 
     }
 
-    // Create pager for connections
-    var connection_pager = new GuacUI.Pager(GuacamoleRootUI.sections.all_connections);
-    connection_pager.page_capacity = 20;
 
-    /**
+    // Create group view
-     * Adds the given group to the given display parent object. This object
+    var group_view = new GuacUI.GroupView(root_group);
-     * must have an addElement() function, which will be used for adding all
+    GuacamoleRootUI.sections.all_connections.appendChild(group_view.getElement());
-     * child elements representing child connections and groups.
-     * 
-     * @param {GuacamoleService.ConnectionGroup} group The group to add.
-     * @param {Function} appendChild A function which, given an element, will add that
-     *                               element the the display as desired.
-     */
-    function addGroup(group, appendChild) {
-
-        var i;
-
-        // Add all contained connections
-        for (i=0; i<group.connections.length; i++) {
-
-            // Add connection to set
-            var connection = group.connections[i];
-            GuacamoleRootUI.connections[connection.id] = connection;
-
-            // Get connection element
-            var recent_connection = new GuacUI.Connection(connection);
-
-            // If screenshot present, add to recent connections
-            if (recent_connection.hasThumbnail())
-                GuacamoleRootUI.addRecentConnection(recent_connection);
-
-            // Add connection to connection list or parent group
-            var guacui_connection = new GuacUI.Connection(connection);
-            appendChild(guacui_connection.getElement());
-
-        } // end for each connection
-
-        // Add all contained groups 
-        for (i=0; i<group.groups.length; i++) {
-
-            // Add connection to set
-            var child_group = group.groups[i];
-
-            // Create display element for group
-            var list_group = new GuacUI.ListGroup(child_group.name);
-
-            // Recursively add all children to the new element
-            addGroup(child_group, list_group.addElement);
-
-            // Add element to display
-            appendChild(list_group.getElement());
-
-        } // end for each gorup
-
-    }
-
-    // Add root group directly to pager
-    addGroup(root_group, connection_pager.addElement);
-
-    // Add buttons if more than one page
-    if (connection_pager.last_page != 0)
-        GuacamoleRootUI.sections.all_connections_buttons.appendChild(
-            connection_pager.getElement());
-
-    // Start at page 0
-    connection_pager.setPage(0);
 
     // If connections could be retrieved, display list
     GuacamoleRootUI.views.login.style.display = "none";

guacamole/src/main/webapp/styles/login.css

@@ -246,9 +246,8 @@ div#all-connections {
     padding: 0;
 }
 
-#all-connections-buttons {
+#all-connections .list-buttons {
     text-align: center;
-    margin: 1em;
     padding: 0;
 }