From 16e0f7cabec5fc6a9df3a4641aa061b9b2b17dbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Mart=C3=ADn?= Date: Wed, 2 Mar 2016 13:38:01 +0100 Subject: [PATCH] Feature #4317: Better memory range inputs --- src/sunstone/public/app/app.js | 2 + .../general/capacity-create/html.hbs | 2 +- .../wizard-tabs/general/capacity-inputs.js | 22 +++++-- .../general/capacity-inputs/html.hbs | 2 +- src/sunstone/public/app/utils/user-inputs.js | 66 +++++++++++++++---- 5 files changed, 74 insertions(+), 20 deletions(-) diff --git a/src/sunstone/public/app/app.js b/src/sunstone/public/app/app.js index 8c639aef70..f271b96e2c 100644 --- a/src/sunstone/public/app/app.js +++ b/src/sunstone/public/app/app.js @@ -27,6 +27,7 @@ define(function(require) { var Notifier = require('utils/notifier'); var Menu = require('utils/menu'); var Locale = require('utils/locale'); + var UserInputs = require('utils/user-inputs'); var _commonDialogs = [ require('utils/dialogs/confirm'), @@ -53,6 +54,7 @@ define(function(require) { _setupAccordion(); _setupCloseDropdownsOnClick(); _insertUserAndZoneSelector(); + UserInputs.initialSetup(); if (Config.isTabEnabled(PROVISION_TAB_ID)) { Sunstone.showTab(PROVISION_TAB_ID); diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-create/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-create/html.hbs index 732d4feaa0..0475146bf4 100644 --- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-create/html.hbs +++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-create/html.hbs @@ -28,7 +28,7 @@
- +
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js index 851c0c6fd8..9c0ab659d6 100644 --- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js +++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js @@ -75,16 +75,20 @@ define(function(require) { $("input, select", $("div.memory_input", context)).val(val); }); + var gb_inputs = $("div.memory_gb_input", context).detach(); + // Unit select $("#memory_unit", context).on('change', function() { var memory_unit_val = $('#memory_unit :selected', context).val(); if (memory_unit_val == 'GB') { $("div.memory_input", context).hide(); - $("div.memory_gb_input", context).show(); + gb_inputs.appendTo($("div.memory_input_wrapper", context)); + + $("div.memory_input input,select",context).trigger("input"); } else { $("div.memory_input", context).show(); - $("div.memory_gb_input", context).hide(); + gb_inputs = $("div.memory_gb_input", context).detach(); } }); @@ -141,6 +145,11 @@ define(function(require) { if (userInputs.MEMORY != undefined){ // Normal input for MB var attr = UserInputs.parse("MEMORY", userInputs.MEMORY); + + if (attr.type == "range"){ + attr.tick_size = 1024; + } + var input = UserInputs.attributeInput(attr); $("div.memory_input", context).html(input); @@ -152,9 +161,10 @@ define(function(require) { if (attr_gb.type == "range"){ attr_gb.type = "range-float"; - attr_gb.min = (attr_gb.min / 1024); - attr_gb.max = (attr_gb.max / 1024); - attr_gb.step = "any"; + attr_gb.min = Math.ceil((attr_gb.min / 1024)); + attr_gb.max = Math.floor((attr_gb.max / 1024)); + attr_gb.step = "1"; + attr_gb.tick_size = 1; } else if (attr_gb.type == "list"){ attr_gb.options = attr_gb.options.map(function(e){ @@ -163,7 +173,7 @@ define(function(require) { } else if (attr_gb.type == "number"){ attr_gb.type = "number-float"; - attr_gb.step = "any"; + attr_gb.step = "1"; } input = UserInputs.attributeInput(attr_gb); diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs index 1cc8d27417..b021a9326b 100644 --- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs +++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs @@ -21,7 +21,7 @@ {{{tip (tr "Amount of RAM required for the VM, in Megabytes.")}}}
-
+
diff --git a/src/sunstone/public/app/utils/user-inputs.js b/src/sunstone/public/app/utils/user-inputs.js index e26415a72e..82e7f18f40 100644 --- a/src/sunstone/public/app/utils/user-inputs.js +++ b/src/sunstone/public/app/utils/user-inputs.js @@ -22,6 +22,9 @@ define(function(require) { var TemplateHTML = require('hbs!./user-inputs/table'); var RowTemplateHTML = require('hbs!./user-inputs/row'); + var uinputListId = 0; + + //============================================================================== // VM & Service user inputs //============================================================================== @@ -42,7 +45,10 @@ define(function(require) { 'unmarshall': _unmarshall, 'parse': _parse, 'generateInputElement': _generateInputElement, - 'attributeInput': _attributeInput + 'attributeInput': _attributeInput, + + // Setup + 'initialSetup': _initialSetup }; function _html(){ @@ -350,6 +356,8 @@ define(function(require) { ["max":] ["step":] ["options":] + ["tick_size":] For range inputs, the tick positions + starting from 0, not min } */ function _parse(name, value) { @@ -375,6 +383,11 @@ define(function(require) { attr.max = parseInt( params[1] ); attr.step = "1"; + attr.tick_size = 1; + while ((attr.max - attr.min) / attr.tick_size > 10 ){ + attr.tick_size *= 10; + } + break; case "range-float": @@ -384,6 +397,11 @@ define(function(require) { attr.max = parseFloat( params[1] ); attr.step = "any"; + attr.tick_size = 1; + while ((attr.max - attr.min) / attr.tick_size > 10 ){ + attr.tick_size *= 10; + } + break; case "list": @@ -419,13 +437,35 @@ define(function(require) { break; case "range": case "range-float": + + var list_attr = ""; + var datalist = ""; + + if (attr.tick_size != undefined){ + uinputListId += 1; + + list_attr = 'list="uinput-list-'+uinputListId+'"'; + + datalist = ''; + + var tick_val = attr.tick_size * Math.ceil(attr.min / attr.tick_size); + while (tick_val <= attr.max){ + datalist += ''; + tick_val += attr.tick_size; + } + + datalist += ''; + } + input = '
'+ '
'+ ''+ + 'value="'+attr.initial+'" '+ + list_attr+'/>'+ '
'+ + datalist+ '
'+ ''+ '
'; - $(document).off("input", "input.uinput-slider-val"); - $(document).on("input", "input.uinput-slider-val", function(){ - $("input[type=range]", $(this).closest('.uinput-slider-container')).val( this.value ); - }); - - $(document).off("input", "input.uinput-slider"); - $(document).on("input", "input.uinput-slider", function(){ - $("input[type=number]", $(this).closest('.uinput-slider-container')).val( this.value ); - }); - break; case "list": input = '