<html>
  <head>
    <meta content="text/html; charset=windows-1252"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    Hi Socorro,<br>
    <br>
    The loading icon keeps showing on "Image Template" view even with
    the ISOs listed there.<br>
    <br>
    <img src="cid:part1.A8AC6D2E.EB3A33F5@linux.vnet.ibm.com" alt=""><br>
    <br>
    <br>
    <div class="moz-cite-prefix">On 06/20/2016 07:09 PM, Socorro
      Stoppler wrote:<br>
    </div>
    <blockquote
      cite="mid:1466460547-13180-1-git-send-email-socorro@linux.vnet.ibm.com"
      type="cite">
      <pre wrap="">v2:
Add loading icon when switching back to image src radio button
per feedback from pvital

v1:
Add UI netboot support for adding templates

Signed-off-by: Socorro Stoppler <a class="moz-txt-link-rfc2396E" href="mailto:socorro@linux.vnet.ibm.com">&lt;socorro@linux.vnet.ibm.com&gt;</a>
---
 ui/js/src/kimchi.template_add_main.js | 74 ++++++++++++++++++++++++++++++++---
 ui/pages/template-add.html.tmpl       | 29 +++++++++-----
 2 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index 948f710..28057a7 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -17,6 +17,7 @@
  */
 kimchi.template_add_main = function() {
     "use strict";
+    var currentPage = 'iso-local-box';
     $('#loading-isos').removeClass('hidden');
     kimchi.deepScanHandler = null;
     var isos = [];
@@ -53,6 +54,7 @@ kimchi.template_add_main = function() {
         $('#local-iso-field').hide();
         $('#select-all-local-iso').prop('checked', false);
         $('#btn-template-local-iso-create').attr('disabled', 'disabled');
+        $('#btn-template-netboot-create').attr('disabled', 'disabled');
         $('#iso-search').hide();
         $('#iso-more').hide();
         $('#iso-search-loading').hide();
@@ -64,6 +66,7 @@ kimchi.template_add_main = function() {
         $('#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
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
         $('#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<a class="moz-txt-link-rfc2396E" href="mailto:]').prop('checked',false);//Falsetoalllistcheckboxes};@@-98,6+101,7@@kimchi.template_add_main=function(){$('#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-SelectedISOs+$('#btn-template-netboot-create').attr('disabled','disabled').css('display','none');//3-Netboot$('#select-all-local-iso,#select-all-remote-iso').prop('checked',false);//Falsetoallselect-allcheckboxes$('#list-local-iso[type=">"]').prop('checked', false); // False to all list checkboxes
     };
@@ -98,6 +101,7 @@ kimchi.template_add_main = function() {
         $('#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-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes
         $('#list-local-iso [type="</a>checkbox"], #list-remote-iso [type="checkbox<a class="moz-txt-link-rfc2396E" href="mailto:]').prop('checked',false);//Falsetoalllistcheckboxes};@@-116,6+120,7@@kimchi.template_add_main=function(){}else{$('#btn-template-file-create').attr('disabled','disabled');}+$('#btn-template-netboot-create').attr('disabled','disabled').css('display','none');//3-Netboot});initLocalIsoField();@@-222,12+227,11@@kimchi.template_add_main=function(){$('#iso-file').parent().removeClass('has-error');$('#btn-template-file-create').attr('disabled','disabled').css('display','none');//1-Folderpath-$('#btn-template-local-iso-create').removeAttr('disabled').css('display','inline-block');//2-SelectedISOs-}else{$('#btn-template-local-iso-create').attr('disabled','disabled');}+$('#btn-template-netboot-create').attr('disabled','disabled').css('display','none');//3-Netboot});$('#list-local-iso').on('click','[type=">"]').prop('checked', false); // False to all list checkboxes
     };
@@ -116,6 +120,7 @@ kimchi.template_add_main = function() {
         } else {
             $('#btn-template-file-create').attr('disabled', 'disabled');
         }
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
     });

     initLocalIsoField();
@@ -222,12 +227,11 @@ kimchi.template_add_main = function() {
             $('#iso-file').parent().removeClass('has-error');

             $('#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
-
         } else {
             $('#btn-template-local-iso-create').attr('disabled', 'disabled');
         }
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
     });

     $('#list-local-iso').on('click', '[type="</a>checkbox"]', function() {
@@ -238,6 +242,7 @@ kimchi.template_add_main = function() {

         $('#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-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot

         if (checkedLength) {
             $('#btn-template-local-iso-create').removeAttr('disabled');
@@ -250,6 +255,16 @@ kimchi.template_add_main = function() {
         }
     });

+    $('#btn-template-netboot-create').click(function() {
+        var data = {
+            "source_media": {"type": "netboot"}
+        };
+        addTemplate(data, function() {
+            $('#btn-template-netboot-create').text(i18n['KCHAPI6005M']);
+            $('#btn-template-netboot-create').prop('disabled', false);
+        });
+    });
+
     $('#btn-template-local-iso-create').click(function() {
         $('input', '#iso-file-box').prop('disabled', true);
         $('#btn-template-local-iso-create').text(i18n['KCHAPI6008M']);
@@ -299,11 +314,9 @@ kimchi.template_add_main = function() {
         $('#iso-url').val('');

         $('#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-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
         $('#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<a class="moz-txt-link-rfc2396E" href="mailto:]').prop('checked',false);//Falsetoalllistcheckboxes};@@-340,6+353,57@@kimchi.template_add_main=function(){$('input#iso-url').parent().toggleClass('has-error',!isValid);},0);});++$('#image-src').change(function(){+if(this.checked){+if(currentPage==='netboot-path'){+kimchi.switchPage(currentPage,'iso-local-box','right');+}+currentPage='iso-local-box';+$('#template-add-window.modal-body.template-pager').animate({+height:">"]').prop('checked', false); // False to all list checkboxes

     };
@@ -340,6 +353,57 @@ kimchi.template_add_main = function() {
             $('input#iso-url').parent().toggleClass('has-error', !isValid);
         }, 0);
     });
+
+    $('#image-src').change(function() {
+        if (this.checked) {
+            if (currentPage === 'netboot-path') {
+                kimchi.switchPage(currentPage, 'iso-local-box', 'right');
+            }
+            currentPage = 'iso-local-box';
+            $('#template-add-window .modal-body .template-pager').animate({
+                height: "</a>635px"
+            }, 400);
+            initLocalIsoField();
+            initIsoFileField();
+            $('#loading-isos').removeClass('hidden');
+            kimchi.listIsos(function(local_isos) { //local ISOs
+                kimchi.listDistros(function(remote_isos) {  //remote ISOs
+
+                    isos = local_isos.concat(remote_isos); //all isos
+                    if (isos &amp;&amp; isos.length) {
+                        showLocalIsoField(isos);
+                        $('#iso-more').show();
+                    } else {
+                        $('#iso-search').show();
+                    }
+                    $('#loading-isos').fadeOut(100, function() {});
+                });
+            }, function(err) {
+                wok.message.error(err.responseJSON.reason, '#local-iso-error-container');
+                $('#loading-isos').fadeOut(300, function() {
+                    $('#loading-isos').addClass('hidden');
+                });
+            });
+            setupFilters();
+            enabledRemoteIso();
+        }
+    });
+
+    $('#netboot-src').change(function() {
+        if (this.checked) {
+            if (currentPage === 'iso-local-box') {
+                kimchi.switchPage(currentPage, 'netboot-path', 'left');
+            }
+            currentPage = 'netboot-path';
+            $('#template-add-window .modal-body .template-pager').animate({
+                height: "300px"
+            }, 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
+            $('#btn-template-netboot-create').removeAttr('disabled').css('display', 'inline-block'); // 3 - Netboot
+        }
+    });
+
     //do create
     var addTemplate = function(data, callback) {
         kimchi.createTemplate(data, function() {
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 4226a8f..87d6cb4 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -30,11 +30,18 @@
             &lt;div class="modal-body"&gt;
                 &lt;div class="template-modal-container"&gt;
                     &lt;div id="alert-modal-container"&gt;&lt;/div&gt;
+                    &lt;div&gt;
+                        &lt;h5&gt;$_("Where is the source media for this template? ")&lt;/h5&gt;
+                        &lt;input type="radio" checked="checked" name="iso-source" id="image-src" value="image-src" class="wok-radio"&gt;
+                        &lt;label for="image-src"&gt;$_("Image Template")&lt;/label&gt;
+                        &lt;input type="radio" name="iso-source" id="netboot-src" value="netboot-src" class="wok-radio"&gt;
+                        &lt;label for="netboot-src"&gt;$_("Netboot Template")&lt;/label&gt;
+                    &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div class="template-pager"&gt;
                     &lt;div class="page-list"&gt;
                         &lt;div class="page" id="iso-local-box"&gt;
-                            &lt;div id="loading-isos"&gt;
+                            &lt;div id="loading-isos hidden"&gt;
                                 &lt;div class="wok-mask-loader-container"&gt;
                                     &lt;div class="wok-mask-loading"&gt;
                                         &lt;div class="wok-mask-loading-icon"&gt;&lt;/div&gt;
@@ -103,16 +110,20 @@
                                     &lt;/div&gt;
                                 &lt;/div&gt;
                         &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="modal-footer"&gt;
-                &lt;button class="btn btn-default" id="btn-template-file-create" disabled="disabled"&gt;$_("Create")&lt;/button&gt;
-                &lt;button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled"&gt;$_("Create")&lt;/button&gt;
-                &lt;button class="btn btn-default" data-dismiss="modal" type="button"&gt;$_("Cancel")&lt;/button&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
+                        &lt;div class="page" id="netboot-path"&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="modal-footer"&gt;
+                    &lt;button class="btn btn-default" id="btn-template-file-create" disabled="disabled"&gt;$_("Create")&lt;/button&gt;
+                    &lt;button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled"&gt;$_("Create")&lt;/button&gt;
+                    &lt;button class="btn btn-default" id="btn-template-netboot-create" disabled="disabled"&gt;$_("Create")&lt;/button&gt;
+                    &lt;button class="btn btn-default" data-dismiss="modal" type="button"&gt;$_("Cancel")&lt;/button&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
 &lt;script&gt;
 kimchi.template_add_main();
 &lt;/script&gt;
+&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</pre>
    </blockquote>
    <br>
  </body>
</html>