Hyzer/webgis_Ikbal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
envicy
2026-06-11 16:37:05 +07:00
commit 503e9421a9
45 changed files with 13370 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webgis-poverty-pontianak/assets/js/features/auth.js
+383
View File
@@ -0,0 +1,383 @@
// --- Fitur Autentikasi dan Manajemen User (RBAC) ---
(function() {
window.currentUser = null;
// Elements
const authWidget = document.getElementById('authWidget');
const loginModal = document.getElementById('loginModal');
const loginUsernameInput = document.getElementById('loginUsername');
const loginPasswordInput = document.getElementById('loginPassword');
const loginSubmitBtn = document.getElementById('loginSubmitBtn');
const loginErrorMsg = document.getElementById('loginErrorMsg');
const closeLoginModal = document.getElementById('closeLoginModal');
// User Management Modal Elements
const userManagementModal = document.getElementById('userManagementModal');
const closeUserManagementModal = document.getElementById('closeUserManagementModal');
const menuUsersBtn = document.getElementById('menuUsers');
const userTableBody = document.getElementById('userTableBody');
const btnSaveUser = document.getElementById('btnSaveUser');
const btnCancelUserEdit = document.getElementById('btnCancelUserEdit');
const userFormTitle = document.getElementById('userFormTitle');
const manageUserId = document.getElementById('manageUserId');
const manageUsername = document.getElementById('manageUsername');
const managePassword = document.getElementById('managePassword');
const manageRole = document.getElementById('manageRole');
const manageIbadahId = document.getElementById('manageIbadahId');
const manageIbadahGroup = document.getElementById('manageIbadahGroup');
// Startup Session Check
function checkSession() {
fetch('api/check_session.php')
.then(res => res.json())
.then(data => {
if (data.status === 'success' && data.isLoggedIn) {
window.currentUser = data.data;
} else {
window.currentUser = null;
}
updateAuthUI();
refreshAllLayers();
})
.catch(err => {
console.error("Session check failed:", err);
window.currentUser = null;
updateAuthUI();
});
}
// Update UI based on logged-in state
function updateAuthUI() {
if (!authWidget) return;
const dashboardBtn = document.getElementById('menuDashboard');
if (window.currentUser) {
// Logged In state
const roleLabel = window.currentUser.role === 'admin' ? 'Admin' : 'Pengelola';
const extraLabel = window.currentUser.nama_ibadah ? ` - ${window.currentUser.nama_ibadah}` : '';
authWidget.innerHTML = `
<div class="user-profile-pill">
<div class="user-profile-info">
<div class="user-profile-name">👤 ${escHtml(window.currentUser.username)}</div>
<div class="user-profile-role">${roleLabel}${escHtml(extraLabel)}</div>
</div>
<button class="btn-profile-logout" id="authLogoutBtn" title="Logout">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
`;
document.getElementById('authLogoutBtn').addEventListener('click', logout);
// Show Dashboard button for all logged-in users
if (dashboardBtn) dashboardBtn.style.display = 'flex';
// Show user management button in sidebar for Admin
const adminDivider = document.getElementById('sidebarAdminDivider');
if (window.currentUser.role === 'admin') {
if (menuUsersBtn) menuUsersBtn.style.display = 'flex';
if (adminDivider) adminDivider.style.display = 'block';
} else {
if (menuUsersBtn) menuUsersBtn.style.display = 'none';
if (adminDivider) adminDivider.style.display = 'none';
}
} else {
// Logged Out state
authWidget.innerHTML = `
<button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
`;
document.getElementById('authLoginBtn').addEventListener('click', showLoginModal);
if (menuUsersBtn) menuUsersBtn.style.display = 'none';
if (dashboardBtn) dashboardBtn.style.display = 'none';
const adminDivider = document.getElementById('sidebarAdminDivider');
if (adminDivider) adminDivider.style.display = 'none';
}
}
function refreshAllLayers() {
if (typeof loadSpbu === 'function') loadSpbu();
if (typeof loadJalan === 'function') loadJalan();
if (typeof loadParsil === 'function') loadParsil();
if (typeof loadRumahIbadah === 'function') loadRumahIbadah();
if (typeof loadPendudukMiskin === 'function') loadPendudukMiskin();
if (window.refreshActivePanel) window.refreshActivePanel();
}
// Login Modals logic
function showLoginModal() {
loginUsernameInput.value = '';
loginPasswordInput.value = '';
loginErrorMsg.style.display = 'none';
loginModal.classList.add('show');
}
function hideLoginModal() {
loginModal.classList.remove('show');
}
if (closeLoginModal) {
closeLoginModal.addEventListener('click', hideLoginModal);
}
loginSubmitBtn.addEventListener('click', function() {
const username = loginUsernameInput.value.trim();
const password = loginPasswordInput.value;
if (!username || !password) {
loginErrorMsg.textContent = 'Username dan password wajib diisi';
loginErrorMsg.style.display = 'block';
return;
}
fetch('api/login.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
window.currentUser = data.data;
hideLoginModal();
updateAuthUI();
refreshAllLayers();
showToast('Login berhasil', 'success');
} else {
loginErrorMsg.textContent = data.message || 'Login gagal';
loginErrorMsg.style.display = 'block';
}
})
.catch(err => {
console.error(err);
loginErrorMsg.textContent = 'Koneksi ke server terputus';
loginErrorMsg.style.display = 'block';
});
});
function logout() {
fetch('api/logout.php')
.then(res => res.json())
.then(data => {
window.currentUser = null;
updateAuthUI();
refreshAllLayers();
showToast('Logout berhasil', 'success');
})
.catch(err => {
console.error(err);
showToast('Gagal logout', 'error');
});
}
// User Management Modal Logic
if (menuUsersBtn) {
menuUsersBtn.addEventListener('click', function() {
userManagementModal.classList.add('show');
loadUsers();
populateIbadahDropdown();
resetUserForm();
});
}
// Dashboard Button
const menuDashboardBtn = document.getElementById('menuDashboard');
if (menuDashboardBtn) {
menuDashboardBtn.addEventListener('click', function() {
if (typeof window.openDashboard === 'function') window.openDashboard();
});
}
if (closeUserManagementModal) {
closeUserManagementModal.addEventListener('click', function() {
userManagementModal.classList.remove('show');
});
}
// Show/hide ibadah dropdown based on selected role in form
if (manageRole) {
manageRole.addEventListener('change', function() {
if (this.value === 'admin') {
manageIbadahGroup.style.display = 'none';
manageIbadahId.value = '';
} else {
manageIbadahGroup.style.display = 'flex';
}
});
}
function populateIbadahDropdown() {
if (!manageIbadahId) return;
manageIbadahId.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 = `${ib.jenis || '🕌'} ${ib.nama}`;
manageIbadahId.appendChild(opt);
});
}
}
function loadUsers() {
if (!userTableBody) return;
userTableBody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:15px; color:#aaa;">Memuat user...</td></tr>';
fetch('api/users/read.php')
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
userTableBody.innerHTML = '';
if (data.data.length === 0) {
userTableBody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:15px; color:#aaa;">Belum ada user</td></tr>';
return;
}
data.data.forEach(user => {
const tr = document.createElement('tr');
tr.style.borderBottom = '1px solid #e2e8f0';
const roleBadge = user.role === 'admin'
? '<span class="data-card-badge badge-red">Admin</span>'
: '<span class="data-card-badge badge-blue">Pengelola</span>';
tr.innerHTML = `
<td style="padding:10px 12px; font-weight:600;">${escHtml(user.username)}</td>
<td style="padding:10px 12px;">${roleBadge}</td>
<td style="padding:10px 12px; color:#64748b;">${escHtml(user.nama_ibadah)}</td>
<td style="padding:10px 12px; text-align:center; display:flex; gap:6px; justify-content:center;">
<button class="btn-card-action btn-card-edit" title="Edit User" onclick="editUser(${JSON.stringify(user).replace(/"/g, '&quot;')})">
<i class="fas fa-pen"></i>
</button>
<button class="btn-card-action btn-card-delete" title="Hapus User" onclick="deleteUser(${user.id})">
<i class="fas fa-trash"></i>
</button>
</td>
`;
userTableBody.appendChild(tr);
});
}
})
.catch(err => {
userTableBody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:15px; color:#ef4444;">Gagal memuat user</td></tr>';
});
}
window.editUser = function(user) {
userFormTitle.textContent = 'Edit Pengguna';
manageUserId.value = user.id;
manageUsername.value = user.username;
managePassword.value = ''; // Password cleared in edit
manageRole.value = user.role;
if (user.role === 'admin') {
manageIbadahGroup.style.display = 'none';
manageIbadahId.value = '';
} else {
manageIbadahGroup.style.display = 'flex';
manageIbadahId.value = user.ibadah_id || '';
}
btnCancelUserEdit.style.display = 'inline-block';
};
window.deleteUser = function(id) {
if (confirm('Apakah Anda yakin ingin menghapus user ini?')) {
fetch('api/users/delete.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id })
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
showToast(data.message, 'success');
loadUsers();
resetUserForm();
} else {
showToast(data.message || 'Gagal menghapus user', 'error');
}
})
.catch(err => {
showToast('Koneksi terputus', 'error');
});
}
};
btnSaveUser.addEventListener('click', function() {
const id = manageUserId.value;
const username = manageUsername.value.trim();
const password = managePassword.value;
const role = manageRole.value;
const ibadah_id = manageIbadahId.value;
if (!username) {
alert('Username wajib diisi');
return;
}
if (!id && !password) {
alert('Password wajib diisi untuk user baru');
return;
}
const payload = { username, role, ibadah_id };
if (id) payload.id = id;
if (password) payload.password = password;
const endpoint = id ? 'api/users/update.php' : 'api/users/create.php';
fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
showToast(data.message, 'success');
loadUsers();
resetUserForm();
} else {
alert(data.message || 'Gagal menyimpan user');
}
})
.catch(err => {
alert('Koneksi terputus');
});
});
btnCancelUserEdit.addEventListener('click', resetUserForm);
function resetUserForm() {
userFormTitle.textContent = 'Tambah User Baru';
manageUserId.value = '';
manageUsername.value = '';
managePassword.value = '';
manageRole.value = 'pengelola';
manageIbadahGroup.style.display = 'flex';
manageIbadahId.value = '';
btnCancelUserEdit.style.display = 'none';
}
// Helper functions
function escHtml(str) {
if (!str) return '';
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
// Toast Notification helper
function showToast(message, type = 'success') {
if (typeof window.showToast === 'function') {
window.showToast(message, type);
return;
}
// Fallback alert
alert(message);
}
// Run session check on initialization
checkSession();
})();
webgis-poverty-pontianak/assets/js/features/dashboard.js
+468
View File
@@ -0,0 +1,468 @@
// ===== Dashboard Feature (Terintegrasi) =====
// Menghubungkan: webgis-poverty-pontianak, jalan, penduduk, spbu
(function () {
'use strict';
// ── State ──────────────────────────────────────────────────────────────
let dashboardData = null;
let activeTab = 'kemiskinan';
// ── Modal Element ──────────────────────────────────────────────────────
const modal = document.getElementById('dashboardModal');
if (!modal) return;
// ── Open / Close ───────────────────────────────────────────────────────
window.openDashboard = function () {
modal.classList.add('show');
if (!dashboardData) loadDashboard();
else renderTab(activeTab);
};
window.closeDashboard = function () {
modal.classList.remove('show');
};
document.getElementById('closeDashboardModal')?.addEventListener('click', window.closeDashboard);
modal.addEventListener('click', function (e) {
if (e.target === modal) window.closeDashboard();
});
// ── Load Data ──────────────────────────────────────────────────────────
function loadDashboard() {
const body = document.getElementById('dashboardBody');
body.innerHTML = `
<div class="db-loading">
<div class="db-spinner"></div>
<span>Memuat data dashboard terintegrasi…</span>
</div>`;
fetch('api/dashboard/stats_extended.php')
.then(r => r.json())
.then(data => {
if (data.status !== 'success') throw new Error(data.message || 'Gagal memuat');
dashboardData = data;
renderShell();
renderTab(activeTab);
})
.catch(err => {
body.innerHTML = `<div class="db-error">❌ Gagal memuat data: ${err.message}</div>`;
});
}
// ── Shell (tab bar + container) ────────────────────────────────────────
function renderShell() {
const body = document.getElementById('dashboardBody');
const tabs = [
{ id: 'kemiskinan', label: '🏠 Kemiskinan' },
{ id: 'jalan', label: '🛣️ Jalan' },
{ id: 'spbu', label: '⛽ SPBU' },
{ id: 'penduduk', label: '👥 Penduduk' },
];
body.innerHTML = `
<div class="db-tab-bar" id="dbTabBar">
${tabs.map(t => `
<button class="db-tab-btn${t.id === activeTab ? ' active' : ''}"
data-tab="${t.id}">${t.label}</button>
`).join('')}
</div>
<div id="dbTabContent" class="db-tab-content"></div>`;
document.getElementById('dbTabBar').addEventListener('click', function (e) {
const btn = e.target.closest('[data-tab]');
if (!btn) return;
activeTab = btn.dataset.tab;
document.querySelectorAll('.db-tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === activeTab));
renderTab(activeTab);
});
}
// ── Route to tab ───────────────────────────────────────────────────────
function renderTab(tab) {
const content = document.getElementById('dbTabContent');
if (!content || !dashboardData) return;
if (tab === 'kemiskinan') renderKemiskinan(content, dashboardData.poverty);
else if (tab === 'jalan') renderJalan(content, dashboardData.jalan);
else if (tab === 'spbu') renderSpbu(content, dashboardData.spbu);
else if (tab === 'penduduk') renderPenduduk(content, dashboardData.penduduk);
}
// ══════════════════════════════════════════════════════════════════════
// Tab 1: Kemiskinan
// ══════════════════════════════════════════════════════════════════════
function renderKemiskinan(el, d) {
const pctColor = d.pct_terurus >= 70 ? '#22c55e' : d.pct_terurus >= 40 ? '#f59e0b' : '#ef4444';
el.innerHTML = `
<div class="db-kpi-grid">
<div class="db-kpi-card kpi-ibadah">
<div class="db-kpi-icon">🕌</div>
<div class="db-kpi-val">${d.total_ibadah}</div>
<div class="db-kpi-label">Rumah Ibadah</div>
</div>
<div class="db-kpi-card kpi-miskin">
<div class="db-kpi-icon">🏠</div>
<div class="db-kpi-val">${d.total_miskin}</div>
<div class="db-kpi-label">KK Miskin</div>
</div>
<div class="db-kpi-card kpi-jiwa">
<div class="db-kpi-icon">👥</div>
<div class="db-kpi-val">${d.total_jiwa}</div>
<div class="db-kpi-label">Total Jiwa</div>
</div>
<div class="db-kpi-card kpi-log">
<div class="db-kpi-icon">📋</div>
<div class="db-kpi-val">${d.total_log}</div>
<div class="db-kpi-label">Log Bantuan</div>
</div>
</div>
${d.total_miskin > 0 ? `
<div class="db-section">
<div class="db-section-title">📊 Cakupan Penanganan</div>
<div class="db-coverage-row">
<div class="db-coverage-labels">
<span style="color:#22c55e">✅ Terurus: <strong>${d.terurus}</strong></span>
<span style="color:#ef4444">⚠️ Tidak Terurus: <strong>${d.tidak_terurus}</strong></span>
<span style="color:${pctColor}; font-weight:700">${d.pct_terurus}%</span>
</div>
<div class="db-progress-bar">
<div class="db-progress-fill" style="width:${d.pct_terurus}%; background:${pctColor};"></div>
</div>
</div>
</div>` : ''}
<div class="db-charts-grid">
<div class="db-chart-card">
<div class="db-chart-title">📦 Kategori Bantuan</div>
<canvas id="chartKategori" height="180"></canvas>
</div>
<div class="db-chart-card">
<div class="db-chart-title">🎁 Tipe Bantuan</div>
<canvas id="chartTipe" height="180"></canvas>
</div>
<div class="db-chart-card db-chart-wide">
<div class="db-chart-title">📅 Aktivitas Bantuan (6 Bulan)</div>
<canvas id="chartBulan" height="140"></canvas>
</div>
</div>`;
setTimeout(() => {
drawPieChart('chartKategori', d.distribusi.kategori, ['#6366f1','#f59e0b','#22c55e','#ef4444','#06b6d4']);
drawPieChart('chartTipe', d.distribusi.tipe_bantuan, ['#4f46e5','#16a34a','#dc2626','#d97706','#0891b2','#7c3aed']);
drawBarChart('chartBulan', d.distribusi.per_bulan);
}, 50);
}
// ══════════════════════════════════════════════════════════════════════
// Tab 2: Jalan
// ══════════════════════════════════════════════════════════════════════
function renderJalan(el, d) {
const panjangKm = (d.total_panjang_m / 1000).toFixed(2);
const luasHa = (d.total_luas_m2 / 10000).toFixed(2);
el.innerHTML = `
<div class="db-kpi-grid">
<div class="db-kpi-card" style="--kpi-color:#3b82f6">
<div class="db-kpi-icon">🛣️</div>
<div class="db-kpi-val">${d.total_jalan}</div>
<div class="db-kpi-label">Ruas Jalan</div>
</div>
<div class="db-kpi-card" style="--kpi-color:#0ea5e9">
<div class="db-kpi-icon">📏</div>
<div class="db-kpi-val">${panjangKm} km</div>
<div class="db-kpi-label">Total Panjang</div>
</div>
<div class="db-kpi-card" style="--kpi-color:#8b5cf6">
<div class="db-kpi-icon">🗂️</div>
<div class="db-kpi-val">${d.total_parsil}</div>
<div class="db-kpi-label">Persil Tanah</div>
</div>
<div class="db-kpi-card" style="--kpi-color:#6d28d9">
<div class="db-kpi-icon">📐</div>
<div class="db-kpi-val">${luasHa} ha</div>
<div class="db-kpi-label">Total Luas Persil</div>
</div>
</div>
<div class="db-charts-grid">
<div class="db-chart-card">
<div class="db-chart-title">🛣️ Jalan per Status</div>
<canvas id="chartStatusJalan" height="180"></canvas>
</div>
<div class="db-chart-card">
<div class="db-chart-title">📋 Persil per Kepemilikan</div>
<canvas id="chartKepemilikan" height="180"></canvas>
</div>
</div>
${Object.keys(d.per_status).length > 0 ? `
<div class="db-section">
<div class="db-section-title">🛣️ Rincian Status Jalan</div>
<div class="db-table-wrap">
<table class="db-table">
<thead><tr><th>Status</th><th>Jumlah Ruas</th></tr></thead>
<tbody>
${Object.entries(d.per_status).map(([k,v]) => `
<tr><td>${esc(k)}</td><td><span class="db-badge">${v}</span></td></tr>
`).join('')}
</tbody>
</table>
</div>
</div>` : '<div class="db-empty">Belum ada data jalan tersimpan di database.</div>'}`;
setTimeout(() => {
drawPieChart('chartStatusJalan', d.per_status, ['#3b82f6','#0ea5e9','#38bdf8']);
drawPieChart('chartKepemilikan', d.per_kepemilikan, ['#8b5cf6','#a78bfa','#c4b5fd','#7c3aed']);
}, 50);
}
// ══════════════════════════════════════════════════════════════════════
// Tab 3: SPBU
// ══════════════════════════════════════════════════════════════════════
function renderSpbu(el, d) {
el.innerHTML = `
<div class="db-kpi-grid">
<div class="db-kpi-card" style="--kpi-color:#f97316">
<div class="db-kpi-icon">⛽</div>
<div class="db-kpi-val">${d.total_spbu}</div>
<div class="db-kpi-label">Total SPBU</div>
</div>
<div class="db-kpi-card" style="--kpi-color:#22c55e">
<div class="db-kpi-icon">🕐</div>
<div class="db-kpi-val">${d.buka_24_jam}</div>
<div class="db-kpi-label">Buka 24 Jam</div>
</div>
<div class="db-kpi-card" style="--kpi-color:#ef4444">
<div class="db-kpi-icon">🕙</div>
<div class="db-kpi-val">${d.tidak_24_jam}</div>
<div class="db-kpi-label">Tidak 24 Jam</div>
</div>
</div>
<div class="db-charts-grid">
<div class="db-chart-card">
<div class="db-chart-title">⏰ Status Operasional</div>
<canvas id="chartSpbuOps" height="180"></canvas>
</div>
</div>
${d.list.length > 0 ? `
<div class="db-section">
<div class="db-section-title">📍 Daftar SPBU</div>
<div class="db-table-wrap">
<table class="db-table">
<thead>
<tr>
<th>#</th>
<th>Nama SPBU</th>
<th>Nomor WA</th>
<th>Operasional</th>
<th>Koordinat</th>
</tr>
</thead>
<tbody>
${d.list.map((s, i) => `
<tr>
<td>${i+1}</td>
<td><strong>${esc(s.nama_spbu)}</strong></td>
<td>${esc(s.nomor_wa)}</td>
<td>${s.buka_24_jam == 1
? '<span class="db-badge" style="background:#22c55e">24 Jam</span>'
: '<span class="db-badge" style="background:#f59e0b">Terbatas</span>'}</td>
<td style="font-size:11px;color:#888">${parseFloat(s.latitude).toFixed(5)}, ${parseFloat(s.longitude).toFixed(5)}</td>
</tr>`).join('')}
</tbody>
</table>
</div>
</div>` : '<div class="db-empty">Belum ada data SPBU tersimpan di database.</div>'}`;
setTimeout(() => {
drawPieChart('chartSpbuOps', { 'Buka 24 Jam': d.buka_24_jam, 'Tidak 24 Jam': d.tidak_24_jam }, ['#22c55e','#ef4444']);
}, 50);
}
// ══════════════════════════════════════════════════════════════════════
// Tab 4: Penduduk (Choropleth Kecamatan)
// ══════════════════════════════════════════════════════════════════════
function renderPenduduk(el, d) {
const maxDensity = Math.max(...d.kecamatan.map(k => k.density));
el.innerHTML = `
<div class="db-kpi-grid">
<div class="db-kpi-card" style="--kpi-color:#0891b2">
<div class="db-kpi-icon">🗺️</div>
<div class="db-kpi-val">${d.total_kecamatan}</div>
<div class="db-kpi-label">Kecamatan</div>
</div>
<div class="db-kpi-card" style="--kpi-color:#06b6d4">
<div class="db-kpi-icon">📊</div>
<div class="db-kpi-val">${d.rata_density.toLocaleString('id-ID')}</div>
<div class="db-kpi-label">Rata-rata Kepadatan (jiwa/km²)</div>
</div>
<div class="db-kpi-card" style="--kpi-color:#0e7490">
<div class="db-kpi-icon">🏆</div>
<div class="db-kpi-val" style="font-size:14px">${esc(d.terpadat)}</div>
<div class="db-kpi-label">Kecamatan Terpadat</div>
</div>
</div>
<div class="db-section">
<div class="db-section-title">👥 Kepadatan Penduduk per Kecamatan (jiwa/km²)</div>
${d.kecamatan.map(k => {
const pct = ((k.density / maxDensity) * 100).toFixed(1);
const color = k.density >= 8 ? '#ef4444' : k.density >= 5 ? '#f59e0b' : '#22c55e';
return `
<div style="margin-bottom:10px">
<div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:3px">
<span>${esc(k.nama)}</span>
<strong style="color:${color}">${k.density.toLocaleString('id-ID')} jiwa/km²</strong>
</div>
<div class="db-progress-bar">
<div class="db-progress-fill" style="width:${pct}%; background:${color};"></div>
</div>
</div>`;
}).join('')}
<div style="margin-top:8px; font-size:11px; color:#888; display:flex; gap:16px">
<span>🟢 &lt;5 Rendah</span>
<span>🟡 5–8 Sedang</span>
<span>🔴 ≥8 Tinggi</span>
</div>
</div>
<div class="db-charts-grid">
<div class="db-chart-card db-chart-wide">
<div class="db-chart-title">📊 Kepadatan per Kecamatan</div>
<canvas id="chartDensity" height="160"></canvas>
</div>
</div>`;
setTimeout(() => {
drawDensityBar('chartDensity', d.kecamatan);
}, 50);
}
// ══════════════════════════════════════════════════════════════════════
// Chart Helpers
// ══════════════════════════════════════════════════════════════════════
function drawPieChart(canvasId, dataObj, colors) {
const canvas = document.getElementById(canvasId);
if (!canvas) return;
const entries = Object.entries(dataObj || {}).filter(([,v]) => v > 0);
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (entries.length === 0) {
ctx.fillStyle = '#aaa'; ctx.font = '13px Inter'; ctx.textAlign = 'center';
ctx.fillText('Belum ada data', canvas.width/2, canvas.height/2);
return;
}
const labels = entries.map(([k]) => k);
const values = entries.map(([,v]) => v);
const total = values.reduce((a,b) => a+b, 0);
const cx = canvas.width/2, cy = canvas.height * 0.42;
const r = Math.min(cx, cy) * 0.72;
let startAngle = -Math.PI/2;
values.forEach((v,i) => {
const slice = (v/total)*2*Math.PI;
ctx.beginPath(); ctx.moveTo(cx, cy);
ctx.arc(cx, cy, r, startAngle, startAngle+slice);
ctx.closePath();
ctx.fillStyle = colors[i % colors.length];
ctx.fill(); ctx.strokeStyle='#fff'; ctx.lineWidth=2; ctx.stroke();
startAngle += slice;
});
ctx.fillStyle='#333'; ctx.font='bold 15px Inter'; ctx.textAlign='center';
ctx.fillText(total, cx, cy+5);
const legY = cy+r+14, legItemW = 92, perRow = Math.floor(canvas.width/legItemW);
labels.forEach((lbl,i) => {
const row=Math.floor(i/perRow), col=i%perRow;
const lx=(canvas.width - Math.min(labels.length,perRow)*legItemW)/2 + col*legItemW;
const ly=legY+row*17;
ctx.fillStyle=colors[i%colors.length]; ctx.fillRect(lx,ly,10,10);
ctx.fillStyle='#555'; ctx.font='10px Inter'; ctx.textAlign='left';
const shortLbl = lbl.length>11 ? lbl.slice(0,10)+'…' : lbl;
ctx.fillText(`${shortLbl} (${values[i]})`, lx+13, ly+9);
});
}
function drawBarChart(canvasId, perBulan) {
const canvas = document.getElementById(canvasId);
if (!canvas) return;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!perBulan || perBulan.length === 0) {
ctx.fillStyle='#aaa'; ctx.font='13px Inter'; ctx.textAlign='center';
ctx.fillText('Belum ada data bantuan', canvas.width/2, canvas.height/2);
return;
}
const padL=36, padR=12, padT=12, padB=28;
const W=canvas.width-padL-padR, H=canvas.height-padT-padB;
const values=perBulan.map(d=>parseInt(d.cnt)), maxVal=Math.max(...values,1);
const barW=W/perBulan.length*0.6, gap=W/perBulan.length;
ctx.strokeStyle='#e5e7eb'; ctx.lineWidth=1;
for (let i=0;i<=4;i++){
const y=padT+H-(i/4)*H;
ctx.beginPath(); ctx.moveTo(padL,y); ctx.lineTo(padL+W,y); ctx.stroke();
ctx.fillStyle='#9ca3af'; ctx.font='9px Inter'; ctx.textAlign='right';
ctx.fillText(Math.round((i/4)*maxVal), padL-4, y+3);
}
perBulan.forEach((d,i)=>{
const bh=(parseInt(d.cnt)/maxVal)*H, bx=padL+i*gap+(gap-barW)/2, by=padT+H-bh;
const grad=ctx.createLinearGradient(0,by,0,padT+H);
grad.addColorStop(0,'#6366f1'); grad.addColorStop(1,'#a5b4fc');
ctx.fillStyle=grad;
ctx.beginPath();
if(ctx.roundRect) ctx.roundRect(bx,by,barW,bh,[4,4,0,0]); else ctx.rect(bx,by,barW,bh);
ctx.fill();
ctx.fillStyle='#4f46e5'; ctx.font='bold 10px Inter'; ctx.textAlign='center';
ctx.fillText(d.cnt, bx+barW/2, by-4);
const ml=d.bulan ? d.bulan.slice(5)+'/'+d.bulan.slice(2,4) : '';
ctx.fillStyle='#6b7280'; ctx.font='9px Inter';
ctx.fillText(ml, bx+barW/2, padT+H+14);
});
}
function drawDensityBar(canvasId, kecamatan) {
const canvas = document.getElementById(canvasId);
if (!canvas) return;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
const padL=130, padR=50, padT=12, padB=12;
const W=canvas.width-padL-padR, H=canvas.height-padT-padB;
const maxVal=Math.max(...kecamatan.map(k=>k.density),1);
const barH=Math.floor(H/kecamatan.length)-6;
kecamatan.forEach((k,i) => {
const bw=(k.density/maxVal)*W;
const by=padT+i*(barH+6);
const color=k.density>=8?'#ef4444':k.density>=5?'#f59e0b':'#22c55e';
// Label kecamatan
ctx.fillStyle='#374151'; ctx.font='11px Inter'; ctx.textAlign='right';
ctx.fillText(k.nama, padL-6, by+barH/2+4);
// Bar
ctx.fillStyle=color+'33';
ctx.fillRect(padL, by, W, barH);
const grad=ctx.createLinearGradient(padL,0,padL+bw,0);
grad.addColorStop(0,color); grad.addColorStop(1,color+'99');
ctx.fillStyle=grad;
if(ctx.roundRect) ctx.roundRect(padL,by,bw,barH,[0,4,4,0]); else ctx.fillRect(padL,by,bw,barH);
ctx.fill();
// Value
ctx.fillStyle=color; ctx.font='bold 11px Inter'; ctx.textAlign='left';
ctx.fillText(k.density.toFixed(3), padL+bw+5, by+barH/2+4);
});
}
// ── Utility ───────────────────────────────────────────────────────────
function esc(str) {
if (!str) return '';
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
})();
webgis-poverty-pontianak/assets/js/features/geojson.js
+181
View File
@@ -0,0 +1,181 @@
// --- Fitur Import GeoJSON ---
const fileGeoJson = document.getElementById('fileGeoJson');
let geoJsonLayers = {};
let geoJsonCounter = 0;
window.toggleGeoJsonMenu = function() {
const list = document.getElementById('geoJsonFileList');
const icon = document.getElementById('geoJsonToggleIcon');
if (list.style.display === 'none') {
list.style.display = 'block';
icon.className = 'fas fa-minus';
} else {
list.style.display = 'none';
icon.className = 'fas fa-plus';
}
};
// Cek apakah fitur GeoJSON ini terlihat seperti data penduduk miskin
function isMiskinFeature(feature) {
if (!feature || !feature.geometry || feature.geometry.type !== 'Point') return false;
const props = feature.properties || {};
const keys = Object.keys(props).map(k => k.toLowerCase());
// Dianggap data miskin jika punya properti nama (dan bukan ibadah atau spbu)
const hasNama = keys.some(k => ['nama', 'name', 'penduduk'].includes(k));
const isIbadah = keys.some(k => ['jenis', 'radius', 'alamat'].includes(k));
const isSpbu = keys.some(k => ['alamat_spbu', 'is_24_jam'].includes(k));
return hasNama && !isIbadah && !isSpbu;
}
fileGeoJson.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
try {
const geoJsonData = JSON.parse(event.target.result);
const fileName = file.name;
// Pisahkan fitur menjadi dua kelompok: miskin dan non-miskin
const features = geoJsonData.type === 'FeatureCollection'
? geoJsonData.features
: [geoJsonData];
const miskinFeatures = features.filter(f => isMiskinFeature(f));
const otherFeatures = features.filter(f => !isMiskinFeature(f));
// ---- Proses fitur miskin: Simpan ke DB, lalu tampilkan seperti penduduk miskin ----
if (miskinFeatures.length > 0) {
const bulkData = miskinFeatures.map(f => {
const props = f.properties || {};
const coords = f.geometry.coordinates;
return {
nama: props.nama || props.name || props.penduduk || 'Data Impor',
kategori_bantuan: props.kategori_bantuan || props.kategori || props.bantuan || 'Makan',
jumlah_jiwa: parseInt(props.jumlah_jiwa || props.jumlah || props.jiwa || 1, 10) || 1,
lat: parseFloat(coords[1]),
lng: parseFloat(coords[0])
};
});
fetch('api/penduduk_miskin/bulk_create.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(bulkData)
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
// Reload layer penduduk miskin agar marker tampil dengan edit/hapus/log bantuan
if (typeof loadPendudukMiskin === 'function') {
loadPendudukMiskin();
}
if (typeof window.refreshActivePanel === 'function') {
window.refreshActivePanel();
}
showToast(data.message || 'Data berhasil diimpor ke layer Penduduk Miskin.', 'success');
} else {
showToast(data.message || 'Gagal menyimpan data miskin.', 'error');
}
})
.catch(err => {
console.error(err);
showToast('Gagal terhubung ke server saat menyimpan data miskin.', 'error');
});
}
// ---- Proses fitur non-miskin: Render sebagai layer GeoJSON biasa ----
if (otherFeatures.length > 0) {
const layerId = 'gj_' + (++geoJsonCounter);
const individualLayer = L.featureGroup();
const otherGeoJson = {
type: 'FeatureCollection',
features: otherFeatures
};
L.geoJSON(otherGeoJson, {
pointToLayer: function(feature, latlng) {
const props = feature.properties || {};
let emoji = props.emoji;
if (!emoji) {
const text = JSON.stringify(props).toLowerCase();
if (text.includes('spbu')) emoji = '⛽';
else if (text.includes('masjid')) emoji = '🕌';
else if (text.includes('gereja')) emoji = '⛪';
else if (text.includes('vihara')) emoji = '🪷';
else if (text.includes('pura')) emoji = '🛕';
else if (text.includes('kelenteng')) emoji = '🏮';
else emoji = '📍';
}
let cls = 'miskin-out';
if (emoji === '⛽') cls = 'spbu-24';
else if (['🕌','⛪','🛕','🪷','🏮'].includes(emoji)) cls = 'ibadah';
const icon = L.divIcon({
className: '',
html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>${emoji}</span></div></div>`,
iconSize: [38, 38],
iconAnchor: [19, 38],
popupAnchor: [0, -40]
});
return L.marker(latlng, { icon: icon });
},
onEachFeature: function(feature, layer) {
if (feature.properties) {
let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0; font-size:12px; margin: 0;">';
for (let key in feature.properties) {
popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
}
popupContent += '</ul>';
layer.bindPopup(popupContent);
}
},
style: function(feature) {
return {
color: (feature.properties && feature.properties.color) || '#3388ff',
weight: 2,
fillOpacity: 0.4
};
}
}).addTo(individualLayer);
individualLayer.addTo(map);
geoJsonLayers[layerId] = individualLayer;
// Tambahkan checkbox ke UI
const container = document.getElementById('geoJsonLayersContainer');
const label = document.createElement('label');
label.className = 'layer-option';
label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
label.querySelector('input').addEventListener('change', function(e) {
if (e.target.checked) {
map.addLayer(geoJsonLayers[layerId]);
} else {
map.removeLayer(geoJsonLayers[layerId]);
}
});
container.appendChild(label);
if (miskinFeatures.length === 0) {
showToast('File GeoJSON berhasil dimuat!', 'success');
}
}
// Reset input file agar bisa import file yang sama
fileGeoJson.value = '';
} catch (error) {
showToast('Gagal memproses file GeoJSON. Pastikan format valid.', 'error');
console.error(error);
}
};
reader.readAsText(file);
});
webgis-poverty-pontianak/assets/js/features/geolocation.js
+30
View File
@@ -0,0 +1,30 @@
// --- Fitur Geolocation ---
// Tambahkan tombol di dalam wadah zoom control
const geoBtn = document.createElement('button');
geoBtn.className = 'custom-layer-btn';
geoBtn.style.position = 'relative';
geoBtn.style.top = '0';
geoBtn.style.left = '0';
geoBtn.style.right = 'auto';
geoBtn.innerHTML = '<i class="fas fa-crosshairs fa-lg"></i>';
geoBtn.title = 'Lokasi Saya';
document.querySelector('.custom-zoom-control').appendChild(geoBtn);
let userMarker = null;
geoBtn.addEventListener('click', function() {
map.locate({setView: true, maxZoom: 16});
});
map.on('locationfound', function(e) {
if (userMarker) {
map.removeLayer(userMarker);
}
userMarker = L.marker(e.latlng).addTo(map)
.bindPopup("Anda berada di sini!").openPopup();
});
map.on('locationerror', function(e) {
alert("Gagal mendapatkan lokasi Anda.");
});
webgis-poverty-pontianak/assets/js/features/kemiskinan.js
+916
View File
@@ -0,0 +1,916 @@
// --- Fitur Pemetaan Kemiskinan ---
// Emoji per jenis ibadah
const IBADAH_EMOJI_MAP = {
'Masjid': '🕌',
'Gereja': '⛪',
'Pura': '🛕',
'Vihara': '🪷',
'Kelenteng': '🏮',
};
// Emoji Bubble Icon builder
function makeIbadahIcon(jenis) {
const emot = IBADAH_EMOJI_MAP[jenis] || '🕌';
return L.divIcon({
className: '',
html: `<div class="emoji-marker"><div class="bubble ibadah"><span>${emot}</span></div></div>`,
iconSize: [38, 38],
iconAnchor: [19, 38],
popupAnchor: [0, -40]
});
}
function makeMiskinIcon(inRadius) {
const cls = inRadius ? 'miskin-in' : 'miskin-out';
return L.divIcon({
className: '',
html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>🏠</span></div></div>`,
iconSize: [38, 38],
iconAnchor: [19, 38],
popupAnchor: [0, -40]
});
}
let ibadahDataList = [];
let miskinMarkerList = []; // Simpan referensi marker untuk update warna
// Helper: cek apakah koordinat (lat, lng) berada dalam radius ibadah pengelola yang login
function isInMyIbadahRadius(lat, lng) {
if (!window.currentUser || window.currentUser.role !== 'pengelola') return true; // admin selalu bisa
const myIbadahId = window.currentUser.ibadah_id;
if (!myIbadahId) return false;
const ib = ibadahDataList.find(i => i.id == myIbadahId);
if (!ib) return false;
const dist = L.latLng(lat, lng).distanceTo(L.latLng(ib.lat, ib.lng));
return dist <= ib.radius;
}
window.isInMyIbadahRadius = isInMyIbadahRadius;
let isResizing = false;
let resizingCircle = null;
let resizingIbadah = null;
map.on('mousemove', function(e) {
if (isResizing && resizingCircle && resizingIbadah) {
const center = resizingCircle.getLatLng();
const newRadius = center.distanceTo(e.latlng);
resizingCircle.setRadius(newRadius);
resizingIbadah.radius = newRadius;
// Update data radius di marker juga
rumahIbadahLayer.eachLayer(function(layer) {
if (layer.ibadahData && layer.ibadahData.id === resizingIbadah.id && layer instanceof L.Marker) {
layer.ibadahData.radius = newRadius;
}
});
updateSemuaWarnaMiskin();
}
});
map.on('mouseup', function(e) {
if (isResizing) {
isResizing = false;
map.dragging.enable();
if (resizingIbadah) {
updateIbadah(resizingIbadah.id, resizingIbadah.nama, resizingIbadah.jenis, resizingIbadah.alamat, resizingIbadah.radius, resizingIbadah.lat, resizingIbadah.lng);
}
resizingCircle = null;
resizingIbadah = null;
}
});
// --- Rumah Ibadah ---
function loadRumahIbadah() {
rumahIbadahLayer.clearLayers();
ibadahDataList = [];
fetch('api/rumah_ibadah/read.php')
.then(res => res.json())
.then(data => {
if (data.status === 'success' && data.data) {
ibadahDataList = data.data;
data.data.forEach(item => {
addIbadahMarker(item);
});
updateSemuaWarnaMiskin();
}
if (window.refreshActivePanel) window.refreshActivePanel();
});
}
function addIbadahMarker(item) {
const lat = parseFloat(item.lat);
const lng = parseFloat(item.lng);
const radius = parseFloat(item.radius) || 100; // fallback if invalid
if (isNaN(lat) || isNaN(lng)) return;
const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
const marker = L.marker([lat, lng], { icon: makeIbadahIcon(item.jenis), draggable: isAdmin });
// Lingkaran radius
const circle = L.circle([lat, lng], {
radius: radius,
color: '#ff7800',
weight: 2,
fillColor: '#ff7800',
fillOpacity: 0.2
});
circle.on('mousemove', function(e) {
if (!isAdmin || isResizing) return;
const center = circle.getLatLng();
const radius = circle.getRadius();
const dist = center.distanceTo(e.latlng);
const metersPerPixel = map.distance(map.containerPointToLatLng([0,0]), map.containerPointToLatLng([0,1]));
const tolerance = Math.max(radius * 0.1, metersPerPixel * 15); // toleransi 15px atau 10%
if (Math.abs(dist - radius) <= tolerance) {
if (circle._path) circle._path.style.cursor = 'ew-resize';
circle.nearEdge = true;
} else {
if (circle._path) circle._path.style.cursor = 'pointer';
circle.nearEdge = false;
}
});
circle.on('mousedown', function(e) {
if (isAdmin && circle.nearEdge) {
map.dragging.disable();
isResizing = true;
resizingCircle = circle;
resizingIbadah = item;
L.DomEvent.stopPropagation(e);
}
});
marker.ibadahData = item;
marker.circleLayer = circle;
const d = item;
const emot = IBADAH_EMOJI_MAP[d.jenis] || '🕌';
let actionButtons = '';
if (isAdmin) {
actionButtons = `
<div style="display:flex; gap:5px;">
<button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditIbadahModal(${d.id})">Edit</button>
<button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteIbadah(${d.id})">Hapus</button>
</div>
`;
}
const popupContent = `
<div style="font-family: Arial, sans-serif; min-width: 160px;">
<h4 style="margin:0 0 5px 0;">${emot} ${d.nama}</h4>
<p style="margin: 0 0 3px 0;"><b>Jenis:</b> ${d.jenis || 'Masjid'}</p>
<p style="margin: 0 0 3px 0;"><b>Alamat:</b> ${d.alamat}</p>
<p style="margin: 0 0 10px 0;"><b>Radius:</b> ${d.radius} m</p>
${actionButtons}
</div>
`;
marker.bindPopup(popupContent);
marker.on('dragend', function(e) {
const newPos = marker.getLatLng();
circle.setLatLng(newPos);
item.lat = newPos.lat;
item.lng = newPos.lng;
// Update ke DB
updateIbadah(item.id, item.nama, item.jenis, item.alamat, item.radius, newPos.lat, newPos.lng);
});
rumahIbadahLayer.addLayer(circle);
rumahIbadahLayer.addLayer(marker);
}
// Konteks Menu untuk Tambah Penduduk Miskin (klik kanan peta)
map.on('contextmenu', function(e) {
const isAdminOrPengelola = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
if (!isAdminOrPengelola) return;
const canAddHere = isInMyIbadahRadius(e.latlng.lat, e.latlng.lng);
if (!canAddHere) {
// Pengelola: lokasi di luar radius ibadahnya
const warnContent = `
<div class="popup-form">
<h4>⚠️ Di Luar Radius</h4>
<p style="font-size:12px; color:#e11d48; margin:4px 0 0;">Anda hanya dapat menambah penduduk miskin di dalam radius rumah ibadah yang Anda kelola.</p>
</div>
`;
L.popup().setLatLng(e.latlng).setContent(warnContent).openOn(map);
return;
}
const popupContent = `
<div class="popup-form">
<h4>Tambah Titik</h4>
<button class="btn-danger" style="margin-top:5px;" onclick="formAddMiskin(${e.latlng.lat}, ${e.latlng.lng})">Tambah Penduduk Miskin</button>
</div>
`;
L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(map);
});
// Map Click -> Form Add Rumah Ibadah
map.on('click', function(e) {
if (window.currentAddMode === 'rumah_ibadah') {
const lat = e.latlng.lat;
const lng = e.latlng.lng;
// Reverse Geocoding
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
.then(res => res.json())
.then(geoData => {
const alamat = geoData.display_name || 'Alamat tidak ditemukan';
const bodyHTML = `
<div class="form-group">
<label>Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}</label>
</div>
<div class="form-group">
<label>Nama Rumah Ibadah</label>
<input type="text" id="modalIbadahNama" placeholder="Nama Rumah Ibadah">
</div>
<div class="form-group">
<label>Jenis</label>
<select id="modalIbadahJenis">
<option value="Masjid">🕌 Masjid</option>
<option value="Gereja">⛪ Gereja</option>
<option value="Pura">🛕 Pura</option>
<option value="Vihara">🪷 Vihara</option>
<option value="Kelenteng">🏮 Kelenteng</option>
</select>
</div>
<div class="form-group">
<label>Alamat (Auto)</label>
<textarea id="modalIbadahAlamat" rows="3">${alamat}</textarea>
</div>
<div class="form-group">
<label>Radius (m)</label>
<input type="number" id="modalIbadahRadius" value="500">
</div>
`;
openModal("Tambah Rumah Ibadah", bodyHTML, function() {
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahJenis', 'modalIbadahAlamat', 'modalIbadahRadius');
});
window.deactivateAddMode();
})
.catch(err => {
// Tetap buka modal meskipun gagal mendapatkan alamat
const alamat = '';
const bodyHTML = `
<div class="form-group">
<label>Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}</label>
</div>
<div class="form-group">
<label>Nama Rumah Ibadah</label>
<input type="text" id="modalIbadahNama" placeholder="Nama Rumah Ibadah">
</div>
<div class="form-group">
<label>Jenis</label>
<select id="modalIbadahJenis">
<option value="Masjid">🕌 Masjid</option>
<option value="Gereja">⛪ Gereja</option>
<option value="Pura">🛕 Pura</option>
<option value="Vihara">🪷 Vihara</option>
<option value="Kelenteng">🏮 Kelenteng</option>
</select>
</div>
<div class="form-group">
<label>Alamat (Manual)</label>
<textarea id="modalIbadahAlamat" rows="3" placeholder="Masukkan alamat manual">${alamat}</textarea>
</div>
<div class="form-group">
<label>Radius (m)</label>
<input type="number" id="modalIbadahRadius" value="500">
</div>
`;
openModal("Tambah Rumah Ibadah", bodyHTML, function() {
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahJenis', 'modalIbadahAlamat', 'modalIbadahRadius');
});
window.deactivateAddMode();
});
}
});
window.saveNewIbadah = function(lat, lng, namaId, jenisId, alamatId, radiusId) {
const nama = document.getElementById(namaId).value;
const jenis = document.getElementById(jenisId).value;
const alamat = document.getElementById(alamatId).value;
const radius = document.getElementById(radiusId).value;
if (!nama) { alert("Nama Rumah Ibadah harus diisi!"); return; }
fetch('api/rumah_ibadah/create.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nama, jenis, alamat, radius, lat, lng })
})
.then(res => res.json())
.then(data => {
if(data.status === 'success') { closeModal(); loadRumahIbadah(); }
else { alert(data.message); }
});
};
window.openEditIbadahModal = function(id) {
let d = null;
rumahIbadahLayer.eachLayer(function(layer) {
if (layer.ibadahData && layer.ibadahData.id == id) d = layer.ibadahData;
});
if (!d) return;
const jenisOpts = ['Masjid','Gereja','Pura','Vihara','Kelenteng'].map(j =>
`<option value="${j}" ${d.jenis === j ? 'selected' : ''}>${IBADAH_EMOJI_MAP[j] || ''} ${j}</option>`
).join('');
const bodyHTML = `
<div class="form-group">
<label>Nama Rumah Ibadah</label>
<input type="text" id="editIbadahNama" value="${d.nama}">
</div>
<div class="form-group">
<label>Jenis</label>
<select id="editIbadahJenis">${jenisOpts}</select>
</div>
<div class="form-group">
<label>Alamat</label>
<textarea id="editIbadahAlamat" rows="2">${d.alamat}</textarea>
</div>
<div class="form-group">
<label>Radius (m)</label>
<input type="number" id="editIbadahRadius" value="${d.radius}" oninput="previewRadius(${d.id}, this.value)">
</div>
`;
map.closePopup();
openModal("Edit Rumah Ibadah", bodyHTML, function() {
window.saveEditIbadah(d.id, d.lat, d.lng, 'editIbadahNama', 'editIbadahJenis', 'editIbadahAlamat', 'editIbadahRadius');
});
};
window.previewRadius = function(id, newRadius) {
rumahIbadahLayer.eachLayer(function(layer) {
// layer ini bisa marker atau circle, kita cek yang punya circleLayer (marker)
if (layer.ibadahData && layer.ibadahData.id === id && layer.circleLayer) {
layer.circleLayer.setRadius(parseFloat(newRadius));
layer.ibadahData.radius = parseFloat(newRadius);
updateSemuaWarnaMiskin(); // Update warna miskin real-time
}
});
};
window.saveEditIbadah = function(id, lat, lng, namaId, jenisId, alamatId, radiusId) {
const nama = document.getElementById(namaId).value;
const jenis = document.getElementById(jenisId).value;
const alamat = document.getElementById(alamatId).value;
const radius = document.getElementById(radiusId).value;
updateIbadah(id, nama, jenis, alamat, radius, lat, lng);
};
function updateIbadah(id, nama, jenis, alamat, radius, lat, lng) {
fetch('api/rumah_ibadah/update.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id, nama, jenis, alamat, radius, lat, lng })
}).then(res => res.json()).then(data => {
if(data.status === 'success') {
if (typeof closeModal === 'function') closeModal();
map.closePopup();
loadRumahIbadah();
}
});
}
window.deleteIbadah = function(id) {
openConfirmModal("Yakin hapus rumah ibadah ini?", function() {
fetch('api/rumah_ibadah/delete.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id })
}).then(res => res.json()).then(data => {
if(data.status === 'success') { map.closePopup(); loadRumahIbadah(); }
});
});
};
// --- Penduduk Miskin ---
function loadPendudukMiskin() {
pendudukMiskinLayer.clearLayers();
miskinMarkerList = [];
fetch('api/penduduk_miskin/read.php')
.then(res => res.json())
.then(data => {
if (data.status === 'success' && data.data) {
data.data.forEach(item => {
addMiskinMarker(item);
});
updateSemuaWarnaMiskin();
}
if (window.refreshActivePanel) window.refreshActivePanel();
});
}
function addMiskinMarker(item) {
const lat = parseFloat(item.lat);
const lng = parseFloat(item.lng);
if (isNaN(lat) || isNaN(lng)) return;
// Pengelola hanya bisa manage marker yang ada di dalam radius ibadahnya
const isAdminOrPengelola = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
const canManage = isAdminOrPengelola && isInMyIbadahRadius(lat, lng);
const marker = L.marker([lat, lng], { icon: makeMiskinIcon(false), draggable: canManage });
marker.miskinData = item;
const d = item;
let actionButtons = '';
if (canManage) {
actionButtons = `
<button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditMiskinModal(${d.id})">Edit</button>
<button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteMiskin(${d.id})">Hapus</button>
`;
}
let photoLinksHtml = '';
if (d.foto_rumah) {
photoLinksHtml += `
<div style="margin: 5px 0;">
<b style="font-size:11px;">Foto Rumah:</b><br>
<a href="/poverty/uploads/${d.foto_rumah}" target="_blank">
<img src="/poverty/uploads/${d.foto_rumah}" alt="Foto Rumah"
style="max-width:150px; max-height:100px; border-radius:4px; margin-top:3px; border:1px solid #ddd; object-fit:cover; cursor:pointer;"
onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';"/>
<span style="display:none; font-size:11px; color:#ef4444;">❌ Foto tidak dapat dimuat</span>
</a>
</div>`;
}
if (d.foto_kk) {
photoLinksHtml += `
<div style="margin: 5px 0;">
<b style="font-size:11px;">Foto KK:</b><br>
<a href="/poverty/uploads/${d.foto_kk}" target="_blank">
<img src="/poverty/uploads/${d.foto_kk}" alt="Foto KK"
style="max-width:150px; max-height:100px; border-radius:4px; margin-top:3px; border:1px solid #ddd; object-fit:cover; cursor:pointer;"
onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';"/>
<span style="display:none; font-size:11px; color:#ef4444;">❌ Foto tidak dapat dimuat</span>
</a>
</div>`;
}
const popupContent = `
<div style="font-family: Arial, sans-serif; min-width: 165px;">
<h4 style="margin:0 0 5px 0;">🏠 ${d.nama}</h4>
<p style="margin: 0 0 3px 0;"><b>Bantuan:</b> ${d.kategori_bantuan}</p>
<p style="margin: 0 0 5px 0;"><b>Jiwa:</b> ${d.jumlah_jiwa || '-'}</p>
${photoLinksHtml}
<div style="display:flex; gap:5px; flex-wrap:wrap; margin-top:8px;">
<button style="padding:4px 8px; background:#6366f1; color:white; border:none; border-radius:3px; cursor:pointer; font-size:11px;" onclick="openLogBantuan(${d.id}, '${d.nama.replace(/'/g, "\\'")}');">📋 Log Bantuan</button>
${actionButtons}
</div>
</div>
`;
marker.bindPopup(popupContent);
marker.on('dragend', function(e) {
const newPos = marker.getLatLng();
item.lat = newPos.lat;
item.lng = newPos.lng;
updateSemuaWarnaMiskin(); // Update warna segera
// Simpan ke DB
fetch('api/penduduk_miskin/update.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(item)
});
});
miskinMarkerList.push(marker);
pendudukMiskinLayer.addLayer(marker);
}
window.formAddMiskin = function(lat, lng) {
map.closePopup();
const bodyHTML = `
<div class="form-group">
<label>Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}</label>
</div>
<div class="form-group">
<label>Nama Kepala Keluarga</label>
<input type="text" id="miskinNama" placeholder="Nama Kepala Keluarga">
</div>
<div class="form-group">
<label>Kategori Bantuan</label>
<select id="miskinKategori">
<option value="Makan">Bantuan Makan</option>
<option value="Pemberdayaan">Pemberdayaan</option>
</select>
</div>
<div class="form-group">
<label>Jumlah Jiwa</label>
<input type="number" id="miskinJiwa" value="1" min="1">
</div>
<div class="form-group">
<label>Foto Rumah</label>
<input type="file" id="miskinFotoRumah" accept="image/*">
</div>
<div class="form-group">
<label>Foto Kartu Keluarga (KK)</label>
<input type="file" id="miskinFotoKK" accept="image/*">
</div>
`;
openModal("Tambah Penduduk Miskin", bodyHTML, function() {
window.saveNewMiskin(lat, lng);
});
};
window.saveNewMiskin = function(lat, lng) {
const nama = document.getElementById('miskinNama').value;
const kategori_bantuan = document.getElementById('miskinKategori').value;
const jumlah_jiwa = document.getElementById('miskinJiwa').value;
const fotoRumahInput = document.getElementById('miskinFotoRumah');
const fotoKKInput = document.getElementById('miskinFotoKK');
if (!nama) { alert('Nama kepala keluarga harus diisi!'); return; }
const formData = new FormData();
formData.append('nama', nama);
formData.append('kategori_bantuan', kategori_bantuan);
formData.append('jumlah_jiwa', jumlah_jiwa);
formData.append('lat', lat);
formData.append('lng', lng);
if (fotoRumahInput.files[0]) formData.append('foto_rumah', fotoRumahInput.files[0]);
if (fotoKKInput.files[0]) formData.append('foto_kk', fotoKKInput.files[0]);
fetch('api/penduduk_miskin/create.php', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => {
if(data.status === 'success') {
closeModal();
loadPendudukMiskin();
} else { alert(data.message); }
});
};
window.openEditMiskinModal = function(id) {
let d = null;
pendudukMiskinLayer.eachLayer(function(layer) {
if (layer.miskinData && layer.miskinData.id == id) d = layer.miskinData;
});
if (!d) return;
const bodyHTML = `
<div class="form-group">
<label>Nama Kepala Keluarga</label>
<input type="text" id="editMiskinNama" value="${d.nama}">
</div>
<div class="form-group">
<label>Kategori Bantuan</label>
<select id="editMiskinKategori">
<option value="Makan" ${d.kategori_bantuan === 'Makan' ? 'selected' : ''}>Bantuan Makan</option>
<option value="Pemberdayaan" ${d.kategori_bantuan === 'Pemberdayaan' ? 'selected' : ''}>Pemberdayaan</option>
</select>
</div>
<div class="form-group">
<label>Jumlah Jiwa</label>
<input type="number" id="editMiskinJiwa" value="${d.jumlah_jiwa || 1}" min="1">
</div>
<div class="form-group">
<label>Foto Rumah</label>
<input type="file" id="editMiskinFotoRumah" accept="image/*">
${d.foto_rumah ? `
<div style="margin-top:5px;">
<a href="/poverty/uploads/${d.foto_rumah}" target="_blank">
<img src="/poverty/uploads/${d.foto_rumah}" alt="Foto Rumah" style="max-width:120px; max-height:80px; border-radius:4px; border:1px solid #ddd; object-fit:cover;"
onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';"/>
<span style="display:none; font-size:11px; color:#ef4444;">❌ File gambar rusak atau tidak ditemukan</span>
</a>
<div style="font-size:11px;color:#888;margin-top:2px;">Upload baru untuk mengganti</div>
</div>` : ''}
</div>
<div class="form-group">
<label>Foto Kartu Keluarga (KK)</label>
<input type="file" id="editMiskinFotoKK" accept="image/*">
${d.foto_kk ? `
<div style="margin-top:5px;">
<a href="/poverty/uploads/${d.foto_kk}" target="_blank">
<img src="/poverty/uploads/${d.foto_kk}" alt="Foto KK" style="max-width:120px; max-height:80px; border-radius:4px; border:1px solid #ddd; object-fit:cover;"
onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';"/>
<span style="display:none; font-size:11px; color:#ef4444;">❌ File gambar rusak atau tidak ditemukan</span>
</a>
<div style="font-size:11px;color:#888;margin-top:2px;">Upload baru untuk mengganti</div>
</div>` : ''}
</div>
`;
map.closePopup();
openModal("Edit Penduduk Miskin", bodyHTML, function() {
window.saveEditMiskin(d.id, d.lat, d.lng, 'editMiskinNama', 'editMiskinKategori', 'editMiskinJiwa');
});
};
window.saveEditMiskin = function(id, lat, lng, namaId, kategoriId, jiwaId) {
const nama = document.getElementById(namaId).value;
const kategori_bantuan = document.getElementById(kategoriId).value;
const jumlah_jiwa = jiwaId ? document.getElementById(jiwaId).value : 1;
const fotoRumahInput = document.getElementById('editMiskinFotoRumah');
const fotoKKInput = document.getElementById('editMiskinFotoKK');
const formData = new FormData();
formData.append('id', id);
formData.append('nama', nama);
formData.append('kategori_bantuan', kategori_bantuan);
formData.append('jumlah_jiwa', jumlah_jiwa);
formData.append('lat', lat);
formData.append('lng', lng);
if (fotoRumahInput.files[0]) formData.append('foto_rumah', fotoRumahInput.files[0]);
if (fotoKKInput.files[0]) formData.append('foto_kk', fotoKKInput.files[0]);
fetch('api/penduduk_miskin/update.php', {
method: 'POST',
body: formData
}).then(res => res.json()).then(data => {
if(data.status === 'success') { closeModal(); loadPendudukMiskin(); }
});
};
window.deleteMiskin = function(id) {
openConfirmModal("Yakin hapus penduduk miskin ini?", function() {
fetch('api/penduduk_miskin/delete.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id })
}).then(res => res.json()).then(data => {
if(data.status === 'success') { map.closePopup(); loadPendudukMiskin(); }
});
});
};
// Logika dinamis warna: Merah jika di dalam salah satu radius Rumah Ibadah, Hijau jika di luar
function updateSemuaWarnaMiskin() {
miskinMarkerList.forEach(marker => {
let inRadius = false;
const pLatlng = L.latLng(marker.miskinData.lat, marker.miskinData.lng);
for (let i = 0; i < ibadahDataList.length; i++) {
const ibadah = ibadahDataList[i];
const iLatlng = L.latLng(ibadah.lat, ibadah.lng);
const dist = pLatlng.distanceTo(iLatlng); // meter
if (dist <= ibadah.radius) {
inRadius = true;
break; // Jika sudah masuk satu radius, langsung merah
}
}
if (inRadius) {
marker.setIcon(makeMiskinIcon(true));
} else {
marker.setIcon(makeMiskinIcon(false));
}
});
}
// ==========================
// ===== Import Feature =====
// ==========================
let parsedImportData = [];
window.openImportMiskinModal = function() {
parsedImportData = []; // Reset data
const bodyHTML = `
<div class="form-group">
<label>Pilih File (CSV, JSON, atau GeoJSON)</label>
<input type="file" id="importMiskinFile" accept=".csv,.json,.geojson" style="display:block; margin-bottom:10px; width:100%;">
<div style="font-size:12px; color:#666; margin-bottom:15px; line-height:1.4;">
<strong>Format CSV yang didukung:</strong><br>
Header minimal berisi: <code>nama</code>, <code>kategori_bantuan</code> (atau <code>kategori</code>), <code>jumlah_jiwa</code>, <code>lat</code>, <code>lng</code>.<br>
Pemisah: Koma (<code>,</code>), Titik Koma (<code>;</code>), atau Tab.
</div>
</div>
<div id="importPreviewContainer" style="display:none; margin-top: 15px;">
<h4 style="margin:0 0 8px 0; font-size: 13px; color: #333; display: flex; justify-content: space-between;">
<span>Pratinjau Data (<span id="importPreviewCount">0</span> item)</span>
<span id="importPreviewStatus" style="font-weight: normal; font-size: 11px;"></span>
</h4>
<div style="max-height:180px; overflow-y:auto; border:1px solid #e2e8f0; border-radius:6px; background:#f8fafc;">
<table style="width:100%; border-collapse:collapse; font-size:11px; text-align:left;">
<thead>
<tr style="background:#f1f5f9; border-bottom:1px solid #cbd5e1; color:#475569; position: sticky; top: 0;">
<th style="padding:6px 8px;">Kepala Keluarga</th>
<th style="padding:6px 8px;">Kategori</th>
<th style="padding:6px 8px;">Jiwa</th>
<th style="padding:6px 8px;">Koordinat</th>
</tr>
</thead>
<tbody id="importPreviewTableBody" style="color:#334155;"></tbody>
</table>
</div>
</div>
<div id="importErrorMsg" style="display:none; margin-top:10px; color:#ef4444; font-size:12px; font-weight: 500;"></div>
`;
map.closePopup();
openModal("Impor Penduduk Miskin", bodyHTML, function() {
if (parsedImportData.length === 0) {
showToast('Silakan pilih file terlebih dahulu atau pastikan data valid.', 'warning');
return;
}
// Kirim data ke API bulk_create.php
fetch('api/penduduk_miskin/bulk_create.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(parsedImportData)
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
closeModal();
loadPendudukMiskin();
showToast(data.message, 'success');
} else {
showToast(data.message || 'Gagal mengimpor data.', 'error');
}
})
.catch(err => {
console.error(err);
showToast('Terjadi kesalahan saat menghubungi server.', 'error');
});
});
// Register file input listener
document.getElementById('importMiskinFile').addEventListener('change', handleImportFileChange);
};
function parseCSV(text) {
const lines = text.split(/\r?\n/);
if (lines.length < 2) return [];
const firstLine = lines[0];
let delimiter = ',';
if (firstLine.includes(';')) delimiter = ';';
else if (firstLine.includes('\t')) delimiter = '\t';
const headers = firstLine.split(delimiter).map(h => h.trim().replace(/^["']|["']$/g, '').toLowerCase());
const results = [];
for (let i = 1; i < lines.length; i++) {
const line = lines[i].trim();
if (!line) continue;
let fields = [];
let currentField = '';
let insideQuote = false;
for (let j = 0; j < line.length; j++) {
const char = line[j];
if (char === '"' || char === "'") {
insideQuote = !insideQuote;
} else if (char === delimiter && !insideQuote) {
fields.push(currentField.trim());
currentField = '';
} else {
currentField += char;
}
}
fields.push(currentField.trim());
fields = fields.map(f => f.replace(/^["']|["']$/g, ''));
const row = {};
headers.forEach((header, index) => {
row[header] = fields[index] || '';
});
results.push(row);
}
return results;
}
function handleImportFileChange(e) {
const file = e.target.files[0];
const previewContainer = document.getElementById('importPreviewContainer');
const previewCount = document.getElementById('importPreviewCount');
const previewTableBody = document.getElementById('importPreviewTableBody');
const errorMsg = document.getElementById('importErrorMsg');
if (!file) {
previewContainer.style.display = 'none';
parsedImportData = [];
return;
}
errorMsg.style.display = 'none';
previewContainer.style.display = 'none';
previewTableBody.innerHTML = '';
parsedImportData = [];
const reader = new FileReader();
reader.onload = function(event) {
try {
const text = event.target.result;
let rawData = [];
if (file.name.endsWith('.csv')) {
rawData = parseCSV(text);
} else if (file.name.endsWith('.json') || file.name.endsWith('.geojson')) {
const json = JSON.parse(text);
if (json.type === 'FeatureCollection' && Array.isArray(json.features)) {
rawData = json.features.map(f => {
const props = f.properties || {};
const coords = f.geometry && f.geometry.coordinates;
return {
nama: props.nama || props.name || props.penduduk || '',
kategori_bantuan: props.kategori_bantuan || props.kategori || props.bantuan || 'Makan',
jumlah_jiwa: props.jumlah_jiwa || props.jumlah || props.jiwa || 1,
lat: coords ? coords[1] : (props.lat || props.latitude),
lng: coords ? coords[0] : (props.lng || props.longitude)
};
});
} else if (Array.isArray(json)) {
rawData = json;
} else {
throw new Error("Format JSON tidak didukung.");
}
}
if (rawData.length === 0) {
errorMsg.textContent = "File kosong atau format tidak didukung.";
errorMsg.style.display = 'block';
return;
}
const validRows = [];
let invalidCount = 0;
rawData.forEach(row => {
const nama = row.nama || row.name || row.penduduk || row['nama lengkap'] || row.fullname || '';
const kategori_bantuan = row.kategori_bantuan || row.kategori || row.bantuan || row['kategori bantuan'] || 'Makan';
const jumlah_jiwa = parseInt(row.jumlah_jiwa || row.jumlah || row.jiwa || row['jumlah jiwa'] || 1, 10) || 1;
const lat = parseFloat(row.lat || row.latitude || row.y);
const lng = parseFloat(row.lng || row.longitude || row.long || row.x);
const isValid = !isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0 && nama.trim() !== '';
if (isValid) {
validRows.push({ nama, kategori_bantuan, jumlah_jiwa, lat, lng });
} else {
invalidCount++;
}
});
parsedImportData = validRows;
if (validRows.length === 0) {
errorMsg.textContent = "Tidak ditemukan data valid (pastikan kolom nama_kk/nama, lat, dan lng terisi).";
errorMsg.style.display = 'block';
return;
}
validRows.forEach(row => {
const tr = document.createElement('tr');
tr.style.borderBottom = '1px solid #e2e8f0';
tr.innerHTML = `
<td style="padding:6px 8px; font-weight: 500;">${row.nama}</td>
<td style="padding:6px 8px;">${row.kategori_bantuan}</td>
<td style="padding:6px 8px;">${row.jumlah_jiwa}</td>
<td style="padding:6px 8px; color: #64748b; font-family: monospace;">${row.lat.toFixed(5)}, ${row.lng.toFixed(5)}</td>
`;
previewTableBody.appendChild(tr);
});
previewCount.textContent = validRows.length;
previewContainer.style.display = 'block';
const statusEl = document.getElementById('importPreviewStatus');
if (statusEl) {
if (invalidCount > 0) {
statusEl.innerHTML = `<span style="color:#e11d48;"><i class="fas fa-exclamation-triangle"></i> ${invalidCount} baris tidak valid diabaikan</span>`;
} else {
statusEl.innerHTML = `<span style="color:#16a34a;"><i class="fas fa-check-circle"></i> Semua data valid</span>`;
}
}
} catch (err) {
console.error(err);
errorMsg.textContent = "Gagal memproses file. Pastikan format file sesuai.";
errorMsg.style.display = 'block';
}
};
reader.readAsText(file);
}
// Initial Load
loadRumahIbadah();
loadPendudukMiskin();