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