[Toaster] [PATCH] toaster: projectconf Add feature for free form IMAGE_FSTYPES
Barros Pena, Belen
belen.barros.pena at intel.com
Fri Nov 20 01:26:28 PST 2015
On 19/11/2015 18:38, "toaster-bounces at yoctoproject.org on behalf of
Michael Wood" <toaster-bounces at yoctoproject.org on behalf of
michael.g.wood at intel.com> wrote:
>Add feature to the projectconf page to allow free form input of
>IMAGE_FSTYPES. Sometimes a recipe can provide an IMAGE_FSTYPE that isn't
>in
>the normal image_types class. So would need to be specified manually.
>
>[YOCTO #7828]
This works fine overall: the issues below are mostly related to the
validation behaviour and the text here and there.
* We should remove the placeholder text from the free text input field now
that we have a label; the placeholder text of the search field for the
known image types should now say: "Search known image types"
* The free text field validation is not firing on key up (only on submit).
Same happens for the checkboxes for the known image types: validation
doesn't seem to kick on click sometimes. For example:
1. Click the 'change' icon for the IMAGE_FSTYPES variable
2. Type 'ext3' in the free text field > You should see the message telling
you that the image type is already selected, but the message does not
appear until you click 'save'. So, do that.
3. Now deselect the ext3 checkbox in the list of known image types: the
message should disappear, but it doesn't do so until you click 'save'.
* When a validation message appears we should apply the error styles to
the free text input field, so that both the label and the field become red
like the error message
* The validation message "This image type already exists: select it from
the list above." should be replaced with "This image type is already
selected in the list above", since you can type the names of existing
image types as long as they are not already selected on the list (the
point is to prevent you from adding the same one twice inadvertently. If
you type the same image type twice in the free text field, well, on your
head be it: you are up to something strange).
* The validation message: "You must select at least one image type" should
be replaced with: "You must select at least one image type. <br /> Choose
from the list of known ones or type your own"
* Only one validation message can appear below the free text field at any
given time. To see what I mean, you can do the following:
1. Click the 'change' icon for the IMAGE_FSTYPES variable
2. Type 'ext3' in the free text field
3. Click 'save' > the "This image type already exists" appears
4. Now deselect all checkboxes in the list of know image types > the "You
must select at least one image type" message appears on top of the
previous one.
The message in 3 above should have disappeared the moment I deselected the
checkbox for ext3. Also, the message in 4 should never appear while there
are some characters in the free text field.
* 'Save' button should always be disabled when there are no checkboxes
selected and the free text field is empty. In some cases this doesn't
happen. For example:
1. Click the 'change' icon for the IMAGE_FSTYPES variable
2. Deselect all checkboxes > the "You must select at least one image type"
message appears
3. Type something in the free text field > the message disappears and the
'save' button is enabled. So far, so good
4. Delete what you typed in the free text field > the 'save' button
remains enabled, and if you click you have saved and empty value, which
should never happen
Thanks!
Belén
>
>Signed-off-by: Michael Wood <michael.g.wood at intel.com>
>---
> .../toaster/toastergui/templates/projectconf.html | 95
>+++++++++++++++++-----
> 1 file changed, 75 insertions(+), 20 deletions(-)
>
>diff --git a/bitbake/lib/toaster/toastergui/templates/projectconf.html
>b/bitbake/lib/toaster/toastergui/templates/projectconf.html
>index 30fd03e..13dde78 100644
>--- a/bitbake/lib/toaster/toastergui/templates/projectconf.html
>+++ b/bitbake/lib/toaster/toastergui/templates/projectconf.html
>@@ -36,18 +36,35 @@
> <span class="js-config-var-name
>js-config-var-managed-name">IMAGE_FSTYPES</span>
> <i class="icon-question-sign get-help" title="Formats of
>root file system images that you want to have created <br /><a
>href='http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html#va
>r-IMAGE_FSTYPES' target='_blank'>Read more in the manual</a>"></i>
> </dt>
>- <dd class="lead">
>- <span id="image_fstypes">{{fstypes}}</span>
>- <i class="icon-pencil"
>id="change-image_fstypes-icon"></i>
>- <form id="change-image_fstypes-form"
>style="display:none;">
>- <input id="filter-image_fstypes" type="text"
>placeholder="Search image types" class="span4">
>- <div id="all-image_fstypes" class="scrolling">
>+ <dd style="margin-bottom: 20px">
>+ <span id="image_fstypes" class="lead">{{fstypes}}</span>
>+ <i class="icon-pencil" id="change-image_fstypes-icon"></i>
>+ <form id="change-image_fstypes-form" style="display:none;">
>+ <label>Choose from known image types</label>
>+ <input id="filter-image_fstypes" type="text"
>placeholder="Search image types" class="span4">
>+ <div id="all-image_fstypes" class="scrolling">
>+ </div>
>+ <div class="input-append">
>+ <label>Enter your own image types
>+ <i data-original-title="You can enter more than
>one image type, separated by a space" class="icon-question-sign get-help"
>title=""></i>
>+ </label>
>+ <input type="text" id="new-image-fstype-input"
>placeholder="Add an image type">
> </div>
>- <span class="help-block"
>id="fstypes-error-message">You must select at least one image type</span>
>- <button id="apply-change-image_fstypes"
>type="button" class="btn">Save</button>
>- <button id="cancel-change-image_fstypes"
>type="button" class="btn btn-link">Cancel</button>
>- </form>
>- </dd>
>+ <p class="error" stype="display:none"
>id="fstypes-error-message">
>+ You must select at least one image type
>+ </p>
>+ <p class="error" style="display:none"
>id="invalid-chars-in-fstype-msg">
>+ A valid image type cannot include underscores.
>+ </p>
>+ <p class="error" style="display:none"
>id="exists-fstype-msg">
>+ This image type already exists: select it from the
>list above.
>+ </p>
>+ <div>
>+ <button id="apply-change-image_fstypes"
>type="button" class="btn">Save</button>
>+ <button id="cancel-change-image_fstypes"
>type="button" class="btn btn-link">Cancel</button>
>+ </div>
>+ </form>
>+ </dd>
> {% endif %}
>
> {% if image_install_append_defined %}
>@@ -597,17 +614,52 @@
> }
> });
>
>- $('#apply-change-image_fstypes').click(function(){
>- // extract the selected fstypes and sort them
>- var fstypes_array = [];
>- var checkboxes =
>document.getElementsByClassName('fs-checkbox-fstypes');
>- $(".fs-checkbox-fstypes:checked").each(function(){
>- fstypes_array.push($(this).val());
>- });
>- fstypes_array.sort();
>+ var fsTypesInput = $("#new-image-fstype-input");
>+ var fsTypesApplyBtn = $('#apply-change-image_fstypes');
>+ var invalidCharsMsg = $("#invalid-chars-in-fstype-msg");
>+
>+ fsTypesInput.on('input', function(){
>+ if ($(this).val()) {
>+ fsTypesApplyBtn.removeAttr('disabled');
>+ $("#fstypes-error-message").hide();
>+ }
>+ invalidCharsMsg.hide();
>+ });
>+
>+ fsTypesApplyBtn.click(function(e){
>+ e.preventDefault();
>+
>+ var fstypes = '';
>+ // extract the selected fstypes and sort them
>+ var fstypes_array = [];
>+ var checkboxes =
>document.getElementsByClassName('fs-checkbox-fstypes');
>+ $(".fs-checkbox-fstypes:checked").each(function(){
>+ fstypes_array.push($(this).val());
>+ });
>+ fstypes_array.sort();
>+
>+ if (fsTypesInput.val().length !== 0) {
>+ var existsMsg = $("#exists-fstype-msg");
>+
>+ /* No whitespace or underscores allowed */
>+ if (fsTypesInput.val().match(/\_/)) {
>+ invalidCharsMsg.show();
>+ return;
>+ } else {
>+ invalidCharsMsg.hide();
>+ }
>+
>+ if (fstypes_array.indexOf(fsTypesInput.val()) !== -1){
>+ existsMsg.show();
>+ return;
>+ } else {
>+ existsMsg.hide();
>+ }
>+
>+ fstypes += fsTypesInput.val()+' ';
>+ }
>
> // now make a string of them
>- var fstypes = '';
> for (var i = 0, length = fstypes_array.length; i <
>length; i++) {
> fstypes += fstypes_array[i] + ' ';
> }
>@@ -620,6 +672,9 @@
> $("#change-image_fstypes-form").slideUp(function() {
> $('#image_fstypes,
>#change-image_fstypes-icon').show();
> });
>+
>+
>+ fsTypesInput.val("");
> });
> {% endif %}
>
>--
>2.1.4
>
>--
>_______________________________________________
>toaster mailing list
>toaster at yoctoproject.org
>https://lists.yoctoproject.org/listinfo/toaster
More information about the toaster
mailing list