diff options
Diffstat (limited to 'lib/toaster/toastergui/static/js/newcustomimage_modal.js')
-rw-r--r-- | lib/toaster/toastergui/static/js/newcustomimage_modal.js | 103 |
1 files changed, 92 insertions, 11 deletions
diff --git a/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/lib/toaster/toastergui/static/js/newcustomimage_modal.js index 98e87f4a6..1ae0d34e9 100644 --- a/lib/toaster/toastergui/static/js/newcustomimage_modal.js +++ b/lib/toaster/toastergui/static/js/newcustomimage_modal.js @@ -1,33 +1,59 @@ "use strict"; -/* Used for the newcustomimage_modal actions */ +/* +Used for the newcustomimage_modal actions + +The .data('recipe') value on the outer element determines which +recipe ID is used as the basis for the new custom image recipe created via +this modal. + +Use newCustomImageModalSetRecipes() to set the recipes available as a base +for the new custom image. This will manage the addition of radio buttons +to select the base image (or remove the radio buttons, if there is only a +single base image available). +*/ function newCustomImageModalInit(){ var newCustomImgBtn = $("#create-new-custom-image-btn"); var imgCustomModal = $("#new-custom-image-modal"); var invalidNameHelp = $("#invalid-name-help"); + var invalidRecipeHelp = $("#invalid-recipe-help"); var nameInput = imgCustomModal.find('input'); - var invalidMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)."; - var duplicateImageMsg = "An image with this name already exists in this project."; - var duplicateRecipeMsg = "A non-image recipe with this name already exists."; + var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)."; + var duplicateNameMsg = "An image with this name already exists. Image names must be unique."; + 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) { + clearRecipeError(); + + var recipeId = $(e.target).attr('data-recipe'); + imgCustomModal.data('recipe', recipeId); + }); newCustomImgBtn.click(function(e){ e.preventDefault(); var baseRecipeId = imgCustomModal.data('recipe'); + if (!baseRecipeId) { + showRecipeError(invalidBaseRecipeIdMsg); + return; + } + if (nameInput.val().length > 0) { libtoaster.createCustomRecipe(nameInput.val(), baseRecipeId, function(ret) { if (ret.error !== "ok") { console.warn(ret.error); if (ret.error === "invalid-name") { - showError(invalidMsg); - } else if (ret.error === "image-already-exists") { - showError(duplicateImageMsg); - } else if (ret.error === "recipe-already-exists") { - showError(duplicateRecipeMsg); + showNameError(invalidNameMsg); + return; + } else if (ret.error === "already-exists") { + showNameError(duplicateNameMsg); + return; } } else { imgCustomModal.modal('hide'); @@ -37,12 +63,21 @@ function newCustomImageModalInit(){ } }); - function showError(text){ + function showNameError(text){ invalidNameHelp.text(text); invalidNameHelp.show(); nameInput.parent().addClass('error'); } + function showRecipeError(text){ + invalidRecipeHelp.text(text); + invalidRecipeHelp.show(); + } + + function clearRecipeError(){ + invalidRecipeHelp.hide(); + } + nameInput.on('keyup', function(){ if (nameInput.val().length === 0){ newCustomImgBtn.prop("disabled", true); @@ -50,7 +85,7 @@ function newCustomImageModalInit(){ } if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){ - showError(invalidMsg); + showNameError(invalidNameMsg); newCustomImgBtn.prop("disabled", true); nameInput.parent().addClass('error'); } else { @@ -60,3 +95,49 @@ function newCustomImageModalInit(){ } }); } + +// 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"]'); + var imageSelectRadiosContainer = $('#new-custom-image-modal [data-role="image-selector-radios"]'); + + if (baseRecipes.length === 1) { + // hide the radio button container + imageSelector.hide(); + + // remove any radio buttons + labels + imageSelector.remove('[data-role="image-radio"]'); + + // 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 { + // add radio buttons; note that the handlers for the radio buttons + // are set in newCustomImageModalInit via event delegation + 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" ' + + 'data-recipe="' + recipe.id + '">' + + '</label>' + ); + } + + // show the radio button container + imageSelector.show(); + } +} |