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

[Michael Wood]

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