layerindex-web/templates/layerindex/layers.html

{% extends "base_toplevel.html" %}
{% load i18n %}
{% load static %}

{% comment %}

  layerindex-web - layer list page template

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

{% endcomment %}


<!--
{% block title_append %} - layers{% endblock %}
-->

{% block navs %}
{% autoescape on %}
                            <li class="active"><a href="{% url 'layer_list' url_branch %}">Layers</a></li>
                            <li><a href="{% url 'recipe_search' url_branch %}">Recipes</a></li>
                            <li><a href="{% url 'machine_search' url_branch %}">Machines</a></li>
                            <li><a href="{% url 'class_search' url_branch %}">Classes</a></li>
                            <li><a href="{% url 'distro_search' url_branch %}">Distros</a></li>
{% endautoescape %}
{% endblock %}


{% block content_inner %}
{% autoescape on %}

{% if layerbranch_list %}

            <div class="col-md-6 no-left-pad bottom-margin">
                <form id="filter-form" action="">
                    <div class="form-group has-feedback has-clear">
                        <input type="text" class="form-control" id="layersearchtext" placeholder="Search layers">
                        <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" id="layersearchclear" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
                    </div>
                </form>
            </div>

            <span class="pull-right">
                <div class="btn-group">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Filter layers
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                        {% for choice_id, choice_label in layer_type_choices %}
                        <li><a tabindex="-1" href="#">
                            <label class="checkbox">
                                <input type="checkbox" class="filterlayertypecheckbox" checked value="{{ choice_id }}">{{ choice_label }}
                            </label>
                        </a></li>
                        {% endfor %}

                    </ul>

                </div>
            </span>

            <table class="table table-striped table-bordered layerstable">
                <thead>
                    <tr>
                        <th>Layer name</th>
                        <th class="col-md-4">Description</th>
                        <th>Type</th>
                        <th>Repository</th>
                    </tr>
                </thead>

                <tbody>
                    {% for layerbranch in layerbranch_list %}
                    <tr class="layertype_{{ layerbranch.layer.layer_type }}">
                        <td><a href="{% url 'layer_item' url_branch layerbranch.layer.name %}">{{ layerbranch.layer.name }}</a>
                            {% if layerbranch.yp_compatible_version %}
                            <a href="{{layerbranch.yp_compatible_version.link_url}}"><img src="{{layerbranch.yp_compatible_version.image_url}}" alt="{{layerbranch.yp_compatible_version.description}}" class="yp-icon" title="{{layerbranch.yp_compatible_version.description}}" ></a>
                            {% endif %}
                        </td>
                        <td>{{ layerbranch.layer.summary }}</td>
                        <td>{{ layerbranch.layer.get_layer_type_display }}</td>
                        <td class="showRollie">
                            {{ layerbranch.layer.vcs_url }}
                                {% if layerbranch.layer.vcs_web_url %}
                                <a class="rollie" href="{{ layerbranch.layer.vcs_web_url }}">
                                <span class="label label-info">
                                    web repo
                                </span>
                                </a>
                                {% endif %}
                                {% if layerbranch.tree_url %}
                                <a class="rollie" href="{{ layerbranch.tree_url }}">
                                <span class="label label-info">
                                    tree
                                </span>
                                </a>
                                {% endif %}
                        </td>
                    </tr>
                    {% endfor %}

                </tbody>
            </table>

    {% if is_paginated %}
        {% load bootstrap_pagination %}
        <div class="text-center">
        {% bootstrap_paginate page_obj range=10 show_prev_next="false" show_first_last="true" %}
        </div>
    {% endif %}
{% else %}
    <p>No matching layers in database.</p>
{% endif %}

{% endautoescape %}

{% endblock %}


{% block scripts %}
<script>
    var refreshTimer = 0;

    function clearLayerSearch() {
        $("#layersearchtext").val('');
        $(".layerstable > tbody > tr").show();
    }

    function refreshLayerSearch() {
        var classes = [];

        $('.filterlayertypecheckbox:not(":checked")').each(function() {
            classes.push('layertype_' + $(this).val());
        });

        var value = $("#layersearchtext").val().toLowerCase();
        $(".layerstable > tbody > tr").each(function() {
            var visible = true;
            if($(this).text().toLowerCase().indexOf(value) == -1) {
                visible = false;
            }
            else {
                var row = $(this)
                classes.forEach(function (className) {
                    if( row.hasClass(className) ) {
                        visible = false;
                        return false;
                    }
                });
            }
            $(this).toggle(visible)
        });
    }

    function refreshTimeout() {
        // Search text:       $("#layersearchtext").val()
        // Number of matches: $(".layerstable > tbody > tr:visible").length
    }

    $(document).ready(function() {
        $("input:checkbox").change()
        $("input:checkbox").change(function(){
            refreshLayerSearch();
        });

        $(function() {
            var theTable = $('table.layerstable');

            $("#layersearchtext").on("input", function() {
                refreshLayerSearch();
                if(refreshTimer) {
                    window.clearTimeout(refreshTimer);
                }
                refreshTimer = window.setTimeout(refreshTimeout, 1000);
            });

            $("#layersearchclear").click(function(){
                $("#layersearchtext").val('');
                refreshLayerSearch();
                $("#layersearchtext").focus();
            });

            $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
            e.stopPropagation();
            })
        });

        refreshLayerSearch();
    });
</script>
{% endblock %}