bitbake: toaster: move project data typeahead to the REST API

This patch enables JSON requests on the project REST endpoint,
and replaces the universal queries "xhr_datatypeahead" with the
`project` type to the REST project endpoint.

The patch adds a decorator that takes a context returned by a view
and either renders the template specified as the decorator argument,
or converts the context to JSON.

Normal "search", "filter" and "order" options for view work as normal
on the JSON API format. To enable the JSON return, set the "format"
GET parameter to "json".

In order to demonstrate the functionality, the "New build" button
is switched from using the xhr_datatypeahead to the project
REST API with JSON formatting. Additionally, the XHR APIs that
perform actions with the project id passed as parameter are removed,
and the needed URLs are populated from the project JSON API returns after
the project has been selected.

(Bitbake rev: 15a2274eba13d19b864f337057d61c75ff7849cc)

Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 15 insertions, 9 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html
index 230dee49d6..e10dc11673 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/lib/toaster/toastergui/templates/base.html
@@ -31,11 +31,19 @@
     projectId : {{project.id|default:'undefined'}},
     jsUrl : "{% static 'js/' %}",
     htmlUrl : "{% static 'html/' %}",
+    projectsUrl : "{% url 'all-projects' %}",
     {% if project.id %}
-    xhrDataTypeaheadUrl : "{% url 'xhr_datatypeahead' project.id %}",
-    xhrProjectEditUrl : "{% url 'xhr_projectedit' project.id %}",
-    projectPageUrl : "{% url 'project' project.id %}",
-    projectName : "{{project.name}}",
+      xhrProjectDataTypeaheadUrl : "{% url 'xhr_datatypeahead' project.id %}",
+      xhrProjectEditUrl : "{% url 'xhr_projectedit' project.id %}",
+      projectPageUrl : "{% url 'project' project.id %}",
+      projectName : "{{project.name}}",
+      projectId : {{project.id}},
+    {% else %}
+      xhrProjectDataTypeaheadUrl : undefined,
+      xhrProjectEditUrl : undefined,
+      projectPageUrl : undefined,
+      projectName : undefined,
+      projectId : undefined,
     {% endif %}
   };
 </script>
@@ -45,8 +53,6 @@
   $(document).ready(function () {
     /* Vars needed for base.js */
     var ctx = {};
-    ctx.projectBuildUrl = "{% url 'xhr_build' %}";
-    ctx.projectBasePageUrl = "{% url 'base_project' %}";
     ctx.projectInfoUrl = "{% url 'xhr_projectinfo' %}";
     ctx.numProjects = {{projects|length}};
     ctx.currentUrl = "{{request.path|escapejs}}";
@@ -99,7 +105,7 @@
                     <div class="input-append">
                       <input type="text" class="input-medium" id="project-name-input" placeholder="Type a project name" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead"/>
                         <button id="save-project-button" class="btn" type="button">Save</button>
-                        <a href="#" id="cancel-change-project" class="btn btn-link">Cancel</a>
+                        <a href="#" id="cancel-change-project" class="btn btn-link" style="display: none">Cancel</a>
                       </div>
                       <p><a id="view-all-projects" href="{% url 'all-projects' %}">View all projects</a></p>
                     </form>
@@ -111,9 +117,9 @@
                   <li id="targets-form">
                     <h6>Recipe(s):</h6>
                     <form>
-                      <input type="text" class="input-xlarge" id="build-target-input" placeholder="Type a recipe name" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead" />
+                      <input type="text" class="input-xlarge" id="build-target-input" placeholder="Type a recipe name" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead" disabled/>
                       <div>
-                        <a class="btn btn-primary" id="build-button" data-project-id="{{project.id}}">Build</a>
+                        <button class="btn btn-primary" id="build-button" data-project-id="{{project.id}}" disabled>Build</button>
                       </div>
                     </form>
                   </li>