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

Michael Wood michael.g.wood at intel.com
Mon Nov 23 03:41:48 PST 2015


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]

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#var-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



More information about the toaster mailing list