Syariffullah
454 lines
19 KiB
JavaScript
454 lines
19 KiB
JavaScript
// ===== Panel Management =====
|
|
// Mengelola Left Sidebar Toggle + Right Panel + Layer Control
|
|
|
|
(function () {
|
|
// ---- Konstanta Jenis Ibadah ----
|
|
const IBADAH_EMOJI = {
|
|
'Masjid': '🕌',
|
|
'Gereja': '⛪',
|
|
'Pura': '🛕',
|
|
'Vihara': '🪷',
|
|
'Kelenteng': '🏮',
|
|
};
|
|
window.IBADAH_EMOJI = IBADAH_EMOJI;
|
|
|
|
// ---- State ----
|
|
let activePanel = null;
|
|
|
|
// ---- Elements ----
|
|
const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
|
|
const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');
|
|
const leftSidebar = document.getElementById('leftSidebar');
|
|
const rightPanel = document.getElementById('rightPanel');
|
|
const rightPanelTitle = document.getElementById('rightPanelTitle');
|
|
const rightPanelActions = document.getElementById('rightPanelActions');
|
|
const rightPanelBody = document.getElementById('rightPanelBody');
|
|
const rightPanelClose = document.getElementById('rightPanelClose');
|
|
|
|
// ---- Sidebar Toggle ----
|
|
sidebarToggleBtn.addEventListener('click', function () {
|
|
const isOpen = leftSidebar.style.display !== 'none';
|
|
if (isOpen) {
|
|
leftSidebar.style.display = 'none';
|
|
sidebarToggleBtn.classList.remove('open');
|
|
sidebarToggleIcon.className = 'fas fa-chevron-right';
|
|
} else {
|
|
leftSidebar.style.display = 'flex';
|
|
sidebarToggleBtn.classList.add('open');
|
|
sidebarToggleIcon.className = 'fas fa-chevron-left';
|
|
}
|
|
});
|
|
|
|
// ---- Sidebar Buttons ----
|
|
document.querySelectorAll('.sidebar-btn').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
const panel = this.dataset.panel;
|
|
if (activePanel === panel) {
|
|
closePanel();
|
|
} else {
|
|
openPanel(panel);
|
|
}
|
|
});
|
|
});
|
|
|
|
rightPanelClose.addEventListener('click', closePanel);
|
|
|
|
// ---- Open / Close Panel ----
|
|
function openPanel(panel) {
|
|
if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
|
|
activePanel = panel;
|
|
rightPanel.classList.add('open');
|
|
document.body.classList.add('right-panel-open');
|
|
document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
|
|
const activeBtn = document.querySelector(`.sidebar-btn[data-panel="${panel}"]`);
|
|
if (activeBtn) activeBtn.classList.add('active');
|
|
renderPanel(panel);
|
|
}
|
|
|
|
function closePanel() {
|
|
if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
|
|
activePanel = null;
|
|
rightPanel.classList.remove('open');
|
|
document.body.classList.remove('right-panel-open');
|
|
document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
|
|
}
|
|
|
|
window.refreshActivePanel = function () {
|
|
if (activePanel && activePanel !== 'layer') renderPanel(activePanel);
|
|
};
|
|
|
|
// ---- Render Panel by Type ----
|
|
function renderPanel(type) {
|
|
rightPanelBody.innerHTML = '<div class="panel-empty">Memuat data...</div>';
|
|
rightPanelActions.innerHTML = '';
|
|
|
|
switch (type) {
|
|
case 'ibadah': renderIbadahPanel(); break;
|
|
case 'miskin': renderMiskinPanel(); break;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// ==========================
|
|
// ===== Ibadah Panel =======
|
|
// ==========================
|
|
function renderIbadahPanel() {
|
|
rightPanelTitle.textContent = '🕌 Rumah Ibadah';
|
|
const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
|
|
if (isAdmin) {
|
|
rightPanelActions.innerHTML = `
|
|
<button class="btn-panel-add" id="btnPanelAddIbadah">
|
|
<i class="fas fa-plus"></i> Tambah Ibadah
|
|
</button>`;
|
|
document.getElementById('btnPanelAddIbadah').addEventListener('click', () => {
|
|
window.activateAddMode('rumah_ibadah');
|
|
});
|
|
} else {
|
|
rightPanelActions.innerHTML = '';
|
|
}
|
|
|
|
const items = [];
|
|
rumahIbadahLayer.eachLayer(l => {
|
|
if (l.ibadahData && l instanceof L.Marker) items.push(l.ibadahData);
|
|
});
|
|
|
|
if (!items.length) {
|
|
rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data rumah ibadah</div>';
|
|
return;
|
|
}
|
|
|
|
rightPanelBody.innerHTML = '';
|
|
items.forEach(d => {
|
|
const emoji = IBADAH_EMOJI[d.jenis] || '🕌';
|
|
const card = document.createElement('div');
|
|
card.className = 'data-card';
|
|
let actionButtons = '';
|
|
if (isAdmin) {
|
|
actionButtons = `
|
|
<div class="data-card-actions">
|
|
<button class="btn-card-action btn-card-edit" title="Edit"><i class="fas fa-pen"></i></button>
|
|
<button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
`;
|
|
}
|
|
card.innerHTML = `
|
|
<div class="data-card-main">
|
|
<div class="data-card-icon card-icon-ibadah">${emoji}</div>
|
|
<div class="data-card-info">
|
|
<div class="data-card-name">${escHtml(d.nama)}</div>
|
|
<div class="data-card-sub">${escHtml(d.jenis || 'Masjid')} • 📡 ${d.radius} m</div>
|
|
</div>
|
|
${actionButtons}
|
|
</div>`;
|
|
if (isAdmin) {
|
|
card.querySelector('.btn-card-edit').addEventListener('click', (e) => { e.stopPropagation(); openEditIbadahModal(d.id); });
|
|
card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); deleteIbadah(d.id); });
|
|
}
|
|
card.addEventListener('click', () => flyToIbadah(d.id));
|
|
rightPanelBody.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function flyToIbadah(id) {
|
|
rumahIbadahLayer.eachLayer(l => {
|
|
if (l.ibadahData && l.ibadahData.id == id && l instanceof L.Marker) {
|
|
map.setView(l.getLatLng(), 17); l.openPopup();
|
|
}
|
|
});
|
|
}
|
|
|
|
// ==========================
|
|
// ===== Miskin Panel =======
|
|
// ==========================
|
|
function renderMiskinPanel() {
|
|
rightPanelTitle.textContent = '🏠 Penduduk Miskin';
|
|
const canManage = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
|
|
if (canManage) {
|
|
rightPanelActions.innerHTML = `
|
|
<button class="btn-panel-add" id="btnPanelTambahMiskin">
|
|
<i class="fas fa-plus"></i> Tambah
|
|
</button>
|
|
<button class="btn-panel-import" id="btnPanelImportMiskin">
|
|
<i class="fas fa-file-import"></i> Impor
|
|
</button>`;
|
|
|
|
document.getElementById('btnPanelTambahMiskin').addEventListener('click', () => {
|
|
window.currentAddMode = 'miskin_click';
|
|
document.getElementById('map').style.cursor = 'crosshair';
|
|
if (window.cursorTooltip) {
|
|
window.cursorTooltip.textContent = 'Klik di peta untuk tentukan lokasi penduduk miskin';
|
|
}
|
|
});
|
|
|
|
document.getElementById('btnPanelImportMiskin').addEventListener('click', () => {
|
|
if (typeof window.openImportMiskinModal === 'function') {
|
|
window.openImportMiskinModal();
|
|
} else {
|
|
alert('Fitur impor belum siap.');
|
|
}
|
|
});
|
|
} else {
|
|
rightPanelActions.innerHTML = '';
|
|
}
|
|
|
|
const all = [];
|
|
pendudukMiskinLayer.eachLayer(l => { if (l.miskinData) all.push(l.miskinData); });
|
|
|
|
if (!all.length) {
|
|
rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data penduduk miskin</div>';
|
|
return;
|
|
}
|
|
|
|
const inRadius = (d) => {
|
|
if (typeof ibadahDataList === 'undefined') return false;
|
|
for (const ib of ibadahDataList) {
|
|
const dist = L.latLng(d.lat, d.lng).distanceTo(L.latLng(ib.lat, ib.lng));
|
|
if (dist <= ib.radius) return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
rightPanelBody.innerHTML = '';
|
|
|
|
const terurusItems = all.filter(d => inRadius(d));
|
|
const tidakItems = all.filter(d => !inRadius(d));
|
|
|
|
if (terurusItems.length) {
|
|
const h1 = document.createElement('div');
|
|
h1.className = 'panel-section-title';
|
|
h1.innerHTML = `✅ Terurus <span style="font-weight:400;text-transform:none;font-size:10px;">(${terurusItems.length})</span>`;
|
|
rightPanelBody.appendChild(h1);
|
|
terurusItems.forEach(d => rightPanelBody.appendChild(buildMiskinCard(d, true)));
|
|
}
|
|
|
|
if (tidakItems.length) {
|
|
const h2 = document.createElement('div');
|
|
h2.className = 'panel-section-title';
|
|
h2.innerHTML = `⚠️ Tidak Terurus <span style="font-weight:400;text-transform:none;font-size:10px;">(${tidakItems.length})</span>`;
|
|
rightPanelBody.appendChild(h2);
|
|
tidakItems.forEach(d => rightPanelBody.appendChild(buildMiskinCard(d, false)));
|
|
}
|
|
}
|
|
|
|
function buildMiskinCard(d, terurus) {
|
|
const canManage = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
|
|
const iconCls = terurus ? 'card-icon-miskin-in' : 'card-icon-miskin-out';
|
|
const badge = d.kategori_bantuan === 'Makan'
|
|
? '<span class="data-card-badge badge-orange">Bantuan Makan</span>'
|
|
: '<span class="data-card-badge badge-blue">Pemberdayaan</span>';
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'data-card';
|
|
card.dataset.miskinId = d.id;
|
|
|
|
let actionButtons = '';
|
|
if (canManage) {
|
|
actionButtons = `
|
|
<div class="data-card-actions">
|
|
<button class="btn-card-action btn-card-edit" title="Edit"><i class="fas fa-pen"></i></button>
|
|
<button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
let fotoHtml = '';
|
|
if (d.foto_rumah || d.foto_kk) {
|
|
fotoHtml += `<div class="expand-row-photos" style="display:flex; gap:10px; margin-top:8px; justify-content: space-around;">`;
|
|
if (d.foto_rumah) {
|
|
fotoHtml += `
|
|
<div style="text-align:center;">
|
|
<span style="font-size:10px; display:block; font-weight:500; color:#555;">Foto Rumah</span>
|
|
<a href="uploads/${d.foto_rumah}" target="_blank">
|
|
<img src="uploads/${d.foto_rumah}" style="width:80px; height:60px; object-fit:cover; border-radius:4px; border:1px solid #ddd; margin-top:3px;" />
|
|
</a>
|
|
</div>`;
|
|
}
|
|
if (d.foto_kk) {
|
|
fotoHtml += `
|
|
<div style="text-align:center;">
|
|
<span style="font-size:10px; display:block; font-weight:500; color:#555;">Foto KK</span>
|
|
<a href="uploads/${d.foto_kk}" target="_blank">
|
|
<img src="uploads/${d.foto_kk}" style="width:80px; height:60px; object-fit:cover; border-radius:4px; border:1px solid #ddd; margin-top:3px;" />
|
|
</a>
|
|
</div>`;
|
|
}
|
|
fotoHtml += `</div>`;
|
|
}
|
|
|
|
card.innerHTML = `
|
|
<div class="data-card-main">
|
|
<div class="data-card-icon ${iconCls}">🏠</div>
|
|
<div class="data-card-info">
|
|
<div class="data-card-name">${escHtml(d.nama)}</div>
|
|
<div class="data-card-sub">👨👩👧 ${d.jumlah_jiwa || '-'} jiwa</div>
|
|
${badge}
|
|
</div>
|
|
${actionButtons}
|
|
</div>
|
|
<div class="data-card-expand">
|
|
<div class="expand-row"><span>Kategori Bantuan</span><span>${escHtml(d.kategori_bantuan)}</span></div>
|
|
<div class="expand-row"><span>Jumlah Jiwa</span><span>${d.jumlah_jiwa || '-'}</span></div>
|
|
<div class="expand-row"><span>Status</span><span>${terurus ? 'Terurus ✅' : 'Tidak Terurus ⚠️'}</span></div>
|
|
${fotoHtml}
|
|
<button class="btn-log-bantuan" data-id="${d.id}" data-nama="${escHtml(d.nama)}">
|
|
<i class="fas fa-history"></i> Lihat Log Bantuan
|
|
</button>
|
|
</div>`;
|
|
|
|
if (canManage) {
|
|
card.querySelector('.btn-card-edit').addEventListener('click', (e) => { e.stopPropagation(); openEditMiskinModal(d.id); });
|
|
card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); deleteMiskin(d.id); });
|
|
}
|
|
card.querySelector('.btn-log-bantuan').addEventListener('click', (e) => { e.stopPropagation(); openLogBantuan(d.id, d.nama); });
|
|
|
|
card.querySelector('.data-card-main').addEventListener('click', () => {
|
|
card.classList.toggle('expanded');
|
|
flyToMiskin(d.id);
|
|
});
|
|
|
|
return card;
|
|
}
|
|
|
|
function flyToMiskin(id) {
|
|
pendudukMiskinLayer.eachLayer(l => {
|
|
if (l.miskinData && l.miskinData.id == id) {
|
|
map.setView(l.getLatLng(), 17); l.openPopup();
|
|
}
|
|
});
|
|
}
|
|
|
|
// ---- Hook: klik peta saat mode miskin_click ----
|
|
// Ditangkap oleh kemiskinan.js via contextmenu — mode ini pakai klik kiri
|
|
map.on('click', function(e) {
|
|
if (window.currentAddMode === 'miskin_click') {
|
|
window.currentAddMode = null;
|
|
document.getElementById('map').style.cursor = '';
|
|
if (window.cursorTooltip) window.cursorTooltip.style.display = 'none';
|
|
// Buka form tambah miskin
|
|
if (typeof window.formAddMiskin === 'function') {
|
|
window.formAddMiskin(e.latlng.lat, e.latlng.lng);
|
|
}
|
|
}
|
|
});
|
|
|
|
// ==========================
|
|
// ===== Log Bantuan Modal ==
|
|
// ==========================
|
|
const logModal = document.getElementById('logBantuanModal');
|
|
const logTitle = document.getElementById('logBantuanTitle');
|
|
const logList = document.getElementById('logBantuanList');
|
|
const logSaveBtn = document.getElementById('logSaveBtn');
|
|
const logIbadahSel = document.getElementById('logIbadahId');
|
|
let _logMiskinId = null;
|
|
|
|
window.openLogBantuan = function (miskinId, nama) {
|
|
_logMiskinId = miskinId;
|
|
logTitle.textContent = `Log Bantuan — ${nama}`;
|
|
logModal.classList.add('show');
|
|
|
|
const isAuth = !!window.currentUser;
|
|
const formContainer = document.querySelector('#logBantuanModal .modal-body > div:last-child');
|
|
const modalFooter = document.querySelector('#logBantuanModal .modal-footer');
|
|
|
|
if (isAuth) {
|
|
if (formContainer) formContainer.style.display = 'block';
|
|
if (modalFooter) modalFooter.style.display = 'flex';
|
|
} else {
|
|
if (formContainer) formContainer.style.display = 'none';
|
|
if (modalFooter) modalFooter.style.display = 'none';
|
|
}
|
|
|
|
// Isi dropdown ibadah
|
|
logIbadahSel.innerHTML = '<option value="">-- Pilih Rumah Ibadah --</option>';
|
|
if (typeof ibadahDataList !== 'undefined') {
|
|
ibadahDataList.forEach(ib => {
|
|
const opt = document.createElement('option');
|
|
opt.value = ib.id;
|
|
opt.textContent = `${IBADAH_EMOJI[ib.jenis] || '🕌'} ${ib.nama}`;
|
|
logIbadahSel.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
if (window.currentUser && window.currentUser.role === 'pengelola') {
|
|
logIbadahSel.value = window.currentUser.ibadah_id;
|
|
logIbadahSel.disabled = true;
|
|
} else {
|
|
logIbadahSel.disabled = false;
|
|
}
|
|
|
|
// Set tanggal default hari ini
|
|
document.getElementById('logTanggal').valueAsDate = new Date();
|
|
fetchLogBantuan(miskinId);
|
|
};
|
|
|
|
window.closeLogBantuanModal = function () {
|
|
logModal.classList.remove('show');
|
|
_logMiskinId = null;
|
|
};
|
|
|
|
function fetchLogBantuan(miskinId) {
|
|
logList.innerHTML = '<div class="panel-empty" style="padding:15px;">Memuat...</div>';
|
|
fetch(`api/log_bantuan/read.php?miskin_id=${miskinId}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data.data || !data.data.length) {
|
|
logList.innerHTML = '<div class="panel-empty" style="padding:15px;">Belum ada riwayat bantuan</div>';
|
|
return;
|
|
}
|
|
logList.innerHTML = '';
|
|
data.data.forEach(log => {
|
|
const tgl = new Date(log.tanggal).toLocaleDateString('id-ID', { day:'2-digit', month:'short', year:'numeric' });
|
|
const item = document.createElement('div');
|
|
item.className = 'log-item';
|
|
item.innerHTML = `
|
|
<div class="log-dot"></div>
|
|
<div class="log-info">
|
|
<div class="log-type">${escHtml(log.tipe_bantuan)}</div>
|
|
<div class="log-meta">${IBADAH_EMOJI[log.jenis_ibadah] || '🕌'} ${escHtml(log.nama_ibadah)} • ${tgl}</div>
|
|
${log.keterangan ? `<div class="log-keterangan">${escHtml(log.keterangan)}</div>` : ''}
|
|
</div>`;
|
|
logList.appendChild(item);
|
|
});
|
|
})
|
|
.catch(() => {
|
|
logList.innerHTML = '<div class="panel-empty" style="padding:15px; color:#ef4444;">Gagal memuat data</div>';
|
|
});
|
|
}
|
|
|
|
logSaveBtn.addEventListener('click', function () {
|
|
const ibadah_id = logIbadahSel.value;
|
|
const tipe_bantuan = document.getElementById('logTipeBantuan').value;
|
|
const tanggal = document.getElementById('logTanggal').value;
|
|
const keterangan = document.getElementById('logKeterangan').value;
|
|
|
|
if (!ibadah_id) { alert('Pilih rumah ibadah terlebih dahulu!'); return; }
|
|
if (!tanggal) { alert('Tanggal harus diisi!'); return; }
|
|
|
|
fetch('api/log_bantuan/create.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ miskin_id: _logMiskinId, ibadah_id, tipe_bantuan, tanggal, keterangan })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
document.getElementById('logKeterangan').value = '';
|
|
fetchLogBantuan(_logMiskinId);
|
|
} else {
|
|
alert(data.message || 'Gagal menyimpan');
|
|
}
|
|
});
|
|
});
|
|
|
|
// ---- Utility ----
|
|
function escHtml(str) {
|
|
if (!str) return '';
|
|
return String(str).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
// ---- Expose ----
|
|
window.openRightPanel = openPanel;
|
|
|
|
})();
|