41 lines
2.5 KiB
JavaScript
41 lines
2.5 KiB
JavaScript
const LogPanel = (() => {
|
|
const DEMO = [
|
|
{ created_at:'2025-05-14 10:32:00', nama_lengkap:'Ahmad Fauzi', aksi:'create_histori_bantuan', tabel:'histori_bantuan', id_record:'5', ip_address:'192.168.1.10' },
|
|
{ created_at:'2025-05-14 09:15:00', nama_lengkap:'Romo Benediktus', aksi:'update_laporan', tabel:'laporan', id_record:'1', ip_address:'192.168.1.20' },
|
|
{ created_at:'2025-05-13 08:10:00', nama_lengkap:'Ahmad Fauzi', aksi:'update_penduduk', tabel:'penduduk', id_record:'6171010101010006', ip_address:'192.168.1.10' },
|
|
{ created_at:'2025-05-13 08:00:00', nama_legendkap:'Ahmad Fauzi', aksi:'login', tabel:'user', id_record:'2', ip_address:'192.168.1.10' },
|
|
{ created_at:'2025-05-12 16:45:00', nama_lengkap:'Administrator', aksi:'create_penduduk', tabel:'penduduk', id_record:'6171010101010014', ip_address:'127.0.0.1' },
|
|
{ created_at:'2025-05-12 14:00:00', nama_lengkap:'Administrator', aksi:'delete_penduduk', tabel:'penduduk', id_record:'6171999999999999', ip_address:'127.0.0.1' },
|
|
];
|
|
|
|
async function load() {
|
|
let data;
|
|
try { data = await Api.get('/log'); } catch { data = DEMO; }
|
|
render(data);
|
|
}
|
|
|
|
function getAksiClass(aksi) {
|
|
if (aksi?.startsWith('create')) return 'create';
|
|
if (aksi?.startsWith('update')) return 'update';
|
|
if (aksi?.startsWith('delete')) return 'delete';
|
|
if (aksi === 'login' || aksi === 'logout') return 'login';
|
|
return '';
|
|
}
|
|
|
|
function render(data) {
|
|
const tb = ge('tbody-log');
|
|
if (!data.length) { tb.innerHTML = '<tr><td colspan="6"><div class="empty-state"><div class="es-icon">📋</div><h3>Tidak ada log</h3></div></td></tr>'; return; }
|
|
tb.innerHTML = data.map(l => `
|
|
<tr>
|
|
<td class="mono" style="font-size:11px;white-space:nowrap">${(l.created_at||'').substring(0,16)}</td>
|
|
<td style="font-weight:600">${l.nama_lengkap||'—'}</td>
|
|
<td><span class="log-badge ${getAksiClass(l.aksi)}">${l.aksi}</span></td>
|
|
<td style="color:var(--muted2);font-size:11px">${l.tabel||'—'}</td>
|
|
<td class="mono" style="font-size:10px;color:var(--muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${(l.id_record||'').substring(0,20)}</td>
|
|
<td style="font-size:11px;color:var(--muted)">${l.ip_address||'—'}</td>
|
|
</tr>`).join('');
|
|
}
|
|
|
|
return { load };
|
|
})();
|