ceciliayg/UAS_WebGIS_CeciliaYvonGunawan_D1041231056
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update dashboard recent data

Browse Source
This commit is contained in:
cygouw
2026-06-13 02:32:17 +07:00
parent 760884bdc6
commit 5d25dfdbf7
1 changed files with 116 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
povertymap/index.html
+79 -25
View File
@@ -231,18 +231,23 @@
<input type="hidden" id="eu-id">
<div class="form-group" style="margin-bottom:12px;text-align:left">
<label style="display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text2)">Username (Tidak dapat diubah)</label>
<input type="text" id="eu-username" disabled style="width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--border2);color:var(--text2)">
<label style="display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text2)">Username (Tidak
dapat diubah)</label>
<input type="text" id="eu-username" disabled
style="width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--border2);color:var(--text2)">
</div>
<div class="form-group" style="margin-bottom:12px;text-align:left">
<label style="display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text2)">Nama Lengkap</label>
<input type="text" id="eu-nama" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm)">
<label style="display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text2)">Nama
Lengkap</label>
<input type="text" id="eu-nama"
style="width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm)">
</div>
<div class="form-group" style="margin-bottom:12px;text-align:left">
<label style="display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text2)">Role</label>
<select id="eu-role" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm)">
<select id="eu-role"
style="width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm)">
<option value="surveyor">Surveyor</option>
<option value="pemangku">Pemangku Keputusan</option>
<option value="admin">Admin</option>
@@ -250,16 +255,22 @@
</div>
<div class="form-group" style="margin-bottom:16px;text-align:left">
<label style="display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text2)">Password Baru (Kosongkan jika tidak diubah)</label>
<label style="display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text2)">Password Baru
(Kosongkan jika tidak diubah)</label>
<div style="position:relative">
<input type="password" id="eu-pass" placeholder="min 6 karakter" style="width:100%;padding:8px 36px 8px 8px;border:1px solid var(--border);border-radius:var(--radius-sm)">
<button type="button" onclick="togglePassword('eu-pass', this)" tabindex="-1" title="Tampilkan/sembunyikan password" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;padding:2px 4px;display:flex;align-items:center"><i class="fa-solid fa-eye"></i></button>
<input type="password" id="eu-pass" placeholder="min 6 karakter"
style="width:100%;padding:8px 36px 8px 8px;border:1px solid var(--border);border-radius:var(--radius-sm)">
<button type="button" onclick="togglePassword('eu-pass', this)" tabindex="-1"
title="Tampilkan/sembunyikan password"
style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;padding:2px 4px;display:flex;align-items:center"><i
class="fa-solid fa-eye"></i></button>
</div>
</div>
<div class="modal-btns">
<button style="background:var(--bg);color:var(--text2)" onclick="closeEditUserModal()">Batal</button>
<button style="background:var(--blue-light);color:var(--blue);font-weight:600" onclick="confirmEditUser()">Simpan</button>
<button style="background:var(--blue-light);color:var(--blue);font-weight:600"
onclick="confirmEditUser()">Simpan</button>
</div>
</div>
</div>
@@ -711,6 +722,18 @@
</div>`;
}
let recentCardHtml = '';
if (role === 'admin' || role === 'surveyor') {
recentCardHtml = `
<div class="card" style="margin-bottom:16px">
<div class="card-header">
<h3>Data Terbaru</h3>
<button onclick="switchPage('daftar')" style="font-size:11px;font-weight:600;color:var(--blue);border:none;background:none;cursor:pointer;">Lihat Semua</button>
</div>
<div class="card-body" id="dash-recent"></div>
</div>`;
}
if ((role === 'admin' || role === 'pemangku') && dashTab === 'analisis') {
renderDashboardAnalisis(area, tabsHtml, s, pct);
return;
@@ -845,13 +868,7 @@
</div>
</div>
<div class="card" style="margin-bottom:16px">
<div class="card-header">
<h3>${role === 'admin' ? 'Data Terbaru' : 'Rumah Ibadah Terdekat'}</h3>
<button onclick="switchPage('daftar')" style="font-size:11px;font-weight:600;color:var(--blue);border:none;background:none;cursor:pointer;">Lihat Semua </button>
</div>
<div class="card-body" id="dash-recent"></div>
</div>
${recentCardHtml}
`;
// Persistent map tile & marker di-cache, tidak di-destroy saat navigasi
setTimeout(() => {
@@ -866,17 +883,54 @@
function renderDashRecent() {
const el = document.getElementById('dash-recent');
if (!el) return;
const items = cachedIbadah.slice(0, 5);
if (!items.length) { el.innerHTML = '<div class="empty-state"><div class="e-icon"><i class="fa-solid fa-place-of-worship"></i></div><p>Belum ada data rumah ibadah</p></div>'; return; }
el.innerHTML = items.map(ib => `
<div class="list-item" onclick="flyToOnMap(${ib.lat},${ib.lng})">
<div class="list-icon" style="background:${COLORS[ib.jenis]}22;color:${COLORS[ib.jenis]}"><i class="${ICONS[ib.jenis]}"></i></div>
const combined = [
...cachedIbadah.map(item => ({ ...item, type: 'ibadah' })),
...cachedWarga.map(item => ({ ...item, type: 'warga' }))
];
combined.sort((a, b) => {
const timeA = a.created_at ? new Date(a.created_at.replace(/-/g, '/')).getTime() : 0;
const timeB = b.created_at ? new Date(b.created_at.replace(/-/g, '/')).getTime() : 0;
return timeB - timeA;
});
const items = combined.slice(0, 5);
if (!items.length) { el.innerHTML = '<div class="empty-state"><div class="e-icon"><i class="fa-solid fa-database"></i></div><p>Belum ada data terbaru</p></div>'; return; }
el.innerHTML = items.map(item => {
let iconHtml = '';
let titleHtml = '';
let subHtml = '';
if (item.type === 'ibadah') {
iconHtml = `<div class="list-icon" style="background:${COLORS[item.jenis]}22;color:${COLORS[item.jenis]}"><i class="${ICONS[item.jenis]}"></i></div>`;
titleHtml = `<div class="list-name">${h(item.nama)} <span style="font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--border2);color:var(--text2);margin-left:6px">Rumah Ibadah</span></div>`;
subHtml = `<div class="list-sub">PIC: ${h(item.pic)} &nbsp;•&nbsp; Radius: ${item.radius}m &nbsp;•&nbsp; ${item.jumlah_kk || 0} KK</div>`;
} else {
const bantuanLabels = {
sembako: 'Sembako Bulanan',
beasiswa: 'Beasiswa Anak Asuh',
modal: 'Modal Pemberdayaan',
tunai: 'Santunan Tunai/Kesehatan',
tidak_ada: 'Belum Menerima Bantuan'
};
const bantuanTxt = bantuanLabels[item.bantuan_diterima] || 'Belum Menerima Bantuan';
iconHtml = `<div class="list-icon" style="background:#3b82f622;color:#3b82f6"><i class="fa-solid fa-people-group"></i></div>`;
titleHtml = `<div class="list-name">${h(item.nama_kk)} <span style="font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--border2);color:var(--text2);margin-left:6px">Warga Miskin</span></div>`;
subHtml = `<div class="list-sub">NIK: ${h(item.nik || '-')} &nbsp;•&nbsp; Anggota: ${item.jumlah_anggota} jiwa &nbsp;•&nbsp; Bantuan: ${bantuanTxt}</div>`;
}
return `
<div class="list-item" onclick="flyToOnMap(${item.lat},${item.lng})">
${iconHtml}
<div class="list-body">
<div class="list-name">${h(ib.nama)}</div>
<div class="list-sub">PIC: ${h(ib.pic)} Radius: ${ib.radius}m ${ib.jumlah_kk || 0} KK</div>
${titleHtml}
${subHtml}
</div>
<div class="list-end"><span class="badge badge-${ib.status}">${statusLabel(ib.status)}</span></div>
</div>`).join('');
<div class="list-end"><span class="badge badge-${item.status}">${statusLabel(item.status)}</span></div>
</div>`;
}).join('');
}
// -- PETA PAGE -----------------------------