{% extends "base.html" %}

{% block head %}

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Stackalytics {% if page_title %}| {{ page_title }} {% endif %}</title>

{% if not page_title %}
<meta name="description" content="OpenStack contribution dashboard collects and processes development activity data such as commits, lines of code changed, and code reviews"/>
{% else %}
<meta name="description" content="Full commits and review statistics of {{ page_title }}"/>
{% endif %}
<meta name="keywords" content="openstack, contribution, community, review, commit, {{ company }}"/>

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css' />

<link rel="icon" href="{{ url_for('static', filename='images/favicon.png') }}" type="image/png"/>

<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/jquery.jqplot.min.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/jquery.dataTables.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/select2.css') }}">

<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.9.1.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.jqplot.min.js') }}"></script>
<!--[if lt IE 9]><script type="text/javascript" src="{{ url_for('static', filename='js/excanvas.min.js') }}"></script><![endif]-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.json2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.pieRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.dateAxisRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.canvasTextRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.canvasAxisTickRenderer.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.cursor.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.highlighter.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.tmpl.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/stackalytics-ui.js') }}"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#metric').val('{{ metric }}');
        $('#release').val('{{ release }}');
        $('#project_type')
            .val('{{ project_type }}')
            .on("change", function(e) {
                    $('#module').val('');
                    reload();
                });

        $("#release").select2();
        $("#metric").select2();
        $("#project_type").select2();

        $("#company").select2({
            allowClear: true,
            ajax: {
                url: make_uri("/api/1.0/companies"),
                dataType: 'json',
                data: function (term, page) {
                    return {
                        company_name: term
                    };
                },
                results: function (data, page) {
                    return {results: data["companies"]};
                }
            },
            initSelection: function (element, callback) {
                var id = $(element).val();
                if (id !== "") {
                    $.ajax(make_uri("/api/1.0/companies/" + id), {
                        dataType: "json"
                    }).done(function (data) {
                                callback(data["company"]);
                            });
                }
            }
        });

        $('#company')
            .on("change", function(e) { reload(); });

        $("#module").select2({
            allowClear: true,
            ajax: {
                url: make_uri("/api/1.0/modules"),
                dataType: 'json',
                data: function (term, page) {
                    return {
                        module_name: term
                    };
                },
                results: function (data, page) {
                    return {results: data["modules"]};
                }
            },
            initSelection: function (element, callback) {
                var id = $(element).val();
                if (id !== "") {
                    $.ajax(make_uri("/api/1.0/modules/" + id), {
                        dataType: "json"
                    }).done(function (data) {
                                callback(data["module"]);
                            });
                }
            },
            formatResultCssClass: function (item) {
                if (item.group) {
                    return "select_group"
                }
                return "";
            }
        });

        $('#module')
            .on("change", function(e) { reload(); });

        $("#user").select2({
            allowClear: true,
            ajax: {
                url: make_uri("/api/1.0/users"),
                dataType: 'json',
                data: function (term, page) {
                    return {
                        user_name: term
                    };
                },
                results: function (data, page) {
                    return {results: data["users"]};
                }
            },
            initSelection: function (element, callback) {
                var id = $(element).val();
                if (id !== "") {
                    $.ajax(make_uri("/api/1.0/users/" + id), {
                        dataType: "json"
                    }).done(function (data) {
                                callback(data["user"]);
                            });
                }
            }
        });

        $('#user')
            .on("change", function(e) { reload(); });
    });

    function make_std_options() {
        var options = {};
        options['release'] = getRelease();
        options['metric'] = getMetric();
        options['project_type'] = getProjectType();
        options['module'] = $('#module').val();
        options['company'] = $('#company').val();
        options['user_id'] = $('#user').val();

        return options;
    }

    function reload() {
        window.location.search = $.map(make_std_options(),function (val, index) {
            return index + "=" + val;
        }).join("&")
    }

    $(document).on('change', '#metric', function (evt) {
        reload();
    });

    $(document).on('change', '#release', function (evt) {
        reload();
    });

    $(document).on('change', '#project_type', function (evt) {
        reload();
    });

    function getRelease() {
        return $('#release').val()
    }

    function getMetric() {
        return $('#metric').val()
    }

    function getProjectType() {
        return $('#project_type').val()
    }

</script>

{% block scripts %}{% endblock %}

{% endblock %}

{% block body %}

    <div class="page">
    <div class="aheader">
        <div style="float: right; margin-top: 10px; margin-right: 20px;">
            <a href="https://wiki.openstack.org/wiki/Stackalytics" title="Version {{ stackalytics_version }} ({{ stackalytics_release }})">About ↗</a>
        </div>
        <div id="analytics_header">
            <span id="logo"><a href="/?metric={{ metric }}&release={{ release }}&project_type={{ project_type }}">Stackalytics</a></span>
            <span id="slogan">| community heartbeat</span>
        </div>

        <div class="drops">

            <div class="drop">
                <label for="release">Release</label>
                <select id="release" name="release" style="min-width: 140px;" data-placeholder="Select release">
                    <option></option>
                    <option value="all">All times</option>
                    {% for release in release_options %}
                        <option value="{{ release.release_name }}">{{ release.release_name | capitalize }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="drop">
                <label for="project_type">Projects</label>
                <select id="project_type" name="project_type" style="min-width: 140px;">
                    <option value="All">all</option>
                    {% for option_type, option_groups in project_type_options.iteritems() %}
                        <optgroup label="{{ option_type }}">
                            <option value="{{ option_type }}">{{ option_type }}
                                - all
                            </option>
                            {% for option_group in option_groups %}
                                <option value="{{ option_group }}">{{ option_group }}</option>
                            {% endfor %}
                        </optgroup>
                    {% endfor %}
                </select>
            </div>

            <div class="drop">
                <label for="module">Module</label>
                <input type="hidden" id="module" style="width: 140px" data-placeholder="Any module" value="{{ module }}"/>
            </div>

            <div class="drop">
                <label for="company">Company</label>
                <input type="hidden" id="company" style="width: 140px" data-placeholder="Any company" value="{{ company }}"/>
            </div>

            <div class="drop">
                <label for="company">Engineer</label>
                <input type="hidden" id="user" style="width: 140px" data-placeholder="Any engineer" value="{{ user_id }}"/>
            </div>

            <div class="drop">
                <label for="metric">Metric</label>
                <select id="metric" name="metric" style="width: 140px">
                    {% for metric in metric_options %}
                        <option value="{{ metric[0] }}">{{ metric[1] }}</option>
                    {% endfor %}
                </select>
            </div>

        </div>
    </div>

    <div class="navigation">
        <div id="timeline" style="width: 100%; height: 120px; margin-top: 15px;"></div>
    </div>

    <table style="width: 100%" cellspacing="0">
        <tr>
            <td style="width: 50%; vertical-align: top;">
                <div class="body" style="margin-right: 1em;">
                    {% block left_frame %}{% endblock %}
                </div>
            </td>
            <td style="width: 50%; vertical-align: top;">
                <div class="body" style="margin-left: 1em;">
                    {% block right_frame %}{% endblock %}
                </div>
            </td>
        </tr>
    </table>

</div>
{% endblock %}