bitbake: toastergui: Various fixes for projects, layers and targets page

This is a combined set of fixes for the project, layers and targets
pages in the project section of toaster.

The fixes correct behaviour and look in various parts of the page,
including submitting XHR commands and updating the DOM with the correct
info.

(Bitbake rev: 96d7738f964784871c928c376cb9fbc9a275cf00)

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

1 files changed, 207 insertions, 133 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/targets.html b/bitbake/lib/toaster/toastergui/templates/targets.html
index 3afdf0a5e9..32a644a743 100644
--- a/bitbake/lib/toaster/toastergui/templates/targets.html
+++ b/bitbake/lib/toaster/toastergui/templates/targets.html
@@ -9,55 +9,74 @@
 {% block projectinfomain %}
                 <div class="page-header">
                     <h1>
-                        All targets
-                        <i class="icon-question-sign get-help heading-help" title="This page lists all the targets compatible with Yocto Project 1.7 'Dxxxx' that Toaster knows about. They include community-created targets suitable for use on top of OpenEmbedded Core and any targets you have imported"></i>
+  {% if request.GET.filter and objects.paginator.count >  0 or request.GET.search and objects.paginator.count >  0 %}
+      {{objects.paginator.count}} target{{objects.paginator.count|pluralize}} found
+  {% elif request.GET.filter and objects.paginator.count ==  0 or request.GET.search and objects.paginator.count == 0 %}
+      No targets found
+  {%else%}
+      All targets
+  {%endif%}
+                        <i class="icon-question-sign get-help heading-help" title="This page lists all the targets compatible with " + {{project.release.name}} + " that Toaster knows about."></i>
                      </h1>
                 </div>
-                <!--div class="alert">
-                    <div class="input-append" style="margin-bottom:0px;">
-                        <input class="input-xxlarge" type="text" placeholder="Search targets" value="browser" />
-                        <a class="add-on btn">
-                            <i class="icon-remove"></i>
-                        </a>
-                        <button class="btn" type="button">Search</button>
-                        <a class="btn btn-link" href="#">Show all targets</a>
-                    </div>
-                </div-->
-                <div id="target-added" class="alert alert-info lead" style="display:none;"></div>
-                <div id="target-removed" class="alert alert-info lead" style="display:none;">
-                    <button type="button" class="close" data-dismiss="alert">&times;</button>
-                    <strong>1</strong> target deleted from <a href="project-with-targets.html">your project</a>: <a href="#">meta-aarch64</a>
-                </div>
 
+  <div id="zone1alerts">
+
+  </div>
+
+{% if objects.paginator.count == 0 %}
+  <div class="row-fluid">
+      <div class="alert">
+        <form class="no-results input-append" id="searchform">
+            <input id="search" name="search" class="input-xxlarge" type="text" value="{{request.GET.search}}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="add-on btn" tabindex="-1"><i class="icon-remove"></i></a>{% endif %}
+            <button class="btn" type="submit" value="Search">Search</button>
+            <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all targets</button>
+        </form>
+      </div>
+  </div>
+
+{% else %}
 
 {% include "basetable_top.html" %}
     {% for o in objects %}
     <tr class="data">
-        <td class="target">
-                {{o.name}} ({{o.id}}, {{o.up_id}})
-                <a target="_blank" href="{{o.get_layersource_view_url}}"><i class="icon-share get-info"></i></a>
-        </td>
-        <td class="version">{{o.version}}</td>
-        <td class="description">{{o.description}}</td>
-        <td class="recipe-file">
-                <code>{{o.file_path}}</code>
-                <a href="{{o.get_vcs_link_url}}" target="_blank"><i class="icon-share get-info"></i></a>
-        </td>
-        <td class="target-section">{{o.section}}</td>
-        <td class="license">{{o.license}}</td>
-        <td class="layer"><a href="#">{{o.layer_version.layer.name}}</a></td>
-        <td class="source">{{o.layer_source.name}}</td>
-        <td class="branch">{{o.layer_version.commit}}</td>
-        <td class="build">
-                <a id="build-target" href="project-with-targets.html?target=3g-router-image" class="btn btn-block" style="display:none;">
-                        Build target
-                </a>
-                <a id="add-layer" href="#" class="btn btn-block nopop" title="1 layer added">
-                        <i class="icon-plus"></i>
-                        Add layer
-                        <i class="icon-question-sign get-help" title="To build this target, you must first add the meta-embeddedgeeks layer to your project"></i>
-                </a>
-        </td>
+        <td class="target">
+                {{o.name}}
+                <a target="_blank" href="{{o.get_layersource_view_url}}"><i class="icon-share get-info"></i></a>
+        </td>
+        <td class="version">{{o.version}}</td>
+        <td class="description">{% if o.description %}{{o.description}}{% else %}{{o.summary}}{%endif%}</td>
+        <td class="recipe-file">
+                <code>{{o.file_path}}</code>
+                <a href="{{o.get_vcs_link_url}}{{o.file_path}}" target="_blank"><i class="icon-share get-info"></i></a>
+        </td>
+        <td class="target-section">{{o.section}}</td>
+        <td class="license">{{o.license}}</td>
+        <td class="layer"><a href="{% url 'layerdetails' o.layer_version.id%}">{{o.layer_version.layer.name}}</a></td>
+        <td class="source">{{o.layer_source.name}}</td>
+        <td class="branch">
+        {% if o.layer_version.up_branch %}
+            {{o.layer_version.up_branch.name}}
+        {% else %}
+        <a class="btn"
+                data-content="<ul class='unstyled'>
+                  <li>{{o.layer_version.commit}}</li>
+                </ul>">
+                {{o.layer_version.commit|truncatechars:13}}
+            </a>
+            {% endif %}
+        </td>
+        <td class="add-layer" value="{{o.pk}}" layerversion_id="{{o.layer_version.pk}}">
+            <div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
+            <a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" id="target-build-{{o.pk}}" class="btn btn-block remove-layer" style="display:none;" >
+                Build target
+            </a>
+            <a id="layer-add-{{o.pk}}" class="btn btn-block" style="display:none;" href="javascript:layerAdd({{o.layer_version.pk}}, '{{o.layer_version.layer.name}}', '{%url 'layerdetails' o.layer_version.pk%}', {{o.pk}})" >
+                <i class="icon-plus"></i>
+                Add layer
+                <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.layer_version.layer.name}} layer to your project"></i>
+            </a>
+        </td>
     </tr>
     {% endfor %}
 {% include "basetable_bottom.html" %}
@@ -65,122 +84,177 @@
     <!-- Modals -->
 
     <!-- 'Layer dependencies modal' -->
-    <div id="dependencies-message" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
+    <div id="dependencies_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
+        <form id="dependencies_modal_form">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-            <h3>meta-acer dependencies</h3>
+            <h3><span class="layer-name"></span> dependencies</h3>
         </div>
         <div class="modal-body">
-            <p><strong>meta-acer</strong> depends on some targets that are not added to your project. Select the ones you want to add:</p>
-            <ul class="unstyled">
-                <li>
-                    <label class="checkbox">
-                        <input type="checkbox" checked="checked">
-                        meta-android
-                    </label>
-                </li>
-                <li>
-                    <label class="checkbox">
-                        <input type="checkbox" checked="checked">
-                        meta-oe
-                    </label>
-                </li>
+            <p><strong class="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
+            <ul class="unstyled" id="dependencies_list">
             </ul>
         </div>
         <div class="modal-footer">
-            <button id="add-target-dependencies" type="submit" class="btn btn-primary" data-dismiss="modal" >Add targets</button>
-            <button class="btn" data-dismiss="modal">Cancel</button>
+            <button class="btn btn-primary" type="submit">Add layers</button>
+            <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
         </div>
+        </form>
     </div>
 
-    <script src="assets/js/jquery-1.9.1.min.js" type='text/javascript'></script>
-    <script src="assets/js/jquery.tablesorter.min.js" type='text/javascript'></script>
-    <script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
-    <script src="assets/js/bootstrap.min.js" type='text/javascript'></script>
-    <script src="assets/js/prettify.js" type='text/javascript'></script>
-    <script src="assets/js/jit.js" type='text/javascript'></script>
-    <script src="assets/js/main.js" type='text/javascript'></script>
-
-    <script>
-     $(document).ready(function() {
-
-        //show or hide selected columns on load
-        $("input:checkbox").each(function(){
-            var selectedType = $(this).val();
-            if($(this).is(":checked")){
-                $("."+selectedType).show();
+{% endif %}
+
+{% if project %}
+<script>
+
+var tooltipUpdateText;
+
+function _makeXHREditCall(data, onsuccess, onfail) {
+    $.ajax( {
+        type: "POST",
+        url: "{% url 'xhr_projectedit' project.id %}",
+        data: data,
+        headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
+        success: function (_data) {
+            if (_data.error != "ok") {
+                alert(_data.error);
+            } else {
+                updateButtons(_data.layers.map(function (e) {return e.id}));
+                if (onsuccess != undefined) onsuccess(_data);
             }
-            else{
-                $("."+selectedType).hide();
+        },
+        error: function (_data) {
+            alert("Call failed");
+            console.log(_data);
+        }
+    });
+}
+
+function show_alert(text, cls) {
+    $("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" + text + "</div>");
+}
+
+
+function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
+    // update layer name
+    $('.layer-name').text(layerName);
+    var deplistHtml = "";
+    for (var i = 0; i < dependencies.length; i++) {
+        deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\""
+        deplistHtml += dependencies[i].id;
+        deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
+        deplistHtml += dependencies[i].name;
+        deplistHtml += "</label></li>";
+    }
+    $('#dependencies_list').html(deplistHtml);
+
+    var selected = [layerId];
+    var layer_link_list = undefined;
+
+    $("#dependencies_modal_form").submit(function (e) {
+        e.preventDefault();
+        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
+        layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</a>";
+        if (selected.length > 1) {
+            tooltipUpdateText = "" + selected.length + " layers added";
+        } else {
+            tooltipUpdateText = "1 layer added";
+        }
+
+        for (var i = 0; i < selected.length; i++) {
+            for (var j = 0; j < dependencies.length; j++) {
+                if (dependencies[j].id == selected[i]) {
+                    layer_link_list+= ", <a href='"+dependencies[j].layerdetailurl+"'>"+dependencies[j].name+"</a>"
+                    break;
+                }
             }
+        }
+
+        $('#dependencies_modal').modal('hide');
+
+    {% if project %}
+        _makeXHREditCall({ 'layerAdd': selected.join(",") }, function onXHRSuccess() {
+            show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>:" + layer_link_list);
         });
+    {% endif %}
 
-        // enable add target button
-        $('#add-target-with-deps').removeAttr('disabled');
+    });
+    $('#dependencies_modal').modal('show');
+}
 
-        //edit columns functionality (show / hide table columns)
-        $("input:checkbox").change();
-            $("input:checkbox").change(function(){
-                var selectedType = $(this).val();
-                    if($(this).is(":checked")){
-                        $("."+selectedType).show();
-                    }
-                    else{
-                        $("."+selectedType).hide();
-                    }
-            });
 
-        //turn edit columns dropdown into a multi-select menu
-        $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
-            e.stopPropagation();
-        });
+var pressedButton = undefined;
 
-        //show tooltip with applied filter
-        $('#filtered').tooltip({container:'table', placement:'bottom', delay:{hide:1500}, html:true});
+function layerAdd(layerId, layerName, layerURL, pressedButtonId) {
+    pressedButton = pressedButtonId;
+    $.ajax({
+        url: '{% url "xhr_datatypeahead" %}',
+        data: {'type': 'layerdeps','value':layerId},
+        success: function(_data) {
+                if (_data.error != "ok") {
+                    alert(_data.error);
+                } else {
+                    if (_data.list.length > 0) {
+                        show_dependencies_modal(layerId, layerName, layerURL, _data.list);
+                    }
+                    else {
+                        tooltipUpdateText = "1 layer added";
+                        _makeXHREditCall({ 'layerAdd': layerId }, function () {
+        show_alert("You have added <strong>1</strong> layer to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
+                        });
+                    }
+                }
+            }
+    })
+}
 
-        $('#filtered').click(function() {
-            $(this).tooltip('hide');
-        });
+function buttonSet(id, state) {
+    var tohide, toshow;
+    if (state == "add")
+    {
+        toshow = "#layer-add-";
+        tohide = "#target-build-";
+    }
+    else if (state == "build")
+    {
+        tohide = "#layer-add-";
+        toshow = "#target-build-";
+    }
 
-        //show target added tooltip
-        $("#remove-target, #add-target, #add-target-with-deps2").tooltip({ trigger: 'manual' });
-
-        // add target without dependencies
-        $("#add-target").click(function(){
-            $('#target-removed').hide();
-            $('#target-added').html('<button type="button" class="close" data-dismiss="alert">&times;</button><strong>1</strong> target added to <a href="project-with-targets.html">your project</a>: <a href="#">meta-aarch64</a>').fadeIn();
-            $('#add-target').tooltip('show');
-            $("#add-target").hide();
-            $(".add-targets .tooltip").delay(2000).fadeOut(function(){
-                $("#remove-target").delay(300).fadeIn();
+    var previouslyvisible = $(tohide + id).is(":visible");
+    if (previouslyvisible && id == pressedButton) {
+        $(tohide + id).fadeOut( function() {
+            $("#layer-tooltip-" + id).text(tooltipUpdateText);
+            $("#layer-tooltip-" + id).fadeIn().delay(2000).fadeOut(function(){
+                $(toshow + id).delay(300).fadeIn();
             });
         });
+    } else {
+        $(tohide + id).hide();
+        $("#layer-tooltip-" + id).hide();
+        $(toshow + id).show();
+    }
+};
 
-        // add target with dependencies
-        $(document).on("click", "#add-target-dependencies", function() {
-            $('#target-removed').hide();
-            $('#target-added').html('<button type="button" class="close" data-dismiss="alert">&times;</button><strong>3</strong> targets added to <a href="project-with-targets.html">your project</a>: <a href="#">meta-acer</a> and its dependencies <a href="#">meta-android</a> and <a href="#">meta-oe</a>').delay(400).fadeIn(function(){
-                $('#add-target-with-deps').tooltip('show');
-                $("#add-target-with-deps, #add-target-with-deps").hide();
-                $(".add-targets .tooltip").delay(2000).fadeOut(function(){
-                    $("#remove-target-with-deps").delay(300).fadeIn();
-                });
-            });
-        });
 
-        // delete target
-        $("#remove-target").click(function(){
-            $('#target-added').hide();
-            $('#target-removed').show();
-            $('#remove-target').tooltip('show');
-            $("#remove-target").hide();
-            $(".add-targets .tooltip").delay(2000).fadeOut(function(){
-                $("#add-target").delay(300).fadeIn();
-            });
-        });
+function updateButtons(projectLayers) {
+    var displayedLayers = [];
+    $(".add-layer").map(function () { displayedLayers.push( { "l": parseInt($(this).attr('layerversion_id')), "i": parseInt($(this).attr('value'))})});
+    for (var i=0; i < displayedLayers.length; i++) {
+        if (projectLayers.indexOf(displayedLayers[i].l) > -1) {
+            buttonSet(displayedLayers[i].i, "build");
+        }
+        else {
+            buttonSet(displayedLayers[i].i, "add");
+        }
+    }
+}
 
-     });
+$(document).ready(function (){
+    updateButtons({{projectlayerset}});
+});
 
 </script>
+{%endif%}
 
 {% endblock %}