rubygoldberg-tracker/watcher/static/index.js

89 lines
2.9 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]);
}
});
socket.on('live_request', function(request_data) {
console.log("live request");
request_time = new Date(request_data["time"] * 1000);
addLiveRequest(request_data["hostname"], request_time);
});
});
function addLiveRequest(request_host, request_time) {
let hostname = request_host;
let timesting = request_time.getHours() + ":" + request_time.getMinutes();
let html = `
<div class="item">
<div>
${hostname}
</div>
<div>
${timesting}
</div>
</div>
`;
$('#live_requests').prepend($(html));
}
function addLink(link_id, link_data) {
let stop = "handoff" in link_data;
let time = (stop ? "Time: " + getDurationString(link_data) : "Running");
let icon = (stop ? "check" : "question");
let style = (stop ? "style=\"color:green\"" : "");
let html = `
<div id='link-${link_id}' class="item">
<div>${link_id}</div>
<div class="link-time">${time}</div>
<div>
<i class="link-status fas fa-${icon}" ${style}></i>
</div>
</div>
`;
$('#current_run').append($(html));
}
});