[Kimchi-devel] [PATCH 4/5] Implement frontend code to edit MAC address of a guest

11 May 2015

Signed-off-by: Jose Ricardo Ziviani <joserz@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

    