Skip to content

Commit

Permalink
Add tooltips to timestamps to show a readable string
Browse files Browse the repository at this point in the history
In the judge's page, anywhere there is a POSIX timestamp, add a tooltip
that shows a human-readable string. This is done with the Bootstrap
tooltip feature. This obsoletes Tim's pull request #9.
  • Loading branch information
michaelfelixmurphy committed Feb 22, 2019
1 parent 9bd8b96 commit c687837
Showing 1 changed file with 39 additions and 6 deletions.
45 changes: 39 additions & 6 deletions templates/judge.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@
}
}

// Convert a POSIX timestamp in seconds to a human-readable date string
function secsToTimeString(secs) {
return new Date(secs * 1000).toLocaleTimeString();
}

function postForm(e) {
e.preventDefault(); // Prevent normal form submission

Expand Down Expand Up @@ -179,6 +184,11 @@
console.info("onMessageArrived: " + message.destinationName + ": " +
message.payloadString);

// In all the below cases, when we set a span containing a timestamp,
// we also set a tooltip showing the human-readable string. Normally
// this would be set in the "title" attribute, but the Bootstrap
// tooltip library ignores dynamically set titles, so we sidestep it
// and use "data-original-title" which is what Bootstrap checks.
var msg = message.payloadString;
var topic = message.destinationName.substring(11);
switch (topic) {
Expand All @@ -191,6 +201,8 @@
} else {
var split = splitOnWhitespace(msg, 7);
$("#startTimeSpan").text(split[0]);
$("#startTimeSpan").attr("data-original-title",
secsToTimeString(split[0]));
$("#numFlagsSpan").text(split[4]);
$("#gameNumSpan").text(split[5]);
$("#territorySpan").text(split[6]);
Expand All @@ -213,36 +225,49 @@
break;
case 'endtime':
$("#endTimeSpan").text(msg);
$("#endTimeSpan").attr("data-original-title",
secsToTimeString(msg));
break;
// In all three message cases, append a non-breaking space so that
// empty messages don't change the page layout.
case 'message':
var split = splitOnFirstWhitespace(msg);
$("#bothMessageTimeSpan").text(split[0]);
$("#bothMessageTimeSpan").attr("data-original-title",
secsToTimeString(split[0]));
$("#bothMessageSpan").text(split[1]);
$("#bothMessageSpan").append(" ");
break;
case 'message/player':
var split = splitOnFirstWhitespace(msg);
$("#playerMessageTimeSpan").text(split[0]);
$("#playerMessageTimeSpan").attr("data-original-title",
secsToTimeString(split[0]));
$("#playerMessageSpan").text(split[1]);
$("#playerMessageSpan").append(" ");
break;
case 'message/jail':
var split = splitOnFirstWhitespace(msg);
$("#jailMessageTimeSpan").text(split[0]);
$("#jailMessageTimeSpan").attr("data-original-title",
secsToTimeString(split[0]));
$("#jailMessageSpan").text(split[1]);
$("#jailMessageSpan").append(" ");
break;
case 'messagereset':
$("#hideMessagesTimeSpan").text(msg);
$("#hideMessagesTimeSpan").attr("data-original-title",
secsToTimeString(msg));
break;
default:
console.error("Unknown topic: " + message.destinationName);
}
}

$(document).ready(function () {
// Enable all Bootstrap popovers
$("[data-toggle='tooltip']").tooltip();

// Form submit actions
$(".form-ajax-submit").submit(postForm);
$(".form-no-submit").submit(function (e) {e.preventDefault();});
Expand Down Expand Up @@ -354,7 +379,9 @@ <h4 id="extraCommandResults" class="text-center"></h4>
id="startTimeInput" name="start_timestamp"
placeholder="Start timestamp">
</div>
<p id="startTimeSpan" class="judge-value text-center"></p>
<p id="startTimeSpan" class="judge-value text-center"
data-toggle="tooltip" data-placement="bottom">
</p>
</div>
</div>

Expand Down Expand Up @@ -554,13 +581,16 @@ <h4 id="extraCommandResults" class="text-center"></h4>
placeholder="Message timestamp">
</div>
<p id="playerMessageTimeSpan"
class="hidden judge-value text-center">
class="hidden judge-value text-center"
data-toggle="tooltip" data-placement="bottom">
</p>
<p id="jailMessageTimeSpan"
class="hidden judge-value text-center">
class="hidden judge-value text-center"
data-toggle="tooltip" data-placement="bottom">
</p>
<p id="bothMessageTimeSpan"
class="judge-value text-center">
class="judge-value text-center"
data-toggle="tooltip" data-placement="bottom">
</p>
</div>

Expand Down Expand Up @@ -650,7 +680,8 @@ <h4 id="extraCommandResults" class="text-center"></h4>
placeholder="Timestamp">
</div>
<p id="hideMessagesTimeSpan"
class="judge-value-xs">
class="judge-value-xs"
data-toggle="tooltip" data-placement="bottom">
</p>
</div>
<button type="submit"
Expand Down Expand Up @@ -693,7 +724,9 @@ <h4 id="extraCommandResults" class="text-center"></h4>
<input type="text" class="form-control" id="endTimeInput"
name="end_timestamp" placeholder="End timestamp">
</div>
<p id="endTimeSpan" class="judge-value text-center"></p>
<p id="endTimeSpan" class="judge-value text-center"
data-toggle="tooltip" data-placement="bottom">
</p>
</div>
</div>

Expand Down

0 comments on commit c687837

Please sign in to comment.