8:54 p.m.
On 13/05/2015 15:39, Jose Ricardo Ziviani wrote:
Signed-off-by: Jose Ricardo Ziviani
<joserz(a)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>