powji/webgis-pemetaan-sosial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menambahkan data jumlah rumah prasejahtera yang tercakup bantuan dari rumah ibadah pada popup

Browse Source
This commit is contained in:
powji17
2026-06-10 20:01:57 +07:00
parent 6158f4b1a4
commit 0108c35a05
2 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMapping/assets/js/script.js
+67 -21
View File
@@ -183,27 +183,73 @@ function loadIbadah() {
fillColor: '#8e44ad', fillOpacity: 0.1, weight: 1, dashArray: '5,5'
}).addTo(layerIbadah);
marker.bindPopup(`<b>${ib.nama_ibadah}</b><br>
Jenis Rumah Ibadah: ${ib.jenis}<br>
Jangkauan Bantuan: ${ib.radius_m} m
<hr>
<div style="display:flex; gap:6px;">
${ROLE === 'admin' || ROLE === 'operator' ? `
<button onclick="editIbadah(${ib.id})"
style="flex:1; padding:6px; background:#2980b9; color:white;
border:none; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
` : ''}
${ROLE === 'admin' ? `
<button onclick="hapusIbadah(${ib.id})"
style="flex:1; padding:6px; background:none; color:red;
border:1px solid red; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-trash"></i> Hapus
</button>
` : ''}
</div>`
);
const totalPrasejahtera = Object.keys(dataPrasejahtera).length;
const persen = totalPrasejahtera > 0
? Math.round((ib.jumlah_tercakup / totalPrasejahtera) * 100)
: 0;
marker.bindPopup(`
<div style="font-size:13px; min-width:200px;">
<b style="font-size:15px;">
<i class="fa-solid fa-place-of-worship"></i> ${ib.nama_ibadah}
</b>
<hr style="margin:6px 0;">
<b>Jenis:</b> ${ib.jenis}<br>
<b>Jangkauan Bantuan:</b> ${ib.radius_m} m<br>
<hr style="margin:6px 0;">
<div style="
background:#f0f4f8;
border-radius:8px;
padding:10px;
margin:6px 0;
text-align:center;
">
<div style="font-size:22px; font-weight:700; color:#1B2A4A;">
${ib.jumlah_tercakup}
</div>
<div style="font-size:11px; color:#666; margin-bottom:6px;">
rumah tercakup dari ${totalPrasejahtera} total
</div>
<!-- Progress bar -->
<div style="
background:#dde3ea;
border-radius:20px;
height:6px;
overflow:hidden;
">
<div style="
background: ${persen > 0 ? '#27ae60' : '#dde3ea'};
width:${persen}%;
height:100%;
border-radius:20px;
transition: width 0.3s;
"></div>
</div>
<div style="font-size:11px; color:#888; margin-top:4px;">
${persen}% dari total prasejahtera
</div>
</div>
<div style="display:flex; gap:6px; margin-top:4px;">
${ROLE === 'admin' || ROLE === 'operator' ? `
<button onclick="editIbadah(${ib.id})"
style="flex:1; padding:6px; background:#2980b9; color:white;
border:none; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
` : ''}
${ROLE === 'admin' ? `
<button onclick="hapusIbadah(${ib.id})"
style="flex:1; padding:6px; background:none; color:red;
border:1px solid red; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-trash"></i> Hapus
</button>
` : ''}
</div>
</div>
`);
marker.on('dragend', function(e) {
let pos = e.target.getLatLng();