diff options
Diffstat (limited to 'bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js')
-rw-r--r-- | bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js | 76 |
1 files changed, 50 insertions, 26 deletions
diff --git a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js index cb9ed4da05..8356c02b5a 100644 --- a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js +++ b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js | |||
@@ -22,14 +22,18 @@ function newCustomImageModalInit(){ | |||
22 | var nameInput = imgCustomModal.find('input'); | 22 | var nameInput = imgCustomModal.find('input'); |
23 | 23 | ||
24 | var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)."; | 24 | var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)."; |
25 | var duplicateNameMsg = "A recipe with this name already exists. Image names must be unique."; | 25 | var duplicateNameMsg = "An image with this name already exists. Image names must be unique."; |
26 | var duplicateImageInProjectMsg = "An image with this name already exists in this project." | 26 | var duplicateImageInProjectMsg = "An image with this name already exists in this project." |
27 | var invalidBaseRecipeIdMsg = "Please select an image to customise."; | 27 | var invalidBaseRecipeIdMsg = "Please select an image to customise."; |
28 | 28 | ||
29 | // capture clicks on radio buttons inside the modal; when one is selected, | 29 | /* capture clicks on radio buttons inside the modal; when one is selected, |
30 | // set the recipe on the modal | 30 | * set the recipe on the modal |
31 | imgCustomModal.on("click", "[name='select-image']", function (e) { | 31 | */ |
32 | imgCustomModal.on("click", "[name='select-image']", function(e) { | ||
32 | clearRecipeError(); | 33 | clearRecipeError(); |
34 | $(".radio").each(function(){ | ||
35 | $(this).removeClass("has-error"); | ||
36 | }); | ||
33 | 37 | ||
34 | var recipeId = $(e.target).attr('data-recipe'); | 38 | var recipeId = $(e.target).attr('data-recipe'); |
35 | imgCustomModal.data('recipe', recipeId); | 39 | imgCustomModal.data('recipe', recipeId); |
@@ -42,6 +46,9 @@ function newCustomImageModalInit(){ | |||
42 | 46 | ||
43 | if (!baseRecipeId) { | 47 | if (!baseRecipeId) { |
44 | showRecipeError(invalidBaseRecipeIdMsg); | 48 | showRecipeError(invalidBaseRecipeIdMsg); |
49 | $(".radio").each(function(){ | ||
50 | $(this).addClass("has-error"); | ||
51 | }); | ||
45 | return; | 52 | return; |
46 | } | 53 | } |
47 | 54 | ||
@@ -71,7 +78,7 @@ function newCustomImageModalInit(){ | |||
71 | function showNameError(text){ | 78 | function showNameError(text){ |
72 | invalidNameHelp.text(text); | 79 | invalidNameHelp.text(text); |
73 | invalidNameHelp.show(); | 80 | invalidNameHelp.show(); |
74 | nameInput.parent().addClass('error'); | 81 | nameInput.parent().addClass('has-error'); |
75 | } | 82 | } |
76 | 83 | ||
77 | function showRecipeError(text){ | 84 | function showRecipeError(text){ |
@@ -92,26 +99,26 @@ function newCustomImageModalInit(){ | |||
92 | if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){ | 99 | if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){ |
93 | showNameError(invalidNameMsg); | 100 | showNameError(invalidNameMsg); |
94 | newCustomImgBtn.prop("disabled", true); | 101 | newCustomImgBtn.prop("disabled", true); |
95 | nameInput.parent().addClass('error'); | 102 | nameInput.parent().addClass('has-error'); |
96 | } else { | 103 | } else { |
97 | invalidNameHelp.hide(); | 104 | invalidNameHelp.hide(); |
98 | newCustomImgBtn.prop("disabled", false); | 105 | newCustomImgBtn.prop("disabled", false); |
99 | nameInput.parent().removeClass('error'); | 106 | nameInput.parent().removeClass('has-error'); |
100 | } | 107 | } |
101 | }); | 108 | }); |
102 | } | 109 | } |
103 | 110 | ||
104 | // Set the image recipes which can used as the basis for the custom | 111 | /* Set the image recipes which can used as the basis for the custom |
105 | // image recipe the user is creating | 112 | * image recipe the user is creating |
106 | // | 113 | * baseRecipes: a list of one or more recipes which can be |
107 | // baseRecipes: a list of one or more recipes which can be | 114 | * used as the base for the new custom image recipe in the format: |
108 | // used as the base for the new custom image recipe in the format: | 115 | * [{'id': <recipe ID>, 'name': <recipe name>'}, ...] |
109 | // [{'id': <recipe ID>, 'name': <recipe name>'}, ...] | 116 | * |
110 | // | 117 | * if recipes is a single recipe, just show the text box to set the |
111 | // if recipes is a single recipe, just show the text box to set the | 118 | * name for the new custom image; if recipes contains multiple recipe objects, |
112 | // name for the new custom image; if recipes contains multiple recipe objects, | 119 | * show a set of radio buttons so the user can decide which to use as the |
113 | // show a set of radio buttons so the user can decide which to use as the | 120 | * basis for the new custom image |
114 | // basis for the new custom image | 121 | */ |
115 | function newCustomImageModalSetRecipes(baseRecipes) { | 122 | function newCustomImageModalSetRecipes(baseRecipes) { |
116 | var imgCustomModal = $("#new-custom-image-modal"); | 123 | var imgCustomModal = $("#new-custom-image-modal"); |
117 | var imageSelector = $('#new-custom-image-modal [data-role="image-selector"]'); | 124 | var imageSelector = $('#new-custom-image-modal [data-role="image-selector"]'); |
@@ -124,8 +131,9 @@ function newCustomImageModalSetRecipes(baseRecipes) { | |||
124 | // hide the radio button container | 131 | // hide the radio button container |
125 | imageSelector.hide(); | 132 | imageSelector.hide(); |
126 | 133 | ||
127 | // set the single recipe ID on the modal as it's the only one | 134 | /* set the single recipe ID on the modal as it's the only one |
128 | // we can build from | 135 | * we can build from. |
136 | */ | ||
129 | imgCustomModal.data('recipe', baseRecipes[0].id); | 137 | imgCustomModal.data('recipe', baseRecipes[0].id); |
130 | } | 138 | } |
131 | else { | 139 | else { |
@@ -134,15 +142,31 @@ function newCustomImageModalSetRecipes(baseRecipes) { | |||
134 | for (var i = 0; i < baseRecipes.length; i++) { | 142 | for (var i = 0; i < baseRecipes.length; i++) { |
135 | var recipe = baseRecipes[i]; | 143 | var recipe = baseRecipes[i]; |
136 | imageSelectRadiosContainer.append( | 144 | imageSelectRadiosContainer.append( |
137 | '<label class="radio" data-role="image-radio">' + | 145 | '<div class="radio"><label data-role="image-radio">' + |
138 | recipe.name + | 146 | '<input type="radio" name="select-image" ' + |
139 | '<input type="radio" class="form-control" name="select-image" ' + | ||
140 | 'data-recipe="' + recipe.id + '">' + | 147 | 'data-recipe="' + recipe.id + '">' + |
141 | '</label>' | 148 | recipe.name + |
149 | '</label></div>' | ||
142 | ); | 150 | ); |
143 | } | 151 | } |
144 | 152 | ||
153 | /* select the first radio button as default selection. Radio button | ||
154 | * groups should always display with an option checked | ||
155 | */ | ||
156 | imageSelectRadiosContainer.find("input:radio:first").attr("checked", "checked"); | ||
157 | |||
158 | /* check which radio button is selected by default inside the modal, | ||
159 | * and set the recipe on the modal accordingly | ||
160 | */ | ||
161 | imageSelectRadiosContainer.find("input:radio").each(function(){ | ||
162 | if ( $(this).is(":checked") ) { | ||
163 | var recipeId = $(this).attr("data-recipe"); | ||
164 | imgCustomModal.data("recipe", recipeId); | ||
165 | } | ||
166 | }); | ||
167 | |||
145 | // show the radio button container | 168 | // show the radio button container |
146 | imageSelector.show(); | 169 | imageSelector.show(); |
147 | } | 170 | |
171 | } | ||
148 | } | 172 | } |