[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 |   18 ++++++++++++++++++
 ui/js/src/kimchi.template_add_main.js |   17 +++++++++++++++++
 ui/pages/template-add.html.tmpl       |   13 +++++++++++++
 4 files changed, 56 insertions(+), 5 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..69a00dc 100644
--- a/ui/css/theme-default/template_add.css
+++ b/ui/css/theme-default/template_add.css
@@ -290,3 +290,21 @@
                 center no-repeat;
     padding: 0 20px 0 26px;
 }
+
+#vm-image-local-box .body {
+    margin: 30px 0 0 26px;
+}
+
+#vm-image-local-box .body input {
+    margin-left: 10px;
+    padding: 3px 3px 3px 10px;
+    border: 1px solid #CCCCCC;
+    border-radius: 1px 1px 1px 1px;
+    font-size: 14px;
+    height: 30px;
+    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..ebd5402 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -332,6 +332,23 @@ 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(){
+        addTemplate({disks:[{base:$('input', '#vm-image-local-box').val()}]});
+    });
+
     $('#btn-template-url-create').click(function() {
         var isoUrl = $('#iso-url').val();
         if (!kimchi.template_check_url(isoUrl)) {
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 418c5e8..65febda 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 VM Image")</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 VM Image")</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