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

[Michael Wood <michael.g.wood@intel.com>]

On 26/11/15 14:28, Smith, Elliot wrote:
> On 24 November 2015 at 13:26, Barros Pena, Belen 
> <belen.barros.pena@intel.com <mailto:belen.barros.pena@intel.com>> wrote:
>
>     On 23/11/2015 11:41, "toaster-bounces@yoctoproject.org
>     <mailto:toaster-bounces@yoctoproject.org> on behalf of
>     Michael Wood" <toaster-bounces@yoctoproject.org
>     <mailto:toaster-bounces@yoctoproject.org> on behalf of
>     michael.g.wood@intel.com <mailto:michael.g.wood@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.

To remove custom added values, you just have to click edit and then 
press 'Save'.

>
> Perhaps a button to set the list back to the defaults, or to remove 
> any invalid types ("cleanup")?
>
> Alternatively, add the user's custom image type to the checkbox list; 
> if they uncheck it, is disappears from the list.
>
> Elliot
>
>
>     From my perspective, this is good to go.
>
>     Thanks!
>
>     Belén
>
>     >
>     >Signed-off-by: Michael Wood <michael.g.wood@intel.com
>     <mailto:michael.g.wood@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#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 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@yoctoproject.org <mailto:toaster@yoctoproject.org>
>     >https://lists.yoctoproject.org/listinfo/toaster
>
>     --
>     _______________________________________________
>     toaster mailing list
>     toaster@yoctoproject.org <mailto:toaster@yoctoproject.org>
>     https://lists.yoctoproject.org/listinfo/toaster
>
>
>
>
> -- 
> Elliot Smith
> Software Engineer
> Intel Open Source Technology Centre
>
> ---------------------------------------------------------------------
> Intel Corporation (UK) Limited
> Registered No. 1134945 (England)
> Registered Office: Pipers Way, Swindon SN3 1RJ
> VAT No: 860 2173 47
>
> This e-mail and any attachments may contain confidential material for
> the sole use of the intended recipient(s). Any review or distribution
> by others is strictly prohibited. If you are not the intended
> recipient, please contact the sender and delete all copies.
>