Ticket #268: Add pagination for users.

guacamole/src/main/webapp/admin.xhtml

@@ -55,6 +55,9 @@
                 <div id="user-list">
                 </div>
                     
+                <div id="user-list-buttons">
+                </div>
+                    
             </div>
 
             <h3 class="require-manage-connections">Connections</h3>

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

@@ -27,6 +27,8 @@ var GuacAdmin = {
         "user_list"       :  document.getElementById("user-list")
     },
 
+    "user_list_buttons" :  document.getElementById("user-list-buttons"),
+
     "buttons" : {
         "back"           :  document.getElementById("back"),
         "logout"         :  document.getElementById("logout"),
@@ -351,13 +353,21 @@ GuacAdmin.Pager = function(container) {
         // Add page jumps
         for (i=window_start; i<=window_end; i++) {
 
+            // Create clickable element containing page number
             var jump = GuacUI.createChildElement(element, "div", "set-page");
             jump.textContent = i+1;
-            (function(page_number) {
-                jump.onclick = function() {
-                    guac_pager.setPage(page_number);
-                };
-            })(i);
+            
+            // Mark current page
+            if (i == guac_pager.current_page)
+                GuacUI.addClass(jump, "current");
+
+            // If not current, add click event
+            else
+                (function(page_number) {
+                    jump.onclick = function() {
+                        guac_pager.setPage(page_number);
+                    };
+                })(i);
 
         }
 
@@ -478,6 +488,11 @@ GuacAdmin.formatSeconds = function(seconds) {
 
 };
 
+/**
+ * Currently-defined pager for users, if any.
+ */
+GuacAdmin.userPager = null;
+
 /**
  * Adds the user with the given name to the displayed user list.
  */
@@ -486,7 +501,7 @@ GuacAdmin.addUser = function(name) {
     // Create user list item
     var item = new GuacAdmin.ListItem("user", name);
     var item_element = item.getElement();
-    GuacAdmin.lists.user_list.appendChild(item_element);
+    GuacAdmin.userPager.addElement(item_element);
 
     // When clicked, build and display property form
     item_element.onclick = function() {
@@ -1010,10 +1025,28 @@ GuacAdmin.reset = function() {
      * Add readable users.
      */
 
+    // Get previous page, if any
+    var user_previous_page = 0;
+    if (GuacAdmin.userPager)
+        user_previous_page = GuacAdmin.userPager.current_page;
+
+    // Add new pager
     GuacAdmin.lists.user_list.innerHTML = "";
+    GuacAdmin.userPager = new GuacAdmin.Pager(GuacAdmin.lists.user_list);
+
+    // Add users to pager
     for (var name in GuacAdmin.cached_permissions.read_user)
         GuacAdmin.addUser(name)
 
+    // If more than one page, add navigation buttons
+    GuacAdmin.user_list_buttons.innerHTML = "";
+    if (GuacAdmin.userPager.last_page != 0)
+        GuacAdmin.user_list_buttons.appendChild(GuacAdmin.userPager.getElement());
+
+    // Set starting page
+    GuacAdmin.userPager.setPage(Math.min(GuacAdmin.userPager.last_page,
+            user_previous_page));
+
     /*
      * Add readable connections.
      */

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

@@ -394,6 +394,12 @@ div#logout-panel {
     padding: 0.25em;
 }
 
+.set-page.current {
+    cursor: auto;
+    text-decoration: none;
+    font-weight: bold;
+}
+
 .icon.first-page {
     background-image: url('../images/action-icons/guac-first-page.png');
 }
@@ -409,3 +415,7 @@ div#logout-panel {
 .icon.last-page {
     background-image: url('../images/action-icons/guac-last-page.png');
 }
+
+#user-list-buttons {
+    text-align: center;
+}