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

More UI cleanup, refactor thumbnail set into history.

Browse Source
This commit is contained in:
Michael Jumper
2012-11-06 16:25:20 -08:00
parent e461df3523
commit aff008714c
5 changed files with 127 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
guacamole/src/main/webapp/client.xhtml
View File

@@ -63,6 +63,7 @@
<!-- guacamole-default-webapp scripts -->
<script type="text/javascript" src="scripts/session.js"></script>
<script type="text/javascript" src="scripts/history.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<!-- Init -->

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

@@ -138,6 +138,7 @@
<script type="text/javascript" src="scripts/connections.js"></script>
<script type="text/javascript" src="scripts/session.js"></script>
<script type="text/javascript" src="scripts/history.js"></script>
<script type="text/javascript" src="scripts/root-ui.js"></script>
</body>

69
guacamole/src/main/webapp/scripts/history.js Normal file
View File

@@ -0,0 +1,69 @@
/**
* Set of thumbnails for each connection, indexed by ID.
*/
GuacamoleHistory = new (function() {
var history =
JSON.parse(localStorage.getItem("GUAC_HISTORY") || "{}");
/**
* Returns the URL for the thumbnail of the connection with the given ID,
* or undefined if no thumbnail is associated with that connection.
*/
this.get = function(id) {
return history[id] || new GuacamoleHistory.Entry();
};
/**
* Updates the thumbnail and access time of the history entry for the
* connection with the given ID.
*/
this.update = function(id, thumbnail) {
// Create updated entry
var entry = new GuacamoleHistory.Entry(
id,
thumbnail,
new Date().getTime()
);
// Store entry in history
history[id] = entry;
// Save updated history
localStorage.setItem("GUAC_HISTORY", JSON.stringify(history));
};
})();
/**
* A single entry in the indexed connection usage history.
*
* @constructor
* @param {String} id The ID of this connection.
* @param {String} thumbnail The URL of the thumbnail to use to represent this
* connection.
* @param {Number} last_access The time this connection was last accessed, in
* seconds.
*/
GuacamoleHistory.Entry = function(id, thumbnail, last_access) {
/**
* The ID of the connection associated with this history entry.
*/
this.id = id;
/**
* The thumbnail associated with the connection associated with this history
* entry.
*/
this.thumbnail = thumbnail;
/**
* The time the connection associated with this entry was last accessed.
*/
this.accessed = last_access;
};

18
guacamole/src/main/webapp/scripts/interface.js
View File

@@ -348,19 +348,9 @@ GuacamoleUI.attach = function(guac) {
0, 0, thumbnail.width, thumbnail.height
);
// Get thumbnail set from local storage
var thumbnails = {};
try {
var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
if (thumbnail_json)
thumbnails = JSON.parse(thumbnail_json);
}
catch (e) {}
// Save thumbnail to local storage
// Save thumbnail to history
var id = decodeURIComponent(window.location.search.substring(4));
thumbnails[id] = thumbnail.toDataURL();
localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
GuacamoleHistory.update(id, thumbnail.toDataURL());
}
@@ -474,10 +464,8 @@ GuacamoleUI.attach = function(guac) {
// Disconnect and update thumbnail on close
window.onunload = function() {
if (localStorage)
updateThumbnail();
updateThumbnail();
guac.disconnect();
};

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

@@ -92,28 +92,61 @@ GuacamoleRootUI.login = function(username, password) {
};
/**
* Set of thumbnails for each connection, indexed by ID.
* An arbitrary Guacamole configuration, consisting of an ID/protocol pair.
*
* @constructor
* @param {String} protocol The protocol used by this configuration.
* @param {String} id The ID associated with this configuration.
*/
GuacamoleRootUI.Thumbnails = new (function() {
var thumbnails =
JSON.parse(localStorage.getItem("GUAC_THUMBNAILS") || "{}");
GuacamoleRootUI.Configuration = function(protocol, id) {
/**
* Returns the URL for the thumbnail of the connection with the given ID,
* or undefined if no thumbnail is associated with that connection.
* The protocol associated with this configuration.
*/
this.getURL = function(id) {
return thumbnails[id];
};
this.protocol = protocol;
});
/**
* The ID associated with this configuration.
*/
this.id = id;
};
GuacamoleRootUI.getConfigurations = function(parameters) {
// Construct request URL
var configs_url = "configs";
if (parameters) configs_url += "?" + parameters;
// Get config list
var xhr = new XMLHttpRequest();
xhr.open("GET", configs_url, false);
xhr.send(null);
// If fail, throw error
if (xhr.status != 200)
throw new Error(xhr.statusText);
// Otherwise, get list
var configs = new Array();
var configElements = xhr.responseXML.getElementsByTagName("config");
for (var i=0; i<configElements.length; i++) {
configs.push(new Config(
configElements[i].getAttribute("protocol"),
configElements[i].getAttribute("id")
));
}
return configs;
};
/**
* A connection UI object which can be easily added to a list of connections
* for sake of display.
*/
GuacamoleRootUI.Connection = function(id, protocol_name) {
GuacamoleRootUI.Connection = function(config) {
function element(tagname, classname) {
var new_element = document.createElement(tagname);
@@ -126,22 +159,22 @@ GuacamoleRootUI.Connection = function(id, protocol_name) {
var caption = element("div", "caption");
var protocol = element("div", "protocol");
var name = element("span", "name");
var protocol_icon = element("div", "icon " + protocol_name);
var protocol_icon = element("div", "icon " + config.protocol);
var thumbnail = element("div", "thumbnail");
// Get URL
var url = "client.xhtml?id=" + encodeURIComponent(id);
var url = "client.xhtml?id=" + encodeURIComponent(config.id);
// Create link to client
connection.onclick = function() {
// Attempt to focus existing window
var current = window.open(null, id);
var current = window.open(null, config.id);
// If window did not already exist, set up as
// Guacamole client
if (!current.GuacamoleUI)
window.open(url, id);
window.open(url, config.id);
};
@@ -149,7 +182,7 @@ GuacamoleRootUI.Connection = function(id, protocol_name) {
protocol.appendChild(protocol_icon);
// Set name
name.textContent = id;
name.textContent = config.id;
// Assemble caption
caption.appendChild(protocol);
@@ -160,7 +193,7 @@ GuacamoleRootUI.Connection = function(id, protocol_name) {
connection.appendChild(caption);
// Add screenshot if available
var thumbnail_url = GuacamoleRootUI.Thumbnails.getURL(id);
var thumbnail_url = GuacamoleHistory.get(config.id).thumbnail;
if (thumbnail_url) {
// Create thumbnail element
@@ -201,7 +234,7 @@ GuacamoleRootUI.reset = function() {
// Read configs
var configs;
try {
configs = getConfigList(parameters);
configs = GuacamoleRootUI.getConfigurations(parameters);
}
catch (e) {
@@ -217,8 +250,7 @@ GuacamoleRootUI.reset = function() {
for (var i=0; i<configs.length; i++) {
// Create connection element
var connection = new GuacamoleRootUI.Connection(
configs[i].id, configs[i].protocol);
var connection = new GuacamoleRootUI.Connection(configs[i]);
// If screenshot presennt, add to recent connections
if (connection.hasThumbnail()) {