safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-08 06:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Paginate main UI connection list, improve pager styles, begin proper style separation.

Browse Source
This commit is contained in:
Michael Jumper
2013-02-19 00:04:53 -08:00
parent b467a5945c
commit a24804a39d
7 changed files with 226 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
guacamole/src/main/webapp/scripts/admin-ui.js
View File

@@ -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<GuacAdmin.cached_connections.length; i++)