Allow GroupViews to be controlled by flags. Implement MULTISELECT and SHOW_CONNECTIONS flags.

This commit is contained in:
Michael Jumper
2013-08-14 15:23:29 -07:00
parent c600e289c3
commit bb0d41ae01
3 changed files with 69 additions and 45 deletions

View File

@@ -497,7 +497,8 @@ GuacAdmin.UserEditor = function(name, parameters) {
var connections_section = GuacUI.createChildElement(sections, "dd"); var connections_section = GuacUI.createChildElement(sections, "dd");
// Construct group view for all readable connections // Construct group view for all readable connections
var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group, true); var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group,
GuacUI.GroupView.SHOW_CONNECTIONS | GuacUI.GroupView.MULTISELECT);
connections_section.appendChild(group_view.getElement()); connections_section.appendChild(group_view.getElement());
// Update connection permissions when changed // Update connection permissions when changed
@@ -1231,7 +1232,7 @@ GuacAdmin.reset = function() {
// Add new group view // Add new group view
GuacAdmin.containers.connection_list.innerHTML = ""; GuacAdmin.containers.connection_list.innerHTML = "";
var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group, false); var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group, GuacUI.GroupView.SHOW_CONNECTIONS);
GuacAdmin.containers.connection_list.appendChild(group_view.getElement()); GuacAdmin.containers.connection_list.appendChild(group_view.getElement());
// Show connection editor when connections are clicked // Show connection editor when connections are clicked

View File

@@ -912,9 +912,10 @@ GuacUI.ListGroup = function(caption) {
* @constructor * @constructor
* @param {GuacamoleService.ConnectionGroup} root_group The group to display * @param {GuacamoleService.ConnectionGroup} root_group The group to display
* within the view. * within the view.
* @param {Boolean} multiselect Whether multiple objects are selectable. * @param {Number} flags Any flags (such as MULTISELECT or SHOW_CONNECTIONS)
* for modifying the behavior of this group view.
*/ */
GuacUI.GroupView = function(root_group, multiselect) { GuacUI.GroupView = function(root_group, flags) {
/** /**
* Reference to this GroupView. * Reference to this GroupView.
@@ -926,6 +927,16 @@ GuacUI.GroupView = function(root_group, multiselect) {
var element = GuacUI.createElement("div", "group-view"); var element = GuacUI.createElement("div", "group-view");
var list = GuacUI.createChildElement(element, "div", "list"); var list = GuacUI.createChildElement(element, "div", "list");
/**
* Whether multiselect is enabled.
*/
var multiselect = flags & GuacUI.GroupView.MULTISELECT;
/**
* Whether connections should be included in the view.
*/
var show_connections = flags & GuacUI.GroupView.SHOW_CONNECTIONS;
/** /**
* Set of all group checkboxes, indexed by ID. Only applicable when * Set of all group checkboxes, indexed by ID. Only applicable when
* multiselect is enabled. * multiselect is enabled.
@@ -1102,59 +1113,61 @@ GuacUI.GroupView = function(root_group, multiselect) {
group_view.groups[group.id] = group; group_view.groups[group.id] = group;
// Add all contained connections // Add all contained connections
for (i=0; i<group.connections.length; i++) { if (show_connections) {
for (i=0; i<group.connections.length; i++) {
// Add connection to set // Add connection to set
var connection = group.connections[i]; var connection = group.connections[i];
group_view.connections[connection.id] = connection; group_view.connections[connection.id] = connection;
// Add connection to connection list or parent group // Add connection to connection list or parent group
var guacui_connection = new GuacUI.Connection(connection); var guacui_connection = new GuacUI.Connection(connection);
GuacUI.addClass(guacui_connection.getElement(), "list-item"); GuacUI.addClass(guacui_connection.getElement(), "list-item");
(function(connection) { (function(connection) {
// If multiselect, add checkbox for each connection // If multiselect, add checkbox for each connection
if (multiselect) { if (multiselect) {
var connection_choice = GuacUI.createElement("div", "choice"); var connection_choice = GuacUI.createElement("div", "choice");
var connection_checkbox = GuacUI.createChildElement(connection_choice, "input"); var connection_checkbox = GuacUI.createChildElement(connection_choice, "input");
connection_checkbox.setAttribute("type", "checkbox"); connection_checkbox.setAttribute("type", "checkbox");
connection_choice.appendChild(guacui_connection.getElement()); connection_choice.appendChild(guacui_connection.getElement());
appendChild(connection_choice); appendChild(connection_choice);
function fire_connection_change(e) { function fire_connection_change(e) {
// Prevent click from affecting parent // Prevent click from affecting parent
e.stopPropagation(); e.stopPropagation();
// Fire event if handler defined // Fire event if handler defined
if (group_view.onconnectionchange) if (group_view.onconnectionchange)
group_view.onconnectionchange(connection, this.checked); group_view.onconnectionchange(connection, this.checked);
}
// Fire change events when checkbox modified
connection_checkbox.addEventListener("click", fire_connection_change, false);
connection_checkbox.addEventListener("change", fire_connection_change, false);
// Add checbox to set of connection checkboxes
connection_checkboxes[connection.id] = connection_checkbox;
} }
else
appendChild(guacui_connection.getElement());
// Fire change events when checkbox modified // Fire click events when connection clicked
connection_checkbox.addEventListener("click", fire_connection_change, false); guacui_connection.onclick = function() {
connection_checkbox.addEventListener("change", fire_connection_change, false); if (group_view.onconnectionclick)
group_view.onconnectionclick(connection);
};
// Add checbox to set of connection checkboxes })(connection);
connection_checkboxes[connection.id] = connection_checkbox;
} } // end for each connection
else }
appendChild(guacui_connection.getElement());
// Fire click events when connection clicked
guacui_connection.onclick = function() {
if (group_view.onconnectionclick)
group_view.onconnectionclick(connection);
};
})(connection);
} // end for each connection
// Add all contained groups // Add all contained groups
for (i=0; i<group.groups.length; i++) { for (i=0; i<group.groups.length; i++) {
@@ -1229,6 +1242,16 @@ GuacUI.GroupView = function(root_group, multiselect) {
}; };
/**
* When set, allows multiple groups (or connections to be selected).
*/
GuacUI.GroupView.MULTISELECT = 0x1;
/**
* When set, also displays connections within the visible groups.
*/
GuacUI.GroupView.SHOW_CONNECTIONS = 0x2;
/** /**
* Simple modal dialog providing a header, body, and footer. No other * Simple modal dialog providing a header, body, and footer. No other
* functionality is provided other than a reasonable hierarchy of divs and * functionality is provided other than a reasonable hierarchy of divs and

View File

@@ -176,7 +176,7 @@ GuacamoleRootUI.reset = function() {
// Create group view // Create group view
var group_view = new GuacUI.GroupView(root_group); var group_view = new GuacUI.GroupView(root_group, GuacUI.GroupView.SHOW_CONNECTIONS);
GuacamoleRootUI.sections.all_connections.appendChild(group_view.getElement()); GuacamoleRootUI.sections.all_connections.appendChild(group_view.getElement());
// Add any connections with thumbnails // Add any connections with thumbnails