Fix the tooltips and js timestamps.

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);
+}

templates/server_detail.html

@@ -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}}">
+        <span id="timestamp" onmouseover="timestamp_tooltip({{.server.Timestamp}})" onmouseout="hide_tooltip()">
-            {{.server.TimeSince}}
+            Last seen <span class="bold">{{.server.TimeSince}}</span> ago.
-        </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) {
+            $("#weekhistory").bind("plothover", players_at_tooltip);
-                if (item) {
+            $("#monthhistory").bind("plothover", players_at_tooltip);
-                    var time = item.datapoint[0];
+            $("#weekdayavg").bind("plothover", players_tooltip);
-                    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();
-                }
-            });
         });
     </script>
 {{template "footer"}}