[Kimchi-devel] [PATCH 1/3] UI: Template with VM Image - Create

[huoyuxin at linux.vnet.ibm.com]

From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>

Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
 ui/css/theme-default/form.css         |   13 ++++++++-----
 ui/css/theme-default/template_add.css |   21 +++++++++++++++++++++
 ui/js/src/kimchi.template_add_main.js |   32 +++++++++++++++++++++++++++++++-
 ui/pages/template-add.html.tmpl       |   13 +++++++++++++
 4 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/ui/css/theme-default/form.css b/ui/css/theme-default/form.css
index 9a442fb..523d42d 100644
--- a/ui/css/theme-default/form.css
+++ b/ui/css/theme-default/form.css
@@ -43,13 +43,16 @@
     padding: 0 5px;
 }
 
-
-.form-section input.invalid-field[type="text"] {
-    border-color: #FF4444!important;
-}
-
 .text-help {
     font-size: 12px;
     color: #333;
     margin: 0 0 5px 5px;
 }
+
+input.invalid-field[type="text"] {
+    border-color: #FF4444!important;
+}
+
+input.invalid-field[type="text"][disabled] {
+    border-color: #666666!important;
+}
diff --git a/ui/css/theme-default/template_add.css b/ui/css/theme-default/template_add.css
index 15f1dca..e58bccb 100644
--- a/ui/css/theme-default/template_add.css
+++ b/ui/css/theme-default/template_add.css
@@ -290,3 +290,24 @@
                 center no-repeat;
     padding: 0 20px 0 26px;
 }
+
+#vm-image-local-box .body {
+    margin: 30px 0 0 26px;
+}
+
+#vm-image-local-box .body input {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-left: 1px solid #BBBBBB;
+    border-radius: 5px 5px 5px 5px;
+    border-top: 1px solid #BBBBBB;
+    box-shadow: 2px 2px 2px #EEEEEE inset;
+    color: #333333;
+    font-size: 13px;
+    padding: 10px;
+    margin-left: 10px;
+    width: 600px;
+}
+
+#vm-image-local-box .body button {
+    margin-left: 10px;
+}
diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index 0306571..2d60888 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -332,6 +332,34 @@ kimchi.template_add_main = function() {
         }
     });
 
+    $('#vm-image-local').click(function(){
+        kimchi.switchPage('iso-type-box', 'vm-image-local-box');
+    });
+    $('#vm-image-local-box-back').click(function(){
+        kimchi.switchPage('vm-image-local-box', 'iso-type-box', 'right');
+    });
+    $('input', '#vm-image-local-box').on('keyup', function(){
+        var isValid = kimchi.template_check_path($(this).val());
+        $(this).toggleClass('invalid-field', !isValid);
+        $('button', $('.body', '#vm-image-local-box')).button(isValid ? "enable" : "disable");
+    });
+    $('button', $('.body', '#vm-image-local-box')).button({
+        disabled: true
+    }).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(){
+            $('input', '#vm-image-local-box').prop('disabled', false);
+            $('button', $('.body', '#vm-image-local-box')).button('option', {
+                label: i18n['KCHAPI6005M'],
+                disabled: false
+            });
+        });
+    });
+
     $('#btn-template-url-create').click(function() {
         var isoUrl = $('#iso-url').val();
         if (!kimchi.template_check_url(isoUrl)) {
@@ -345,12 +373,14 @@ kimchi.template_add_main = function() {
     });
 
     //do create
-    var addTemplate = function(data) {
+    var addTemplate = function(data, callback) {
         kimchi.createTemplate(data, function() {
+            if(callback) callback();
             kimchi.doListTemplates();
             kimchi.window.close();
             kimchi.topic('templateCreated').publish();
         }, function(err) {
+            if(callback) callback();
             kimchi.message.error(err.responseJSON.reason);
         });
     };
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 418c5e8..75bb0ed 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -39,6 +39,9 @@
                         <a id="iso-local" class="local">$_("Local ISO Image")</a>
                     </li>
                     <li>
+                        <a id="vm-image-local" class="local">$_("Local Image File")</a>
+                    </li>
+                    <li>
                         <a id="iso-remote" class="remote">$_("Remote ISO Image")</a>
                     </li>
                 </ul>
@@ -121,6 +124,16 @@
 
             </div>
 
+            <div class="page" id="vm-image-local-box">
+                <header>
+                    <a class="back" id="vm-image-local-box-back"></a>
+                    <h2 class="step-title">$_("Local Image File")</h2>
+                </header>
+                <div class="body">
+                    <span>File Path:</span><input type="text"><button class="ui-button-primary">$_("Create")</button>
+                </div>
+            </div>
+
             <!-- 1-2 -->
             <div class="page" id="iso-remote-box">
                 <header>
-- 
1.7.1