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

4
guacamole/src/main/webapp/index.xhtml
View File

@@ -24,6 +24,7 @@
<head> <head>
<link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/> <link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
<link rel="apple-touch-icon" type="image/png" href="images/guacamole-logo-144.png"/> <link rel="apple-touch-icon" type="image/png" href="images/guacamole-logo-144.png"/>
<link rel="stylesheet" type="text/css" href="styles/ui.css"/>
<link rel="stylesheet" type="text/css" href="styles/login.css"/> <link rel="stylesheet" type="text/css" href="styles/login.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"/>
<title>Guacamole ${project.version}</title> <title>Guacamole ${project.version}</title>
@@ -82,6 +83,9 @@
<div id="all-connections"> <div id="all-connections">
</div> </div>
<div id="all-connections-buttons">
</div>
<h2>Clipboard</h2> <h2>Clipboard</h2>
<div id="clipboardDiv"> <div id="clipboardDiv">
<p> <p>

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 * Set handler for logout
*/ */
@@ -963,9 +802,7 @@ GuacAdmin.reset = function() {
GuacAdmin.cached_connections = GuacamoleService.Connections.list(); GuacAdmin.cached_connections = GuacamoleService.Connections.list();
// Sort connections by ID // Sort connections by ID
GuacAdmin.cached_connections.sort(function(a, b) { GuacAdmin.cached_connections.sort(GuacamoleService.Connections.comparator);
return a.id.localeCompare(b.id);
});
// Connection management // Connection management
if (GuacAdmin.cached_permissions.create_connection if (GuacAdmin.cached_permissions.create_connection
@@ -1044,7 +881,7 @@ GuacAdmin.reset = function() {
// Add new pager // Add new pager
GuacAdmin.containers.user_list.innerHTML = ""; 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 // Add users to pager
var usernames = Object.keys(GuacAdmin.cached_permissions.read_user).sort(); var usernames = Object.keys(GuacAdmin.cached_permissions.read_user).sort();
@@ -1071,7 +908,7 @@ GuacAdmin.reset = function() {
// Add new pager // Add new pager
GuacAdmin.containers.connection_list.innerHTML = ""; 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 // Add connections to pager
for (i=0; i<GuacAdmin.cached_connections.length; i++) for (i=0; i<GuacAdmin.cached_connections.length; i++)

170
guacamole/src/main/webapp/scripts/guac-ui.js
View File

@@ -512,3 +512,173 @@ GuacUI.Connection = function(connection) {
}; };
}; };
/**
* 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.
*/
GuacUI.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 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;
};
};

20
guacamole/src/main/webapp/scripts/root-ui.js
View File

@@ -26,7 +26,8 @@ var GuacamoleRootUI = {
"sections": { "sections": {
"login_form" : document.getElementById("login-form"), "login_form" : document.getElementById("login-form"),
"recent_connections" : document.getElementById("recent-connections"), "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": { "messages": {
@@ -144,6 +145,9 @@ GuacamoleRootUI.reset = function() {
try { try {
connections = GuacamoleService.Connections.list(parameters); connections = GuacamoleService.Connections.list(parameters);
// Sort connections by ID
connections.sort(GuacamoleService.Connections.comparator);
// Show admin elements if admin permissions available // Show admin elements if admin permissions available
var permissions = GuacamoleService.Permissions.list(); var permissions = GuacamoleService.Permissions.list();
if (permissions.create_connection 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 // Add connection icons
for (var i=0; i<connections.length; i++) { for (var i=0; i<connections.length; i++) {
@@ -183,11 +191,19 @@ GuacamoleRootUI.reset = function() {
GuacamoleRootUI.addRecentConnection(connection); GuacamoleRootUI.addRecentConnection(connection);
// Add connection to connection list // Add connection to connection list
GuacamoleRootUI.sections.all_connections.appendChild( connection_pager.addElement(
new GuacUI.Connection(connections[i]).getElement()); new GuacUI.Connection(connections[i]).getElement());
} }
// Add buttons if more than one page
if (connection_pager.last_page != 0)
GuacamoleRootUI.sections.all_connections_buttons.appendChild(
connection_pager.getElement());
// Start at page 0
connection_pager.setPage(0);
// If connections could be retrieved, display list // If connections could be retrieved, display list
GuacamoleRootUI.views.login.style.display = "none"; GuacamoleRootUI.views.login.style.display = "none";
GuacamoleRootUI.views.connections.style.display = ""; GuacamoleRootUI.views.connections.style.display = "";

7
guacamole/src/main/webapp/scripts/service.js
View File

@@ -165,6 +165,13 @@ GuacamoleService.PermissionSet = function() {
*/ */
GuacamoleService.Connections = { GuacamoleService.Connections = {
/**
* Comparator which compares two GuacamoleService.Connection objects.
*/
"comparator" : function(a, b) {
return a.id.localeCompare(b.id);
},
/** /**
* Returns an array of Connections for which the current user has access. * Returns an array of Connections for which the current user has access.
* *

12
guacamole/src/main/webapp/styles/login.css
View File

@@ -242,8 +242,14 @@ div#recent-connections,
div#clipboardDiv, div#clipboardDiv,
div#settings, div#settings,
div#all-connections { div#all-connections {
margin: 0; margin: 1em;
padding: 1em; padding: 0;
}
#all-connections-buttons {
text-align: center;
margin: 1em;
padding: 0;
} }
div#recent-connections { div#recent-connections {
@@ -366,4 +372,4 @@ div#recent-connections .protocol {
margin: 1.5em; margin: 1.5em;
margin-left: 2.5em; margin-left: 2.5em;
font-size: 0.75em; font-size: 0.75em;
} }

17
guacamole/src/main/webapp/styles/ui.css
View File

@@ -388,16 +388,28 @@ div#logout-panel {
opacity: 0.25; opacity: 0.25;
} }
.set-page { .set-page,
text-decoration: underline; .more-pages {
display: inline-block; display: inline-block;
padding: 0.25em; padding: 0.25em;
text-align: center;
min-width: 1.25em;
}
.set-page {
text-decoration: underline;
} }
.set-page.current { .set-page.current {
cursor: auto; cursor: auto;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-khtml-border-radius: 0.2em;
border-radius: 0.2em;
} }
.icon.first-page { .icon.first-page {
@@ -419,4 +431,5 @@ div#logout-panel {
#user-list-buttons, #user-list-buttons,
#connection-list-buttons { #connection-list-buttons {
text-align: center; text-align: center;
margin: 1em;
} }