#268: Admin UI mockup, additional styling and images. Refactor naming and JS.

This commit is contained in:
Michael Jumper
2013-02-05 13:05:59 -08:00
parent c770c28d66
commit 18655f80a7
10 changed files with 748 additions and 103 deletions

View File

@@ -91,108 +91,6 @@ GuacamoleRootUI.login = function(username, password) {
};
/**
* A connection UI object which can be easily added to a list of connections
* for sake of display.
*/
GuacamoleRootUI.Connection = function(connection) {
/**
* The actual connection associated with this connection UI element.
*/
this.connection = connection;
function createElement(tagname, classname) {
var new_element = document.createElement(tagname);
new_element.className = classname;
return new_element;
}
// Create connection display elements
var element = createElement("div", "connection");
var caption = createElement("div", "caption");
var protocol = createElement("div", "protocol");
var name = createElement("span", "name");
var protocol_icon = createElement("div", "icon " + connection.protocol);
var thumbnail = createElement("div", "thumbnail");
var thumb_img;
// Get URL
var url = "client.xhtml?id=" + encodeURIComponent(connection.id);
// Create link to client
element.onclick = function() {
// Attempt to focus existing window
var current = window.open(null, connection.id);
// If window did not already exist, set up as
// Guacamole client
if (!current.GuacUI)
window.open(url, connection.id);
};
// Add icon
protocol.appendChild(protocol_icon);
// Set name
name.textContent = connection.id;
// Assemble caption
caption.appendChild(protocol);
caption.appendChild(name);
// Assemble connection icon
element.appendChild(thumbnail);
element.appendChild(caption);
// Add screenshot if available
var thumbnail_url = GuacamoleHistory.get(connection.id).thumbnail;
if (thumbnail_url) {
// Create thumbnail element
thumb_img = document.createElement("img");
thumb_img.src = thumbnail_url;
thumbnail.appendChild(thumb_img);
}
/**
* Returns the DOM element representing this connection.
*/
this.getElement = function() {
return element;
};
/**
* Returns whether this connection has an associated thumbnail.
*/
this.hasThumbnail = function() {
return thumb_img && true;
};
/**
* Sets the thumbnail URL of this existing connection. Note that this will
* only work if the connection already had a thumbnail associated with it.
*/
this.setThumbnail = function(url) {
// If no image element, create it
if (!thumb_img) {
thumb_img = document.createElement("img");
thumb_img.src = url;
thumbnail.appendChild(thumb_img);
}
// Otherwise, set source of existing
else
thumb_img.src = url;
};
};
/**
* Set of all thumbnailed connections, indexed by ID.
*/