Syariffullah/webgis-poverty-pontianak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement core WebGIS mapping features, sidebar UI, and API endpoints for data management

Browse Source
This commit is contained in:
Syariffullah
2026-05-08 20:44:23 +07:00
parent 448083d2ea
commit 08d6d30e02
14 changed files with 1326 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/features/jalan.js
+1
View File
@@ -16,6 +16,7 @@ function loadJalan() {
addJalanToMap(item);
});
}
if (window.refreshActivePanel) window.refreshActivePanel();
});
}
assets/js/features/kemiskinan.js
+106 -50
View File
@@ -1,10 +1,20 @@
// --- Fitur Pemetaan Kemiskinan ---
// Emoji per jenis ibadah
const IBADAH_EMOJI_MAP = {
'Masjid': '🕌',
'Gereja': '⛪',
'Pura': '🛕',
'Vihara': '🪷',
'Kelenteng': '🏮',
};
// Emoji Bubble Icon builder
function makeIbadahIcon() {
function makeIbadahIcon(jenis) {
const emot = IBADAH_EMOJI_MAP[jenis] || '🕌';
return L.divIcon({
className: '',
html: `<div class="emoji-marker"><div class="bubble ibadah"><span>🕌</span></div></div>`,
html: `<div class="emoji-marker"><div class="bubble ibadah"><span>${emot}</span></div></div>`,
iconSize: [38, 38],
iconAnchor: [19, 38],
popupAnchor: [0, -40]
@@ -22,10 +32,6 @@ function makeMiskinIcon(inRadius) {
});
}
const ibadahIcon = makeIbadahIcon();
const miskinMerahIcon = makeMiskinIcon(true);
const miskinHijauIcon = makeMiskinIcon(false);
let ibadahDataList = [];
let miskinMarkerList = []; // Simpan referensi marker untuk update warna
@@ -76,13 +82,14 @@ function loadRumahIbadah() {
data.data.forEach(item => {
addIbadahMarker(item);
});
updateSemuaWarnaMiskin(); // Update warna setelah memuat rumah ibadah
updateSemuaWarnaMiskin();
}
if (window.refreshActivePanel) window.refreshActivePanel();
});
}
function addIbadahMarker(item) {
const marker = L.marker([item.lat, item.lng], { icon: ibadahIcon, draggable: true });
const marker = L.marker([item.lat, item.lng], { icon: makeIbadahIcon(item.jenis), draggable: true });
// Lingkaran radius
const circle = L.circle([item.lat, item.lng], {
@@ -125,10 +132,12 @@ function addIbadahMarker(item) {
marker.circleLayer = circle;
const d = item;
const emot = IBADAH_EMOJI_MAP[d.jenis] || '🕌';
const popupContent = `
<div style="font-family: Arial, sans-serif; min-width: 150px;">
<h4 style="margin:0 0 5px 0;">Rumah Ibadah ${d.nama}</h4>
<p style="margin: 0 0 5px 0;"><b>Alamat:</b> ${d.alamat}</p>
<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>
<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>
@@ -185,6 +194,16 @@ map.on('click', function(e) {
<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>
@@ -196,7 +215,7 @@ map.on('click', function(e) {
`;
openModal("Tambah Rumah Ibadah", bodyHTML, function() {
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahAlamat', 'modalIbadahRadius');
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahJenis', 'modalIbadahAlamat', 'modalIbadahRadius');
});
window.deactivateAddMode();
@@ -212,6 +231,16 @@ map.on('click', function(e) {
<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>
@@ -223,7 +252,7 @@ map.on('click', function(e) {
`;
openModal("Tambah Rumah Ibadah", bodyHTML, function() {
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahAlamat', 'modalIbadahRadius');
window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahJenis', 'modalIbadahAlamat', 'modalIbadahRadius');
});
window.deactivateAddMode();
@@ -231,27 +260,23 @@ map.on('click', function(e) {
}
});
window.saveNewIbadah = function(lat, lng, namaId, alamatId, radiusId) {
const nama = document.getElementById(namaId).value;
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;
}
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, alamat, radius, lat, lng })
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); }
if(data.status === 'success') { closeModal(); loadRumahIbadah(); }
else { alert(data.message); }
});
};
@@ -262,11 +287,19 @@ window.openEditIbadahModal = function(id) {
});
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>
@@ -278,7 +311,7 @@ window.openEditIbadahModal = function(id) {
`;
map.closePopup();
openModal("Edit Rumah Ibadah", bodyHTML, function() {
window.saveEditIbadah(d.id, d.lat, d.lng, 'editIbadahNama', 'editIbadahAlamat', 'editIbadahRadius');
window.saveEditIbadah(d.id, d.lat, d.lng, 'editIbadahNama', 'editIbadahJenis', 'editIbadahAlamat', 'editIbadahRadius');
});
};
@@ -293,18 +326,19 @@ window.previewRadius = function(id, newRadius) {
});
};
window.saveEditIbadah = function(id, lat, lng, namaId, alamatId, radiusId) {
const nama = document.getElementById(namaId).value;
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, alamat, radius, lat, lng);
updateIbadah(id, nama, jenis, alamat, radius, lat, lng);
};
function updateIbadah(id, nama, 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, alamat, radius, lat, lng })
body: JSON.stringify({ id, nama, jenis, alamat, radius, lat, lng })
}).then(res => res.json()).then(data => {
if(data.status === 'success') { map.closePopup(); loadRumahIbadah(); }
});
@@ -336,19 +370,22 @@ function loadPendudukMiskin() {
});
updateSemuaWarnaMiskin();
}
if (window.refreshActivePanel) window.refreshActivePanel();
});
}
function addMiskinMarker(item) {
const marker = L.marker([item.lat, item.lng], { icon: miskinHijauIcon, draggable: true });
const marker = L.marker([item.lat, item.lng], { icon: makeMiskinIcon(false), draggable: true });
marker.miskinData = item;
const d = item;
const popupContent = `
<div style="font-family: Arial, sans-serif; min-width: 150px;">
<h4 style="margin:0 0 5px 0;">Penduduk Miskin ${d.nama}</h4>
<p style="margin: 0 0 10px 0;"><b>Bantuan:</b> ${d.kategori_bantuan}</p>
<div style="display:flex; gap:5px;">
<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 10px 0;"><b>Jiwa:</b> ${d.jumlah_jiwa || '-'}</p>
<div style="display:flex; gap:5px; flex-wrap:wrap;">
<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>
<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>
</div>
@@ -374,34 +411,48 @@ function addMiskinMarker(item) {
}
window.formAddMiskin = function(lat, lng) {
const popupContent = `
<div class="popup-form">
<h4>Penduduk Miskin Baru</h4>
<input type="text" id="miskinNama" placeholder="Nama Penduduk">
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 Penduduk</label>
<input type="text" id="miskinNama" placeholder="Nama Lengkap">
</div>
<div class="form-group">
<label>Kategori Bantuan</label>
<select id="miskinKategori">
<option value="Makan">Bantuan Makan</option>
<option value="Pemberdayaan">Pemberdayaan</option>
</select>
<button onclick="saveNewMiskin(${lat}, ${lng})">Simpan</button>
</div>
<div class="form-group">
<label>Jumlah Jiwa</label>
<input type="number" id="miskinJiwa" value="1" min="1">
</div>
`;
map.closePopup();
L.popup().setLatLng([lat, lng]).setContent(popupContent).openOn(map);
openModal("Tambah Penduduk Miskin", bodyHTML, function() {
window.saveNewMiskin(lat, lng);
});
};
window.saveNewMiskin = function(lat, lng) {
const nama = document.getElementById('miskinNama').value;
const nama = document.getElementById('miskinNama').value;
const kategori_bantuan = document.getElementById('miskinKategori').value;
const jumlah_jiwa = document.getElementById('miskinJiwa').value;
if (!nama) { alert('Nama harus diisi!'); return; }
fetch('api/penduduk_miskin/create.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nama, kategori_bantuan, lat, lng })
body: JSON.stringify({ nama, kategori_bantuan, jumlah_jiwa, lat, lng })
})
.then(res => res.json())
.then(data => {
if(data.status === 'success') {
map.closePopup();
closeModal();
loadPendudukMiskin();
} else { alert(data.message); }
});
@@ -420,26 +471,31 @@ window.openEditMiskinModal = function(id) {
<input type="text" id="editMiskinNama" value="${d.nama}">
</div>
<div class="form-group">
<label>Bantuan</label>
<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>
`;
map.closePopup();
openModal("Edit Penduduk Miskin", bodyHTML, function() {
window.saveEditMiskin(d.id, d.lat, d.lng, 'editMiskinNama', 'editMiskinKategori');
window.saveEditMiskin(d.id, d.lat, d.lng, 'editMiskinNama', 'editMiskinKategori', 'editMiskinJiwa');
});
};
window.saveEditMiskin = function(id, lat, lng, namaId, kategoriId) {
const nama = document.getElementById(namaId).value;
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;
fetch('api/penduduk_miskin/update.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id, nama, kategori_bantuan, lat, lng })
body: JSON.stringify({ id, nama, kategori_bantuan, jumlah_jiwa, lat, lng })
}).then(res => res.json()).then(data => {
if(data.status === 'success') { closeModal(); loadPendudukMiskin(); }
});
assets/js/features/parsil.js
+1
View File
@@ -17,6 +17,7 @@ function loadParsil() {
addParsilToMap(item);
});
}
if (window.refreshActivePanel) window.refreshActivePanel();
});
}
assets/js/features/spbu.js
+1
View File
@@ -29,6 +29,7 @@ function loadSpbu() {
addSpbuMarker(item);
});
}
if (window.refreshActivePanel) window.refreshActivePanel();
});
}