[Kimchi-devel] [PATCH V2] UI: template supports networks

[Xin Ding]

V1 ->V2 use combo box

Add network to edit Template.

Signed-off-by: Xin Ding <xinding at linux.vnet.ibm.com>
---
 ui/css/theme-default/template-edit.css | 34 +++++++++++++++++++++++++++++++++-
 ui/js/src/kimchi.template_edit_main.js | 29 +++++++++++++++++++++++++++++
 ui/pages/template-edit.html.tmpl       | 21 +++++++++++++++++++--
 3 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css
index e61b2fb..ecc9106 100644
--- a/ui/css/theme-default/template-edit.css
+++ b/ui/css/theme-default/template-edit.css
@@ -20,7 +20,7 @@
  */
 #template-edit-window {
     font-size: 13px;
-    height: 400px;
+    height: 420px;
     width: 1000px;
 }
 
@@ -73,3 +73,35 @@
 .hidden-area {
     display: none;
 }
+
+.template-edit-wrapper-controls .select-list-box {
+    width: 272px;
+    max-height: 168px;
+    overflow: auto;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+}
+
+.template-edit-wrapper-controls .select-list-box>li>label {
+    display: block;
+}
+
+.template-edit-wrapper-controls .select-list-box>li>label>input[type="checkbox"] {
+    display: none;
+}
+
+.template-edit-wrapper-controls .select-list-box>li>label>.item {
+    display: block;
+    height: 41px;
+    line-height: 41px;
+    padding: 0 20px 0 40px;
+    border-bottom: 1px solid #ccc;
+    box-shadow: 0px 1px 1px #fff;
+    text-shadow: -1px -1px 1px #ddd, 1px 1px 1px #fff;
+    color: #222;
+    font-size: 12px;
+}
+
+.template-edit-wrapper-controls .select-list-box>li>label>input[type="checkbox"]:CHECKED+.item {
+    background: #f8f8f8 url(../images/theme-default/check-green.png) no-repeat 10px center;
+}
diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
index efe4a6f..ad535ee 100644
--- a/ui/js/src/kimchi.template_edit_main.js
+++ b/ui/js/src/kimchi.template_edit_main.js
@@ -43,6 +43,26 @@ kimchi.template_edit_main = function() {
             }
             kimchi.select('template-edit-storagePool-list', options);
         });
+        kimchi.listNetworks(function(result) {
+            if(result && result.length > 0) {
+                var html = '';
+                var tmpl = $('#tmpl-network').html();
+                $.each(result, function(index, network) {
+                    html += kimchi.template(tmpl, network);
+                });
+                $('#template-edit-network-list').html(html).show();
+                if(template.networks && template.networks.length > 0) {
+                    $('input[name="networks"]', templateEditForm).each(function(index, element) {
+                        var value = $(element).val();
+                        if(template.networks.indexOf(value) >= 0) {
+                            $(element).prop('checked', true);
+                        }
+                    });
+                }
+            } else {
+                $('#template-edit-network-list').hide();
+            }
+        });
     });
 
     $('#tmpl-edit-button-cancel').on('click', function() {
@@ -64,6 +84,15 @@ kimchi.template_edit_main = function() {
         });
         data['memory'] = Number(data['memory']);
         data['cpus']   = Number(data['cpus']);
+        var networks = templateEditForm.serializeObject().networks;
+        if (networks instanceof Array) {
+            data.networks = networks;
+        } else if (networks != null) {
+            data.networks = [networks];
+        } else {
+            data.networks = [];
+        }
+
         kimchi.updateTemplate($('#template-name').val(), data, function() {
             kimchi.doListTemplates();
             kimchi.window.close();
diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
index fe7314d..f7921d6 100644
--- a/ui/pages/template-edit.html.tmpl
+++ b/ui/pages/template-edit.html.tmpl
@@ -75,8 +75,6 @@
                         <input id="template-edit-memory-textbox" name="memory" type="text" />
                     </div>
                 </div>
-            </fieldset>
-            <fieldset class="template-edit-fieldset">
                 <div>
                     <div class="template-edit-wrapper-label">
                         <label>$_("Disk (GB)")</label>
@@ -85,6 +83,8 @@
                         <input id="template-edit-version-textbox" name="disks" type="text" />
                     </div>
                 </div>
+            </fieldset>
+            <fieldset class="template-edit-fieldset">
                 <div>
                     <div class="template-edit-wrapper-label">
                         <label>$_("CDROM")</label>
@@ -108,6 +108,23 @@
                         </div>
                     </div>
                 </div>
+                <div>
+                    <div class="template-edit-wrapper-label">
+                        <label>$_("Network")</label>
+                    </div>
+                    <div class="template-edit-wrapper-controls">
+                        <ul class="select-list-box" id="template-edit-network-list">
+                        </ul>
+                        <script id="tmpl-network" type="text/html">
+                            <li>
+                                <label>
+                                    <input name="networks" type="checkbox" value="{name}" />
+                                    <span class="item">{name}</span>
+                                </label>
+                            </li>
+                        </script>
+                    </div>
+                </div>
             </fieldset>
         </form>
     </div>
-- 
1.8.3.2