On 01/24/2014 08:53 AM, Rodrigo Trujillo wrote:

Hi guys,

I wonder if someone expert in UI can help me with my latest patch.
Actually, the patch: [PATCH V2 7/7] (WIP) Storagepool SCSI/FC: Draft UI    to allow user to select a LUN to new VM

You guys will find the code some TODO's and FIXME

I need to popup a window with LUN's names and allow user to select one of them. Then retrieve this selection. I think this is not that complicated, but I could not research deeper how to do it. See an example below:

*********************************
                                       (X) Close
Select Host

() Lun 1
() Lun 2
() Lun xxx

----------------------------------------
                                  ________
                                  | Select |
*********************************

Hi Rodrigo, the general process to add a pop-up window is like:

1) Add the content page, related files include HTML, JS, and CSS.

2) Add a hook to trigger the window in parent page.

3) Add other corresponding content including Makefile, translation, etc.

To quickly make it, you can copy existing window page file (like guest-add.html.tmpl, guest-edit.html.tmpl, etc.) and then modify based-on it. Here let me give you a draft code fragment.

create ui/pages/lun-select.html.tmpl

<div id="lun-select-window" class="window">
    <form id="form-lun-select">
        <header>
          <h1 class="title">$_("Select LUN")</h1>
        <div class="close">X</div>
</header>
<div class="content">
            <fieldset class="lun-select-fieldset">
                <legend>$_("Select a Name")</legend>
                <div id="lun-select-names">

                    ...
                </div>
            </fieldset>
        </div>
        <footer>
            <div class="btn-group">
                <button id="lun-select-button-select">$_("Select")</button>
            </div>
        </footer>
    </form>
</div>

create ui/js/src/kimchi.lun_select_main.js

kimchi.lun_select_main = function() {
    var lunSelectForm = $('#lun-select-form');
    var selectButton = $('#lun-select-button-select');

    kimchi.listLUNs(function(luns) {
        $.each(luns, function(i, lun) {
           // Create radio button and append it to DOM node
           // e.g. $('<input id="lun-name-radio-' + i + '" type="radio" value="' + lun + '"><label for="lun-name-radio-' + i +'">' + lun + '</label>').appendTo('#lun-select-names')
        });
    });

    var submitForm = function(event) {
        $(selectButton).prop('disabled', true);
        var selected = $('input[checked="true"]', lunSelectForm).val();
        // Save to a kimchi scoped property
        kimchi.selecteLUN = selected;
        kimchi.window.close();
        event.preventDefault();
    };

    $(lunSelectForm).on('submit', submitForm);
    $(selectButton).on('click', submitForm);
};

create ui/css/theme-default/lun-select.css

/* Please refer to similar CSS files like guest-edit.css. */

Update ui/pages/Makefile.am

add one line in proper position:

    lun-select.html.tmpl \

Update po file

(optional) add related i18n variables in ui/pages/i18n.html.tmpl

Appreciate any help

Regards,
Rodrigo

_______________________________________________
Kimchi-devel mailing list
Kimchi-devel@ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel