layerindex-web/templates/rrs/recipes.html

{% extends "rrs/base_toplevel.html" %}
{% load i18n %}
{% load staticfiles %}

{% load url from future %}

{% comment %}

  rrs-web - top level page template

  Copyright (C) 2015 Intel Corporation
  Licensed under the MIT license, see COPYING.MIT for details

{% endcomment %}

{% block navs %}
{% endblock %}

{% block content_inner %}
<div class="navbar navbar-table-controls">
    <div class="navbar-inner table-controls">
        <ul class="nav">
            <li class="dropdown">
                <span class="badge"></span>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" href="#" class="dropdown-toggle" id="selected-status">
                    Upstream status: <strong></strong>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" id="select-status">
                    {% for us in upstream_status_set_choices %}
                    <li><a href="#">{{ us }}</a></li> 
                    {% endfor %}
                    <li class="divider"/>
                    {% for us in upstream_status_choices %}
                    <li><a href="#">{{ us }}</a></li>
                    {% endfor %}
                </ul>
            </li>
            <li><p>and</p></li>
            <li class="dropdown">
                <a data-toggle="dropdown" href="#" class="dropdown-toggle" id="selected-maintainer">
                    Maintainer: <strong></strong>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" id="select-maintainer" style="overflow:scroll;max-height:40em;">
                    {% for m in set_maintainers %}
                    <li><a href="#">{{ m }}</a></li>
                    {% endfor %}
                    <li class="divider"/>
                    {% for m in all_maintainers %}
                    <li class="active"><a href="#">{{ m }}</a></li>
                    {% endfor %}
                </ul>
            </li>
        </ul>

        <form id="form-search" class="pull-right input-append">
            <input type="text" class="input-xlarge" placeholder="Search all recipes" id="filter"/>                
            <a class="add-on btn" style="display:none" id="clear-search-btn">
                <i class="icon-remove"></i>
            </a>
            <button type="submit" value="Search" class="btn" id="btn-search">Search</button>
        </form>
    </div>
</div>

<div id="no_recipes_alert" class="alert" style="display:none">
    No recipes found <a href="#" id="view-all-recipes" style="margin-left:10px;">View all recipes</a>
</div>
<table class="table tablesorter table-bordered table-hover" id="recipestable">
<thead>
    <tr>
        <th class="recipe_column">Recipe</th>
        <th class="version_column muted">Version</th>
        <th class="upstream_version_column muted">Upstream version</th>
        <th class="upstream_status_column span2">Upstream status</th>
        <th class="last_updated_column">Last Updated</th>
        <th class="maintainer_column">Maintainer</th>
        <th class="summary_column muted span5">Summary</th>
        <th class="no_update_reason_column muted span5" style="display:none">No update reason</th>
    </tr>
</thead>
<tbody>
{% for r in recipe_list %}
<tr>
    <td class="recipe_column"><a href="{% url "recipedetail" r.pk %}">{{ r.name }}</a></td>
    <td class="version_column">{{ r.version }}</td>
    <td class="upstream_version_column">{{ r.upstream_version }}</td>
    {% if r.upstream_status == "Up-to-date" %}
    <td class="text-success">
    {% elif r.upstream_status == "Not updated" %}
    <td class="text-error">
    {% elif r.upstream_status == "Can't be updated" %}
    <td class="muted">
    {% else %}
    <td class="text-warning">
    {% endif %}
        {{ r.upstream_status }}
    </td>
    {% if r.outdated == "Up-to-date" %}
    <td class="text-success">
    {% elif r.outdated == "Unknown" %}
    <td class="text-warning">
    {% else %}
    <td class="text-error">
    {% endif %}
        {{r.outdated}}</td>
    <td class="maintainer_column">{{ r.maintainer_name }}</td>
    <td class="summary_column">{{ r.summary }}</td>
    <td class="no_update_reason_column" style="display:none">{{ r.no_update_reason }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<style>
th.header {
    background-image: url({{ STATIC_URL }}/img/small.gif);
    cursor: pointer;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 20px;
    border-right: 1px solid #dad9c7;
    margin-left: -1px;
}
th.headerSortUp {
    background-image: url({{ STATIC_URL }}/img/small_asc.gif);
}
th.headerSortDown {
    background-image: url({{ STATIC_URL }}/img/small_desc.gif);
}
</style>
{% endblock %}

{% block scripts %}
<script src="{% static "js/uitablefilter.js" %}"></script>
<script src="{% static "js/jquery.tablesorter.js" %}"></script>
<script>
(function($) {
    $.fn.multiFilter = function(filters) {
        var $table = $(this);
        return $table.find('tbody > tr').each(function() {
            var tr = $(this);

            // Make it an array to avoid special cases later.
            if(!$.isArray(filters))
                filters = [ filters ];

            howMany = 0;
            for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
                var index = 0;
                $table.find('thead > tr > th').each(function(i) {
                    if($(this).text() == f.column) {
                        index = i;
                        return false;
                    }
                });
                var text = tr.find('td:eq(' + index + ')').text();
                if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
                    ++howMany;
            }
            if(howMany == filters.length)
                tr.show();
            else
                tr.hide();
        });
    };
})(jQuery);
</script>
<script>
$(document).ready(function() {
    recipesTable = $('#recipestable')
    upstreamStatus = $("<div/>").html('{{ upstream_status }}').text()
    maintainer = $("<div/>").html('{{ maintainer_name }}').text()

    function updateRecipeCount() {
        $('#recipestable').show()
        $('#no_recipes_alert').hide()

        var count = 0;
        $('tr:visible').each(function() {
            count++
        });

        if (count == 1) {
            $('#recipestable').hide()
            $('#no_recipes_alert').show()
        }

        if (count == 2) {
            $('.badge').html("1 recipe");
        } else {
            $('.badge').html((count - 1) + " recipes");
        }
    }

    function updateStatusSelected() {
        $("#selected-status strong").html(upstreamStatus)

        statusList = document.getElementById("select-status").getElementsByTagName("li")
        for (var i = 0; i < statusList.length; i++) {
            if (statusList[i].textContent == upstreamStatus) {
                $(statusList[i]).addClass("active")
            } else {
                $(statusList[i]).removeClass("active")
            }
        }
    }

    function updateMaintainerSelected() {
        $("#selected-maintainer strong").html(maintainer)

        maintainerList = document.getElementById("select-maintainer").getElementsByTagName("li")
        for (var i = 0; i < maintainerList.length; i++) {
            if (maintainerList[i].textContent == maintainer) {
                $(maintainerList[i]).addClass("active")
            } else {
                $(maintainerList[i]).removeClass("active")
            }
        }
    }

    function applyFilters() {
        if (upstreamStatus == 'Can\'t be updated') {
            $('.no_update_reason_column').show()
        } else {
            $('.no_update_reason_column').hide()
        }

        if (upstreamStatus == 'All') {
            upstreamStatusFilter = ''
        } else {
            upstreamStatusFilter = upstreamStatus
        }

        if (maintainer == 'All') {
            maintainerFilter = ''
        } else {
            maintainerFilter = maintainer
        }

        $(recipesTable).multiFilter([
            { column: 'Upstream status', word: upstreamStatusFilter },
            { column: 'Maintainer', word: maintainerFilter },
        ]);

        updateStatusSelected()
        updateMaintainerSelected()
    }

    $("#form-search").submit(function( event ) {
        upstreamStatus = 'All' 
        maintainer = 'All'
        search_text = $("#filter").val()
        $("#clear-search-btn").show()
        applyFilters()
        $.uiTableFilter(recipesTable, search_text);
        updateRecipeCount()
        event.preventDefault();
    });

    function clearSearch() {
        $("#filter").val('')
        $("#clear-search-btn").hide()
        applyFilters()
        updateRecipeCount()
    }

    $("#select-status a").click(function() {
        upstreamStatus = this.text
        clearSearch()
    });

    $("#select-maintainer a").click(function() {
        maintainer = this.text
        clearSearch()
    });

    $("#view-all-recipes").click(function() { 
        upstreamStatus = 'All' 
        maintainer = 'All'
        clearSearch()
    });

    $("#clear-search-btn").click(function() { 
        upstreamStatus = 'All' 
        maintainer = 'All'
        clearSearch()
    });

    $(".icon-remove").tooltip( {container: 'body', html: true, title: "Clear search" });

{% if recipe_list_count > 0 %}
    $(recipesTable).tablesorter({
        sortList: [[0,0]],
        headers: {
            1: { sorter: false },
            2: { sorter: false },
            5: { sorter: false },
            6: { sorter: false },
        }
    }); 
{% endif %}

    applyFilters()
    updateRecipeCount()
});
</script>
{% endblock %}