vn-repo/web/main.js

let logsPath = 'logs';

window.onload = () => {
    let select = $('select');
    let parser = new DOMParser();

    let request = new XMLHttpRequest();
    request.open('GET', `${logsPath}/`);
    request.onreadystatechange = () => {
        if (request.readyState !== 4 || request.status !== 200) return;
        let htmlDoc = parser.parseFromString(request.responseText, 'text/html');
        let links = htmlDoc.querySelectorAll('td > a');

        for (let link of links) {
            let matches = /^(.+)?\.out$/.exec(link.getAttribute('href'));
            if (matches) {
                let option = document.createElement('option');
                option.value = matches[0];
                option.appendChild(document.createTextNode(matches[1]));
                select.appendChild(option);
            }
        }

        refresh();
    };
    request.send();

    refresh();
    setInterval(() => {
        if ($('#autorefresh').checked)
            refresh();
    }, 2000);
};

function refresh(doScroll) {
    if (!$('select').value) {
        $('pre').textContent = '';
        return;
    }

    let request = new XMLHttpRequest();
    request.onreadystatechange = () => {
        if (request.readyState !== 4 || request.status !== 200) return;
        if ($('pre').textContent === request.responseText) return;

        doScroll = doScroll || window.pageYOffset + window.innerHeight >= document.body.scrollHeight;
        $('pre').textContent = request.responseText;

        if (doScroll)
            window.scrollTo(0, document.body.scrollHeight);
    };
    request.open('GET', `${logsPath}/${$('select').value}`);
    request.send();
}

function $(selector) {
    return document.querySelector(selector);
}