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

[Aline Manera]

On 13/05/2015 15:39, Jose Ricardo Ziviani wrote:
> Signed-off-by: Jose Ricardo Ziviani <joserz at 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>