rubygoldberg-tracker/watcher/static/index.js

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) {
        alert("yes");
        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));
    }
});