ColdCore/templates/scoreboard.html

79 lines
2.5 KiB
HTML

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