UI form dialog: Support dynamic unit conversion for fields Adds a new dialog field type called 'has_units'. This field has an input box side by side with a select box. The select box is populated with predefined units (MB, GB, TB, for example) and uses (also predefined) conversion functions to allow automatic updating of the input box value when the units select box is changed.
Original author: Chris Suich <[email protected]> Reviewed by: Brian Federle <[email protected]> Example: fields: { ... size: { ... has_units: true, units: [ { id: 'gb', text: 'GB', fromBase: function(val) { ... return val; }, toBase: function(val) { ... return val; } }, ... ] } } Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/8f34dc19 Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/8f34dc19 Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/8f34dc19 Branch: refs/heads/master Commit: 8f34dc192f418a309baf87f85ba66f306d359432 Parents: cd056f4 Author: Brian Federle <[email protected]> Authored: Tue Aug 13 15:31:45 2013 -0700 Committer: Brian Federle <[email protected]> Committed: Tue Aug 13 15:33:31 2013 -0700 ---------------------------------------------------------------------- ui/scripts/ui/dialog.js | 59 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/8f34dc19/ui/scripts/ui/dialog.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index 1ff5401..e227ea4 100644 --- a/ui/scripts/ui/dialog.js +++ b/ui/scripts/ui/dialog.js @@ -459,6 +459,65 @@ $input.wrap($('<div>').addClass('range-item')); $input.addClass("disallowSpecialCharacters"); + } else if (field.has_units) { // An input box and a drop down with unit options + var textbox = $('<input>') + .attr({ + type: 'text', + name: key + }) + .css('width', 'auto'); + var unitSelect = $('<select>') + .attr({ + name: key+'_unit' + }) + .data('key', key) + .css('width', 'auto'); + + $input = textbox; + + textbox.appendTo($value); + unitSelect.appendTo($value); + + $.each(field.units, function() { + var id = this.id; + var text = this.text; + var toBase = this.toBase; + var fromBase = this.fromBase; + + var option = $('<option>') + .appendTo(unitSelect) + .val(_s(id)) + .html(_s(text)) + .data('toBase', toBase) + .data('fromBase', fromBase); + }); + + unitSelect.focus(function() { + this.oldUnit = this.value; + }); + + unitSelect.change(function() { + if ($(this).parent().length == 0) + return; + + var oldUnit = this.oldUnit; + var newUnit = this.value; + var key = $(this).data('key'); + var value = $(this).closest('form').find('input[name='+key+']').attr('value'); + + if (!value || value.length === 0 || !oldUnit || oldUnit == newUnit) + return; + + var toBase = $(this).closest('form').find('option[value='+oldUnit+']').data('toBase'); + var fromBase = $(this).closest('form').find('option[value='+newUnit+']').data('fromBase'); + + var baseValue = toBase(value); + var newValue = fromBase(baseValue); + + $(this).closest('form').find('input[name='+key+']').attr('value', newValue); + + this.oldUnit = newUnit; + }) } else { //text field $input = $('<input>').attr({ name: key,
