65 lines
2.2 KiB
JavaScript
65 lines
2.2 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 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));
|
|
}
|
|
});
|