etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <chris.suich@netapp.com>
Reviewed by: Brian Federle <brian.federle@citrix.com>

Example:

fields: {
    ...
    size: {
        ...
        has_units: true,
        units: [
            {
                id: 'gb',
                text: 'GB',
                fromBase: function(val) { ... return val; },
                toBase: function(val) { ... return val; }
            },
            ...
        ]
    }
}
This commit is contained in:
Brian Federle 2013-08-13 15:31:45 -07:00
parent cd056f4572
commit 8f34dc192f
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
ui/scripts/ui/dialog.js
View File

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