{% extends "base.html" %}
{% block title %}Scoreboard{% endblock %}
{% block head %}
<style type="text/css">
    .teamrow:not(.visible) {
        display: none;
    }
    .teamrow.ineligible {
        color: #888;
    }
</style>
<script>
    var ineligibleShown = false;
    function recalcRanks() {
        $(".teamrow.visible").each(function(i, x) {
            $(x).children(".rank").html(i + 1);
        });
    }
    function hideIneligible() {
        $(".teamrow.ineligible").removeClass("visible");
        $("#toggle").html("Show ineligible teams");
        recalcRanks();
    }
    function showIneligible() {
        $(".teamrow.ineligible").addClass("visible");
        $("#toggle").html("Hide ineligible teams");
        recalcRanks();
    }
    function toggleIneligible() {
        if(ineligibleShown) hideIneligible();
        else showIneligible();
        ineligibleShown = !ineligibleShown;
    }
    document.onready = function() {
        hideIneligible();
    }
</script>
{% endblock %}
{% block content %}
<div class="row">
    <div class="col s12">
        <h3>Score progression</h3>
        <div id="chart"></div>
    </div>
</div>
<h3>Rankings</h3>
<a href="javascript:toggleIneligible()" id="toggle">Hide ineligible teams</a>
<table>
    <thead>
        <tr><th>Rank</th><th>Team</th><th>Affiliation</th><th>Score</th></tr>
    </thead>
    <tbody>
        {% for eligible, teamid, team, affiliation, score in data %}
        <tr class="teamrow {% if not eligible %}in{% endif %}eligible {% if teamid == session.team_id %}blue lighten-3 {% endif %}visible"><td class="rank">{{ rank }}</td><td>{{ team }}</td><td>{{ affiliation }}</td><td>{{ score }}</td></tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}
{% block postscript %}
<script>
    recalcRanks();
    var graphData = {{ graphdata | tojson }};
    var groupn = 0;
    var groups = new vis.DataSet();
    var items = [];
    graphData.forEach(function(team) {
        var teamName = team[0];
        var scoreEvents = team[1];
        groups.add({ id: groupn, content: teamName.replace("<", "&lt;").replace(">", "&gt;"), options: { drawPoints: false, interpolation: false } });
        scoreEvents.forEach(function(evt) {
            items.push({ x: evt[0], y: evt[1], group: groupn });
        });
        groupn++;
    });
    var dataset = new vis.DataSet(items);
    var graph = new vis.Graph2d(document.getElementById('chart'), dataset, groups, {legend: true, dataAxis: {left: {range: {min: 0}}}, showCurrentTime: false});
</script>
{% endblock %}