Signed-off-by: Jose Ricardo Ziviani <joserz(a)linux.vnet.ibm.com>
---
ui/js/src/kimchi.guest_edit_main.js | 74 ++++++++++++++++++++++++++++++-------
ui/pages/guest-edit.html.tmpl | 6 ++-
2 files changed, 64 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..b1dca96 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();
+ }
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);
});
$(".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,10 +264,41 @@ 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]);
}
});
});
+ $(".body").on("keyup", "input:text",
function(event) {
+ var text = $(this).val().replace(/:/g, '');
+ var newText = '';
+ for (var i = 0; i < text.length; i++) {
+ if (i > 0 && i % 2 == 0) {
+ newText += ':';
+ }
+ newText += text[i];
+ }
+ $(this).val(newText);
+ });
+ $(".body").on("keydown", "input:text",
function(event) {
+ var keycode = event.keyCode || event.which;
+ if (keycode == 37 || // left
+ keycode == 39 || // right
+ keycode == 46 || // del
+ keycode == 8 || // backspace
+ keycode == 9 ) { // tab
+ return;
+ }
+ var character = String.fromCharCode(keycode);
+ if (character.match(/[^0-9a-fA-F]/)) {
+ event.preventDefault();
+ return;
+ }
+ if ($(this).val().length == 17) {
+ event.preventDefault();
+ return;
+ }
+ });
};
var setupPermission = function() {
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>
--
1.9.1