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

This commit is contained in:
Michael Jumper
2013-08-12 14:21:35 -07:00
parent 937e143aff
commit 068eda8a76
4 changed files with 98 additions and 72 deletions

View File

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

View File

@@ -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);
};

View File

@@ -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_buttons" : document.getElementById("all-connections-buttons")
"all_connections" : document.getElementById("all-connections")
},
"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;
/**
* 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];
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);
// Create group view
var group_view = new GuacUI.GroupView(root_group);
GuacamoleRootUI.sections.all_connections.appendChild(group_view.getElement());
// If connections could be retrieved, display list
GuacamoleRootUI.views.login.style.display = "none";

View File

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