mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-22 18:50:08 +03:00
Feature #4317: Better memory range inputs
This commit is contained in:
Carlos Martín
parent
9e4af1ebc6
commit
16e0f7cabe
@ -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);
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<input type="number" min="0" step="256" wizard_field="MEMORY" id="MEMORY"/>
|
||||
</div>
|
||||
<div class="gb_unit memory_gb_input">
|
||||
<input type="number" min="0" step="0.25" name="memory_gb"/>
|
||||
<input type="number" min="0" step="1" name="memory_gb"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-4 columns">
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
{{{tip (tr "Amount of RAM required for the VM, in Megabytes.")}}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="small-10 columns">
|
||||
<div class="small-10 columns memory_input_wrapper">
|
||||
<div class="memory_input">
|
||||
<input type="number" min="0" step="256" wizard_field="MEMORY" id="MEMORY" disabled/>
|
||||
</div>
|
||||
|
||||
@ -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 = '<datalist id="uinput-list-'+uinputListId+'">';
|
||||
|
||||
var tick_val = attr.tick_size * Math.ceil(attr.min / attr.tick_size);
|
||||
while (tick_val <= attr.max){
|
||||
datalist += '<option>'+tick_val+'</option>';
|
||||
tick_val += attr.tick_size;
|
||||
}
|
||||
|
||||
datalist += '</datalist>';
|
||||
}
|
||||
|
||||
input =
|
||||
'<div class="row uinput-slider-container">'+
|
||||
'<div class="small-8 columns">'+
|
||||
'<input type="range" class="uinput-slider" style="width:100%"'+
|
||||
'min="'+attr.min+'" max="'+attr.max+'" step="'+attr.step+'" '+
|
||||
'value="'+attr.initial+'"/>'+
|
||||
'value="'+attr.initial+'" '+
|
||||
list_attr+'/>'+
|
||||
'</div>'+
|
||||
datalist+
|
||||
'<div class="small-4 columns">'+
|
||||
'<input type="number" class="uinput-slider-val" '+
|
||||
'min="'+attr.min+'" max="'+attr.max+'" step="'+attr.step+'" '+
|
||||
@ -433,16 +473,6 @@ define(function(require) {
|
||||
'</div>'+
|
||||
'</div>';
|
||||
|
||||
$(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 = '<select wizard_field="' + attr.name + '" required>';
|
||||
@ -476,4 +506,16 @@ define(function(require) {
|
||||
|
||||
return _attributeInput(attrs);
|
||||
}
|
||||
|
||||
function _initialSetup() {
|
||||
$(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 );
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user