rubygoldberg-tracker/watcher/static/index.js
Maxime Bloch e74c2f4634
working websockets for the current run.
Added initial ws sync on page load
Added start and handoff updates via ws
2019-09-22 03:11:19 +02:00

72 lines
2.5 KiB
JavaScript

requirejs.config({
paths: {
'socket.io': 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io',
'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min',
},
waitSeconds: 3
});
require(['jquery', 'socket.io'], function(jq, io) {
function getDurationString(link_data) {
// Print time diff in following format
// 1s
// 11s
// 1:11s
// 1:01s
let duration = new Date((link_data["handoff"] - link_data["start"]) * 1000);
let minutes = duration.getMinutes();
let seconds = minutes > 0 ? (duration.getSeconds() > 9 ? duration.getSeconds() : "0" + duration.getSeconds()) : duration.getSeconds();
let durationString = (minutes > 0 ? (minutes + "m") : "") + seconds + "s";
return durationString;
}
$(function() {
const socket = io('localhost:5000');
socket.on('start_run', function(run_index) {});
socket.on('link_start', function(link_data) {
addLink(link_data["id"], link_data);
});
socket.on('link_handoff', function(link_data) {
stop = new Date(link_data["handoff"] * 1000);
let stopString = stop.getHours() + ":" + stop.getMinutes();
$(`#link-${link_data["id"]} .link-status`).css("color", "green").removeClass("fa-question").addClass("fa-check");
$(`#link-${link_data["id"]} .link-time`).text(`Time: ${getDurationString(link_data)}`);
});
socket.on('sync_current_run', function(run_data) {
$('#current_run>div:gt(0)').remove();
for (link_id in run_data["data"]) {
addLink(link_id, run_data["data"][link_id]);
}
});
});
function addLink(link_id, link_data) {
let start = new Date(link_data["start"] * 1000);
let datestring = start.getHours() + ":" + start.getMinutes();
let stop = undefined;
let stopString = undefined;
if (link_data["handoff"]) {
stop = new Date(link_data["handoff"] * 1000);
stopString = stop.getHours() + ":" + stop.getMinutes();
}
let html = `
<div id='link-${link_id}' class="item">
<div>${link_id}</div>
<div class="link-time">${stop !== undefined ? "Time: " + getDurationString(link_data) : "Running"}</div>
<div>
<i class="link-status fas fa-${stop !== undefined ? "check" : "question"}" ${stop !== undefined ? "style=\"color:green\"" : ""}></i>
</div>
</div>
`;
$('#current_run').append($(html));
}
});