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

V1 ->V2 use combo box Add network to edit Template. Signed-off-by: Xin Ding <xinding(a)linux.vnet.ibm.com&gt; --- 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>