[Kimchi-devel] [PATCH] [Kimchi 3/9] Issue 772: Template tab and Template edit window - Some problems

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- po/pt_BR.po | 31 ++-- ui/js/src/kimchi.template_add_main.js | 261 +++++++++++++++++---------------- ui/js/src/kimchi.template_edit_main.js | 17 ++- ui/pages/i18n.json.tmpl | 6 + ui/pages/template-add.html.tmpl | 64 +++----- 5 files changed, 196 insertions(+), 183 deletions(-) diff --git a/po/pt_BR.po b/po/pt_BR.po index 193792b..89447e0 100644 --- a/po/pt_BR.po +++ b/po/pt_BR.po @@ -1558,7 +1558,7 @@ msgstr "" "O tipo de dispositivo. Atualmente, \"cdrom\" e \"disk\" são suportados." msgid "Storage Pool" -msgstr "storage pool" +msgstr "Storage Pool" msgid "Storage pool which volume located in" msgstr "Conjunto de armazenamentos no qual o volume está localizado" @@ -1632,6 +1632,9 @@ msgstr "Máquinas Guests" msgid "Templates" msgstr "Modelos" +msgid "Template Name (ID)" +msgstr "Nome do Modelo (ID)" + msgid "Failed to get application configuration" msgstr "Falha ao obter a configuração do aplicativo" @@ -1764,6 +1767,12 @@ msgstr "Chave de GPG" msgid "Add" msgstr "Incluir" +msgid "Add Storage" +msgstr "Incluir Storage" + +msgid "Add Interface" +msgstr "Incluir Interface" + msgid "Remove" msgstr "Remover" @@ -2275,14 +2284,8 @@ msgstr "Procurar ISOs" msgid "The following ISOs are available:" msgstr "Os ISOs a seguir estão disponíveis:" -msgid "OS: " -msgstr "S.O.: " - -msgid "Version: " -msgstr "Versão: " - -msgid "Size: " -msgstr "Tamanho: " +msgid "Size" +msgstr "Tamanho" msgid "Search more ISOs" msgstr "Procurar mais ISOs" @@ -2299,8 +2302,14 @@ msgstr "Caminho do arquivo: " msgid "Loading default remote ISOs ..." msgstr "Carregando ISOs remotos padrão..." -msgid "Arch: " -msgstr "Arq.: " +msgid "Provide a URL for a specific ISO image:" +msgstr "Forneça uma URL para uma imagem ISO específica:" + +msgid "Provide a File Path for a specific ISO image:" +msgstr "Forneça o caminho do arquivo para uma imagem ISO específica:" + +msgid "Arch" +msgstr "Arq. " msgid "I want to use a custom URL" msgstr "Eu desejo usar uma URL customizada" diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index 0b36479..2478eec 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -16,29 +16,34 @@ * limitations under the License. */ kimchi.switchPage = function(fromPageId, toPageId, direction) { + $('.tab-content').css('overflow', 'hidden'); direction = direction || 'left'; var toLeftBegin; var fromLeftEnd; - if('left' === direction) { + if ('left' === direction) { toLeftBegin = '100%'; fromLeftEnd = '-100%'; - } else if('right' === direction) { + } else if ('right' === direction) { toLeftBegin = '-100%'; fromLeftEnd = '100%'; } - var formPage = $('#'+fromPageId); - var toPage = $('#'+toPageId); + var formPage = $('#' + fromPageId); + var toPage = $('#' + toPageId); toPage.css({ left: toLeftBegin }); formPage.animate({ left: fromLeftEnd, opacity: 0.1 - }, 400); + }, 400, function() { + $('.tab-content').css('overflow', 'visible'); + }); toPage.animate({ left: '0', opacity: 1 - }, 400); + }, 400, function() { + $('.tab-content').css('overflow', 'visible'); + }); }; kimchi.template_add_main = function() { @@ -49,7 +54,7 @@ kimchi.template_add_main = function() { var deepScan = function(button) { kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished) { if (isos && isos.length) { - if(button === '#iso-search') { + if (button === '#iso-search') { $(button + '-loading').hide(); button = '#iso-more'; $(button + '-loading').show(); @@ -65,7 +70,7 @@ kimchi.template_add_main = function() { $(button).show(); } }, function(err) { - wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + wok.message.error(err.responseJSON.reason, '.alert-modal-container'); $(button + '-loading').hide(); $(button).show(); }); @@ -87,11 +92,11 @@ kimchi.template_add_main = function() { $('#iso-file').val(''); // 1 - Folder path text $('vm-image-local-text').val(''); // 3 - File path text $('#iso-url').val(''); // 4 - Remote folder path text - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','inline-block'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes @@ -119,16 +124,16 @@ kimchi.template_add_main = function() { //$('#iso-file-check').prop('checked', false); $('#iso-file').val(''); $('vm-image-local-text').val(''); - $('#iso-url').val(''); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','inline-block'); + $('#iso-url').val(''); + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes @@ -136,23 +141,20 @@ kimchi.template_add_main = function() { }; - $('#iso-file').on('input propertychange', function() { + $('#iso-file').on('input propertychange keyup focus cut paste click', function() { + $('#btn-template-file-create').css('display', 'inline-block'); // 1 - Folder path + $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); + $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); + setTimeout(function() { + var isValid = kimchi.template_check_path($('input#iso-file').val()); + $('input#iso-file').parent().toggleClass('has-error', !isValid); + $('#btn-template-file-create').attr('disabled', (isValid ? false : true)); + }, 0); if ($('#iso-file').val()) { - - $('#btn-template-file-create').removeAttr('disabled').css('display','inline-block'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos - - $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes - - $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes - + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos } else { $('#btn-template-file-create').attr('disabled', 'disabled'); } @@ -168,37 +170,36 @@ kimchi.template_add_main = function() { $('#iso-search').show(); } }, function(err) { - wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + wok.message.error(err.responseJSON.reason, '.alert-modal-container'); }); $('#template-add-window .modal-body .template-pager').animate({ - height: "689px" - },400); + height: "689px" + }, 400); // 1-1 local iso $('#iso-local').change(function() { - if(this.checked){ - if(currentPage === 'vm-image-local-box') { - kimchi.switchPage(currentPage, 'iso-local-box','right'); - } else if(currentPage === 'iso-remote-box') { - kimchi.switchPage(currentPage, 'iso-local-box','right'); + if (this.checked) { + if (currentPage === 'vm-image-local-box') { + kimchi.switchPage(currentPage, 'iso-local-box', 'right'); + } else if (currentPage === 'iso-remote-box') { + kimchi.switchPage(currentPage, 'iso-local-box', 'right'); } currentPage = 'iso-local-box'; - $('#template-add-window .modal-body .template-pager').animate({ + $('#template-add-window .modal-body .template-pager').animate({ height: "689px" - },400); + }, 400); initLocalIsoField(); initIsoFileField(); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','inline-block'); // 1 - Folder path + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos - + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos kimchi.listIsos(function(isos) { if (isos && isos.length) { @@ -208,14 +209,14 @@ kimchi.template_add_main = function() { $('#iso-search').show(); } }, function(err) { - wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + wok.message.error(err.responseJSON.reason, '.alert-modal-container'); }); } }); $('#iso-search').click(function() { var settings = { - content : i18n['KCHTMPL6002M'] + content: i18n['KCHTMPL6002M'] }; wok.confirm(settings, function() { $('#iso-search').hide(); @@ -226,7 +227,7 @@ kimchi.template_add_main = function() { $('#iso-more').click(function() { var settings = { - content : i18n['KCHTMPL6002M'] + content: i18n['KCHTMPL6002M'] }; wok.confirm(settings, function() { $('#iso-more').hide(); @@ -255,17 +256,18 @@ kimchi.template_add_main = function() { $('#list-local-iso [type="checkbox"]').prop('checked', $(this).prop('checked')); if ($(this).prop('checked')) { $('#iso-file').val(''); + $('#iso-file').parent().removeClass('has-error'); $('vm-image-local-text').val(''); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').removeAttr('disabled').css('display','inline-block'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos } else { $('#btn-template-local-iso-create').attr('disabled', 'disabled'); @@ -273,20 +275,21 @@ kimchi.template_add_main = function() { }); $('#list-local-iso').on('click', '[type="checkbox"]', function() { + $('#iso-file').parent().removeClass('has-error'); var checkedLength = $('#list-local-iso [type="checkbox"]:checked').length; $('#iso-file').val(''); $('vm-image-local-text').val(''); $('#iso-url').val(''); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','inline-block'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos if (checkedLength) { $('#btn-template-local-iso-create').removeAttr('disabled'); var length = $('#list-local-iso [type="checkbox"]').length; @@ -306,11 +309,12 @@ kimchi.template_add_main = function() { var isoFile = $('#iso-file').val(); $('vm-image-local-text').val(''); if (!kimchi.template_check_path(isoFile)) { + wok.message.error(err.responseJSON.reason, '.alert-modal-container'); wok.message.error.code('KCHAPI6003E'); return; } var data = { - "cdrom" : isoFile + "cdrom": isoFile }; addTemplate(data); }); @@ -331,21 +335,20 @@ kimchi.template_add_main = function() { $('#iso-remote').attr("disabled", false).css('cursor', 'pointer'); $('#iso-remote').change(function() { if (this.checked) { - if(currentPage === 'iso-local-box') { // slide twice - kimchi.switchPage(currentPage, 'iso-remote-box','left'); - } else if(currentPage === 'vm-image-local-box') { // slide once - kimchi.switchPage(currentPage, 'iso-remote-box','left'); + if (currentPage === 'iso-local-box') { // slide twice + kimchi.switchPage(currentPage, 'iso-remote-box', 'left'); + } else if (currentPage === 'vm-image-local-box') { // slide once + kimchi.switchPage(currentPage, 'iso-remote-box', 'left'); } currentPage = 'iso-remote-box'; $('#template-add-window .modal-body .template-pager').animate({ height: "635px" - },400); + }, 400); initRemoteIsoField(); initIsoUrlField(); kimchi.listDistros(function(isos) { showRemoteIsoField(isos); - }, function() { - }); + }, function() {}); } }); }; @@ -363,15 +366,15 @@ kimchi.template_add_main = function() { $('vm-image-local-text').val(''); $('#iso-url').val(''); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','inline-block'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes @@ -409,17 +412,18 @@ kimchi.template_add_main = function() { $('#iso-file').val(''); $('vm-image-local-text').val(''); - $('#iso-url').val(''); + $('#iso-url').val(''); + $('#iso-url').parent().removeClass('has-error'); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').removeAttr('disabled').css('display','inline-block'); // 5 - Remote selected isos + $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos } else { $('#btn-template-remote-iso-create').attr('disabled', 'disabled'); @@ -427,6 +431,7 @@ kimchi.template_add_main = function() { }); $('#list-remote-iso').on('click', '[type="checkbox"]', function() { + $('#iso-url').parent().removeClass('has-error'); var checkedLength = $('#list-remote-iso [type="checkbox"]:checked').length; if (checkedLength) { $('#btn-template-remote-iso-create').removeAttr('disabled'); @@ -437,15 +442,15 @@ kimchi.template_add_main = function() { $('vm-image-local-text').val(''); $('#iso-url').val(''); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').removeAttr('disabled').css('display','inline-block'); // 5 - Remote selected isos + $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos } else { $('#select-all-remote-iso').prop('checked', false); @@ -464,62 +469,70 @@ kimchi.template_add_main = function() { $('vm-image-local-text').val(''); $('#iso-url').val(''); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','none'); // 3 - File path + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled','disabled').css('display','inline-block'); // 4 - Remote folder path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos } - $('#iso-url').on('input propertychange', function() { - if ($('#iso-url').val()) { - $('#btn-template-url-create').removeAttr('disabled'); - } else { - $('#btn-template-url-create').attr('disabled', 'disabled'); - } + $('#iso-url').on('input propertychange keyup focus cut paste click', function() { + $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); + $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); + setTimeout(function() { + var isValid = kimchi.template_check_url($('input#iso-url').val()); + $('input#iso-url').parent().toggleClass('has-error', !isValid); + $('#btn-template-url-create').attr('disabled', (isValid ? false : true)); + }, 0); }); - $('#vm-image-local').change(function(){ - if(this.checked) { - if(currentPage === 'iso-local-box') { - kimchi.switchPage(currentPage, 'vm-image-local-box','left'); - } else if(currentPage === 'iso-remote-box') { - kimchi.switchPage(currentPage, 'vm-image-local-box','right'); + $('#vm-image-local').change(function() { + if (this.checked) { + if (currentPage === 'iso-local-box') { + kimchi.switchPage(currentPage, 'vm-image-local-box', 'left'); + } else if (currentPage === 'iso-remote-box') { + kimchi.switchPage(currentPage, 'vm-image-local-box', 'right'); } currentPage = 'vm-image-local-box'; $('#template-add-window .modal-body .template-pager').animate({ height: "100px" - },400); + }, 400); - $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display','none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display','inline-block'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display','none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display','none'); // 5 - Remote selected isos + $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path + $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs + $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'inline-block'); // 3 - File path + $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path + $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos } }); - $('input', '#vm-image-local-box').on('keyup cut paste', function(){ - setTimeout(function(){ + $('input', '#vm-image-local-box').on('input propertychange keyup focus cut paste click', function() { + setTimeout(function() { var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val()); - $('input', '#vm-image-local-box').toggleClass('invalid-field', !isValid); + $('input', '#vm-image-local-box').parent().toggleClass('has-error', !isValid); $('#vm-image-local-box-button').attr('disabled', (isValid ? false : true)); }, 0); }); $('button', $('#vm-image-local-box')).button({ disabled: true - }).click(function(){ + }).click(function() { $('input', '#vm-image-local-box').prop('disabled', true); $(this).button('option', { label: i18n['KCHAPI6008M'], disabled: true }); - addTemplate({disks:[{base:$('input', '#vm-image-local-box').val()}]}, function(){ + addTemplate({ + disks: [{ + base: $('input', '#vm-image-local-box').val() + }] + }, function() { $('input', '#vm-image-local-box').prop('disabled', false); $('button', $('.body', '#vm-image-local-box')).button('option', { label: i18n['KCHAPI6005M'], @@ -535,7 +548,7 @@ kimchi.template_add_main = function() { return; } var data = { - "cdrom" : isoUrl + "cdrom": isoUrl }; addTemplate(data); }); @@ -543,13 +556,13 @@ kimchi.template_add_main = function() { //do create var addTemplate = function(data, callback) { kimchi.createTemplate(data, function() { - if(callback) callback(); + if (callback) callback(); kimchi.doListTemplates(); wok.window.close(); wok.topic('templateCreated').publish(); }, function(err) { - if(callback) callback(); - wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + if (callback) callback(); + wok.message.error(err.responseJSON.reason, '.alert-modal-container'); }); }; @@ -560,9 +573,9 @@ kimchi.template_add_main = function() { var successNum = 0; var addTemplate = function(isoInfo) { var data = { - "os_distro" : isoInfo.os_distro, - "os_version" : isoInfo.os_version, - "cdrom" : isoInfo.path + "os_distro": isoInfo.os_distro, + "os_version": isoInfo.os_version, + "cdrom": isoInfo.path }; kimchi.createTemplate(data, function() { successNum++; @@ -574,7 +587,7 @@ kimchi.template_add_main = function() { wok.window.close(); } }, function(err) { - wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + wok.message.error(err.responseJSON.reason, '.alert-modal-container'); }); }; if (formData.iso instanceof Array) { diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index 5791ea0..ce60af6 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -21,12 +21,18 @@ kimchi.template_edit_main = function() { var origNetworks; var templateDiskSize; $('#template-name', templateEditMain).val(kimchi.selectedTemplate); - $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) { + $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) { + $('.tab-content').css('overflow','hidden'); var target = $(this).attr('href'); - - $(target).css('left','-'+$(window).width()+'px'); + $(target).css('left','-'+$(window).width()+'px'); var left = $(target).offset().left; - $(target).css({left:left}).animate({"left":"0px"}, "10"); + $(target).css({ + left: left + }).animate({ + "left": "0px" + },400, function() { + $('.tab-content').css('overflow','visible'); + }); }); var initTemplate = function(template) { @@ -65,6 +71,7 @@ kimchi.template_edit_main = function() { return false; } enableSpice(); + $('#template-edit-graphics').selectpicker(); var initStorage = function(result) { // Gather storagepools data @@ -187,7 +194,7 @@ kimchi.template_edit_main = function() { storageDiskFormat : 'qcow2', storageIndex : storageID } - addStorageItem(storageNodeData); + addStorageItem(storageNodeData); }); }; diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index d356437..eead402 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -49,6 +49,12 @@ "KCHTMPL6002M": "$_("This may take a long time. Do you want to continue?")", "KCHTMPL6003M": "$_("This will permanently delete the template. Would you like to continue?")", + "KCHTMPL6004M": "$_("Template Name (ID)")", + "KCHTMPL6005M": "$_("OS")", + "KCHTMPL6006M": "$_("Version")", + "KCHTMPL6007M": "$_("CPUs")", + "KCHTMPL6008M": "$_("Memory")", + "KCHTMPL6009M": "$_("Actions")", "KCHVM6001M": "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index ad4ada6..46df4dc 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -28,30 +28,27 @@ <div class="modal-header"> <h4 class="modal-title">$_("Add Template")</h4> </div> - <div class="modal-body"> - <span id="alert-modal-container"></span> + <div class="modal-body"> <div class="template-modal-container"> <div> - <h5>$_("Where is the source media for this template? ")</h5> - <label class="radio-inline"> - <input type="radio" checked="checked" name="iso-source" id="iso-local" value="iso-local"> $_("Local ISO Image") - </label> - <label class="radio-inline"> - <input type="radio" name="iso-source" id="vm-image-local" value="vm-image-local"> $_("Local Image File") - </label> - <label class="radio-inline"> - <input type="radio" name="iso-source" id="iso-remote" value="iso-remote"> $_("Remote ISO Image") - </label> + <h5>$_("Where is the source media for this template? ")</h5> + <input type="radio" checked="checked" name="iso-source" id="iso-local" value="iso-local" class="wok-radio"> + <label for="iso-local">$_("Local ISO Image")</label> + <input type="radio" name="iso-source" id="vm-image-local" value="vm-image-local" class="wok-radio"> + <label for="vm-image-local">$_("Local Image File")</label> + <input type="radio" name="iso-source" id="iso-remote" value="iso-remote" class="wok-radio"> + <label for="iso-remote">$_("Remote ISO Image")</label> </div> </div> <div class="template-pager"> <div class="page-list"> <div class="page" id="iso-local-box"> + <span class="alert-modal-container"></span> <!-- 1-1-2 --> <div id="iso-file-field"> <div id="iso-file-box" class="custom-iso-field"> <div class="form-group"> - <label for="iso-file">Provide a File Path for a specific ISO image:</label> + <label for="iso-file">$_("Provide a File Path for a specific ISO image:")</label> <input type="text" class="form-control" id="iso-file" name="iso-file"> </div> </div> @@ -84,11 +81,11 @@ </h3> <dl class="iso-info"> <dt>{os_distro}</dt> - <dd>$_("OS: ")</dd> + <dd>$_("OS")</dd> <dt>{os_version}</dt> - <dd>$_("Version: ")</dd> + <dd>$_("Version")</dd> <dt>{capacity}</dt> - <dd>$_("Size: ")</dd> + <dd>$_("Size")</dd> </dl> </span> </span> @@ -104,6 +101,7 @@ </div> <div class="page" id="vm-image-local-box"> + <span class="alert-modal-container"></span> <div class="from-group"> <label for="vm-image-local-text">$_("File Path:")</label> <input type="text" class="form-control" id="vm-image-local-text" /> @@ -112,11 +110,11 @@ <!-- 1-2 --> <div class="page" id="iso-remote-box"> - + <span class="alert-modal-container"></span> <!-- 1-2-2 --> - <div id="iso-url-field" style="display: none;"> + <div id="iso-url-field" style="display: none;"> <div id="iso-url-box" class="form-group"> - <label for="iso-url">Provide a URL for a specific ISO image:</label> + <label for="iso-url">$_("Provide a URL for a specific ISO image:")</label> <input type="text" class="form-control" id="iso-url" name="iso-url"> </div> </div> @@ -152,48 +150,28 @@ </h3> <dl class="iso-info"> <dt>{os_distro}</dt> - <dd>$_("OS: ")</dd> + <dd>$_("OS")</dd> <dt>{os_version}</dt> - <dd>$_("Version: ")</dd> + <dd>$_("Version")</dd> <dt>{os_arch}</dt> - <dd>$_("Arch: ")</dd> + <dd>$_("Arch")</dd> </dl> </span> </span> </label> </li> - </script> + </script> </div> </div> </div> </div> </div> <div class="modal-footer"> - - <!-- Template from local file path --> - - <!-- TODO: Use only one button and direct action based on current form field and "page" --> - <button class="btn btn-default" id="btn-template-file-create" disabled="disabled">$_("Create")</button> - - <!-- Template from selected local isos --> - - <!-- Old: $_("Create Templates from Selected ISO") --> <button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled">$_("Create")</button> - - <!-- Template from local file path --> - <button id="vm-image-local-box-button" class="btn btn-default ui-button-primary">$_("Create")</button> - - <!-- Template from URL Iso --> - <button class="btn btn-default" id="btn-template-url-create" disabled="disabled">$_("Create")</button> - - <!-- Template from selected remote isos --> - - <!-- Old: $_("Create Templates from Selected ISO") --> <button class="btn btn-default" id="btn-template-remote-iso-create" disabled="disabled">$_("Create")</button> - <button class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button> </div> </div> -- 1.9.3