The way you did it, the user can add multiples equals networks. But Kimchi accepts just different networks. So I can add multiple equals networks but only one will be there. Isn't there a combo box in which user can select multiple entries? Or we can only expose the used networks (like a label) and add a edit icon aside. When clicking on edit icon a pop list all networks will be shown in a check box view. And then the user can add/remove networks by selecting them Any other idea? On 01/06/2014 06:30 AM, Xin Ding wrote:

Add network to edit Template.

Signed-off-by: Xin Ding <xinding@linux.vnet.ibm.com> --- ui/css/theme-default/template-edit.css | 37 ++++++++++++++++++++++--- ui/js/src/kimchi.template_edit_main.js | 50 ++++++++++++++++++++++++++++++++++ ui/pages/template-edit.html.tmpl | 38 ++++++++++++++++++++++++-- 3 files changed, 119 insertions(+), 6 deletions(-)

diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css index e61b2fb..360395d 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: 460px; width: 1000px; }

@@ -59,9 +59,9 @@ width: 250px; }

-.template-edit-wrapper-controls > .dropdown { - margin: 5px 0 0 1px; - width: 250px; +.template-edit-wrapper-controls .dropdown { + margin: 5px 0 0 0; + width: 245px; }

.template-edit-wrapper-controls input[type="text"][disabled] { @@ -73,3 +73,32 @@ .hidden-area { display: none; } + +.template-edit-wrapper-controls .delete { + display: inline-block; + width: 22px; + height: 22px; + line-height: 20px; + background: #ff0000; + -webkit-border-radius: 15px; + border-radius: 15px; + text-align: center; + color: #fff; + font-weight: bold; + font-size: 24px; + margin-top: 15px; + cursor: pointer; +} + +.template-edit-wrapper-controls .link { + display: inline-block; + font-size: 14px; + height: 40px; + line-height: 40px; + color: #06C; + margin: 0 5px; + font-weight: bold; + text-shadow: -1px -1px 1px #eaeaea, 1px 1px 1px #fff; + cursor: pointer; + text-decoration: underline; +} diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index efe4a6f..94a8154 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -21,6 +21,7 @@ kimchi.template_edit_main = function() { var templateEditForm = $('#form-template-edit'); var origDisks; + var networkIndex = 0; $('#template-name', templateEditForm).val(kimchi.selectedTemplate); kimchi.retrieveTemplate(kimchi.selectedTemplate, function(template) { origDisks = template.disks; @@ -43,6 +44,45 @@ kimchi.template_edit_main = function() { } kimchi.select('template-edit-storagePool-list', options); }); + kimchi.listNetworks(function(result) { + var options = []; + if (result && result.length) { + $.each(result, function(index, network) { + options.push({ + label: network.name, + value: network.name + }); + }); + } + $('#template-edit-network').val(template.networks[0]); + kimchi.select('template-edit-network-list', options); + + var addNetwork = function(value) { + networkIndex++; + var template = $('#tmpl-network').html(); + var html = kimchi.template(template, {index: networkIndex}); + $('#more-network-field').append(html); + if(value) { + $('#template-edit-network' + networkIndex).val(value); + } + kimchi.select('template-edit-network-list' + networkIndex, options); + $('#network-field' + networkIndex + ' .delete').on('click', function() { + $(this).parent().remove(); + }); + }; + var l = template.networks.length; + if(l > 1) { + var i; + for(i=1; i<l; i++) { + addNetwork(template.networks[i]); + } + } + + $('#template-edit-network-add').on('click', function() { + addNetwork('default'); + }); + + }); });

$('#tmpl-edit-button-cancel').on('click', function() { @@ -64,6 +104,16 @@ kimchi.template_edit_main = function() { }); data['memory'] = Number(data['memory']); data['cpus'] = Number(data['cpus']); + + var networks = []; + $('input[name="networks"]', templateEditForm).each(function(index, element) { + var value = $(element).val(); + if(value && networks.indexOf(value) < 0) { + networks.push(value); + } + }); + data.networks = 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..4c6e17e 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,40 @@ </div> </div> </div> + <div> + <div class="template-edit-wrapper-label"> + <label>$_("Network")</label> + </div> + <div class="template-edit-wrapper-controls"> + <div> + <div class="btn dropdown popable"> + <input id="template-edit-network" name="networks" type="hidden" /> + <span class="text" id="template-edit-network-label"></span><span class="arrow"></span> + <div class="popover" style="width: 100%"> + <ul class="select-list" id="template-edit-network-list" data-target="template-edit-network" data-label="template-edit-network-label"> + </ul> + </div> + </div> + </div> + <div id="more-network-field"></div> + <script id="tmpl-network" type="text/html"> + <div class="network-field" id="network-field{index}"> + <div class="btn dropdown popable"> + <input id="template-edit-network{index}" name="networks" type="hidden" /> + <span class="text" id="template-edit-network-label{index}"></span><span class="arrow"></span> + <div class="popover" style="width: 100%"> + <ul class="select-list" id="template-edit-network-list{index}" data-target="template-edit-network{index}" data-label="template-edit-network-label{index}"> + </ul> + </div> + </div> + <a class="delete">-</a> + </div> + </script> + <div> + <a id="template-edit-network-add" class="link">Add one more network</a> + </div> + </div> + </div> </fieldset> </form> </div>