107 lines
3.2 KiB
HTML
107 lines
3.2 KiB
HTML
{% extends "base_site.html" %}
|
|
{% load staticfiles %}
|
|
|
|
{% block title %}
|
|
{{server}}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>
|
|
{{server}}
|
|
</h1>
|
|
|
|
<a class="btn btn-default" href="{{server.game_url}}" rel="nofollow">Launch game</a>
|
|
{% if server.site_url %}
|
|
<a class="btn btn-default" href="{{server.site_url}}" rel="nofollow">Homepage</a>
|
|
{% else %}
|
|
<button class="btn btn-default">No homepage</button>
|
|
{% endif %}
|
|
|
|
<h2>Player Population</h2>
|
|
<p>Currently <span class="bold">
|
|
{{server.current_players}} players
|
|
</span>online.</p>
|
|
|
|
<p>Last updated <span class="bold" title="{{server.last_updated|date:'r'}} GMT">
|
|
{{server.last_updated|timesince}}
|
|
</span>ago.</p>
|
|
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Time period</th>
|
|
<th>Average</th>
|
|
<th>Min</th>
|
|
<th>Max</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>Last day</th>
|
|
<th>{{daily_average|floatformat}}</th>
|
|
<th>{{daily_min}}</th>
|
|
<th>{{daily_max}}</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Last week</th>
|
|
<th>{{weekly_average|floatformat}}</th>
|
|
<th>{{weekly_min}}</th>
|
|
<th>{{weekly_max}}</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Last month</th>
|
|
<th>{{monthly_average|floatformat}}</th>
|
|
<th>{{monthly_min}}</th>
|
|
<th>{{monthly_max}}</th>
|
|
</tr>
|
|
</table>
|
|
|
|
<div id="chart"></div>
|
|
<div id="tooltip"></div>
|
|
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
|
|
<script type="text/javascript" src="{% static 'js/jquery.flot.js' %}"></script>
|
|
<script type="text/javascript" src="{% static 'js/jquery.flot.time.js' %}"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
var series = [
|
|
{# convert timestamp to ms, because javascript... #}
|
|
{% for item in weekly_history %}
|
|
[{{item.created|date:'U'}} * 1000, {{item.players}}],
|
|
{% endfor %}
|
|
];
|
|
|
|
var options = {
|
|
xaxis: {
|
|
mode: "time",
|
|
timezone: "browser",
|
|
},
|
|
lines: {
|
|
show: true,
|
|
fill: true,
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 0,
|
|
},
|
|
};
|
|
|
|
$.plot("#chart", [series], options);
|
|
|
|
$("#chart").bind("plothover", function (event, pos, item) {
|
|
if (item) {
|
|
var time = item.datapoint[0];
|
|
var players = item.datapoint[1];
|
|
var timestamp = new Date(time).toString();
|
|
$("#tooltip")
|
|
.html(players + " players at " + timestamp)
|
|
.css({top: item.pageY+5, left: item.pageX+5})
|
|
.fadeIn(200);
|
|
} else {
|
|
$("#tooltip").hide();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|