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

14 Dec 2015

From: samhenri <samuel.guimaraes@eldorado.org.br>

Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
 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

    

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

sguimaraes943＠gmail.com