wagesj45/ngxstat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor UI with dropdown selectors

Browse source
This commit is contained in:
Jordan Wages 2025-07-18 22:25:25 -05:00
commit 8abd5dedac
2 changed files with 46 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

97
templates/index.html
View file

@ -8,81 +8,64 @@
<body class="section">
<div class="container">
<h1 class="title">ngxstat Reports</h1>
<div class="columns">
<div class="column is-one-quarter">
<aside class="menu">
<p class="menu-label">Intervals</p>
<ul class="menu-list" id="interval-list">
<div class="field is-grouped">
<div class="control has-icons-left">
<div class="select is-small">
<select id="interval-select">
{% for interval in intervals %}
<li>
<a class="button is-small is-fullwidth" href="#" data-interval="{{ interval }}">
<span class="icon"><i data-feather="clock"></i></span>
<span>{{ interval.title() }}</span>
</a>
</li>
<option value="{{ interval }}">{{ interval.title() }}</option>
{% endfor %}
</ul>
<p class="menu-label">Domains</p>
<ul class="menu-list" id="domain-list">
<li>
<a class="button is-small is-fullwidth" href="#" data-domain="">
<span class="icon"><i data-feather="globe"></i></span>
<span>All Domains</span>
</a>
</li>
{% for domain in domains %}
<li>
<a class="button is-small is-fullwidth" href="#" data-domain="{{ domain }}">
<span class="icon"><i data-feather="server"></i></span>
<span>{{ domain }}</span>
</a>
</li>
{% endfor %}
</ul>
</aside>
</select>
</div>
<span class="icon is-small is-left"><i data-feather="clock"></i></span>
</div>
<div class="column">
<iframe id="report-frame" src="" style="width:100%;height:80vh;border:none;"></iframe>
<div class="control has-icons-left">
<div class="select is-small">
<select id="domain-select">
<option value="">All Domains</option>
{% for domain in domains %}
<option value="{{ domain }}">{{ domain }}</option>
{% endfor %}
</select>
</div>
<span class="icon is-small is-left"><i data-feather="server"></i></span>
</div>
</div>
<iframe id="report-frame" src="" style="width:100%;border:none;"></iframe>
</div>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
const intervalLinks = document.querySelectorAll('#interval-list a');
const domainLinks = document.querySelectorAll('#domain-list a');
let currentInterval = intervalLinks.length ? intervalLinks[0].dataset.interval : '';
let currentDomain = '';
const intervalSelect = document.getElementById('interval-select');
const domainSelect = document.getElementById('domain-select');
const iframe = document.getElementById('report-frame');
function setActive(list, el) {
list.forEach(a => a.classList.remove('is-primary'));
if (el) el.classList.add('is-primary');
}
let currentInterval = intervalSelect.value;
let currentDomain = domainSelect.value;
function updateFrame() {
let path = currentInterval;
if (currentDomain) {
path = 'domains/' + currentDomain + '/' + currentInterval;
}
document.getElementById('report-frame').src = path + '/index.html';
iframe.src = path + '/index.html';
}
intervalLinks.forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
currentInterval = a.dataset.interval;
setActive(intervalLinks, a);
updateFrame();
});
intervalSelect.addEventListener('change', () => {
currentInterval = intervalSelect.value;
updateFrame();
});
domainLinks.forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
currentDomain = a.dataset.domain;
setActive(domainLinks, a);
updateFrame();
});
domainSelect.addEventListener('change', () => {
currentDomain = domainSelect.value;
updateFrame();
});
setActive(intervalLinks, intervalLinks[0]);
setActive(domainLinks, domainLinks[0]);
iframe.addEventListener('load', () => {
try {
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
} catch (e) {}
});
updateFrame();
feather.replace();
</script>

12
tests/test_reports.py
View file

@ -151,10 +151,10 @@ def test_generate_root_index(tmp_path, sample_reports, monkeypatch):
assert index_file.exists()
content = index_file.read_text()
# check for interval links
assert 'data-interval="hourly"' in content
assert 'data-interval="daily"' in content
# check for interval options
assert '<option value="hourly">' in content
assert '<option value="daily">' in content
# check for domain links
assert 'data-domain="foo.com"' in content
assert 'data-domain="bar.com"' in content
# check for domain options
assert '<option value="foo.com">' in content
assert '<option value="bar.com">' in content