97 lines
5.2 KiB
JavaScript
97 lines
5.2 KiB
JavaScript
const LaporanPanel = (() => {
|
|
const DEMO = [
|
|
{ id:1, nama_pelapor:'Anonim', deskripsi:'Ibu Maria sakit keras sudah seminggu, tidak bisa berobat karena tidak ada biaya. Butuh bantuan medis segera.', urgensi:'darurat', status:'diverifikasi', alamat_laporan:'Jl. Kemuning No.3, Akcaya', created_at:'2025-05-01T08:00:00', nama_ri:'Gereja Katedral' },
|
|
{ id:2, nama_pelapor:'Eko Prasetyo', deskripsi:'Ada keluarga baru pindah ke Gg. Melati yang sepertinya sangat membutuhkan bantuan. Anak-anak tidak sekolah.', urgensi:'sedang', status:'pending', alamat_laporan:'Gg. Melati, Dalam Bugis', created_at:'2025-05-10T10:00:00', nama_ri:"Masjid Jami'" },
|
|
{ id:3, nama_pelapor:'Anonim', deskripsi:'Pak Tan penyandang disabilitas, hidup sebatang kara dan sangat sulit mendapat penghasilan. Perlu perhatian.', urgensi:'tinggi', status:'diproses', alamat_laporan:'Jl. Gusti Situt No.7', created_at:'2025-05-12T14:00:00', nama_ri:'Klenteng Kwan Ti Miau' },
|
|
{ id:4, nama_pelapor:'Hendra', deskripsi:'Balita 2 tahun kondisi gizi buruk. Orang tua tidak mampu memenuhi kebutuhan gizi anak.', urgensi:'darurat', status:'pending', alamat_laporan:'Gg. Teratai, Parit Tokaya', created_at:'2025-05-15T09:00:00', nama_ri:'Masjid Mujahidin' },
|
|
];
|
|
|
|
const URG = { darurat:'🔴', tinggi:'🟠', sedang:'🟡', rendah:'🟢' };
|
|
const URG_COLOR = { darurat:'var(--red)', tinggi:'var(--orange)', sedang:'var(--yellow)', rendah:'var(--green)' };
|
|
const STATUS_LABEL = { pending:'⏳ Pending', diverifikasi:'✅ Diverifikasi', diproses:'🔄 Diproses', selesai:'🏁 Selesai' };
|
|
|
|
async function load() {
|
|
const st = gv('lf-status');
|
|
const ur = gv('lf-urgensi');
|
|
let url = '/laporan';
|
|
const p = []; if(st) p.push(`status=${st}`); if(ur) p.push(`urgensi=${ur}`);
|
|
if(p.length) url += '?' + p.join('&');
|
|
let data;
|
|
try { data = await Api.get(url); } catch { data = DEMO; }
|
|
if(st) data = data.filter(l => l.status === st);
|
|
if(ur) data = data.filter(l => l.urgensi === ur);
|
|
render(data);
|
|
}
|
|
|
|
function render(data) {
|
|
const el = ge('laporan-grid');
|
|
if (!data.length) {
|
|
el.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="es-icon">✅</div><h3>Tidak ada laporan</h3><p>Semua laporan sudah ditangani</p></div>';
|
|
return;
|
|
}
|
|
el.innerHTML = data.map(l => `
|
|
<div class="laporan-card ${l.urgensi}">
|
|
<div class="lc-hdr">
|
|
<div>
|
|
<span class="bdg bdg-${l.urgensi}" style="margin-bottom:6px;display:inline-block">${URG[l.urgensi]||'📋'} ${(l.urgensi||'').toUpperCase()}</span>
|
|
<div class="lc-title">#${l.id} — ${l.nama_pelapor||'Anonim'}</div>
|
|
</div>
|
|
<span class="bdg bdg-${l.status}">${STATUS_LABEL[l.status]||l.status}</span>
|
|
</div>
|
|
<div class="lc-desc">${l.deskripsi}</div>
|
|
<div class="lc-meta">
|
|
<span>📍 ${l.alamat_laporan||'—'}</span>
|
|
<span>🕌 ${l.nama_ri||'—'}</span>
|
|
<span>📅 ${(l.created_at||'').substring(0,10)}</span>
|
|
</div>
|
|
${App.canEdit() && l.status !== 'selesai' ? `
|
|
<div class="lc-actions">
|
|
${l.status === 'pending' ? `<button class="btn btn-secondary btn-sm" onclick="LaporanPanel.updateStatus(${l.id},'diverifikasi')">✅ Verifikasi</button>` : ''}
|
|
${l.status === 'diverifikasi' ? `<button class="btn btn-warning btn-sm" onclick="LaporanPanel.updateStatus(${l.id},'diproses')">🔄 Proses</button>` : ''}
|
|
${l.status !== 'selesai' ? `<button class="btn btn-success btn-sm" onclick="LaporanPanel.updateStatus(${l.id},'selesai')">🏁 Selesai</button>` : ''}
|
|
<button class="btn btn-danger btn-sm" onclick="LaporanPanel.hapus(${l.id})">🗑</button>
|
|
</div>` : ''}
|
|
</div>`).join('');
|
|
}
|
|
|
|
async function updateStatus(id, status) {
|
|
try {
|
|
await Api.put(`/laporan/${id}`, { status });
|
|
App.toast(`Status laporan diubah: ${STATUS_LABEL[status]||status}`, 'success');
|
|
load(); App.updateHeaderStats();
|
|
} catch(e) { App.toast(e.message,'error'); }
|
|
}
|
|
|
|
async function hapus(id) {
|
|
if (!confirm('Hapus laporan ini?')) return;
|
|
try { await Api.delete(`/laporan/${id}`); App.toast('Laporan dihapus','success'); load(); }
|
|
catch(e) { App.toast(e.message,'error'); }
|
|
}
|
|
|
|
function showKirimModal() {
|
|
['fl-nama','fl-hp','fl-nik','fl-alamat','fl-deskripsi'].forEach(id => sv(id,''));
|
|
sv('fl-urgensi','sedang');
|
|
App.showModal('modal-laporan');
|
|
}
|
|
|
|
async function kirim() {
|
|
if (!gv('fl-deskripsi')) { App.toast('Deskripsi kondisi wajib diisi','error'); return; }
|
|
const body = {
|
|
nama_pelapor: gv('fl-nama') || null,
|
|
no_hp_pelapor: gv('fl-hp') || null,
|
|
nik_terdampak: gv('fl-nik') || null,
|
|
urgensi: gv('fl-urgensi'),
|
|
alamat_laporan:gv('fl-alamat'),
|
|
deskripsi: gv('fl-deskripsi'),
|
|
};
|
|
try {
|
|
await Api.post('/laporan', body);
|
|
App.closeModal('modal-laporan');
|
|
App.toast('Laporan berhasil dikirim! Terima kasih 🙏','success');
|
|
load(); App.updateHeaderStats();
|
|
} catch(e) { App.toast(e.message,'error'); }
|
|
}
|
|
|
|
return { load, updateStatus, hapus, showKirimModal, kirim };
|
|
})();
|