From a24804a39dfe0cf412ee1533bc176eedd30af877 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Tue, 19 Feb 2013 00:04:53 -0800 Subject: [PATCH] Paginate main UI connection list, improve pager styles, begin proper style separation. --- guacamole/src/main/webapp/index.xhtml | 4 + guacamole/src/main/webapp/scripts/admin-ui.js | 169 +---------------- guacamole/src/main/webapp/scripts/guac-ui.js | 170 ++++++++++++++++++ guacamole/src/main/webapp/scripts/root-ui.js | 20 ++- guacamole/src/main/webapp/scripts/service.js | 7 + guacamole/src/main/webapp/styles/login.css | 12 +- guacamole/src/main/webapp/styles/ui.css | 17 +- 7 files changed, 226 insertions(+), 173 deletions(-) diff --git a/guacamole/src/main/webapp/index.xhtml b/guacamole/src/main/webapp/index.xhtml index 91f2d8e81..ba719cff0 100644 --- a/guacamole/src/main/webapp/index.xhtml +++ b/guacamole/src/main/webapp/index.xhtml @@ -24,6 +24,7 @@ + Guacamole ${project.version} @@ -82,6 +83,9 @@
+
+
+

Clipboard

diff --git a/guacamole/src/main/webapp/scripts/admin-ui.js b/guacamole/src/main/webapp/scripts/admin-ui.js index a68e757e2..a0f2ea5e4 100644 --- a/guacamole/src/main/webapp/scripts/admin-ui.js +++ b/guacamole/src/main/webapp/scripts/admin-ui.js @@ -257,167 +257,6 @@ GuacAdmin.ListItem = function(type, title) { }; -/** - * A paging component. Elements can be added via the addElement() function, - * and will only be shown if they are on the current page, set via setPage(). - * - * Beware that all elements will be added to the given container element, and - * all children of the container element will be removed when the page is - * changed. - */ -GuacAdmin.Pager = function(container) { - - var guac_pager = this; - - /** - * A container for all pager control buttons. - */ - var element = GuacUI.createElement("div", "pager"); - - /** - * All displayable elements. - */ - var elements = []; - - /** - * The number of elements to display per page. - */ - this.page_capacity = 10; - - /** - * The number of pages to generate a window for. - */ - this.window_size = 11; - - /** - * The current page, where 0 is the first page. - */ - this.current_page = 0; - - /** - * The last existing page. - */ - this.last_page = 0; - - function update_display() { - - var i; - - // Calculate first and last elements of page (where the last element - // is actually the first element of the next page) - var first_element = guac_pager.current_page * guac_pager.page_capacity; - var last_element = Math.min(elements.length, - first_element + guac_pager.page_capacity); - - // Clear contents, add elements - container.innerHTML = ""; - for (i=first_element; i < last_element; i++) - container.appendChild(elements[i]); - - // Update buttons - element.innerHTML = ""; - - // Create first and prev buttons - var first = GuacUI.createChildElement(element, "div", "first-page icon"); - var prev = GuacUI.createChildElement(element, "div", "prev-page icon"); - - // Handle prev/first - if (guac_pager.current_page > 0) { - first.onclick = function() { - guac_pager.setPage(0); - }; - - prev.onclick = function() { - guac_pager.setPage(guac_pager.current_page - 1); - }; - } - else { - GuacUI.addClass(first, "disabled"); - GuacUI.addClass(prev, "disabled"); - } - - // Calculate page jump window start/end - var window_start = guac_pager.current_page - (guac_pager.window_size - 1) / 2; - var window_end = window_start + guac_pager.window_size - 1; - - // Shift window as necessary - if (window_start < 0) { - window_end = Math.min(guac_pager.last_page, window_end - window_start); - window_start = 0; - } - else if (window_end > guac_pager.last_page) { - window_start = Math.max(0, window_start - window_end + guac_pager.last_page); - window_end = guac_pager.last_page; - } - - // 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; - - // 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); - - } - - // Create next and last buttons - var next = GuacUI.createChildElement(element, "div", "next-page icon"); - var last = GuacUI.createChildElement(element, "div", "last-page icon"); - - // Handle next/last - if (guac_pager.current_page < guac_pager.last_page) { - next.onclick = function() { - guac_pager.setPage(guac_pager.current_page + 1); - }; - - last.onclick = function() { - guac_pager.setPage(guac_pager.last_page); - }; - } - else { - GuacUI.addClass(next, "disabled"); - GuacUI.addClass(last, "disabled"); - } - - } - - /** - * Adds the given element to the set of displayable elements. - */ - this.addElement = function(element) { - elements.push(element); - guac_pager.last_page = Math.max(0, - Math.floor((elements.length - 1) / guac_pager.page_capacity)); - }; - - /** - * Sets the current page, where 0 is the first page. - */ - this.setPage = function(number) { - guac_pager.current_page = number; - update_display(); - }; - - /** - * Returns the element representing the buttons of this pager. - */ - this.getElement = function() { - return element; - }; - -}; - /* * Set handler for logout */ @@ -963,9 +802,7 @@ GuacAdmin.reset = function() { GuacAdmin.cached_connections = GuacamoleService.Connections.list(); // Sort connections by ID - GuacAdmin.cached_connections.sort(function(a, b) { - return a.id.localeCompare(b.id); - }); + GuacAdmin.cached_connections.sort(GuacamoleService.Connections.comparator); // Connection management if (GuacAdmin.cached_permissions.create_connection @@ -1044,7 +881,7 @@ GuacAdmin.reset = function() { // Add new pager GuacAdmin.containers.user_list.innerHTML = ""; - GuacAdmin.userPager = new GuacAdmin.Pager(GuacAdmin.containers.user_list); + GuacAdmin.userPager = new GuacUI.Pager(GuacAdmin.containers.user_list); // Add users to pager var usernames = Object.keys(GuacAdmin.cached_permissions.read_user).sort(); @@ -1071,7 +908,7 @@ GuacAdmin.reset = function() { // Add new pager GuacAdmin.containers.connection_list.innerHTML = ""; - GuacAdmin.connectionPager = new GuacAdmin.Pager(GuacAdmin.containers.connection_list); + GuacAdmin.connectionPager = new GuacUI.Pager(GuacAdmin.containers.connection_list); // Add connections to pager for (i=0; i 0) { + first.onclick = function() { + guac_pager.setPage(0); + }; + + prev.onclick = function() { + guac_pager.setPage(guac_pager.current_page - 1); + }; + } + else { + GuacUI.addClass(first, "disabled"); + GuacUI.addClass(prev, "disabled"); + } + + // Calculate page jump window start/end + var window_start = guac_pager.current_page - (guac_pager.window_size - 1) / 2; + var window_end = window_start + guac_pager.window_size - 1; + + // Shift window as necessary + if (window_start < 0) { + window_end = Math.min(guac_pager.last_page, window_end - window_start); + window_start = 0; + } + else if (window_end > guac_pager.last_page) { + window_start = Math.max(0, window_start - window_end + guac_pager.last_page); + window_end = guac_pager.last_page; + } + + // Add ellipsis if window after beginning + if (window_start != 0) + GuacUI.createChildElement(element, "div", "more-pages").textContent = "..."; + + // 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; + + // 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); + + } + + // Add ellipsis if window before end + if (window_end != guac_pager.last_page) + GuacUI.createChildElement(element, "div", "more-pages").textContent = "..."; + + // Create next and last buttons + var next = GuacUI.createChildElement(element, "div", "next-page icon"); + var last = GuacUI.createChildElement(element, "div", "last-page icon"); + + // Handle next/last + if (guac_pager.current_page < guac_pager.last_page) { + next.onclick = function() { + guac_pager.setPage(guac_pager.current_page + 1); + }; + + last.onclick = function() { + guac_pager.setPage(guac_pager.last_page); + }; + } + else { + GuacUI.addClass(next, "disabled"); + GuacUI.addClass(last, "disabled"); + } + + } + + /** + * Adds the given element to the set of displayable elements. + */ + this.addElement = function(element) { + elements.push(element); + guac_pager.last_page = Math.max(0, + Math.floor((elements.length - 1) / guac_pager.page_capacity)); + }; + + /** + * Sets the current page, where 0 is the first page. + */ + this.setPage = function(number) { + guac_pager.current_page = number; + update_display(); + }; + + /** + * Returns the element representing the buttons of this pager. + */ + this.getElement = function() { + return element; + }; + +}; + diff --git a/guacamole/src/main/webapp/scripts/root-ui.js b/guacamole/src/main/webapp/scripts/root-ui.js index 68c63a05b..e261c6ae5 100644 --- a/guacamole/src/main/webapp/scripts/root-ui.js +++ b/guacamole/src/main/webapp/scripts/root-ui.js @@ -26,7 +26,8 @@ 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": { @@ -144,6 +145,9 @@ GuacamoleRootUI.reset = function() { try { connections = GuacamoleService.Connections.list(parameters); + // Sort connections by ID + connections.sort(GuacamoleService.Connections.comparator); + // Show admin elements if admin permissions available var permissions = GuacamoleService.Permissions.list(); if (permissions.create_connection @@ -169,6 +173,10 @@ GuacamoleRootUI.reset = function() { } + // Create pager for connections + var connection_pager = new GuacUI.Pager(GuacamoleRootUI.sections.all_connections); + connection_pager.page_capacity = 20; + // Add connection icons for (var i=0; i