1:03 a.m.
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(a)ovirt.org
http://lists.ovirt.org/mailman/listinfo/kimchi-devel