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); }