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

Style interval and domain selectors as Bulma buttons

Browse source
This commit is contained in:
Jordan Wages 2025-07-18 21:51:30 -05:00
commit a789fee69a
1 changed files with 28 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

31
templates/index.html
View file

@ -14,14 +14,29 @@
<p class="menu-label">Intervals</p>
<ul class="menu-list" id="interval-list">
{% for interval in intervals %}
<li><a href="#" data-interval="{{ interval }}"><span class="icon"><i data-feather="clock"></i></span>{{ interval.title() }}</a></li>
<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>
{% endfor %}
</ul>
<p class="menu-label">Domains</p>
<ul class="menu-list" id="domain-list">
<li><a href="#" data-domain=""><span class="icon"><i data-feather="globe"></i></span>All Domains</a></li>
<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 href="#" data-domain="{{ domain }}"><span class="icon"><i data-feather="server"></i></span>{{ domain }}</a></li>
<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>
@ -37,6 +52,12 @@
const domainLinks = document.querySelectorAll('#domain-list a');
let currentInterval = intervalLinks.length ? intervalLinks[0].dataset.interval : '';
let currentDomain = '';
function setActive(list, el) {
list.forEach(a => a.classList.remove('is-primary'));
if (el) el.classList.add('is-primary');
}
function updateFrame() {
let path = currentInterval;
if (currentDomain) {
@ -48,6 +69,7 @@
a.addEventListener('click', e => {
e.preventDefault();
currentInterval = a.dataset.interval;
setActive(intervalLinks, a);
updateFrame();
});
});
@ -55,9 +77,12 @@
a.addEventListener('click', e => {
e.preventDefault();
currentDomain = a.dataset.domain;
setActive(domainLinks, a);
updateFrame();
});
});
setActive(intervalLinks, intervalLinks[0]);
setActive(domainLinks, domainLinks[0]);
updateFrame();
feather.replace();
</script>