581 lines
24 KiB
HTML
581 lines
24 KiB
HTML
{% extends "admin/layout.html" %}
|
|
{% let active_page = "analytics" %}
|
|
|
|
{% block title %}{{ t.analytics_title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>{{ t.analytics_title }}</h1>
|
|
<p>{{ t.analytics_intro }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-controls"
|
|
data-labels='{
|
|
"landing_views": "{{ t.analytics_metric_landing_views }}",
|
|
"landing_unique": "{{ t.analytics_metric_landing_unique }}",
|
|
"portal_opens": "{{ t.analytics_metric_portal_opens }}",
|
|
"media_views": "{{ t.analytics_metric_media_views }}",
|
|
"no_data": "{{ t.analytics_no_data }}",
|
|
"loading": "{{ t.analytics_loading }}",
|
|
"error": "{{ t.analytics_load_error }}",
|
|
"log_empty": "{{ t.analytics_log_empty }}",
|
|
"log_end": "{{ t.analytics_log_end }}",
|
|
"visitor": "{{ t.analytics_log_visitor }}",
|
|
"landing_view": "{{ t.analytics_ev_landing_view }}",
|
|
"portal_open": "{{ t.analytics_ev_portal_open }}",
|
|
"media_view": "{{ t.analytics_ev_media_view }}"
|
|
}'>
|
|
<div class="analytics-presets">
|
|
<button type="button" class="button is-small preset-btn" data-days="7">{{ t.analytics_preset_7 }}</button>
|
|
<button type="button" class="button is-small preset-btn" data-days="30">{{ t.analytics_preset_30 }}</button>
|
|
<button type="button" class="button is-small preset-btn" data-days="90">{{ t.analytics_preset_90 }}</button>
|
|
<button type="button" class="button is-small preset-btn" data-days="365">{{ t.analytics_preset_365 }}</button>
|
|
</div>
|
|
<div class="analytics-range">
|
|
<label>{{ t.analytics_range_from }}
|
|
<input type="date" id="anFrom" class="input is-small">
|
|
</label>
|
|
<label>{{ t.analytics_range_to }}
|
|
<input type="date" id="anTo" class="input is-small">
|
|
</label>
|
|
<label>{{ t.analytics_granularity }}
|
|
<select id="anGran" class="input is-small">
|
|
<option value="day">{{ t.analytics_gran_day }}</option>
|
|
<option value="week">{{ t.analytics_gran_week }}</option>
|
|
<option value="month">{{ t.analytics_gran_month }}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-kpis" id="anKpis"></div>
|
|
|
|
<div class="analytics-metric-toggles">
|
|
<span class="toggles-label">{{ t.analytics_metrics_label }}:</span>
|
|
<label><input type="checkbox" class="metric-toggle" data-key="landing_views" checked> {{ t.analytics_metric_landing_views }}</label>
|
|
<label><input type="checkbox" class="metric-toggle" data-key="landing_unique" checked> {{ t.analytics_metric_landing_unique }}</label>
|
|
<label><input type="checkbox" class="metric-toggle" data-key="portal_opens" checked> {{ t.analytics_metric_portal_opens }}</label>
|
|
<label><input type="checkbox" class="metric-toggle" data-key="media_views" checked> {{ t.analytics_metric_media_views }}</label>
|
|
</div>
|
|
|
|
<div class="analytics-chart-wrap">
|
|
<div class="analytics-chart-box">
|
|
<canvas id="anChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-tops">
|
|
<div class="analytics-top-card">
|
|
<h2>{{ t.analytics_top_clients }}</h2>
|
|
<table class="analytics-top-table" id="anTopClients">
|
|
<thead><tr><th>{{ t.analytics_top_clients }}</th><th>{{ t.analytics_count }}</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="analytics-top-card">
|
|
<h2>{{ t.analytics_top_media }}</h2>
|
|
<table class="analytics-top-table" id="anTopMedia">
|
|
<thead><tr><th>{{ t.analytics_top_media }}</th><th>{{ t.analytics_count }}</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-log-card">
|
|
<div class="analytics-log-head">
|
|
<h2>{{ t.analytics_log_title }}</h2>
|
|
<div class="analytics-metric-toggles analytics-log-filters">
|
|
<span class="toggles-label">{{ t.analytics_log_show }}:</span>
|
|
<label><input type="checkbox" class="log-type-toggle" data-type="landing_view"> {{ t.analytics_ev_landing_view }}</label>
|
|
<label><input type="checkbox" class="log-type-toggle" data-type="portal_open" checked> {{ t.analytics_ev_portal_open }}</label>
|
|
<label><input type="checkbox" class="log-type-toggle" data-type="media_view" checked> {{ t.analytics_ev_media_view }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="analytics-log" id="anLog"></div>
|
|
</div>
|
|
|
|
<style>
|
|
.analytics-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-bottom:18px; }
|
|
.analytics-presets { display:flex; gap:6px; flex-wrap:wrap; }
|
|
.analytics-range { display:flex; gap:12px; flex-wrap:wrap; }
|
|
.analytics-range label { display:flex; flex-direction:column; font-size:.8rem; color:#666; gap:3px; }
|
|
.analytics-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
|
|
.analytics-kpi { background:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 1px 4px rgba(0,0,0,.06); border-left:4px solid var(--kpi-color,#7c6ed4); }
|
|
.analytics-kpi .kpi-value { font-size:1.7rem; font-weight:700; line-height:1.1; }
|
|
.analytics-kpi .kpi-label { font-size:.8rem; color:#777; margin-top:2px; }
|
|
.analytics-metric-toggles { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:12px; font-size:.85rem; }
|
|
.analytics-metric-toggles .toggles-label { color:#777; font-weight:600; }
|
|
.analytics-metric-toggles label { display:flex; align-items:center; gap:5px; cursor:pointer; }
|
|
.analytics-chart-wrap { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:20px; }
|
|
.analytics-chart-box { position:relative; height:340px; width:100%; }
|
|
@media (max-width:600px) { .analytics-chart-box { height:260px; } }
|
|
.analytics-tops { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
|
|
.analytics-top-card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
|
|
.analytics-top-card h2 { font-size:1rem; margin:0 0 10px; }
|
|
.analytics-top-table { width:100%; border-collapse:collapse; font-size:.9rem; }
|
|
.analytics-top-table th { text-align:left; color:#888; font-weight:600; font-size:.78rem; border-bottom:1px solid #eee; padding:6px 4px; }
|
|
.analytics-top-table td { padding:6px 4px; border-bottom:1px solid #f4f4f4; }
|
|
.analytics-top-table td:last-child, .analytics-top-table th:last-child { text-align:right; width:70px; }
|
|
.analytics-top-empty { color:#aaa; padding:10px 4px; }
|
|
.an-media-link { display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
|
|
.an-media-link:hover { text-decoration:underline; }
|
|
.an-media-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; background:#eceaf5; flex:0 0 auto; }
|
|
.an-media-missing { width:40px; height:40px; border-radius:6px; background:#f0f0f3; display:inline-flex; align-items:center; justify-content:center; color:#bbb; flex:0 0 auto; }
|
|
|
|
.analytics-log-card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-top:20px; }
|
|
.analytics-log-card h2 { font-size:1rem; margin:0; }
|
|
.analytics-log-head { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin-bottom:10px; }
|
|
.analytics-log-filters { margin-bottom:0; }
|
|
.analytics-log { max-height:460px; overflow-y:auto; border:1px solid #f0f0f0; border-radius:8px; }
|
|
.an-log-row { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-bottom:1px solid #f5f5f5; font-size:.85rem; }
|
|
.an-log-row:last-child { border-bottom:none; }
|
|
.an-log-icon { font-size:1.1rem; line-height:1.4; flex:0 0 auto; }
|
|
.an-log-main { flex:1 1 auto; min-width:0; }
|
|
.an-log-head { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
|
|
.an-log-event { font-weight:600; }
|
|
.an-log-client { color:#7c6ed4; }
|
|
.an-log-time { color:#999; font-size:.78rem; margin-left:auto; white-space:nowrap; }
|
|
.an-log-meta { color:#888; font-size:.78rem; margin-top:3px; word-break:break-word; }
|
|
.an-log-meta span { margin-right:12px; }
|
|
.an-log-meta code { background:rgba(0,0,0,.04); padding:1px 4px; border-radius:3px; }
|
|
.an-log-thumb { width:44px; height:44px; border-radius:6px; object-fit:cover; background:#eceaf5; flex:0 0 auto; }
|
|
.an-log-status { text-align:center; color:#aaa; padding:14px; font-size:.85rem; }
|
|
</style>
|
|
|
|
<script src="/static/chart.min.js?v={{ t.app_version() }}"></script>
|
|
<script>
|
|
(function () {
|
|
var controls = document.querySelector('.analytics-controls');
|
|
var L = JSON.parse(controls.getAttribute('data-labels'));
|
|
|
|
var META = [
|
|
{ key: 'landing_views', color: '#7c6ed4' },
|
|
{ key: 'landing_unique', color: '#00b496' },
|
|
{ key: 'portal_opens', color: '#ff8c26' },
|
|
{ key: 'media_views', color: '#ff5287' }
|
|
];
|
|
|
|
var fromInput = document.getElementById('anFrom');
|
|
var toInput = document.getElementById('anTo');
|
|
var granSelect = document.getElementById('anGran');
|
|
var kpisEl = document.getElementById('anKpis');
|
|
var chart = null;
|
|
|
|
// Draws a centered status message ("loading", "no data", error) directly on
|
|
// the chart canvas, so state changes never shift the page layout.
|
|
var messageOverlay = {
|
|
id: 'messageOverlay',
|
|
afterDraw: function (c) {
|
|
var msg = c.$message;
|
|
if (!msg) { return; }
|
|
var ctx = c.ctx;
|
|
var a = c.chartArea;
|
|
ctx.save();
|
|
ctx.fillStyle = 'rgba(255,255,255,0.72)';
|
|
ctx.fillRect(a.left, a.top, a.right - a.left, a.bottom - a.top);
|
|
ctx.fillStyle = '#8a8a8a';
|
|
ctx.font = '600 14px system-ui, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(msg, (a.left + a.right) / 2, (a.top + a.bottom) / 2);
|
|
ctx.restore();
|
|
}
|
|
};
|
|
|
|
function setMessage(msg) {
|
|
if (!chart) { return; }
|
|
chart.$message = msg;
|
|
chart.update('none');
|
|
}
|
|
|
|
function fmt(d) {
|
|
return d.getFullYear() + '-' +
|
|
String(d.getMonth() + 1).padStart(2, '0') + '-' +
|
|
String(d.getDate()).padStart(2, '0');
|
|
}
|
|
|
|
function setRange(days) {
|
|
var to = new Date();
|
|
var from = new Date();
|
|
from.setDate(from.getDate() - (days - 1));
|
|
fromInput.value = fmt(from);
|
|
toInput.value = fmt(to);
|
|
}
|
|
|
|
function metricLabel(key) { return L[key] || key; }
|
|
|
|
function hexToRgba(hex, a) {
|
|
var n = parseInt(hex.slice(1), 16);
|
|
return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + a + ')';
|
|
}
|
|
|
|
function renderKpis(report) {
|
|
kpisEl.replaceChildren();
|
|
META.forEach(function (m) {
|
|
var metric = report.metrics.find(function (x) { return x.key === m.key; });
|
|
var total = metric ? metric.total : 0;
|
|
var card = document.createElement('div');
|
|
card.className = 'analytics-kpi';
|
|
card.style.setProperty('--kpi-color', m.color);
|
|
var v = document.createElement('div');
|
|
v.className = 'kpi-value';
|
|
v.textContent = total.toLocaleString();
|
|
var lbl = document.createElement('div');
|
|
lbl.className = 'kpi-label';
|
|
lbl.textContent = metricLabel(m.key);
|
|
card.appendChild(v);
|
|
card.appendChild(lbl);
|
|
kpisEl.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function initChart() {
|
|
var ctx = document.getElementById('anChart').getContext('2d');
|
|
var datasets = META.map(function (m) {
|
|
return {
|
|
label: metricLabel(m.key),
|
|
data: [],
|
|
borderColor: m.color,
|
|
backgroundColor: hexToRgba(m.color, 0.12),
|
|
borderWidth: 2,
|
|
pointRadius: 2,
|
|
tension: 0.25,
|
|
fill: true,
|
|
hidden: false,
|
|
_key: m.key
|
|
};
|
|
});
|
|
chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: { labels: [], datasets: datasets },
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
animation: false,
|
|
interaction: { mode: 'index', intersect: false },
|
|
plugins: { legend: { display: false } },
|
|
scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
|
|
},
|
|
plugins: [messageOverlay]
|
|
});
|
|
}
|
|
|
|
function applyData(report) {
|
|
chart.data.labels = report.labels;
|
|
chart.data.datasets.forEach(function (ds) {
|
|
var metric = report.metrics.find(function (x) { return x.key === ds._key; });
|
|
ds.data = metric ? metric.values : [];
|
|
});
|
|
chart.update('none');
|
|
}
|
|
|
|
function renderTop(tableId, rows) {
|
|
var tbody = document.querySelector('#' + tableId + ' tbody');
|
|
tbody.replaceChildren();
|
|
if (!rows || rows.length === 0) {
|
|
var tr = document.createElement('tr');
|
|
var td = document.createElement('td');
|
|
td.colSpan = 2;
|
|
td.className = 'analytics-top-empty';
|
|
td.textContent = L.no_data;
|
|
tr.appendChild(td);
|
|
tbody.appendChild(tr);
|
|
return;
|
|
}
|
|
rows.forEach(function (row) {
|
|
var tr = document.createElement('tr');
|
|
var name = document.createElement('td');
|
|
name.textContent = row.label;
|
|
var cnt = document.createElement('td');
|
|
cnt.textContent = row.count.toLocaleString();
|
|
tr.appendChild(name);
|
|
tr.appendChild(cnt);
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function mediaLabel(m) {
|
|
if (!m.exists) { return '#' + m.media_id; }
|
|
var base = m.client_name || '';
|
|
if (m.caption) { return base ? base + ': ' + m.caption : m.caption; }
|
|
return base ? base + ' #' + m.media_id : '#' + m.media_id;
|
|
}
|
|
|
|
// Builds a clickable preview (opens the shared lightbox) for a media ref,
|
|
// or a placeholder if the file was deleted.
|
|
function mediaLink(m, thumbClass) {
|
|
if (m && m.exists && m.url) {
|
|
var a = document.createElement('a');
|
|
a.href = m.url;
|
|
a.setAttribute('data-lightbox', m.file_type === 'video' ? 'video' : 'photo');
|
|
a.className = 'an-media-link';
|
|
var img = document.createElement('img');
|
|
img.className = thumbClass;
|
|
img.src = m.thumbnail_url;
|
|
img.alt = '';
|
|
img.loading = 'lazy';
|
|
a.appendChild(img);
|
|
var span = document.createElement('span');
|
|
span.textContent = mediaLabel(m);
|
|
a.appendChild(span);
|
|
return a;
|
|
}
|
|
var wrap = document.createElement('span');
|
|
wrap.className = 'an-media-link';
|
|
var ph = document.createElement('span');
|
|
ph.className = 'an-media-missing';
|
|
ph.textContent = '🗑';
|
|
wrap.appendChild(ph);
|
|
var lbl = document.createElement('span');
|
|
lbl.textContent = mediaLabel(m);
|
|
wrap.appendChild(lbl);
|
|
return wrap;
|
|
}
|
|
|
|
function renderTopMedia(rows) {
|
|
var tbody = document.querySelector('#anTopMedia tbody');
|
|
tbody.replaceChildren();
|
|
if (!rows || rows.length === 0) {
|
|
var tr = document.createElement('tr');
|
|
var td = document.createElement('td');
|
|
td.colSpan = 2;
|
|
td.className = 'analytics-top-empty';
|
|
td.textContent = L.no_data;
|
|
tr.appendChild(td);
|
|
tbody.appendChild(tr);
|
|
return;
|
|
}
|
|
rows.forEach(function (m) {
|
|
var tr = document.createElement('tr');
|
|
var td1 = document.createElement('td');
|
|
td1.appendChild(mediaLink(m, 'an-media-thumb'));
|
|
var td2 = document.createElement('td');
|
|
td2.textContent = (m.count || 0).toLocaleString();
|
|
tr.appendChild(td1);
|
|
tr.appendChild(td2);
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function hasData(report) {
|
|
return report.metrics.some(function (m) { return m.total > 0; });
|
|
}
|
|
|
|
function load() {
|
|
var params = new URLSearchParams({
|
|
from: fromInput.value,
|
|
to: toInput.value,
|
|
granularity: granSelect.value
|
|
});
|
|
setMessage(L.loading);
|
|
fetch('/admin/analytics/data?' + params.toString(), { credentials: 'same-origin' })
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (report) {
|
|
renderKpis(report);
|
|
applyData(report);
|
|
renderTop('anTopClients', report.top_clients);
|
|
renderTopMedia(report.top_media);
|
|
setMessage(hasData(report) ? '' : L.no_data);
|
|
})
|
|
.catch(function () { setMessage(L.error); });
|
|
}
|
|
|
|
document.querySelectorAll('.preset-btn').forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
setRange(parseInt(btn.getAttribute('data-days'), 10));
|
|
load();
|
|
});
|
|
});
|
|
fromInput.addEventListener('change', load);
|
|
toInput.addEventListener('change', load);
|
|
granSelect.addEventListener('change', load);
|
|
document.querySelectorAll('.metric-toggle').forEach(function (cb) {
|
|
cb.addEventListener('change', function () {
|
|
if (!chart) { return; }
|
|
chart.data.datasets.forEach(function (ds) {
|
|
if (ds._key === cb.getAttribute('data-key')) { ds.hidden = !cb.checked; }
|
|
});
|
|
chart.update();
|
|
});
|
|
});
|
|
|
|
// --- Event log (newest first, infinite scroll of older events) ---------
|
|
var logEl = document.getElementById('anLog');
|
|
var logCursor = null;
|
|
var logLoading = false;
|
|
var logDone = false;
|
|
|
|
function logStatus(text) {
|
|
var s = document.createElement('div');
|
|
s.className = 'an-log-status';
|
|
s.textContent = text;
|
|
return s;
|
|
}
|
|
|
|
function eventIcon(type) {
|
|
if (type === 'landing_view') { return '🌐'; }
|
|
if (type === 'portal_open') { return '👤'; }
|
|
if (type === 'media_view') { return '🖼️'; }
|
|
return '•';
|
|
}
|
|
|
|
function shortUa(ua) {
|
|
if (!ua) { return ''; }
|
|
var browser = '';
|
|
if (/Edg\//.test(ua)) { browser = 'Edge'; }
|
|
else if (/OPR\/|Opera/.test(ua)) { browser = 'Opera'; }
|
|
else if (/Chrome\//.test(ua)) { browser = 'Chrome'; }
|
|
else if (/Firefox\//.test(ua)) { browser = 'Firefox'; }
|
|
else if (/Safari\//.test(ua)) { browser = 'Safari'; }
|
|
var os = '';
|
|
if (/Windows/.test(ua)) { os = 'Windows'; }
|
|
else if (/iPhone|iPad|iPod/.test(ua)) { os = 'iOS'; }
|
|
else if (/Android/.test(ua)) { os = 'Android'; }
|
|
else if (/Mac OS X|Macintosh/.test(ua)) { os = 'macOS'; }
|
|
else if (/Linux/.test(ua)) { os = 'Linux'; }
|
|
return [browser, os].filter(Boolean).join(' · ');
|
|
}
|
|
|
|
function metaSpan(text) {
|
|
var s = document.createElement('span');
|
|
s.textContent = text;
|
|
return s;
|
|
}
|
|
|
|
function renderLogRow(e) {
|
|
var row = document.createElement('div');
|
|
row.className = 'an-log-row';
|
|
|
|
var icon = document.createElement('div');
|
|
icon.className = 'an-log-icon';
|
|
icon.textContent = eventIcon(e.event_type);
|
|
row.appendChild(icon);
|
|
|
|
if (e.media && e.media.exists && e.media.url) {
|
|
var a = document.createElement('a');
|
|
a.href = e.media.url;
|
|
a.setAttribute('data-lightbox', e.media.file_type === 'video' ? 'video' : 'photo');
|
|
var img = document.createElement('img');
|
|
img.className = 'an-log-thumb';
|
|
img.src = e.media.thumbnail_url;
|
|
img.alt = '';
|
|
img.loading = 'lazy';
|
|
a.appendChild(img);
|
|
row.appendChild(a);
|
|
}
|
|
|
|
var main = document.createElement('div');
|
|
main.className = 'an-log-main';
|
|
|
|
var head = document.createElement('div');
|
|
head.className = 'an-log-head';
|
|
var ev = document.createElement('span');
|
|
ev.className = 'an-log-event';
|
|
ev.textContent = L[e.event_type] || e.event_type;
|
|
head.appendChild(ev);
|
|
if (e.client_name) {
|
|
var cl = document.createElement('span');
|
|
cl.className = 'an-log-client';
|
|
cl.textContent = e.client_name;
|
|
head.appendChild(cl);
|
|
}
|
|
var tm = document.createElement('span');
|
|
tm.className = 'an-log-time';
|
|
tm.textContent = e.created_at;
|
|
head.appendChild(tm);
|
|
main.appendChild(head);
|
|
|
|
var meta = document.createElement('div');
|
|
meta.className = 'an-log-meta';
|
|
if (e.visitor) { meta.appendChild(metaSpan(L.visitor + ': ' + e.visitor)); }
|
|
var ua = shortUa(e.user_agent);
|
|
if (ua) { meta.appendChild(metaSpan(ua)); }
|
|
if (e.path && e.path !== '/') {
|
|
var p = document.createElement('span');
|
|
var code = document.createElement('code');
|
|
code.textContent = e.path;
|
|
p.appendChild(code);
|
|
meta.appendChild(p);
|
|
}
|
|
if (e.referer) { meta.appendChild(metaSpan('← ' + e.referer)); }
|
|
if (meta.childNodes.length) { main.appendChild(meta); }
|
|
|
|
row.appendChild(main);
|
|
return row;
|
|
}
|
|
|
|
function selectedLogTypes() {
|
|
var types = [];
|
|
document.querySelectorAll('.log-type-toggle').forEach(function (cb) {
|
|
if (cb.checked) { types.push(cb.getAttribute('data-type')); }
|
|
});
|
|
return types;
|
|
}
|
|
|
|
function resetLog() {
|
|
logEl.replaceChildren();
|
|
logCursor = null;
|
|
logLoading = false;
|
|
logDone = false;
|
|
loadLog();
|
|
}
|
|
|
|
function loadLog() {
|
|
if (logLoading || logDone) { return; }
|
|
var types = selectedLogTypes();
|
|
if (types.length === 0) {
|
|
logEl.replaceChildren(logStatus(L.log_empty));
|
|
logDone = true;
|
|
return;
|
|
}
|
|
logLoading = true;
|
|
var busy = logStatus(L.loading);
|
|
logEl.appendChild(busy);
|
|
var params = new URLSearchParams({ limit: '40' });
|
|
if (logCursor) { params.set('before', logCursor); }
|
|
types.forEach(function (t) { params.append('types', t); });
|
|
fetch('/admin/analytics/events?' + params.toString(), { credentials: 'same-origin' })
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
busy.remove();
|
|
(data.events || []).forEach(function (e) { logEl.appendChild(renderLogRow(e)); });
|
|
logCursor = data.next_cursor;
|
|
logLoading = false;
|
|
if (!logEl.querySelector('.an-log-row')) {
|
|
logEl.appendChild(logStatus(L.log_empty));
|
|
logDone = true;
|
|
return;
|
|
}
|
|
if (!logCursor) {
|
|
logDone = true;
|
|
logEl.appendChild(logStatus(L.log_end));
|
|
return;
|
|
}
|
|
// Keep loading until the scroll container is actually scrollable.
|
|
if (logEl.scrollHeight <= logEl.clientHeight + 20) { loadLog(); }
|
|
})
|
|
.catch(function () {
|
|
busy.remove();
|
|
logLoading = false;
|
|
logEl.appendChild(logStatus(L.error));
|
|
});
|
|
}
|
|
|
|
logEl.addEventListener('scroll', function () {
|
|
if (logEl.scrollTop + logEl.clientHeight >= logEl.scrollHeight - 40) { loadLog(); }
|
|
});
|
|
|
|
document.querySelectorAll('.log-type-toggle').forEach(function (cb) {
|
|
cb.addEventListener('change', resetLog);
|
|
});
|
|
|
|
initChart();
|
|
setRange(30);
|
|
load();
|
|
loadLog();
|
|
})();
|
|
</script>
|
|
{% endblock %}
|