GUAC-932: Fix connection parameter directive and display.

This commit is contained in:
Michael Jumper
2014-12-21 16:30:04 -08:00
parent 0318e3455c
commit 086d9a9516
5 changed files with 138 additions and 57 deletions

View File

@@ -36,6 +36,7 @@ angular.module('manage').controller('connectionEditModalController', ['$scope',
// Copy data into a new conection object in case the user doesn't want to save // Copy data into a new conection object in case the user doesn't want to save
$scope.connection = new Connection($scope.connection); $scope.connection = new Connection($scope.connection);
$scope.connection.parameters = {};
var newConnection = !$scope.connection.identifier; var newConnection = !$scope.connection.identifier;
@@ -47,11 +48,17 @@ angular.module('manage').controller('connectionEditModalController', ['$scope',
// Wrap all the history entries // Wrap all the history entries
if (!newConnection) { if (!newConnection) {
connectionService.getConnectionHistory($scope.connection.identifier).success(function wrapHistoryEntries(historyEntries) { connectionService.getConnectionHistory($scope.connection.identifier).success(function wrapHistoryEntries(historyEntries) {
historyEntries.forEach(function wrapHistoryEntry(historyEntry) { historyEntries.forEach(function wrapHistoryEntry(historyEntry) {
$scope.historyEntryWrappers.push(new HistoryEntryWrapper(historyEntry)); $scope.historyEntryWrappers.push(new HistoryEntryWrapper(historyEntry));
}); });
}); });
connectionService.getConnectionParameters($scope.connection.identifier).success(function setParameters(parameters) {
$scope.connection.parameters = parameters;
});
} }
/** /**

View File

@@ -31,55 +31,128 @@ angular.module('manage').directive('guacConnectionParameter', [function connecti
restrict: 'E', restrict: 'E',
replace: true, replace: true,
scope: { scope: {
parameter: '=parameter',
connection: '=connection', /**
* The protocol this parameter is associated with.
*
* @type Protocol
*/
protocol : '=',
/**
* The unique name of this parameter within the protocol
* definition.
*
* @type String
*/
name : '=',
/**
* The current map of parameter names to their corresponding string
* values.
*
* @type Object.<String, String>
*/
parameters : '='
}, },
templateUrl: 'app/manage/templates/connectionParameter.html', templateUrl: 'app/manage/templates/connectionParameter.html',
controller: ['$scope', function connectionParameterController($scope) { controller: ['$scope', '$q', function connectionParameterController($scope, $q) {
$scope.connectionParameters = $scope.connection.parameters;
$scope.parameterType = $scope.parameter.type; /**
$scope.parameterName = $scope.parameter.name; * Deferred load of the parameter definition, pending availability
* of the protocol definition as a whole.
// Coerce numeric strings to numbers *
if ($scope.parameterType === 'NUMERIC') { * @type Deferred
*/
// If a value exists, coerce it to a number var parameterDefinitionAvailable = $q.defer();
if ($scope.connectionParameters[$scope.parameterName])
$scope.parameterValue = Number($scope.connectionParameters[$scope.parameterName]); /**
else * Populates the parameter definition on the scope as
$scope.parameterValue = null; * <code>$scope.parameter</code> if both the parameter name and
* protocol definition are available. If either are unavailable,
} * this function has no effect.
*/
// Coerce boolean strings to boolean values var retrieveParameterDefinition = function retrieveParameterDefinition() {
else if ($scope.parameterType === 'BOOLEAN') {
// TODO: Use defined checked value from protocol description // Both name and protocol are needed to retrieve the parameter definition
$scope.parameterValue = $scope.connectionParameters[$scope.parameterName] === 'true'; if (!$scope.name || !$scope.protocol)
} return;
// All other parameter types are represented internally as strings // Once protocol definition is available, locate parameter definition by name
else $scope.protocol.parameters.forEach(function findParameter(parameter) {
$scope.parameterValue = $scope.connectionParameters[$scope.parameterName]; if (parameter.name === $scope.name) {
$scope.parameter = parameter;
// Update internal representation as model is changed parameterDefinitionAvailable.resolve(parameter);
$scope.$watch('parameterValue', function parameterValueChanges(value) { }
});
// Convert numeric values back into strings
if ($scope.parameterType === 'NUMERIC') { };
if (value === null || typeof value === 'undefined')
$scope.connectionParameters[$scope.parameterName] = ''; // Load parameter definition once protocol definition is available.
$scope.$watch('name', retrieveParameterDefinition);
$scope.$watch('protocol', retrieveParameterDefinition);
// Update typed value when parameter set is changed
$scope.$watch('parameters', function setParameters(parameters) {
// Don't bother if no parameters were provided
if (!parameters)
return;
// Wait for parameter definition
parameterDefinitionAvailable.promise.then(function setTypedValue() {
// Pull parameter value
var value = parameters[$scope.name];
// Coerce numeric strings to numbers
if ($scope.parameter.type === 'NUMERIC')
$scope.typedValue = (value ? Number(value) : null);
// Coerce boolean strings to boolean values
else if ($scope.parameter.type === 'BOOLEAN')
$scope.typedValue = (value === $scope.parameter.value);
// All other parameter types are represented internally as strings
else else
$scope.connectionParameters[$scope.parameterName] = value.toString(); $scope.typedValue = value || '';
}
});
// TODO: Transform BOOLEAN input fields back into strings based on protocol description
// All other parameter types are already strings
else
$scope.connectionParameters[$scope.parameterName] = value;
}); });
}]
// Update string value in parameter set when typed value is changed
$scope.$watch('typedValue', function typedValueChanged(typedValue) {
// Don't bother if there's nothing to set
if (!$scope.parameters)
return;
// Wait for parameter definition
parameterDefinitionAvailable.promise.then(function setValue() {
// Convert numeric values back into strings
if ($scope.parameter.type === 'NUMERIC') {
if (!typedValue)
$scope.parameters[$scope.name] = '';
else
$scope.parameters[$scope.name] = typedValue.toString();
}
// Convert boolean values back into strings based on protocol description
else if ($scope.parameter.type === 'BOOLEAN')
$scope.parameters[$scope.name] = (typedValue ? $scope.parameter.value : '');
// All other parameter types are already strings
else
$scope.parameters[$scope.name] = typedValue || '';
});
}); // end watch typedValue
}] // end controller
}; };
}]); }]);

View File

@@ -20,10 +20,11 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
--> -->
<input ng-show="parameterType === 'TEXT'" type="text" ng-model="parameterValue"/>
<input ng-show="parameterType === 'NUMERIC'" type="number" ng-model="parameterValue"/> <input ng-show="parameter.type === 'TEXT'" type="text" ng-model="typedValue"/>
<input ng-show="parameterType === 'USERNAME'" type="text" ng-model="parameterValue"/> <input ng-show="parameter.type === 'NUMERIC'" type="number" ng-model="typedValue"/>
<input ng-show="parameterType === 'PASSWORD'" type="password" ng-model="parameterValue"/> <input ng-show="parameter.type === 'USERNAME'" type="text" ng-model="typedValue"/>
<input ng-show="parameterType === 'BOOLEAN'" type="checkbox" ng-model="parameterValue"/> <input ng-show="parameter.type === 'PASSWORD'" type="password" ng-model="typedValue"/>
<select ng-show="parameterType === 'ENUM'" ng-model="parameterValue" ng-options="option.value as 'protocol.' + connection.protocol + '.parameters.' + parameter.name + '.options.' + (option.value || 'empty') | translate for option in parameter.options | orderBy: value"></select> <input ng-show="parameter.type === 'BOOLEAN'" type="checkbox" ng-model="typedValue"/>
<select ng-show="parameter.type === 'ENUM'" ng-model="typedValue" ng-options="option.value as 'protocol.' + protocol.name + '.parameters.' + parameter.name + '.options.' + (option.value || 'empty') | translate for option in parameter.options | orderBy: value"></select>
</span> </span>

View File

@@ -72,7 +72,7 @@ THE SOFTWARE.
<tr ng-repeat="parameter in protocols[connection.protocol].parameters"> <tr ng-repeat="parameter in protocols[connection.protocol].parameters">
<th>{{'protocol.' + connection.protocol + '.parameters.' + parameter.name + '.label' | translate}}:</th> <th>{{'protocol.' + connection.protocol + '.parameters.' + parameter.name + '.label' | translate}}:</th>
<td> <td>
<guac-connection-parameter parameter="parameter" connection="connection" /> <guac-connection-parameter protocol="protocols[connection.protocol]" name="parameter.name" value="connection.parameters[parameter.name]" />
</td> </td>
</tr> </tr>
</table> </table>

View File

@@ -30,12 +30,12 @@ angular.module('rest').factory('protocolService', ['$http', 'authenticationServi
/** /**
* Makes a request to the REST API to get the list of protocols, returning * Makes a request to the REST API to get the list of protocols, returning
* a promise that provides an array of @link{Protocol} objects if * a promise that provides a map of @link{Protocol} objects by protocol
* successful. * name if successful.
* *
* @returns {Promise.<Protocol[]>} * @returns {Promise.<Object.<String, Protocol>>}
* A promise which will resolve with an array of @link{Protocol} * A promise which will resolve with a map of @link{Protocol}
* objects upon success. * objects by protocol name upon success.
*/ */
service.getProtocols = function getProtocols() { service.getProtocols = function getProtocols() {