[Kimchi-devel] [PATCH] [Kimchi] Added loading icon and 'Creating' for create template

[Socorro Stoppler]

Signed-off-by: Socorro Stoppler <socorro at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.template_add_main.js | 25 +++++++++++++++++++------
 ui/pages/template-add.html.tmpl       | 16 ++++++++--------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index 38a8f5b..79adc29 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";
+    $('.wok-mask').removeClass('hidden');
     kimchi.deepScanHandler = null;
     var isos = [];
     var local_isos = [];
@@ -60,7 +61,6 @@ kimchi.template_add_main = function() {
 
         // Resets input fields and hide other buttons
         $('#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
@@ -95,7 +95,6 @@ kimchi.template_add_main = function() {
 
     var initIsoFileField = function() {
         $('#iso-file').val('');
-        $('vm-image-local-text').val('');
         $('#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
@@ -131,9 +130,13 @@ kimchi.template_add_main = function() {
             } else {
                 $('#iso-search').show();
             }
+            $('.wok-mask').fadeOut(100, function() {});
         });
     }, function(err) {
         wok.message.error(err.responseJSON.reason, '#local-iso-error-container');
+        $('.wok-mask').fadeOut(300, function() {
+            $('.wok-mask').addClass('hidden');
+        });
     });
 
     $('#template-add-window .modal-body .template-pager').animate({
@@ -217,7 +220,6 @@ kimchi.template_add_main = function() {
         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
 
@@ -232,7 +234,6 @@ kimchi.template_add_main = 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
@@ -250,11 +251,17 @@ kimchi.template_add_main = function() {
     });
 
     $('#btn-template-local-iso-create').click(function() {
+        $('input', '#iso-file-box').prop('disabled', true);
+        $('#btn-template-local-iso-create').text(i18n['KCHAPI6008M']);
+        $('#btn-template-local-iso-create').prop('disabled', true);
         submitIso();
     });
 
     $('#btn-template-file-create').click(function() {
         var isoFile = $('#iso-file').val();
+        $('input', '#iso-file-box').prop('disabled', true);
+        $('#btn-template-file-create').text(i18n['KCHAPI6008M']);
+        $('#btn-template-file-create').prop('disabled', true);
         if (!kimchi.template_check_path(isoFile)) {
             wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container');
             return;
@@ -262,7 +269,11 @@ kimchi.template_add_main = function() {
         var data = {
             "source_media": {"type": "disk", "path": isoFile}
         };
-        addTemplate(data);
+        addTemplate(data, function() {
+            $('input', '#iso-file-box').prop('disabled', false);
+            $('#btn-template-file-create').text(i18n['KCHAPI6005M']);
+            $('#btn-template-file-create').prop('disabled', false);
+        });
     });
 
     var enabledRemoteIso = function() {
@@ -285,7 +296,6 @@ kimchi.template_add_main = function() {
         $('#select-all-remote-iso').prop('checked', false);
 
         $('#iso-file').val('');
-        $('vm-image-local-text').val('');
         $('#iso-url').val('');
 
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
@@ -369,6 +379,9 @@ kimchi.template_add_main = function() {
                     }
                 }, function(err) {
                     wok.message.error(err.responseJSON.reason, '#alert-modal-container');
+                    $('input', '#iso-file-box').prop('disabled', false);
+                    $('#btn-template-local-iso-create').text(i18n['KCHAPI6005M']);
+                    $('#btn-template-local-iso-create').prop('disabled', false);
                 });
             };
             if (formData.iso instanceof Array) {
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index cecead7..8cdb431 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -34,6 +34,14 @@
                 <div class="template-pager">
                     <div class="page-list">
                         <div class="page" id="iso-local-box">
+                            <div class="wok-mask">
+                                <div class="wok-mask-loader-container">
+                                    <div class="wok-mask-loading">
+                                        <div class="wok-mask-loading-icon"></div>
+                                        <div class="wok-mask-loading-text">$_("Loading...")</div>
+                                    </div>
+                                </div>
+                            </div>
                                 <!-- 1-1-2 -->
                                 <div id="iso-file-field">
                                     <div id="iso-file-box" class="custom-iso-field">
@@ -95,14 +103,6 @@
                                     </div>
                                 </div>
                         </div>
-
-                        <div class="page" id="vm-image-local-box">
-                            <div class="from-group">
-                                <label for="vm-image-local-text">$_("File Path:")</label>
-                                <input type="text" class="form-control" id="vm-image-local-text" />
-                            </div>
-                        </div>
-
         </div>
     </div>
     <div class="modal-footer">
-- 
2.5.0