- -
+
Foto KK:
- -
+ 
@@ -590,8 +590,8 @@ window.openEditMiskinModal = function(id) {
${d.foto_rumah ? `
- -
+
-
-
+ 
@@ -603,8 +603,8 @@ window.openEditMiskinModal = function(id) {
${d.foto_kk ? `
+
-
-
+
diff --git a/webgis-poverty-pontianak/assets/js/map.js b/webgis-poverty-pontianak/assets/js/map.js
index c660d8f..307a772 100644
--- a/webgis-poverty-pontianak/assets/js/map.js
+++ b/webgis-poverty-pontianak/assets/js/map.js
@@ -1,5 +1,8 @@
+// ============================================================
+// WebGIS Kemiskinan Pontianak — map.js (Redesign)
+// ============================================================
+
// Inisialisasi Peta
-// Koordinat awal: [-0.0263, 109.3425] (Pontianak)
const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
// ===== Toast Notification =====
@@ -7,86 +10,94 @@ window.showToast = function(message, type = 'success', duration = 3500) {
const icons = { success: '✅', error: '❌', info: 'ℹ️', warning: '⚠️' };
const container = document.getElementById('toastContainer');
if (!container) return;
-
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
toast.innerHTML = `${message}`;
container.appendChild(toast);
-
setTimeout(() => {
toast.classList.add('hiding');
toast.addEventListener('animationend', () => toast.remove());
}, duration);
};
-// Custom Zoom Control Logic
-document.getElementById('zoomInBtn').addEventListener('click', function() { map.zoomIn(); });
-document.getElementById('zoomOutBtn').addEventListener('click', function() { map.zoomOut(); });
+// ===== Zoom Controls =====
+document.getElementById('zoomInBtn').addEventListener('click', () => map.zoomIn());
+document.getElementById('zoomOutBtn').addEventListener('click', () => map.zoomOut());
-// Base Map dari OpenStreetMap
+// ===== Base Map =====
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '© OpenStreetMap contributors'
+ attribution: '© OpenStreetMap'
}).addTo(map);
-// Inisialisasi FeatureGroups untuk masing-masing layer
-const rumahIbadahLayer = L.featureGroup().addTo(map);
+// ===== Feature Groups =====
+const rumahIbadahLayer = L.featureGroup().addTo(map);
const pendudukMiskinLayer = L.featureGroup().addTo(map);
-const geoJsonLayer = L.featureGroup().addTo(map);
+const geoJsonLayer = L.featureGroup().addTo(map);
+// ===== Sidebar Collapse =====
+const collapseBtn = document.getElementById('sidebarCollapseBtn');
+const collapseIcon = document.getElementById('collapseIcon');
+
+if (collapseBtn) {
+ collapseBtn.addEventListener('click', function() {
+ const collapsed = document.body.classList.toggle('sidebar-collapsed');
+ if (collapseIcon) collapseIcon.className = collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-left';
+ setTimeout(() => map.invalidateSize(), 320);
+ });
+}
+
+// ===== Search =====
const searchInput = document.getElementById('searchInput');
const searchClear = document.getElementById('searchClear');
+const searchResultsEl = document.getElementById('searchResults');
-searchInput.addEventListener('focus', function() {
+searchInput.addEventListener('focus', () => {
if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
});
searchInput.addEventListener('input', function() {
- const val = this.value.toLowerCase();
+ const val = this.value.toLowerCase().trim();
if (val.length > 0) {
searchClear.style.visibility = 'visible';
window.showSearchResults(val);
} else {
searchClear.style.visibility = 'hidden';
- document.getElementById('searchResults').style.display = 'none';
+ searchResultsEl.style.display = 'none';
}
});
searchClear.addEventListener('click', function() {
searchInput.value = '';
searchClear.style.visibility = 'hidden';
- document.getElementById('searchResults').style.display = 'none';
+ searchResultsEl.style.display = 'none';
searchInput.focus();
});
-window.showSearchResults = function(query) {
- const resultsContainer = document.getElementById('searchResults');
- resultsContainer.innerHTML = '';
- let results = [];
-
+document.addEventListener('click', function(e) {
+ if (!e.target.closest('.search-bar') && !e.target.closest('#searchResults')) {
+ searchResultsEl.style.display = 'none';
+ }
+});
+
+window.showSearchResults = function(query) {
+ searchResultsEl.innerHTML = '';
+ let results = [];
-
if (typeof rumahIbadahLayer !== 'undefined') {
rumahIbadahLayer.eachLayer(layer => {
- if (layer.ibadahData && layer.ibadahData.nama && layer.ibadahData.nama.toLowerCase().includes(query)) {
- if(layer instanceof L.Marker) {
- results.push({ type: 'Rumah Ibadah', nama: layer.ibadahData.nama, layer: layer });
- }
+ if (layer.ibadahData?.nama?.toLowerCase().includes(query) && layer instanceof L.Marker) {
+ results.push({ type: 'Rumah Ibadah', icon: '🕌', nama: layer.ibadahData.nama, layer });
}
});
}
-
+
if (results.length === 0) {
- resultsContainer.innerHTML = '
${res.nama}`; item.addEventListener('click', () => { if (res.layer instanceof L.Marker) { map.setView(res.layer.getLatLng(), 17); @@ -94,38 +105,40 @@ window.showSearchResults = function(query) { map.fitBounds(res.layer.getBounds()); } res.layer.openPopup(); - resultsContainer.style.display = 'none'; + searchResultsEl.style.display = 'none'; + searchInput.value = res.nama; + searchClear.style.visibility = 'visible'; }); - resultsContainer.appendChild(item); + searchResultsEl.appendChild(item); }); } - resultsContainer.style.display = 'block'; + searchResultsEl.style.display = 'block'; }; -// UI Logic: Custom Layer Control Toggle +// ===== Layer Panel Toggle ===== const layerBtn = document.getElementById('layerBtn'); const layerPanel = document.getElementById('layerPanel'); layerBtn.addEventListener('click', function() { if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode(); - layerPanel.style.display = layerPanel.style.display === 'block' ? 'none' : 'block'; + const isOpen = layerPanel.classList.toggle('show'); + layerBtn.classList.toggle('active', isOpen); }); -// Sembunyikan layer panel saat klik di peta map.on('click', function() { - layerPanel.style.display = 'none'; + layerPanel.classList.remove('show'); + layerBtn.classList.remove('active'); }); - -// Logic untuk Toggle Layer Visibility +// ===== Layer Visibility ===== document.getElementById('layerRumahIbadah').addEventListener('change', function(e) { e.target.checked ? map.addLayer(rumahIbadahLayer) : map.removeLayer(rumahIbadahLayer); }); + document.getElementById('layerMiskin').addEventListener('change', function(e) { e.target.checked ? map.addLayer(pendudukMiskinLayer) : map.removeLayer(pendudukMiskinLayer); }); -// --- Sub-layer Toggle (expand/collapse) --- window.toggleSubLayer = function(subId, iconEl) { const sub = document.getElementById(subId); if (!sub) return; @@ -134,87 +147,58 @@ window.toggleSubLayer = function(subId, iconEl) { iconEl.classList.toggle('collapsed', !isHidden); }; -// --- Sub-layer Filter --- window.applySubFilter = function(type) { - if (type === 'miskin') { const checked = [...document.querySelectorAll('.sub-miskin:checked')].map(el => el.value); pendudukMiskinLayer.eachLayer(layer => { if (!layer.miskinData) return; - if (checked.includes(layer.miskinData.kategori_bantuan)) { - layer.getElement && layer.getElement() && (layer.getElement().style.display = ''); - } else { - layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none'); - } + const el = layer.getElement?.(); + if (el) el.style.display = checked.includes(layer.miskinData.kategori_bantuan) ? '' : 'none'; }); } }; -// --- Modal Logic --- +// ===== Modal Logic ===== const unifiedModal = document.getElementById('unifiedModal'); -const modalTitle = document.getElementById('modalTitle'); -const modalBody = document.getElementById('modalBody'); window.openModal = function(title, bodyHTML, saveCallback) { - modalTitle.textContent = title; - modalBody.innerHTML = bodyHTML; + document.getElementById('modalTitle').textContent = title; + document.getElementById('modalBody').innerHTML = bodyHTML; unifiedModal.classList.add('show'); - - // Ambil elemen tombol save terbaru dari DOM - const currentSaveBtn = document.getElementById('modalSaveBtn'); - - // Clone untuk menghapus semua event listener lama - const newSaveBtn = currentSaveBtn.cloneNode(true); - currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn); - - newSaveBtn.addEventListener('click', saveCallback); + + const oldBtn = document.getElementById('modalSaveBtn'); + const newBtn = oldBtn.cloneNode(true); + oldBtn.parentNode.replaceChild(newBtn, oldBtn); + newBtn.addEventListener('click', saveCallback); }; -window.closeModal = function() { - unifiedModal.classList.remove('show'); -}; +window.closeModal = function() { unifiedModal.classList.remove('show'); }; const confirmModal = document.getElementById('confirmModal'); -const confirmMessage = document.getElementById('confirmMessage'); window.openConfirmModal = function(msg, confirmCallback) { - confirmMessage.textContent = msg; + document.getElementById('confirmMessage').textContent = msg; confirmModal.classList.add('show'); - - const currentYesBtn = document.getElementById('confirmYesBtn'); - const newYesBtn = currentYesBtn.cloneNode(true); - currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn); - - newYesBtn.addEventListener('click', function() { + + const oldBtn = document.getElementById('confirmYesBtn'); + const newBtn = oldBtn.cloneNode(true); + oldBtn.parentNode.replaceChild(newBtn, oldBtn); + newBtn.addEventListener('click', function() { confirmModal.classList.remove('show'); confirmCallback(); }); }; -window.closeConfirmModal = function() { - confirmModal.classList.remove('show'); -}; +window.closeConfirmModal = function() { confirmModal.classList.remove('show'); }; -// --- Action Menu Logic (replaced by left sidebar) --- - -window.currentAddMode = null; // 'rumah_ibadah' atau 'miskin_click' +// ===== Add Mode ===== +window.currentAddMode = null; window.activateAddMode = function(mode) { - // Toggle: jika mode yang sama diklik lagi, batalkan - if (window.currentAddMode === mode) { - window.deactivateAddMode(); - return; - } - + if (window.currentAddMode === mode) { window.deactivateAddMode(); return; } window.currentAddMode = mode; - - // Tooltip - const tooltips = { - 'rumah_ibadah': 'Klik untuk Tambah Rumah Ibadah' - }; + const tooltips = { 'rumah_ibadah': 'Klik peta untuk tambah Rumah Ibadah' }; if (window.cursorTooltip && tooltips[mode]) window.cursorTooltip.textContent = tooltips[mode]; - - // Ubah kursor map menjadi crosshair document.getElementById('map').style.cursor = 'crosshair'; }; @@ -224,18 +208,16 @@ window.deactivateAddMode = function() { if (window.cursorTooltip) window.cursorTooltip.style.display = 'none'; }; -// --- Custom Tooltip Cursor --- +// ===== Cursor Tooltip ===== window.cursorTooltip = document.createElement('div'); window.cursorTooltip.className = 'custom-cursor-tooltip'; document.body.appendChild(window.cursorTooltip); -// Gunakan document-level mousemove agar selalu terpicu -// bahkan saat Leaflet Draw overlay aktif menangkap event map document.addEventListener('mousemove', function(e) { if (window.currentAddMode) { window.cursorTooltip.style.display = 'block'; window.cursorTooltip.style.left = e.pageX + 15 + 'px'; - window.cursorTooltip.style.top = e.pageY + 15 + 'px'; + window.cursorTooltip.style.top = e.pageY + 15 + 'px'; } else { window.cursorTooltip.style.display = 'none'; } diff --git a/webgis-poverty-pontianak/assets/js/panel.js b/webgis-poverty-pontianak/assets/js/panel.js index 7eeab4b..39e0857 100644 --- a/webgis-poverty-pontianak/assets/js/panel.js +++ b/webgis-poverty-pontianak/assets/js/panel.js @@ -16,8 +16,8 @@ let activePanel = null; // ---- Elements ---- - const sidebarToggleBtn = document.getElementById('sidebarToggleBtn'); - const sidebarToggleIcon = document.getElementById('sidebarToggleIcon'); + // removed + // removed const leftSidebar = document.getElementById('leftSidebar'); const rightPanel = document.getElementById('rightPanel'); const rightPanelTitle = document.getElementById('rightPanelTitle'); @@ -25,19 +25,7 @@ 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 collapse handled in map.js // ---- Sidebar Buttons ---- document.querySelectorAll('.sidebar-btn').forEach(btn => { @@ -83,8 +71,9 @@ rightPanelActions.innerHTML = ''; switch (type) { - case 'ibadah': renderIbadahPanel(); break; - case 'miskin': renderMiskinPanel(); break; + case 'ibadah': renderIbadahPanel(); break; + case 'miskin': renderMiskinPanel(); break; + case 'log_bantuan': renderLogBantuanPanel(); break; } } @@ -238,6 +227,59 @@ } } + + // ========================== + // ===== Log Bantuan Panel == + // ========================== + function renderLogBantuanPanel() { + rightPanelTitle.textContent = '📋 Log Bantuan'; + rightPanelActions.innerHTML = ''; + const all = []; + if (typeof pendudukMiskinLayer !== 'undefined') { + pendudukMiskinLayer.eachLayer(l => { if (l.miskinData) all.push(l.miskinData); }); + } + if (!all.length) { + rightPanelBody.innerHTML = 'WebGIS Pemetaan Kemiskinan
+ WebGIS Kemiskinan Pontianak
-
-
+
-
+
-
-
-
-
+ Tidak ada hasil
';
+ searchResultsEl.innerHTML = 'Tidak ada hasil ditemukan
';
} else {
results.forEach(res => {
const item = document.createElement('div');
- item.style.padding = '10px 15px';
- item.style.cursor = 'pointer';
- item.style.borderBottom = '1px solid #eee';
- item.style.fontSize = '14px';
- item.innerHTML = `${res.type}: ${res.nama}`;
- item.addEventListener('mouseenter', () => item.style.backgroundColor = '#f8f9fa');
- item.addEventListener('mouseleave', () => item.style.backgroundColor = 'white');
+ item.className = 'search-result-item';
+ item.innerHTML = `${res.icon}${res.type}${res.nama}`; item.addEventListener('click', () => { if (res.layer instanceof L.Marker) { map.setView(res.layer.getLatLng(), 17); @@ -94,38 +105,40 @@ window.showSearchResults = function(query) { map.fitBounds(res.layer.getBounds()); } res.layer.openPopup(); - resultsContainer.style.display = 'none'; + searchResultsEl.style.display = 'none'; + searchInput.value = res.nama; + searchClear.style.visibility = 'visible'; }); - resultsContainer.appendChild(item); + searchResultsEl.appendChild(item); }); } - resultsContainer.style.display = 'block'; + searchResultsEl.style.display = 'block'; }; -// UI Logic: Custom Layer Control Toggle +// ===== Layer Panel Toggle ===== const layerBtn = document.getElementById('layerBtn'); const layerPanel = document.getElementById('layerPanel'); layerBtn.addEventListener('click', function() { if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode(); - layerPanel.style.display = layerPanel.style.display === 'block' ? 'none' : 'block'; + const isOpen = layerPanel.classList.toggle('show'); + layerBtn.classList.toggle('active', isOpen); }); -// Sembunyikan layer panel saat klik di peta map.on('click', function() { - layerPanel.style.display = 'none'; + layerPanel.classList.remove('show'); + layerBtn.classList.remove('active'); }); - -// Logic untuk Toggle Layer Visibility +// ===== Layer Visibility ===== document.getElementById('layerRumahIbadah').addEventListener('change', function(e) { e.target.checked ? map.addLayer(rumahIbadahLayer) : map.removeLayer(rumahIbadahLayer); }); + document.getElementById('layerMiskin').addEventListener('change', function(e) { e.target.checked ? map.addLayer(pendudukMiskinLayer) : map.removeLayer(pendudukMiskinLayer); }); -// --- Sub-layer Toggle (expand/collapse) --- window.toggleSubLayer = function(subId, iconEl) { const sub = document.getElementById(subId); if (!sub) return; @@ -134,87 +147,58 @@ window.toggleSubLayer = function(subId, iconEl) { iconEl.classList.toggle('collapsed', !isHidden); }; -// --- Sub-layer Filter --- window.applySubFilter = function(type) { - if (type === 'miskin') { const checked = [...document.querySelectorAll('.sub-miskin:checked')].map(el => el.value); pendudukMiskinLayer.eachLayer(layer => { if (!layer.miskinData) return; - if (checked.includes(layer.miskinData.kategori_bantuan)) { - layer.getElement && layer.getElement() && (layer.getElement().style.display = ''); - } else { - layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none'); - } + const el = layer.getElement?.(); + if (el) el.style.display = checked.includes(layer.miskinData.kategori_bantuan) ? '' : 'none'; }); } }; -// --- Modal Logic --- +// ===== Modal Logic ===== const unifiedModal = document.getElementById('unifiedModal'); -const modalTitle = document.getElementById('modalTitle'); -const modalBody = document.getElementById('modalBody'); window.openModal = function(title, bodyHTML, saveCallback) { - modalTitle.textContent = title; - modalBody.innerHTML = bodyHTML; + document.getElementById('modalTitle').textContent = title; + document.getElementById('modalBody').innerHTML = bodyHTML; unifiedModal.classList.add('show'); - - // Ambil elemen tombol save terbaru dari DOM - const currentSaveBtn = document.getElementById('modalSaveBtn'); - - // Clone untuk menghapus semua event listener lama - const newSaveBtn = currentSaveBtn.cloneNode(true); - currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn); - - newSaveBtn.addEventListener('click', saveCallback); + + const oldBtn = document.getElementById('modalSaveBtn'); + const newBtn = oldBtn.cloneNode(true); + oldBtn.parentNode.replaceChild(newBtn, oldBtn); + newBtn.addEventListener('click', saveCallback); }; -window.closeModal = function() { - unifiedModal.classList.remove('show'); -}; +window.closeModal = function() { unifiedModal.classList.remove('show'); }; const confirmModal = document.getElementById('confirmModal'); -const confirmMessage = document.getElementById('confirmMessage'); window.openConfirmModal = function(msg, confirmCallback) { - confirmMessage.textContent = msg; + document.getElementById('confirmMessage').textContent = msg; confirmModal.classList.add('show'); - - const currentYesBtn = document.getElementById('confirmYesBtn'); - const newYesBtn = currentYesBtn.cloneNode(true); - currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn); - - newYesBtn.addEventListener('click', function() { + + const oldBtn = document.getElementById('confirmYesBtn'); + const newBtn = oldBtn.cloneNode(true); + oldBtn.parentNode.replaceChild(newBtn, oldBtn); + newBtn.addEventListener('click', function() { confirmModal.classList.remove('show'); confirmCallback(); }); }; -window.closeConfirmModal = function() { - confirmModal.classList.remove('show'); -}; +window.closeConfirmModal = function() { confirmModal.classList.remove('show'); }; -// --- Action Menu Logic (replaced by left sidebar) --- - -window.currentAddMode = null; // 'rumah_ibadah' atau 'miskin_click' +// ===== Add Mode ===== +window.currentAddMode = null; window.activateAddMode = function(mode) { - // Toggle: jika mode yang sama diklik lagi, batalkan - if (window.currentAddMode === mode) { - window.deactivateAddMode(); - return; - } - + if (window.currentAddMode === mode) { window.deactivateAddMode(); return; } window.currentAddMode = mode; - - // Tooltip - const tooltips = { - 'rumah_ibadah': 'Klik untuk Tambah Rumah Ibadah' - }; + const tooltips = { 'rumah_ibadah': 'Klik peta untuk tambah Rumah Ibadah' }; if (window.cursorTooltip && tooltips[mode]) window.cursorTooltip.textContent = tooltips[mode]; - - // Ubah kursor map menjadi crosshair document.getElementById('map').style.cursor = 'crosshair'; }; @@ -224,18 +208,16 @@ window.deactivateAddMode = function() { if (window.cursorTooltip) window.cursorTooltip.style.display = 'none'; }; -// --- Custom Tooltip Cursor --- +// ===== Cursor Tooltip ===== window.cursorTooltip = document.createElement('div'); window.cursorTooltip.className = 'custom-cursor-tooltip'; document.body.appendChild(window.cursorTooltip); -// Gunakan document-level mousemove agar selalu terpicu -// bahkan saat Leaflet Draw overlay aktif menangkap event map document.addEventListener('mousemove', function(e) { if (window.currentAddMode) { window.cursorTooltip.style.display = 'block'; window.cursorTooltip.style.left = e.pageX + 15 + 'px'; - window.cursorTooltip.style.top = e.pageY + 15 + 'px'; + window.cursorTooltip.style.top = e.pageY + 15 + 'px'; } else { window.cursorTooltip.style.display = 'none'; } diff --git a/webgis-poverty-pontianak/assets/js/panel.js b/webgis-poverty-pontianak/assets/js/panel.js index 7eeab4b..39e0857 100644 --- a/webgis-poverty-pontianak/assets/js/panel.js +++ b/webgis-poverty-pontianak/assets/js/panel.js @@ -16,8 +16,8 @@ let activePanel = null; // ---- Elements ---- - const sidebarToggleBtn = document.getElementById('sidebarToggleBtn'); - const sidebarToggleIcon = document.getElementById('sidebarToggleIcon'); + // removed + // removed const leftSidebar = document.getElementById('leftSidebar'); const rightPanel = document.getElementById('rightPanel'); const rightPanelTitle = document.getElementById('rightPanelTitle'); @@ -25,19 +25,7 @@ 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 collapse handled in map.js // ---- Sidebar Buttons ---- document.querySelectorAll('.sidebar-btn').forEach(btn => { @@ -83,8 +71,9 @@ rightPanelActions.innerHTML = ''; switch (type) { - case 'ibadah': renderIbadahPanel(); break; - case 'miskin': renderMiskinPanel(); break; + case 'ibadah': renderIbadahPanel(); break; + case 'miskin': renderMiskinPanel(); break; + case 'log_bantuan': renderLogBantuanPanel(); break; } } @@ -238,6 +227,59 @@ } } + + // ========================== + // ===== Log Bantuan Panel == + // ========================== + function renderLogBantuanPanel() { + rightPanelTitle.textContent = '📋 Log Bantuan'; + rightPanelActions.innerHTML = ''; + const all = []; + if (typeof pendudukMiskinLayer !== 'undefined') { + pendudukMiskinLayer.eachLayer(l => { if (l.miskinData) all.push(l.miskinData); }); + } + if (!all.length) { + rightPanelBody.innerHTML = '
Belum ada data penduduk miskin
';
+ return;
+ }
+ rightPanelBody.innerHTML = '';
+ const canLog = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
+
+ // Hint strip
+ const hint = document.createElement('div');
+ hint.className = 'panel-hint';
+ hint.innerHTML = ` ${canLog ? 'Klik penduduk untuk lihat atau tambah log bantuan.' : 'Klik penduduk untuk melihat riwayat log bantuan.'}`;
+ rightPanelBody.appendChild(hint);
+
+ // Summary badge
+ const summary = document.createElement('div');
+ summary.className = 'panel-section-title';
+ summary.textContent = `${all.length} Kepala Keluarga`;
+ rightPanelBody.appendChild(summary);
+
+ all.forEach(d => {
+ const isMakan = d.kategori_bantuan === 'Makan';
+ const card = document.createElement('div');
+ card.className = 'log-person-card';
+ const badgeHtml = isMakan
+ ? 'Bantuan Makan'
+ : 'Pemberdayaan';
+ const avatarCls = isMakan ? 'avatar-makan' : 'avatar-pmbr';
+ card.innerHTML = `
+ 🏠
+
+
+ `;
+ card.addEventListener('click', () => window.openLogBantuan(d.id, d.nama));
+ rightPanelBody.appendChild(card);
+ });
+ }
+
function buildMiskinCard(d, terurus) {
// Pengelola hanya boleh edit/hapus penduduk yang dalam radius ibadahnya
const isPengelolaOrAdmin = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
@@ -344,115 +386,140 @@
}
});
- // ==========================
- // ===== 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;
+ // ==========================================
+ // ===== Log Bantuan Modal ==================
+ // ==========================================
window.openLogBantuan = function (miskinId, nama) {
- _logMiskinId = miskinId;
- logTitle.textContent = `Log Bantuan — ${nama}`;
- logModal.classList.add('show');
+ const modal = document.getElementById('logBantuanModal');
+ document.getElementById('logBantuanTitle').textContent = '📋 Log Bantuan — ' + nama;
+ document.getElementById('logBantuanMiskinId').value = miskinId;
+ modal.classList.add('show');
+ loadLogBantuan(miskinId);
- 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';
- }
+ // Tampilkan form tambah hanya untuk admin/pengelola
+ const canLog = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
+ document.getElementById('logBantuanFormSection').style.display = canLog ? 'block' : 'none';
- // Isi dropdown ibadah
- logIbadahSel.innerHTML = '';
- 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);
+ // Isi dropdown ibadah jika pengelola (auto-select ibadahnya)
+ if (canLog) populateLogIbadahSelect();
};
window.closeLogBantuanModal = function () {
- logModal.classList.remove('show');
- _logMiskinId = null;
+ document.getElementById('logBantuanModal').classList.remove('show');
};
- function fetchLogBantuan(miskinId) {
- logList.innerHTML = '${escHtml(d.nama)}
+
+ Memuat...
';
- fetch(`api/log_bantuan/read.php?miskin_id=${miskinId}`)
+ function loadLogBantuan(miskinId) {
+ const listEl = document.getElementById('logBantuanList');
+ listEl.innerHTML = 'Memuat log...
';
+ fetch('api/log_bantuan/read.php?miskin_id=' + miskinId)
.then(r => r.json())
- .then(data => {
- if (!data.data || !data.data.length) {
- logList.innerHTML = 'Belum ada riwayat bantuan
';
+ .then(res => {
+ if (res.status !== 'success' || !res.data.length) {
+ listEl.innerHTML = 'Belum ada log bantuan tercatat.
';
return;
}
- logList.innerHTML = '';
- data.data.forEach(log => {
- const tgl = new Date(log.tanggal).toLocaleDateString('id-ID', { day:'2-digit', month:'short', year:'numeric' });
+ listEl.innerHTML = '';
+ res.data.forEach(log => {
const item = document.createElement('div');
item.className = 'log-item';
+ const tgl = new Date(log.tanggal).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
item.innerHTML = `
-
-
-
`;
- logList.appendChild(item);
+ ${escHtml(log.tipe_bantuan)}
-
- ${log.keterangan ? `${escHtml(log.keterangan)}
` : ''}
-
+ ${escHtml(log.tipe_bantuan)}
+ ${tgl}
+
+ 🕌 ${escHtml(log.nama_ibadah)} ${escHtml(log.jenis_ibadah)}
+ ${log.keterangan ? `${escHtml(log.keterangan)}
` : ''}
+ `;
+ listEl.appendChild(item);
});
})
.catch(() => {
- logList.innerHTML = 'Gagal memuat data
';
+ listEl.innerHTML = 'Gagal memuat data log.
';
});
}
- 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;
+ function populateLogIbadahSelect() {
+ const sel = document.getElementById('logIbadahId');
+ sel.innerHTML = '';
+ if (window.currentUser && window.currentUser.role === 'pengelola' && window.currentUser.ibadah_id) {
+ // Pengelola hanya bisa pilih ibadah miliknya — fetch dari layer
+ const id = window.currentUser.ibadah_id;
+ let found = false;
+ if (typeof rumahIbadahLayer !== 'undefined') {
+ rumahIbadahLayer.eachLayer(l => {
+ if (l.ibadahData) {
+ const opt = document.createElement('option');
+ opt.value = l.ibadahData.id;
+ opt.textContent = l.ibadahData.nama;
+ if (l.ibadahData.id == id) { opt.selected = true; found = true; }
+ sel.appendChild(opt);
+ }
+ });
+ }
+ } else {
+ // Admin bisa pilih semua
+ if (typeof rumahIbadahLayer !== 'undefined') {
+ rumahIbadahLayer.eachLayer(l => {
+ if (l.ibadahData) {
+ const opt = document.createElement('option');
+ opt.value = l.ibadahData.id;
+ opt.textContent = l.ibadahData.nama;
+ sel.appendChild(opt);
+ }
+ });
+ }
+ }
+ }
- if (!ibadah_id) { alert('Pilih rumah ibadah terlebih dahulu!'); return; }
- if (!tanggal) { alert('Tanggal harus diisi!'); return; }
+ document.getElementById('btnSaveLog').addEventListener('click', function () {
+ const miskinId = parseInt(document.getElementById('logBantuanMiskinId').value);
+ const ibadahId = parseInt(document.getElementById('logIbadahId').value);
+ const tipe = document.getElementById('logTipeBantuan').value.trim();
+ const tanggal = document.getElementById('logTanggal').value;
+ const keterangan = document.getElementById('logKeterangan').value.trim();
+
+ if (!ibadahId || !tipe || !tanggal) {
+ window.showToast('Lengkapi semua field wajib', 'error');
+ return;
+ }
+
+ const btn = this;
+ btn.disabled = true;
+ btn.textContent = 'Menyimpan...';
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 })
+ body: JSON.stringify({ miskin_id: miskinId, ibadah_id: ibadahId, tipe_bantuan: tipe, tanggal, keterangan })
})
.then(r => r.json())
- .then(data => {
- if (data.status === 'success') {
+ .then(res => {
+ btn.disabled = false;
+ btn.textContent = 'Simpan Log';
+ if (res.status === 'success') {
+ window.showToast('Log bantuan berhasil disimpan', 'success');
+ document.getElementById('logTipeBantuan').value = '';
+ document.getElementById('logTanggal').value = '';
document.getElementById('logKeterangan').value = '';
- fetchLogBantuan(_logMiskinId);
+ loadLogBantuan(miskinId);
} else {
- alert(data.message || 'Gagal menyimpan');
+ window.showToast(res.message || 'Gagal menyimpan log', 'error');
}
+ })
+ .catch(() => {
+ btn.disabled = false;
+ btn.textContent = 'Simpan Log';
+ window.showToast('Terjadi kesalahan koneksi', 'error');
});
});
+ // Close on overlay click
+ document.getElementById('logBantuanModal').addEventListener('click', function(e) {
+ if (e.target === this) window.closeLogBantuanModal();
+ });
+
// ---- Utility ----
function escHtml(str) {
if (!str) return '';
diff --git a/webgis-poverty-pontianak/index.php b/webgis-poverty-pontianak/index.php
index 447fe90..abcbac8 100644
--- a/webgis-poverty-pontianak/index.php
+++ b/webgis-poverty-pontianak/index.php
@@ -3,159 +3,157 @@
-
-
-