On 13/05/2015 15:39, Jose Ricardo Ziviani wrote:
Signed-off-by: Jose Ricardo Ziviani <joserz@linux.vnet.ibm.com> --- ui/js/src/kimchi.guest_edit_main.js | 44 +++++++++++++++++++++++++------------ ui/pages/guest-edit.html.tmpl | 6 +++-- 2 files changed, 34 insertions(+), 16 deletions(-)
diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index 9c088aa..90a9bb4 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -164,6 +164,7 @@ kimchi.guest_edit_main = function() { }).click(function(evt){ evt.preventDefault(); addItem({ + id: -1, mac: "", network: "", type: "network", @@ -171,12 +172,18 @@ kimchi.guest_edit_main = function() { editMode: "" }); }); - var toggleEdit = function(item, on){ - $("label", item).toggleClass("hide", on); - $("select", item).toggleClass("hide", !on); + var toggleEdit = function(item, on, itemId){ + $("#label-mac-" + itemId, item).toggleClass("hide", on); + $("#edit-mac-" + itemId, item).toggleClass("hide", !on); + $("#label-network-" + itemId, item).toggleClass("hide", false); + $("select", item).toggleClass("hide", true); $(".action-area", item).toggleClass("hide"); };
var addItem = function(data) { + if (data.id == -1) { + var item = $(this).parent().parent(); + data.id = $(".item", item.parent()).size(); + }
Isn't there a way to get the element using an ID? I think this .parent().parent() may be dangerous while changing the UI we could get the wrong element.
var itemNode = $.parseHTML(kimchi.substitute($('#interface-tmpl').html(),data)); $(".body", "#form-guest-edit-interface").append(itemNode); $("select", itemNode).append(networkOptions); @@ -188,12 +195,12 @@ kimchi.guest_edit_main = function() { $("select", itemNode).val(data.network); } $(".edit", itemNode).button({ - disabled: true, + disabled: false, icons: { primary: "ui-icon-pencil" }, text: false }).click(function(evt){
evt.preventDefault(); - toggleEdit($(this).parent().parent(), true); + toggleEdit($(this).parent().parent(), true, data.id); });
Same here.
$(".delete", itemNode).button({ icons: { primary: "ui-icon-trash" }, @@ -213,21 +220,29 @@ kimchi.guest_edit_main = function() { var item = $(this).parent().parent(); var interface = { network: $("select", item).val(), - type: "network" + type: "network", + mac: $(":text", item).val() }; - var postUpdate = function(){ - $("label", item).text(interface.network); - toggleEdit(item, false); + var postUpdate = function(mac){ + $("#label-network-" + data.id, item).text(interface.network); + $("#label-mac-" + data.id, item).text(mac); + toggleEdit(item, false, data.id); }; if(item.prop("id")==""){ kimchi.createGuestInterface(kimchi.selectedGuest, interface, function(data){ item.prop("id", data.mac); - postUpdate(); + postUpdate(data.mac); }); }else{ - kimchi.updateGuestInterface(kimchi.selectedGuest, item.prop("id"), interface, function(){ - postUpdate(); - }); + if (item.prop('id') == interface.mac) { + toggleEdit(item, false, data.id); + } else { + kimchi.updateGuestInterface(kimchi.selectedGuest, item.prop('id'), + interface, function(data){ + item.prop("id", data.mac); + postUpdate(data.mac); + }); + } } }); $(".cancel", itemNode).button({ @@ -236,7 +251,7 @@ kimchi.guest_edit_main = function() { }).click(function(evt){ evt.preventDefault(); var item = $(this).parent().parent(); - $("label", item).text()==="" ? item.remove() : toggleEdit(item, false); + $("label", item).text()==="" ? item.remove() : toggleEdit(item, false, data.id); }); }; var networkOptions = ""; @@ -249,6 +264,7 @@ kimchi.guest_edit_main = function() { for(var i=0;i<data.length;i++){ data[i].viewMode = ""; data[i].editMode = "hide"; + data[i].id = i; addItem(data[i]); } }); diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index 7568fce..4787735 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -227,14 +227,16 @@ <script id="interface-tmpl" type="text/html"> <div class="item" id="{mac}"> <span class="cell"> - <label class="{viewMode}">{network}</label> + <label id="label-network-{id}" class="{viewMode}">{network}</label> <select class="{editMode}"></select> </span> <span class="cell"> <span>{type}</span> </span> <span class="cell"> - <span>{mac}</span> + <label id="label-mac-{id}" class="{viewMode}">{mac}</label> + <input class="{editMode}" type="text" + id="edit-mac-{id}" name="{mac}" value="{mac}" /> </span> <span class="action-area {editMode}"> <button class="save"></button><button class="cancel"></button>