diff --git a/data/web/log/script.js b/data/web/log/script.js index fefe69a3c0..9d82ac59ac 100644 --- a/data/web/log/script.js +++ b/data/web/log/script.js @@ -1,6 +1,19 @@ +var sessionData = {}; +try { + sessionData = JSON.parse(decodeURIComponent(window.location.hash.slice(1))); +} catch (e) {} + var levels = ['trace', 'debug', 'info', 'warning', 'error', 'fatal']; var filterLevel = 0; +function insert(newNode, parentNode) { + parentNode.insertBefore(newNode, null); +} + +function insertBefore(newNode, referenceNode) { + referenceNode.parentNode.insertBefore(newNode, referenceNode); +} + function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } @@ -12,7 +25,9 @@ function remove(node) { function scrollToPosition(selector) { var element = document.querySelector(selector); if (element && element.scrollIntoView) { - element.scrollIntoView(); + var rect = element.getBoundingClientRect(); + // Header is 80 px, 40 px margin + window.scrollTo(window.scrollX, + window.scrollY + rect.top - 80 - 40); } } @@ -80,49 +95,132 @@ function updateFilter() { } }); if (nShown === 0) { - var select = document.getElementsByTagName('select')[0]; + var header = document.getElementsByTagName('header')[0]; var p = document.createElement("p"); p.id = "no-messages"; p.innerHTML = "There are no log messages with the level '" + levels[filterLevel] + "' or higher."; - insertAfter(p, select); + insertAfter(p, header); table.classList.add('hidden'); } } +var reloadHandle = 0; + +function scheduleReload() { + updateSessionData({ + reload: true + }); + reloadHandle = window.setTimeout(function () { + window.location.reload(); + }, 5000); +} + +function unscheduleReload() { + updateSessionData({ + reload: false + }); + window.clearTimeout(reloadHandle); +} + +function updateSessionData(obj) { + var changed = false; + Object.keys(obj).forEach(function (k) { + if (sessionData != obj[k]) { + sessionData[k] = obj[k]; + changed = true; + } + if (!sessionData[k]) { + delete sessionData[k]; + } + }); + if (changed) { + window.location.hash = '#' + JSON.stringify(sessionData); + } +} + window.onload = function () { - var header = document.getElementsByTagName('h1')[0]; - header.innerHTML = "OpenSpace Log"; + var header = document.createElement('header'); + + var headerTitle = document.createElement('h1'); + headerTitle.innerHTML = "OpenSpace Log"; var summary = document.createElement('p'); + summary.id = 'summary'; summary.innerHTML = getSummary(); - var select = document.createElement('select'); - select.id = 'filter-level-selector'; + var selectFilter = document.createElement('select'); + selectFilter.id = 'filter-level-selector'; - var selectLabel = document.createElement('label'); - selectLabel.for = 'filter-level-selector'; - selectLabel.innerHTML = "Lowest log level to show: "; + var selectFilterGroup = document.createElement('div'); + var selectFilterLabel = document.createElement('label'); + selectFilterLabel.innerHTML = "Filter level"; levels.forEach(function (level) { var option = document.createElement('option'); option.value = level; option.innerHTML = level; - select.appendChild(option); + selectFilter.appendChild(option); }); - insertAfter(summary, header); - insertAfter(selectLabel, summary); - insertAfter(select, selectLabel); - var preselectedIndex = levels.indexOf(window.location.hash.slice(1)); + var autoReloadToggle = document.createElement('input'); + autoReloadToggle.type = 'checkbox'; + + if (sessionData.reload) { + scheduleReload(); + autoReloadToggle.checked = true; + if (sessionData.trackBottom) { + window.setTimeout(function () { + window.scrollTo(window.scrollX, document.body.scrollHeight); + }, 1); + } + } + + autoReloadToggle.onchange = function () { + if (autoReloadToggle.checked) { + scheduleReload(); + } else { + unscheduleReload(); + } + }; + + var autoReloadLabel = document.createElement('label'); + autoReloadLabel.innerHTML = "Auto-reload"; + + var autoReloadGroup = document.createElement('div'); + + insertBefore(header, document.getElementsByTagName('table')[0]); + insert(headerTitle, header); + insert(summary, header); + + insert(selectFilterLabel, selectFilterGroup) + insert(selectFilter, selectFilterGroup); + insert(selectFilterGroup, header); + + insert(autoReloadLabel, autoReloadGroup); + insert(autoReloadToggle, autoReloadGroup); + insert(autoReloadGroup, header) + + + var preselectedIndex = levels.indexOf(sessionData.filter || 'trace'); if (preselectedIndex >= 0) { - filterLevel = select.selectedIndex = preselectedIndex; + filterLevel = selectFilter.selectedIndex = preselectedIndex; updateFilter(); } - select.onchange = function (evt) { - filterLevel = select.selectedIndex; + selectFilter.onchange = function (evt) { + filterLevel = selectFilter.selectedIndex; updateFilter(); - window.location.hash = '#' + select.options[select.selectedIndex].value; + updateSessionData({ + filter: selectFilter.options[selectFilter.selectedIndex].value + }); }; + + window.onscroll = function () { + var scroll = document.documentElement.scrollTop || document.body.scrollTop; + scroll += window.innerHeight; + updateSessionData({ + trackBottom: scroll > document.body.scrollHeight - 10 + }); + } } \ No newline at end of file diff --git a/data/web/log/style.css b/data/web/log/style.css index 5b14dc72ad..635283128b 100644 --- a/data/web/log/style.css +++ b/data/web/log/style.css @@ -1,5 +1,39 @@ -table { +html, body { + background-color: #222; +} + +header { + position: fixed; width: 100%; + height: 80px; + z-index: 1; + background-color: #000; + min-width: 800px; +} + +header div { + float: left; + color: #ddd; + margin-top: 30px; + margin-right: 20px; + float: right; +} + +@media (max-width: 1024px) { + header div { + + } +} + +label { + margin-right: 10px; +} + +table { + position: relative; + top: 80px; + width: 100%; + background-color: #222; } td, th { @@ -7,51 +41,56 @@ td, th { } .log-date { - width: 8em; + white-space: nowrap; } h1 { + color: #fff; padding-left: 15px; + float: left; + margin-right: 15px; +} + +#summary { + float: left; + margin-left: 20px; + margin-top: 30px; +} + +#filter-level-selector { + background-color: #333; + color: #eee; } .hidden { display: none; } -p, label { - margin-left: 15px; - margin-bottom: 15px; -} - -label { - margin-right: 0.5em; -} - .log-level-trace { - color: #eeeeee; - background-color: #aaaaaa; - border-bottom: 1px solid #eaeaea; + color: #eee; + background-color: #333; + border-bottom: 1px solid #111; } .log-level-trace td:first-child { - border-left: 10px solid #eaeaea; + border-left: 10px solid #111; } .log-level-debug { - background-color: #bbdda9; - border-bottom: 1px solid #7bc142; - color: #265127; + background-color: #3A4556; + border-bottom: 1px solid #172228; + color: #ccd1d6; } .log-level-debug td:first-child { - border-left: 10px solid #7bc142; + border-left: 10px solid #172228; } thead, .log-level-info { - color: #333333; - background-color: #ffffff; - border-bottom: 1px solid #eaeaea; + color: #eee; + background-color: #333; + border-bottom: 1px solid #111; } .log-level-info td:first-child { - border-left: 10px solid #eaeaea; + border-left: 10px solid #111; } thead th:first-child { @@ -68,12 +107,12 @@ thead th:first-child { } .log-level-error { - color: #4c1315; - background-color: #fcdcdc; - border-bottom: 1px solid #d66767; + color: #fcdcdc; + background-color: #d66767; + border-bottom: 1px solid #721c1c; } .log-level-error td:first-child { - border-left: 10px solid #d66767; + border-left: 10px solid #721c1c; } .log-level-fatal { @@ -93,11 +132,27 @@ thead th:first-child { background-color: #fef8c3; } .summary-error { - background-color: #fcdcdc; + background-color: #d66767; + color: #fcdcdc; } +.summary-error a { + color: #fff; +} + .summary-fatal { background-color: #ff7dc1; } +.summary-fatal a { + color: #fff; +} + .summary-ok { background-color: #bbdda9; +} + +#no-messages { + position: relative; + top: 120px; + margin-left: 20px; + color: #ddd; } \ No newline at end of file diff --git a/ext/ghoul b/ext/ghoul index c5ddf4d99a..c97b3c8a9b 160000 --- a/ext/ghoul +++ b/ext/ghoul @@ -1 +1 @@ -Subproject commit c5ddf4d99a04ea354510cb890ac16bd3d884864a +Subproject commit c97b3c8a9b57a8f79189f358fa913184276492e5