From 8f34dc192f418a309baf87f85ba66f306d359432 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Tue, 13 Aug 2013 15:31:45 -0700
Subject: [PATCH] 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; }
            },
            ...
        ]
    }
}
---
 ui/scripts/ui/dialog.js | 59 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index 1ff54013f4a..e227ea43c61 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,