105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
import { apiGet } from '../api.js';
|
|
import { showToast } from '../app.js';
|
|
|
|
export async function activityPage() {
|
|
const app = document.getElementById('app');
|
|
app.innerHTML = `
|
|
<div class="page-header">
|
|
<h1>Activity</h1>
|
|
</div>
|
|
<div class="card" style="margin-bottom:16px">
|
|
<div class="form-row" style="align-items:flex-end">
|
|
<div class="form-group">
|
|
<label>Action</label>
|
|
<select id="act_filter">
|
|
<option value="">All actions</option>
|
|
<option value="login">login</option>
|
|
<option value="questionnaire_submitted">questionnaire_submitted</option>
|
|
<option value="client_created">client_created</option>
|
|
<option value="client_deleted">client_deleted</option>
|
|
<option value="clients_assigned">clients_assigned</option>
|
|
<option value="client_data_exported">client_data_exported</option>
|
|
<option value="user_created">user_created</option>
|
|
<option value="user_deleted">user_deleted</option>
|
|
<option value="password_changed">password_changed</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" id="act_refresh">Refresh</button>
|
|
</div>
|
|
</div>
|
|
<div id="activityContent"><div class="spinner"></div></div>
|
|
`;
|
|
|
|
document.getElementById('act_refresh').addEventListener('click', loadActivity);
|
|
document.getElementById('act_filter').addEventListener('change', loadActivity);
|
|
await loadActivity();
|
|
}
|
|
|
|
async function loadActivity() {
|
|
const container = document.getElementById('activityContent');
|
|
container.innerHTML = '<div class="spinner"></div>';
|
|
const action = document.getElementById('act_filter')?.value || '';
|
|
const qs = action ? `?limit=200&action=${encodeURIComponent(action)}` : '?limit=200';
|
|
|
|
try {
|
|
const data = await apiGet(`activity${qs}`);
|
|
renderActivity(data.events || [], data.total ?? 0);
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
container.innerHTML = `<p class="error-text" style="padding:16px">${esc(e.message)}</p>`;
|
|
}
|
|
}
|
|
|
|
function renderActivity(events, total) {
|
|
const container = document.getElementById('activityContent');
|
|
|
|
if (!events.length) {
|
|
container.innerHTML = `
|
|
<div class="card"><div class="empty-state"><h3>No activity</h3></div></div>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<div class="card">
|
|
<p style="margin-bottom:12px;color:var(--text-secondary)">Showing ${events.length} of ${total} events (newest first)</p>
|
|
<div class="table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Actor</th>
|
|
<th>Role</th>
|
|
<th>Action</th>
|
|
<th>Target</th>
|
|
<th>Summary</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${events.map(e => `
|
|
<tr>
|
|
<td>${esc(formatTime(e.createdAt))}</td>
|
|
<td>${esc(e.actorUsername || e.actorUserID || '—')}</td>
|
|
<td>${esc(e.actorRole || '')}</td>
|
|
<td><span class="badge">${esc(e.action)}</span></td>
|
|
<td>${esc(e.targetType || '')}${e.targetID ? ': ' + esc(e.targetID) : ''}</td>
|
|
<td>${esc(e.summary)}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function formatTime(ms) {
|
|
if (!ms) return '';
|
|
const d = new Date(Number(ms));
|
|
return d.toLocaleString();
|
|
}
|
|
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s ?? '';
|
|
return d.innerHTML;
|
|
}
|