Partially migrate to GuacUI.Dialog for user editing (via new GuacAdmin.UserEditor). Modify styles to support GuacUI.Dialog.

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

@@ -26,7 +26,6 @@ var GuacAdmin = {
         "connection_list"         : document.getElementById("connection-list"),
         "user_list"               : document.getElementById("user-list"),
         "user_list_buttons"       : document.getElementById("user-list-buttons"),
-        "connection_list_buttons" : document.getElementById("connection-list-buttons")
     },
 
     "buttons" : {
@@ -43,7 +42,7 @@ var GuacAdmin = {
 
     "cached_permissions" : null,
     "cached_protocols"   : null,
-    "cached_connections" : null,
+    "cached_root_group"  : null,
 
     "selected_user"       : null,
     "selected_connection" : null
@@ -362,6 +361,30 @@ GuacAdmin.addUser = function(name, parameters) {
         if (GuacAdmin.selected_user) return;
         else GuacAdmin.selected_user = name;
 
+        // Open user editor
+        var user_dialog = new GuacAdmin.UserEditor(name, parameters);
+        document.body.appendChild(user_dialog.getElement());
+
+    };
+
+};
+
+
+/**
+ * User edit dialog which allows editing of the user's password and connection
+ * access level.
+ * 
+ * @param {String} name The name of the user to edit.
+ * @param {String} parameters Any parameters to add to service requests for sake
+ *                            of authentication.
+ */
+GuacAdmin.UserEditor = function(name, parameters) {
+
+    /**
+     * Dialog containing the user editor.
+     */
+    var dialog = new GuacUI.Dialog();
+
     // Get user permissions
     var user_perms = GuacamoleService.Permissions.list(name, parameters);
 
@@ -370,8 +393,8 @@ GuacAdmin.addUser = function(name, parameters) {
     var removed_perms = new GuacamoleService.PermissionSet();
 
     // Create form base elements
-        var form_element = GuacUI.createElement("div", "form");
+    var user_header = GuacUI.createChildElement(dialog.getHeader(), "h2");
-        var user_header = GuacUI.createChildElement(form_element, "h2");
+    var form_element = GuacUI.createChildElement(dialog.getBody(), "div", "form");
     var sections = GuacUI.createChildElement(
         GuacUI.createChildElement(form_element, "div", "settings section"),
         "dl");
@@ -384,21 +407,6 @@ GuacAdmin.addUser = function(name, parameters) {
     user_header.textContent = name;
     field_header.textContent = "Properties:";
 
-        // Deselect
-        function deselect() {
-            GuacUI.removeClass(GuacAdmin.containers.user_list, "disabled");
-            GuacUI.removeClass(item_element, "selected");
-            item_element.removeChild(form_element);
-            GuacAdmin.selected_user = null;
-        }
-
-        // Select
-        function select() {
-            GuacUI.addClass(GuacAdmin.containers.user_list, "disabled");
-            GuacUI.addClass(item_element, "selected");
-            item_element.appendChild(form_element);
-        }
-
     // Add password field
     var password_field = GuacUI.createChildElement(
             GuacUI.createTabulatedContainer(field_table, "Password:"),
@@ -493,6 +501,11 @@ GuacAdmin.addUser = function(name, parameters) {
 
         var connections_section = GuacUI.createChildElement(sections, "dd");
 
+        // FIXME - only list connections with admin permission
+        var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group, true);
+        connections_section.appendChild(group_view.getElement());
+
+        /*
         // Actual paged connections list
         var connections = GuacUI.createChildElement(
             connections_section, "div", "list");
@@ -556,14 +569,12 @@ GuacAdmin.addUser = function(name, parameters) {
 
         // Start at page 0
         connections_pager.setPage(0);
+        */
 
     }
 
-        // Add buttons
-        var button_div = GuacUI.createChildElement(form_element, "div", "object-buttons");
-
     // Add save button
-        var save_button = GuacUI.createChildElement(button_div, "button");
+    var save_button = GuacUI.createChildElement(dialog.getFooter(), "button");
     save_button.textContent = "Save";
     save_button.onclick = function(e) {
 
@@ -591,7 +602,7 @@ GuacAdmin.addUser = function(name, parameters) {
 
             // Save user
             GuacamoleService.Users.update(GuacAdmin.selected_user, password, added_perms, removed_perms, parameters);
-                deselect();
+            // FIXME: Hide dialog
             GuacAdmin.reset();
 
         }
@@ -602,11 +613,11 @@ GuacAdmin.addUser = function(name, parameters) {
     };
 
     // Add cancel button
-        var cancel_button = GuacUI.createChildElement(button_div, "button");
+    var cancel_button = GuacUI.createChildElement(dialog.getFooter(), "button");
     cancel_button.textContent = "Cancel";
     cancel_button.onclick = function(e) {
         e.stopPropagation();
-            deselect();
+        // FIXME: Hide dialog
     };
 
     // Add delete button if permission available
@@ -614,7 +625,7 @@ GuacAdmin.addUser = function(name, parameters) {
         name in GuacAdmin.cached_permissions.remove_user) {
         
         // Create button
-            var delete_button = GuacUI.createChildElement(button_div, "button", "danger");
+        var delete_button = GuacUI.createChildElement(dialog.getFooter(), "button", "danger");
         delete_button.textContent = "Delete";
         
         // Remove selected user when clicked
@@ -629,7 +640,7 @@ GuacAdmin.addUser = function(name, parameters) {
                 // Attempt to delete user
                 try {
                     GuacamoleService.Users.remove(GuacAdmin.selected_user, parameters);
-                        deselect();
+                    // FIXME: Hide dialog
                     GuacAdmin.reset();
                 }
 
@@ -644,18 +655,12 @@ GuacAdmin.addUser = function(name, parameters) {
 
     }
 
-        // Select item
+    this.getElement = function() {
-        select();
+        return dialog.getElement();
-
     };
 
 };
 
-/**
- * Currently-defined pager for connections, if any.
- */
-GuacAdmin.connectionPager = null;
-
 /**
  * Adds the given connection to the displayed connection list.
  */
@@ -970,10 +975,7 @@ GuacAdmin.reset = function() {
     // Query service for permissions, protocols, and connections
     GuacAdmin.cached_permissions = GuacamoleService.Permissions.list(null, parameters);
     GuacAdmin.cached_protocols   = GuacamoleService.Protocols.list(parameters);
-    GuacAdmin.cached_connections = GuacamoleService.Connections.list(parameters);
+    GuacAdmin.cached_root_group  = GuacamoleService.Connections.list(parameters);
-
-    // Sort connections by ID
-    GuacAdmin.cached_connections.sort(GuacamoleService.Connections.comparator);
 
     // Connection management
     if (GuacAdmin.cached_permissions.administer
@@ -1079,32 +1081,10 @@ GuacAdmin.reset = function() {
      * Add readable connections.
      */
 
-    // Get previous page, if any
+    // Add new group view
-    var connection_previous_page = 0;
-    if (GuacAdmin.connectionPager)
-        connection_previous_page = GuacAdmin.connectionPager.current_page;
-
-    // Add new pager
     GuacAdmin.containers.connection_list.innerHTML = "";
-    GuacAdmin.connectionPager = new GuacUI.Pager(GuacAdmin.containers.connection_list);
+    var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group, false);
-
+    GuacAdmin.containers.connection_list.appendChild(group_view.getElement());
-    // Add connections to pager
-    for (i=0; i<GuacAdmin.cached_connections.length; i++) {
-        var connection = GuacAdmin.cached_connections[i];
-        if (GuacAdmin.cached_permissions.administer
-            || connection.id in GuacAdmin.cached_permissions.update_connection)
-            GuacAdmin.addConnection(connection, parameters);
-    }
-
-    // If more than one page, add navigation buttons
-    GuacAdmin.containers.connection_list_buttons.innerHTML = "";
-    if (GuacAdmin.connectionPager.last_page != 0)
-        GuacAdmin.containers.connection_list_buttons.appendChild(
-            GuacAdmin.connectionPager.getElement());
-
-    // Set starting page
-    GuacAdmin.connectionPager.setPage(Math.min(GuacAdmin.connectionPager.last_page,
-            connection_previous_page));
 
 };
 

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

@@ -118,21 +118,6 @@ div#version-dialog {
     padding: 0.5em;
 }
 
-h2 {
-
-    padding: 0.5em;
-    margin: 0;
-    font-size: 1.5em;
-
-    font-weight: lighter;
-    text-shadow: 1px 1px white;
-
-    border-top: 1px solid #AAA;
-    border-bottom: 1px solid #AAA;
-    background: rgba(0, 0, 0, 0.07);
-    
-}
-
 h1 {
     
     margin: 0;
@@ -149,6 +134,66 @@ div.section {
     padding: 1em;
 }
 
+/*
+ * Dialogs
+ */
+
+.dialog-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 1em;
+}
+
+.dialog {
+
+    max-width: 100%;
+    width: 8in;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 100%;
+    overflow: auto;
+
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background: #E7E7E7;
+
+    -moz-border-radius: 0.2em;
+    -webkit-border-radius: 0.2em;
+    -khtml-border-radius: 0.2em;
+    border-radius: 0.2em;
+
+    box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.6);
+    
+}
+
+.dialog > * {
+    margin: 1em;
+}
+
+.dialog .header {
+
+    margin: 0;
+
+    border-top: 1px solid #AAA;
+    border-bottom: 1px solid #AAA;
+    background: rgba(0, 0, 0, 0.07);
+    
+}
+
+.dialog .header h2 {
+
+    padding: 0.5em;
+    margin: 0;
+    font-size: 1.5em;
+
+    font-weight: lighter;
+    text-shadow: 1px 1px white;
+
+}
+
 /*
  * List elements
  */
@@ -220,6 +265,7 @@ div.section {
  * List element fields (editing)
  */
 
+/*
 .form {
 
     position: absolute;
@@ -240,6 +286,7 @@ div.section {
     box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.6);
 
 }
+*/
 
 .form .fields th,
 .form .permissions th {