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 %}