diff options
Diffstat (limited to 'import-layers/yocto-poky/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js')
-rw-r--r-- | import-layers/yocto-poky/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js | 99 |
1 files changed, 75 insertions, 24 deletions
diff --git a/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js index cb9ed4da0..dace8e325 100644 --- a/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js +++ b/import-layers/yocto-poky/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js @@ -22,26 +22,40 @@ function newCustomImageModalInit(){ var nameInput = imgCustomModal.find('input'); var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)."; - var duplicateNameMsg = "A recipe with this name already exists. Image names must be unique."; + var duplicateNameMsg = "An image with this name already exists. Image names must be unique."; var duplicateImageInProjectMsg = "An image with this name already exists in this project." var invalidBaseRecipeIdMsg = "Please select an image to customise."; - // capture clicks on radio buttons inside the modal; when one is selected, - // set the recipe on the modal - imgCustomModal.on("click", "[name='select-image']", function (e) { + // set button to "submit" state and enable text entry so user can + // enter the custom recipe name + showSubmitState(); + + /* capture clicks on radio buttons inside the modal; when one is selected, + * set the recipe on the modal + */ + imgCustomModal.on("click", "[name='select-image']", function(e) { clearRecipeError(); + $(".radio").each(function(){ + $(this).removeClass("has-error"); + }); var recipeId = $(e.target).attr('data-recipe'); imgCustomModal.data('recipe', recipeId); }); newCustomImgBtn.click(function(e){ + // disable the button and text entry + showLoadingState(); + e.preventDefault(); var baseRecipeId = imgCustomModal.data('recipe'); if (!baseRecipeId) { showRecipeError(invalidBaseRecipeIdMsg); + $(".radio").each(function(){ + $(this).addClass("has-error"); + }); return; } @@ -62,16 +76,37 @@ function newCustomImageModalInit(){ } } else { imgCustomModal.modal('hide'); + imgCustomModal.one('hidden.bs.modal', showSubmitState); window.location.replace(ret.url + '?notify=new'); } }); } }); + // enable text entry, show "Create image" button text + function showSubmitState() { + libtoaster.enableAjaxLoadingTimer(); + newCustomImgBtn.find('[data-role="loading-state"]').hide(); + newCustomImgBtn.find('[data-role="submit-state"]').show(); + newCustomImgBtn.removeAttr('disabled'); + nameInput.removeAttr('disabled'); + } + + // disable text entry, show "Creating image..." button text; + // we also disabled the page-level ajax loading spinner while this spinner + // is active + function showLoadingState() { + libtoaster.disableAjaxLoadingTimer(); + newCustomImgBtn.find('[data-role="submit-state"]').hide(); + newCustomImgBtn.find('[data-role="loading-state"]').show(); + newCustomImgBtn.attr('disabled', 'disabled'); + nameInput.attr('disabled', 'disabled'); + } + function showNameError(text){ invalidNameHelp.text(text); invalidNameHelp.show(); - nameInput.parent().addClass('error'); + nameInput.parent().addClass('has-error'); } function showRecipeError(text){ @@ -92,26 +127,26 @@ function newCustomImageModalInit(){ if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){ showNameError(invalidNameMsg); newCustomImgBtn.prop("disabled", true); - nameInput.parent().addClass('error'); + nameInput.parent().addClass('has-error'); } else { invalidNameHelp.hide(); newCustomImgBtn.prop("disabled", false); - nameInput.parent().removeClass('error'); + nameInput.parent().removeClass('has-error'); } }); } -// Set the image recipes which can used as the basis for the custom -// image recipe the user is creating -// -// baseRecipes: a list of one or more recipes which can be -// used as the base for the new custom image recipe in the format: -// [{'id': <recipe ID>, 'name': <recipe name>'}, ...] -// -// if recipes is a single recipe, just show the text box to set the -// name for the new custom image; if recipes contains multiple recipe objects, -// show a set of radio buttons so the user can decide which to use as the -// basis for the new custom image +/* Set the image recipes which can used as the basis for the custom + * image recipe the user is creating + * baseRecipes: a list of one or more recipes which can be + * used as the base for the new custom image recipe in the format: + * [{'id': <recipe ID>, 'name': <recipe name>'}, ...] + * + * if recipes is a single recipe, just show the text box to set the + * name for the new custom image; if recipes contains multiple recipe objects, + * show a set of radio buttons so the user can decide which to use as the + * basis for the new custom image + */ function newCustomImageModalSetRecipes(baseRecipes) { var imgCustomModal = $("#new-custom-image-modal"); var imageSelector = $('#new-custom-image-modal [data-role="image-selector"]'); @@ -124,8 +159,9 @@ function newCustomImageModalSetRecipes(baseRecipes) { // hide the radio button container imageSelector.hide(); - // set the single recipe ID on the modal as it's the only one - // we can build from + /* set the single recipe ID on the modal as it's the only one + * we can build from. + */ imgCustomModal.data('recipe', baseRecipes[0].id); } else { @@ -134,14 +170,29 @@ function newCustomImageModalSetRecipes(baseRecipes) { for (var i = 0; i < baseRecipes.length; i++) { var recipe = baseRecipes[i]; imageSelectRadiosContainer.append( - '<label class="radio" data-role="image-radio">' + - recipe.name + - '<input type="radio" class="form-control" name="select-image" ' + + '<div class="radio"><label data-role="image-radio">' + + '<input type="radio" name="select-image" ' + 'data-recipe="' + recipe.id + '">' + - '</label>' + recipe.name + + '</label></div>' ); } + /* select the first radio button as default selection. Radio button + * groups should always display with an option checked + */ + imageSelectRadiosContainer.find("input:radio:first").attr("checked", "checked"); + + /* check which radio button is selected by default inside the modal, + * and set the recipe on the modal accordingly + */ + imageSelectRadiosContainer.find("input:radio").each(function(){ + if ( $(this).is(":checked") ) { + var recipeId = $(this).attr("data-recipe"); + imgCustomModal.data("recipe", recipeId); + } + }); + // show the radio button container imageSelector.show(); } |