[Kimchi-devel] Help from UI experts to my latest patch

[Hongliang Wang]

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 at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140124/75e026a2/attachment.html>