[Toaster] [[PATCH v2]] toaster: projectconf Add feature for free form IMAGE_FSTYPES

Barros Pena, Belen belen.barros.pena at intel.com
Thu Nov 26 07:00:29 PST 2015



On 26/11/2015 14:28, "Smith, Elliot" <elliot.smith at intel.com> wrote:

>On 24 November 2015 at 13:26, Barros Pena, Belen
><belen.barros.pena at intel.com> wrote:
>
>On 23/11/2015 11:41, "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 seems to address all the issues from v1. Getting rid the 'already
>selected' error message by not duplicating any values works well.
>
>
>
>
>It works correctly, but there is one issue: if you enter an invalid
>string as the image type (e.g. btrfss) and want to correct it, there's no
>way to delete it from the list.

Heh, well spotted. Didn't think of this one :/

>
>
>Perhaps a button to set the list back to the defaults, or to remove any
>invalid types ("cleanup")?

This would be a possible solution, but it seems a bit clunky when you just
want to remove an extra 's' from an image type that you typed by mistake.

>
>
>Alternatively, add the user's custom image type to the checkbox list; if
>they uncheck it, is disappears from the list.

This was the initial solution, but having it disappearing from the list
when you unchecked it is not the behaviour you expect from checkboxes, and
it does feel quite weird. A solution would be to store the value you type
in the free text field somewhere, so that it appears back there when you
click the 'change' button and you can edit it.

I know we cannot store the value in the database (the list of image types
is currently hardcoded in views.py), but maybe it's enough to store it for
the session. You are bound to realise quite soon if you typed something
wrong.

Michael: is this possible?

Thanks!

Belén

>
>
>Elliot
> 
>
>
>From my perspective, this is good to go.
>
>Thanks!
>
>Belén
>
>>
>>Signed-off-by: Michael Wood <michael.g.wood at intel.com>
>>---
>> .../toaster/toastergui/templates/projectconf.html  | 128
>>+++++++++++++++------
>> 1 file changed, 95 insertions(+), 33 deletions(-)
>>
>>diff --git a/bitbake/lib/toaster/toastergui/templates/projectconf.html
>>b/bitbake/lib/toaster/toastergui/templates/projectconf.html
>>index 30fd03e..13f9c66 100644
>>--- a/bitbake/lib/toaster/toastergui/templates/projectconf.html
>>+++ b/bitbake/lib/toaster/toastergui/templates/projectconf.html
>>@@ -36,18 +36,36 @@
>>                 <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#v
>>a
>>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 known image types" class="span4">
>>+                  <div id="all-image_fstypes" class="scrolling">
>>+                  </div>
>>+                  <div class="input-append">
>>+                    <span class="control-group"
>>id="fstypes-control-validation">
>>+                      <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">
>>+
>>+                      </span>
>>                     </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 style="display:none" class="error"
>>id="fstypes-error-message">
>>+                      You must select at least one image type. <br />
>>+                      Choose from the list of known ones or type your
>>own.
>>+                    </p>
>>+                    <p style="display:none" class="error"
>>id="invalid-chars-in-fstype-msg">
>>+                      A valid image type cannot include underscores.
>>+                    </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 %}
>>@@ -305,20 +323,41 @@
>>             return true;
>>         }
>>
>>-        // Test to insure at least one FS Type is checked
>>+        var fsTypesInput = $("#new-image-fstype-input");
>>+        var invalidCharsMsg = $("#invalid-chars-in-fstype-msg");
>>+        var fsTypesControl = $("#fstypes-control-validation");
>>+        var noFsType = $('#fstypes-error-message');
>>+        var fsTypesApplyBtn = $("#apply-change-image_fstypes");
>>+
>>+        /* Validation of fstypes */
>>         function enableFsTypesSave() {
>>-            var any_checked = 0;
>>-            $(".fs-checkbox-fstypes:checked").each(function(){
>>-                any_checked = 1;
>>-            });
>>-            if ( 0 == any_checked ) {
>>-
>>$("#apply-change-image_fstypes").attr("disabled","disabled");
>>-                $('#fstypes-error-message').show();
>>-            }
>>-            else {
>>-                $("#apply-change-image_fstypes").removeAttr("disabled");
>>-                $('#fstypes-error-message').hide();
>>-            }
>>+          var valid_input = false;
>>+          var valid_checkboxes = false;
>>+          var anyChecked = $(".fs-checkbox-fstypes:checked").length;
>>+
>>+          /* No underscores allowed */
>>+          if (fsTypesInput.val().match(/\_/)) {
>>+            invalidCharsMsg.show();
>>+            fsTypesControl.addClass("error");
>>+            valid_input = false;
>>+          } else {
>>+            fsTypesControl.removeClass("error");
>>+            invalidCharsMsg.hide();
>>+            valid_input = true;
>>+          }
>>+
>>+          if (!anyChecked && !fsTypesInput.val()){
>>+            noFsType.show();
>>+            valid_checkboxes = false;
>>+          } else {
>>+            noFsType.hide();
>>+            valid_checkboxes = true;
>>+          }
>>+
>>+          if (valid_checkboxes == false || valid_input == false)
>>+            fsTypesApplyBtn.attr("disabled","disabled");
>>+          else
>>+            fsTypesApplyBtn.removeAttr("disabled");
>>         }
>>
>>         // Preset or reset the Package Class checkbox labels
>>@@ -597,17 +636,37 @@
>>                 }
>>             });
>>
>>-            $('#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();
>>+            fsTypesInput.on('input', function(){
>>+              enableFsTypesSave();
>>+            });
>>+
>>+            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 we have a value in our enter own image type input
>>and it
>>+               * isn't already selected add it to the fstypes value
>>+               */
>>+               if (fsTypesInput.val()){
>>+                 var inputFsTypes = fsTypesInput.val().split(" ");
>>+
>>+                 for (var type in inputFsTypes){
>>+                   if (fstypes_array.indexOf(inputFsTypes[type].trim())
>>=== -1)
>>+                   {
>>+                     fstypes += inputFsTypes[type]+' ';
>>+                   }
>>+                 }
>>+               }
>>
>>                 // 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 +679,9 @@
>>                 $("#change-image_fstypes-form").slideUp(function() {
>>                     $('#image_fstypes,
>>#change-image_fstypes-icon').show();
>>                 });
>>+
>>+
>>+              fsTypesInput.val("");
>>             });
>>             {% endif %}
>>
>>--
>>2.5.0
>>
>>--
>>_______________________________________________
>>toaster mailing list
>>toaster at yoctoproject.org
>>https://lists.yoctoproject.org/listinfo/toaster
>
>--
>_______________________________________________
>toaster mailing list
>toaster at yoctoproject.org
>https://lists.yoctoproject.org/listinfo/toaster
>
>
>
>
>
>
>
>
>
>-- 
>Elliot Smith
>Software Engineer
>Intel Open Source Technology Centre
>
>
>
>



More information about the toaster mailing list