Add filters in statistics view
This commit is contained in:
Ettore
@@ -206,6 +206,40 @@
|
||||
<h3>Gate Access Log</h3>
|
||||
<button id="btn-refresh-stats" class="btn btn-ghost" style="font-size:.85rem;padding:.5rem 1rem">↻ Refresh</button>
|
||||
</div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div style="display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;align-items:flex-end">
|
||||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||||
<label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Keypass code</label>
|
||||
<input id="filter-keypass" type="text" placeholder="Any"
|
||||
style="width:140px;font-family:monospace;text-transform:uppercase" autocomplete="off" />
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||||
<label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Gate</label>
|
||||
<select id="filter-gate" style="width:160px">
|
||||
<option value="">Any</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||||
<label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Result</label>
|
||||
<select id="filter-success" style="width:110px">
|
||||
<option value="">Any</option>
|
||||
<option value="true">Success</option>
|
||||
<option value="false">Failed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||||
<label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">From</label>
|
||||
<input id="filter-from" type="datetime-local" style="width:180px" />
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||||
<label style="font-size:.8rem;font-weight:600;color:var(--text-muted)">To</label>
|
||||
<input id="filter-to" type="datetime-local" style="width:180px" />
|
||||
</div>
|
||||
<button id="btn-stats-filter" class="btn btn-primary" style="font-size:.85rem;padding:.5rem 1rem">Filter</button>
|
||||
<button id="btn-stats-reset" class="btn btn-ghost" style="font-size:.85rem;padding:.5rem 1rem">Reset</button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap card" style="padding:0">
|
||||
<table id="stats-table">
|
||||
<thead>
|
||||
@@ -221,6 +255,16 @@
|
||||
<tbody id="stats-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.9rem;flex-wrap:wrap;gap:.5rem">
|
||||
<span id="stats-total-label" style="color:var(--text-muted)"></span>
|
||||
<div style="display:flex;gap:.5rem;align-items:center">
|
||||
<button id="btn-stats-prev" class="btn btn-ghost" style="font-size:.85rem;padding:.4rem .9rem">← Prev</button>
|
||||
<span id="stats-page-label" style="color:var(--text-muted);min-width:90px;text-align:center"></span>
|
||||
<button id="btn-stats-next" class="btn btn-ghost" style="font-size:.85rem;padding:.4rem .9rem">Next →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Admins pane ──────────────────────────────────────────────────── -->
|
||||
|
||||
@@ -366,6 +366,17 @@ document.getElementById("keypass-form").addEventListener("submit", async e => {
|
||||
async function loadGates() {
|
||||
const rows = await api("GET", "/api/admin/gates");
|
||||
_allGates = rows; // cache for keypass modal
|
||||
// Populate the stats gate filter dropdown
|
||||
const filterGate = document.getElementById("filter-gate");
|
||||
const prevGateVal = filterGate.value;
|
||||
filterGate.innerHTML = '<option value="">Any</option>';
|
||||
for (const g of rows) {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = g.id;
|
||||
opt.textContent = g.name;
|
||||
filterGate.appendChild(opt);
|
||||
}
|
||||
filterGate.value = prevGateVal; // restore selection if still valid
|
||||
const isAdmin = _tokenPayload().scope === "admin";
|
||||
const tbody = document.getElementById("gates-body");
|
||||
tbody.innerHTML = "";
|
||||
@@ -521,16 +532,47 @@ document.getElementById("credentials-form").addEventListener("submit", async e =
|
||||
});
|
||||
|
||||
// ── Statistics ───────────────────────────────────────────────────────────────
|
||||
const STATS_PAGE_SIZE = 50;
|
||||
let _statsPage = 1;
|
||||
let _statsTotal = 0;
|
||||
|
||||
function _buildStatsParams() {
|
||||
const params = new URLSearchParams();
|
||||
const keypass = document.getElementById("filter-keypass").value.trim();
|
||||
if (keypass) params.set("keypass_code", keypass.toUpperCase());
|
||||
const gate = document.getElementById("filter-gate").value;
|
||||
if (gate) params.set("gate_id", gate);
|
||||
const success = document.getElementById("filter-success").value;
|
||||
if (success !== "") params.set("success", success);
|
||||
const from = document.getElementById("filter-from").value;
|
||||
if (from) params.set("date_from", new Date(from).toISOString());
|
||||
const to = document.getElementById("filter-to").value;
|
||||
if (to) params.set("date_to", new Date(to).toISOString());
|
||||
params.set("page", _statsPage);
|
||||
params.set("page_size", STATS_PAGE_SIZE);
|
||||
return params;
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const rows = await api("GET", "/api/admin/stats");
|
||||
const data = await api("GET", `/api/admin/stats?${_buildStatsParams()}`);
|
||||
_statsTotal = data.total;
|
||||
const totalPages = Math.max(1, Math.ceil(_statsTotal / STATS_PAGE_SIZE));
|
||||
|
||||
document.getElementById("stats-total-label").textContent =
|
||||
`${_statsTotal} record${_statsTotal !== 1 ? "s" : ""}`;
|
||||
document.getElementById("stats-page-label").textContent =
|
||||
`Page ${_statsPage} of ${totalPages}`;
|
||||
document.getElementById("btn-stats-prev").disabled = _statsPage <= 1;
|
||||
document.getElementById("btn-stats-next").disabled = _statsPage >= totalPages;
|
||||
|
||||
const tbody = document.getElementById("stats-body");
|
||||
tbody.innerHTML = "";
|
||||
if (!rows.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" style="color:var(--text-muted);text-align:center;padding:2rem">No access logs yet</td></tr>';
|
||||
if (!data.items.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" style="color:var(--text-muted);text-align:center;padding:2rem">No records match the current filters</td></tr>';
|
||||
return;
|
||||
}
|
||||
for (const r of rows) {
|
||||
for (const r of data.items) {
|
||||
const badge = r.success
|
||||
? '<span class="badge badge-green">OK</span>'
|
||||
: `<span class="badge badge-red" title="${esc(r.error || '')}">Fail</span>`;
|
||||
@@ -547,9 +589,24 @@ async function loadStats() {
|
||||
} catch (e) { showToast(e.message, true); }
|
||||
}
|
||||
|
||||
document.getElementById("btn-refresh-stats").addEventListener("click", loadStats);
|
||||
|
||||
document.getElementById("btn-refresh-stats").addEventListener("click", loadStats);
|
||||
document.getElementById("btn-refresh-stats").addEventListener("click", () => { _statsPage = 1; loadStats(); });
|
||||
document.getElementById("btn-stats-filter").addEventListener("click", () => { _statsPage = 1; loadStats(); });
|
||||
document.getElementById("btn-stats-reset").addEventListener("click", () => {
|
||||
document.getElementById("filter-keypass").value = "";
|
||||
document.getElementById("filter-gate").value = "";
|
||||
document.getElementById("filter-success").value = "";
|
||||
document.getElementById("filter-from").value = "";
|
||||
document.getElementById("filter-to").value = "";
|
||||
_statsPage = 1;
|
||||
loadStats();
|
||||
});
|
||||
document.getElementById("btn-stats-prev").addEventListener("click", () => {
|
||||
if (_statsPage > 1) { _statsPage--; loadStats(); }
|
||||
});
|
||||
document.getElementById("btn-stats-next").addEventListener("click", () => {
|
||||
const totalPages = Math.max(1, Math.ceil(_statsTotal / STATS_PAGE_SIZE));
|
||||
if (_statsPage < totalPages) { _statsPage++; loadStats(); }
|
||||
});
|
||||
|
||||
// ── Admin users ───────────────────────────────────────────────────────────────
|
||||
async function loadAdmins() {
|
||||
|
||||
Reference in New Issue
Block a user