ngxstat/templates/index.html

73 lines
2.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="field is-grouped">
<div class="control has-icons-left">
<div class="select is-small">
<select id="interval-select">
{% for interval in intervals %}
<option value="{{ interval }}">{{ interval.title() }}</option>
{% endfor %}
</select>
</div>
<span class="icon is-small is-left"><i data-feather="clock"></i></span>
</div>
<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 intervalSelect = document.getElementById('interval-select');
const domainSelect = document.getElementById('domain-select');
const iframe = document.getElementById('report-frame');
let currentInterval = intervalSelect.value;
let currentDomain = domainSelect.value;
function updateFrame() {
let path = currentInterval;
if (currentDomain) {
path = 'domains/' + currentDomain + '/' + currentInterval;
}
iframe.src = path + '/index.html';
}
intervalSelect.addEventListener('change', () => {
currentInterval = intervalSelect.value;
updateFrame();
});
domainSelect.addEventListener('change', () => {
currentDomain = domainSelect.value;
updateFrame();
});
iframe.addEventListener('load', () => {
try {
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
} catch (e) {}
});
updateFrame();
feather.replace();
</script>
</body>
</html>