90 lines
3 KiB
HTML
90 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>ngxstat Reports</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
</head>
|
|
<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">
|
|
{% 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>
|
|
{% 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>
|
|
</div>
|
|
<div class="column">
|
|
<iframe id="report-frame" src="" style="width:100%;height:80vh;border:none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</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 = '';
|
|
|
|
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) {
|
|
path = 'domains/' + currentDomain + '/' + currentInterval;
|
|
}
|
|
document.getElementById('report-frame').src = path + '/index.html';
|
|
}
|
|
intervalLinks.forEach(a => {
|
|
a.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
currentInterval = a.dataset.interval;
|
|
setActive(intervalLinks, a);
|
|
updateFrame();
|
|
});
|
|
});
|
|
domainLinks.forEach(a => {
|
|
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>
|
|
</body>
|
|
</html>
|