{% extends "baseprojectpage.html" %}
{% load projecttags %}
{% load humanize %}

{% block localbreadcrumb %}
<li>All compatible targets</li>
{% endblock %}

{% block projectinfomain %}
                <div class="page-header">
                    <h1>
  {% 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 compatible targets
  {%endif%}
                        <i class="icon-question-sign get-help heading-help" title="This page lists all the targets compatible with the release selected for this project, which is {{project.release.description}}"></i>
                     </h1>
                </div>

  <div id="zone1alerts">

  </div>

{% if objects.paginator.count == 0 %}
  {% if request.GET.filter or request.GET.search %}
  <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 %}
    <div class="alert alert-info">
      <p class="lead">
       Toaster has not target information. To generate target information you can:<br/>
       <ul class="lead">
       <li style="margin-top: 10px"> <a href="https://wiki.yoctoproject.org/wiki/Setting_up_a_hosted_managed_mode_for_Toaster#LayerSources">Configure a layer source</a></li>
       <li style="margin-top: 10px">  <a href="{% url 'importlayer' %}">Import a layer</a></li>
       </ul>
      </p>
    </div>
  {% endif %}

{% else %}

{% include "basetable_top.html" %}
    {% for o in objects %}
    <tr class="data">
        <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.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="{% url 'layerdetails' o.preffered_layerversion.id%}">{{o.preffered_layerversion.layer.name}}</a></td>
        <td class="branch">
        {% if o.preffered_layerversion.up_branch %}
            {{o.preffered_layerversion.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.preffered_layerversion.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.preffered_layerversion.pk}}, '{{o.preffered_layerversion.layer.name}}', '{%url 'layerdetails' o.preffered_layerversion.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.preffered_layerversion.layer.name}} layer to your project"></i>
            </a>
        </td>
    </tr>
    {% endfor %}
{% include "basetable_bottom.html" %}

    <!-- Modals -->

    <!-- 'Layer dependencies modal' -->
    <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><span class="layer-name"></span> dependencies</h3>
        </div>
        <div class="modal-body">
            <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 class="btn btn-primary" type="submit">Add layers</button>
            <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
        </div>
        </form>
    </div>

{% endif %}

{% if project %}
<script>

var tooltipUpdateText;

/* ensure csrf cookie exists {% csrf_token %} */
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") {
                console.warn(_data.error);
            } else {
                updateButtons(_data.layers.map(function (e) {return e.id}));
                if (onsuccess != undefined) onsuccess(_data);
            }
        },
        error: function (_data) {
            console.warn("Call failed");
            console.warn(_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 %}

    });
    $('#dependencies_modal').modal('show');
}

function updateLayerCountLabels (amount) {
    /* Update the filter labels */
    var countLabel = $("#layer_version__projectlayer__project\\:{{project.id}}_count");
    countLabel.text(Number(countLabel.text())+amount);

    var countLabelRemaining = $("#layer_version__projectlayer__project\\:NOT{{project.id}}_count");
    countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
}

var pressedButton = undefined;

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") {
                    console.warn(_data.error);
                } else {
                    updateLayerCountLabels(_data.list.length+1);

                    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>");
                        });
                    }
                }
            }
    })
}

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-";
    }

    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();
    }
};


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