diff --git a/src/sunstone/public/app/tabs/images-tab/form-panels/create.js b/src/sunstone/public/app/tabs/images-tab/form-panels/create.js index ac67dae9a7..f5b02ec528 100644 --- a/src/sunstone/public/app/tabs/images-tab/form-panels/create.js +++ b/src/sunstone/public/app/tabs/images-tab/form-panels/create.js @@ -11,6 +11,7 @@ define(function(require) { var Locale = require('utils/locale'); var Tips = require('utils/tips'); var ResourceSelect = require('utils/resource-select'); + var CustomTagsTable = require('utils/custom-tags-table'); var TemplateWizardHTML = require('hbs!./create/wizard'); var TemplateAdvancedHTML = require('hbs!./create/advanced'); @@ -59,7 +60,8 @@ define(function(require) { function _htmlWizard() { return TemplateWizardHTML({ - 'formPanelId': this.formPanelId + 'formPanelId': this.formPanelId, + 'customTagsHTML': CustomTagsTable.html(), }); } @@ -125,24 +127,7 @@ define(function(require) { $('#path_image', dialog).click(); - dialog.on('click', '#add_custom_var_image_button', function() { - var name = $('#custom_var_image_name', dialog).val(); - var value = $('#custom_var_image_value', dialog).val(); - if (!name.length || !value.length) { - Notifier.notifyError(Locale.tr("Custom attribute name and value must be filled in")); - return false; - } - option = '<option value=\'' + value + '\' name=\'' + name + '\'>' + - name + '=' + value + - '</option>'; - $('select#custom_var_image_box', dialog).append(option); - return false; - }); - - dialog.on('click', '#remove_custom_var_image_button', function() { - $('select#custom_var_image_box :selected', dialog).remove(); - return false; - }); + CustomTagsTable.setup(dialog); if (_getInternetExplorerVersion() > -1) { $("#upload_image").attr("disabled", "disabled"); @@ -246,12 +231,7 @@ define(function(require) { break; } - //Time to add custom attributes - $('#custom_var_image_box option', dialog).each(function() { - var attr_name = $(this).attr('name'); - var attr_value = $(this).val(); - img_json[attr_name] = attr_value; - }); + $.extend(img_json, CustomTagsTable.retrieve(dialog)); var img_obj = { "image" : img_json, diff --git a/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs index 67fce15dd8..c0df6cd2b3 100644 --- a/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs +++ b/src/sunstone/public/app/tabs/images-tab/form-panels/create/wizard.hbs @@ -1,6 +1,6 @@ <form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation"> <div class="row"> - <div class="large-12 columns"> + <div class="medium-4 columns"> <label for="img_name"> {{tr "Name"}} <span class="tip"> @@ -9,9 +9,7 @@ </label> <input type="text" name="img_name" id="img_name" /> </div> - </div> - <div class="row"> - <div class="large-12 columns"> + <div class="medium-8 columns"> <label for="img_desc"> {{tr "Description"}} <span class="tip"> @@ -22,7 +20,7 @@ </div> </div> <div class="row"> - <div class="large-6 columns"> + <div class="large-4 columns"> <label for="img_type"> {{tr "Type"}} <span class="tip"> @@ -44,7 +42,7 @@ <option value="DATABLOCK">{{tr "DATABLOCK"}}</option> </select> </div> - <div class="large-6 columns"> + <div class="large-8 columns"> <label for="img_datastore"> {{tr "Datastore"}} <span class="tip">{{tr "Select the datastore for this image"}}</span> @@ -159,38 +157,12 @@ </div> <br> <div class="row"> - <fieldset> - <legend>{{tr "Custom attributes"}}</legend> - <div class="row"> - <div class="large-6 columns"> - <div class="row"> - <div class="large-12 columns"> - <label for="custom_var_image_name">{{tr "Name"}}</label> - <input type="text" id="custom_var_image_name" name="custom_var_image_name" /> - </div> - </div> - <div class="row"> - <div class="large-12 columns"> - <label for="custom_var_image_value">{{tr "Value"}}</label> - <input type="text" id="custom_var_image_value" name="custom_var_image_value" /> - </div> - </div> - <div class="row"> - <div class="large-12 columns"> - <button class="add_remove_button add_button secondary button small radius" id="add_custom_var_image_button" type="button" value="add_custom_image_var">{{tr "Add"}}</button> - <button class="add_remove_button secondary button small radius" id="remove_custom_var_image_button" type="button" value="remove_custom_image_var">{{tr "Remove selected"}}</button> - </div> - </div> - </div> - <div class="large-6 columns"> - <div class="row"> - <div class="eight centered columns"> - <select id="custom_var_image_box" name="custom_var_image_box" style="height:180px !important; width:100%" multiple></select> - </div> - </div> - </div> - </div> - </fieldset> + <div class="large-12 columns"> + <span>{{tr "Custom attributes"}}</span> + <br> + <br> + </div> </div> + {{{customTagsHTML}}} {{/advancedSection}} </form> \ No newline at end of file