erki/ss13_se
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the tooltips and js timestamps.

Browse Source
This commit is contained in:
A. Svensson 2016-02-22 18:36:34 +01:00
parent 4240297aa8
commit fcf964d936
2 changed files with 61 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
static/js/utils.js Normal file
View File

@ -0,0 +1,54 @@
function pad(value){
str = String(value);
if (str.length == 1) {
str = "0" + str;
}
return str;
}
function format_date(time){
var ts = time.getFullYear() + "-";
// +1 because this fucker decided to be zero indexed, unlike the rest.
ts += pad(time.getUTCMonth()+1) + "-";
ts += pad(time.getUTCDate()) + " ";
ts += pad(time.getUTCHours()) + ":";
ts += pad(time.getUTCMinutes()) + " UTC";
return ts
}
function show_tooltip(msg, x, y){
$("#tooltip")
.html(msg)
.css({top: y, left: x})
.fadeIn(200);
}
function hide_tooltip(){
$("#tooltip").hide();
}
function players_at_tooltip(event, pos, item) {
if (item) {
var time = item.datapoint[0];
var players = item.datapoint[1];
var timestamp = format_date(new Date(time));
show_tooltip(players + " players at " + timestamp, item.pageX+5, item.pageY+5);
} else {
hide_tooltip();
}
}
function players_tooltip(event, pos, item) {
if (item) {
var players = item.datapoint[1];
show_tooltip(players + " players", item.pageX, item.pageY);
} else {
hide_tooltip();
}
}
function timestamp_tooltip(time){
var pos = $("#timestamp").offset();
show_tooltip(time, pos.left, pos.top+20);
}

47
templates/server_detail.html
View File

@ -19,9 +19,9 @@
<p id="server_status" class="status_online">
<span title="Online: was seen during the last hour." class="glyphicon glyphicon-ok-sign"></span>
{{end}}
Last seen <span class="bold" title="{{.server.Timestamp}}">
{{.server.TimeSince}}
</span>ago.
<span id="timestamp" onmouseover="timestamp_tooltip({{.server.Timestamp}})" onmouseout="hide_tooltip()">
Last seen <span class="bold">{{.server.TimeSince}}</span> ago.
</span>
</p>
<h3>Players</h3>
@ -53,6 +53,7 @@
<div id="weekdayavg"></div>
<div id="tooltip"></div>
<script type="text/javascript" src="/static/js/utils.js"></script>
<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>
@ -113,43 +114,9 @@
},
});
$("#weekhistory").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();
}
});
$("#monthhistory").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();
}
});
$("#weekdayavg").bind("plothover", function (event, pos, item) {
if (item) {
var players = item.datapoint[1];
$("#tooltip")
.html(players + " players")
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
$("#weekhistory").bind("plothover", players_at_tooltip);
$("#monthhistory").bind("plothover", players_at_tooltip);
$("#weekdayavg").bind("plothover", players_tooltip);
});
</script>
{{template "footer"}}