Ticket #268: Mostly-implemented UI. Still need enum type.

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

@@ -36,7 +36,6 @@ var GuacAdmin = {
 
     "fields" : {
         "connection_id" :  document.getElementById("connection-id"),
-        "protocol"      :  document.getElementById("protocol"),
         "username"      :  document.getElementById("username")
     },
 
@@ -53,26 +52,8 @@ var GuacAdmin = {
  * An arbitrary input field.
  * 
  * @constructor
- * @param {String} title A human-readable title for the field.
- * @param {String[]} available The allowed value(s), if any.
- * @param {String[]} selected The selected value(s), if any.
  */
-GuacAdmin.Field = function(title, available, selected) {
+GuacAdmin.Field = function() {
-
-    /**
-     * A human-readable title describing this field.
-     */
-    this.title = title;
-
-    /**
-     * All available values, if any.
-     */
-    this.available = available || [];
-
-    /**
-     * All selected values, if any.
-     */
-    this.selected = selected || [];
 
     /**
      * Returns the DOM Element representing this field.
@@ -82,11 +63,18 @@ GuacAdmin.Field = function(title, available, selected) {
     this.getElement = function() {};
 
     /**
-     * Returns the selected values of this field.
+     * Returns the value of this field.
      * 
-     * @return {String[]} All selected values.
+     * @return {String} The value of this field.
      */
-    this.getSelected = function() {};
+    this.getValue = function() {};
+
+    /**
+     * Sets the value of this field.
+     * 
+     * @param {String} value The value of this field.
+     */
+    this.setValue = function(value) {};
 
 };
 
@@ -95,26 +83,29 @@ GuacAdmin.Field = function(title, available, selected) {
  * Simple HTML input field.
  * 
  * @augments GuacAdmin.Field
+ * @param {String} type The type of HTML field.
  */
-GuacAdmin.Field._HTML_INPUT = function(type, title, available, selected) {
+GuacAdmin.Field._HTML_INPUT = function(type) {
 
     // Call parent constructor
-    GuacAdmin.Field.apply(this, [title, available, selected]);
+    GuacAdmin.Field.apply(this);
 
     // Create backing element
     var element = GuacUI.createElement("input");
     element.setAttribute("type", type);
-    if (selected && selected.length == 1)
-        element.setAttribute("value", selected[0]);
 
-    this.getSelected = function() {
+    this.getValue = function() {
-        return [element.value];
+        return element.value;
     };
 
     this.getElement = function() {
         return element;
     };
 
+    this.setValue = function(value) {
+        element.value = value;
+    };
+
 };
 
 GuacAdmin.Field._HTML_INPUT.prototype = new GuacAdmin.Field();
@@ -125,8 +116,8 @@ GuacAdmin.Field._HTML_INPUT.prototype = new GuacAdmin.Field();
  * 
  * @augments GuacAdmin.Field._HTML_INPUT
  */
-GuacAdmin.Field.TEXT = function(title, available, selected) {
+GuacAdmin.Field.TEXT = function() {
-    GuacAdmin.Field._HTML_INPUT.apply(this, ["text", title, available, selected]);
+    GuacAdmin.Field._HTML_INPUT.apply(this, ["text"]);
 };
 
 GuacAdmin.Field.TEXT.prototype = new GuacAdmin.Field._HTML_INPUT();
@@ -137,78 +128,48 @@ GuacAdmin.Field.TEXT.prototype = new GuacAdmin.Field._HTML_INPUT();
  * 
  * @augments GuacAdmin.Field._HTML_INPUT
  */
-GuacAdmin.Field.PASSWORD = function(title, available, selected) {
+GuacAdmin.Field.PASSWORD = function() {
-    GuacAdmin.Field._HTML_INPUT.apply(this, ["password", title, available, selected]);
+    GuacAdmin.Field._HTML_INPUT.apply(this, ["password"]);
 };
 
 GuacAdmin.Field.PASSWORD.prototype = new GuacAdmin.Field._HTML_INPUT();
 
-
 /**
- * Multi-select list where each element has a corresponding checkbox.
+ * Simple checkbox.
  * 
  * @augments GuacAdmin.Field
  */
-GuacAdmin.Field.LIST = function(title, available, selected) {
+GuacAdmin.Field.CHECKBOX = function(value) {
 
     // Call parent constructor
-    GuacAdmin.Field.apply(this, [title, available, selected]);
+    GuacAdmin.Field.apply(this);
 
-    var i;
+    // Create backing element
+    var element = GuacUI.createElement("input");
+    element.setAttribute("type", "checkbox");
+    element.setAttribute("value", value);
 
-    // All selected connections 
+    this.getValue = function() {
-    var is_selected = {};
+        if (element.checked)
-    for (i=0; i<selected.length; i++)
+            return value;
-        is_selected[selected[i]] = true;
+        else
-
+            return "";
-    // Add elements for all list items
+    };
-    var element = GuacUI.createElement("div", "list");
-    for (i=0; i<available.length; i++) {
-
-        (function() {
-
-            // Get name 
-            var name = available[i];
-
-            // Containing div
-            var list_item = GuacUI.createChildElement(element, "div", "connection");
-
-            // Checkbox
-            var checkbox = GuacUI.createChildElement(list_item, "input");
-            checkbox.setAttribute("type", "checkbox");
-            if (is_selected[name])
-                checkbox.checked = true;
-
-            // Update selected set when changed
-            checkbox.onclick =
-            checkbox.onchange = function() {
-
-                if (checkbox.checked)
-                    is_selected[name] = true;
-                else if (is_selected[name])
-                    delete is_selected[name];
-
-            };
-
-            // Connection name
-            var name_element = GuacUI.createChildElement(list_item, "span", "name");
-            name_element.textContent = name;
-
-        })();
-
-    }
 
     this.getElement = function() {
         return element;
     };
 
-    this.getSelected = function() {
+    this.setValue = function(new_value) {
-        return Object.keys(is_selected);
+        if (new_value == value)
+            element.checked = true;
+        else
+            element.checked = false;
     };
 
 };
 
-GuacAdmin.Field.LIST.prototype = new GuacAdmin.Field();
+GuacAdmin.Field._HTML_INPUT.prototype = new GuacAdmin.Field();
 
 
 /**
@@ -237,106 +198,6 @@ GuacAdmin.Button = function(title) {
 
 };
 
-/**
- * An arbitrary table-based form. Given an array of fields and an array
- * of buttons, GuacAdmin.Form constructs a clean HTML form using DOM Elements.
- * 
- * @constructor
- * @param {GuacAdmin.Field[]} fields An array of all fields to include in the
- *                                   form.
- * @param {GuacAdmin.Button[]} buttons An array of all buttons to include in the
- *                                     form.
- */
-GuacAdmin.Form = function(fields, buttons) {
-
-    /**
-     * Reference to this form.
-     */
-    var guac_form = this;
-
-    // Main div and fields
-    var element     = GuacUI.createElement("div", "form");
-    var field_table = GuacUI.createChildElement(element, "table", "fields");
-
-    // Buttons
-    var button_div = GuacUI.createChildElement(element, "div", "object-buttons");
-   
-    /**
-     * Returns the DOM element representing this form.
-     */
-    this.getElement = function() {
-        return element;
-    };
-
-    /**
-     * Event called when a button is clicked.
-     * 
-     * @event
-     * @param {String} title The title of the button clicked.
-     */
-    this.onaction = null;
-
-    /*
-     * Add all fields
-     */
-
-    var i;
-    for (i=0; i<fields.length; i++) {
-
-        // Get field
-        var field = fields[i];
-
-        // Add elements
-        var row    = GuacUI.createChildElement(field_table, "tr");
-        var header = GuacUI.createChildElement(row, "th");
-        var cell   = GuacUI.createChildElement(row, "td");
-
-        // Set title
-        header.textContent = field.title;
-
-        // Add to cell
-        cell.appendChild(field.getElement());
-
-    }
-    
-    /*
-     * Add all buttons
-     */
-
-    for (i=0; i<buttons.length; i++) {
-
-        (function() {
-
-            // Get title and element
-            var title = buttons[i].title;
-            var button_element = buttons[i].getElement();
-
-            // Trigger onaction event when clicked
-            button_element.addEventListener("click", function(e) {
-
-                if (guac_form.onaction) {
-
-                    // Build array of field values
-                    var field_values = [];
-                    for (var j=0; j<fields.length; j++)
-                        field_values.push(fields[j].getSelected());
-
-                    guac_form.onaction(title, field_values);
-                    e.stopPropagation();
-                    
-                }
-
-            });
-
-            // Add to cell
-            button_div.appendChild(button_element);
-
-        })();
-
-    }
-
-};
-
 /**
  * An arbitrary list item with an icon and caption.
  */
@@ -610,6 +471,9 @@ GuacAdmin.addConnection = function(connection) {
         // Associative set of protocols
         var available_protocols = {};
 
+        // All form fields by parameter name
+        var fields = {};
+
         // Add protocols
         for (var i=0; i<GuacAdmin.cached_protocols.length; i++) {
 
@@ -660,16 +524,39 @@ GuacAdmin.addConnection = function(connection) {
                 var parameter = protocol.parameters[name];
 
                 // Create corresponding field
-                var field = GuacUI.createChildElement(
+                var field;
-                        GuacUI.createTabulatedContainer(field_table, parameter.title + ":"),
+                switch (parameter.type) {
-                        "input");
 
-                field.setAttribute("type", "text");
+                    case "text":
-                field.value = connection.parameters[name];
+                        field = new GuacAdmin.Field.TEXT();
+                        break;
 
-                // FIXME: Handle field types
+                    case "password":
+                        field = new GuacAdmin.Field.PASSWORD();
+                        break;
 
-            }
+                    case "boolean":
+                        field = new GuacAdmin.Field.CHECKBOX(parameter.value);
+                        break;
+
+                    default:
+                        continue;
+
+                }
+
+                // Create container for field
+                var container = 
+                    GuacUI.createTabulatedContainer(field_table, parameter.title + ":");
+
+                // Set initial value
+                if (connection.parameters[name])
+                    field.setValue(connection.parameters[name]);
+
+                // Add field
+                container.appendChild(field.getElement());
+                fields[name] = field;
+
+            } // end foreach parameter
 
         }
 
@@ -677,6 +564,10 @@ GuacAdmin.addConnection = function(connection) {
         protocol_field.value = connection.protocol;
         setFields(connection.protocol);
 
+        protocol_field.onchange = protocol_field.onclick = function() {
+            setFields(this.value);
+        };
+
         // Add buttons
         var button_div = GuacUI.createChildElement(form_element, "div", "object-buttons");
 
@@ -689,6 +580,22 @@ GuacAdmin.addConnection = function(connection) {
 
             try {
 
+                // Build connection
+                var updated_connection = new GuacamoleService.Connection(
+                    protocol_field.value,
+                    connection.id
+                );
+
+                // Populate parameters
+                var protocol = available_protocols[updated_connection.protocol];
+                for (var name in protocol.parameters) {
+                    var field = fields[name];
+                    if (field)
+                        updated_connection.parameters[name] = field.getValue();
+                }
+
+                // Update connection
+                GuacamoleService.Connections.update(updated_connection);
                 deselect();
                 GuacAdmin.reset();
 
@@ -772,7 +679,7 @@ GuacAdmin.reset = function() {
             // Try to create connection
             try {
                 var connection = new GuacamoleService.Connection(
-                    GuacAdmin.fields.protocol.value, GuacAdmin.fields.connection_id.value);
+                    GuacAdmin.cached_protocols[0].name, GuacAdmin.fields.connection_id.value);
                 GuacamoleService.Connections.create(connection);
                 GuacAdmin.fields.connection_id.value = "";
                 GuacAdmin.reset();

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

@@ -627,10 +627,9 @@ GuacamoleService.Protocols = {
                 },
 
                 "read-only" : {
-                    "title"     : "Read-only",
+                    "title" : "Read-only",
-                    "type"      : "boolean",
+                    "type"  : "boolean",
-                    "checked"   : "true",
+                    "value" : "true"
-                    "unchecked" : ""
                 }
                 
             }
@@ -655,8 +654,18 @@ GuacamoleService.Protocols = {
                     "title" : "Port",
                     "type"  : "text",
                     "value" : "3389"
-                }
+                },
 
+                "username" : {
+                    "title" : "Username",
+                    "type"  : "text"
+                },
+ 
+                "password" : {
+                    "title" : "Password",
+                    "type"  : "password"
+                }
+ 
             }
 
         }];