Added the first templates for the server list.

This commit is contained in:
A. Svensson 2015-02-19 20:27:29 +01:00
parent f67ff0453a
commit df03e1dfe7
3 changed files with 146 additions and 0 deletions

View File

@ -0,0 +1,45 @@
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
<title>
{% block title %}{% endblock %} | SS13 Hub
</title>
</head>
<body>
<header>
<nav id="navbar">
<ul>
<li><a href="/">SS13 Hub</a></li>
<li><a href="{% url 'gameservers:index' %}">Servers</a></li>
</ul>
</nav>
</header>
<section id="content">
{% block content %}
{% endblock %}
</section>
<footer id="bottom_footer">
<p>
{% comment %}
TODO: not sure about the copyright stuff when fetching data from
the ss13 game page at:
http://www.byond.com/games/exadv1/spacestation13
{% endcomment %}
Copyright © {% now 'Y' %}
A. Svensson
<span class="right">
Source code at
<a href="https://github.com/lmas/">Github</a>.
</span>
</p>
</footer>
</body>
</html>

View File

@ -0,0 +1,68 @@
{% 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>Server population</h2>
<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 = [
{% for tmp in population %}
[{{tmp.timestamp|date:'U'}} * 1000, {{tmp.players}}],
{% endfor %}
];
var options = {
xaxis: {
mode: "time",
timezone: "UTC",
},
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).toUTCString();
$("#tooltip")
.html(players + " players at " + timestamp)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});
</script>
{% endblock %}

View File

@ -0,0 +1,33 @@
{% extends "base_site.html" %}
{% block title %}
Index
{% endblock %}
{% block content %}
<table class="table table-hover">
<thead>
<tr>
<th>Players</th>
<th>Server</th>
</tr>
</thead>
<tbody>
{% for server in server_list %}
<tr>
<th>{{server.current_players}}</th>
<th>
<a href="{% url 'gameservers:detail' pk=server.id slug=server %}">
{{server}}
</a>
</th>
</tr>
{% empty %}
<tr>
<th>?</th>
<th>Sorry, no servers!</th>
<tr>
{% endfor %}
</tbody>
</table>
{% endblock %}