More UI cleanup, refactor thumbnail set into history.

guacamole/src/main/webapp/client.xhtml

@@ -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 -->

guacamole/src/main/webapp/index.xhtml

@@ -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>

guacamole/src/main/webapp/scripts/history.js

@@ -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;
+
+};
+ 

guacamole/src/main/webapp/scripts/interface.js

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

guacamole/src/main/webapp/scripts/root-ui.js

@@ -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() {
+GuacamoleRootUI.Configuration = function(protocol, id) {
-
-    var thumbnails =
-        JSON.parse(localStorage.getItem("GUAC_THUMBNAILS") || "{}");
 
     /**
-     * Returns the URL for the thumbnail of the connection with the given ID,
+     * The protocol associated with this configuration.
-     * or undefined if no thumbnail is associated with that connection.
      */
-    this.getURL = function(id) {
+    this.protocol = protocol;
-        return thumbnails[id];
-    };
 
-});
+    /**
+     * 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(
+        var connection = new GuacamoleRootUI.Connection(configs[i]);
-            configs[i].id, configs[i].protocol);
 
         // If screenshot presennt, add to recent connections
         if (connection.hasThumbnail()) {