diff --git a/static/js/utils.js b/static/js/utils.js new file mode 100644 index 0000000..53e658f --- /dev/null +++ b/static/js/utils.js @@ -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); +} diff --git a/templates/server_detail.html b/templates/server_detail.html index e9f2ec7..3ddb3bc 100644 --- a/templates/server_detail.html +++ b/templates/server_detail.html @@ -19,9 +19,9 @@

{{end}} - Last seen - {{.server.TimeSince}} - ago. + + Last seen {{.server.TimeSince}} ago. +

Players

@@ -53,6 +53,7 @@
+ @@ -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); }); {{template "footer"}}