naufalzakyramadhan/D1041231071_UAS-Tugas_WebGISProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix all bug

Browse Source
This commit is contained in:
naukyy
2026-06-13 02:10:51 +07:00
parent d9cff90874
commit d18baa80e0
19 changed files with 818 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03/frontend/js/app.js
+49 -14
View File
@@ -30,14 +30,6 @@ window.showToast = (msg, type='success') => {
setTimeout(() => { t.style.opacity=0; setTimeout(()=>t.remove(),300); }, 3000);
};
document.addEventListener('DOMContentLoaded', async () => {
appMap = initMap('map');
document.getElementById('btn-draw-rumah')?.addEventListener('click', () => { window.currentDrawType='rumah_ibadah'; new L.Draw.Marker(appMap).enable(); });
document.getElementById('btn-draw-warga')?.addEventListener('click', () => { window.currentDrawType='warga_miskin'; new L.Draw.Marker(appMap).enable(); });
drawControl = setupDrawControls(appMap, handleGeometryCreated);
await loadAllData();
});
const loadAllData = async () => {
try {
const [spbu, jalan, choro, rumah, warga] = await Promise.all([
@@ -45,13 +37,13 @@ const loadAllData = async () => {
rumahIbadahService.getAll(), wargaMiskinService.getAll()
]);
L.geoJSON(spbu, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconSPBU(f.properties.buka_24_jam) }), onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties) }).addTo(appMap);
L.geoJSON(jalan, { style: { color: '#F59E0B', weight: 4 }, onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties) }).addTo(appMap);
L.geoJSON(rumah, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconRumah }), onEachFeature: (f, l) => bindPopup(l, 'rumah_ibadah', f.properties) }).addTo(appMap);
L.geoJSON(warga, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconWarga }), onEachFeature: (f, l) => bindPopup(l, 'warga_miskin', f.properties) }).addTo(appMap);
const spbuLayer = L.geoJSON(spbu, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconSPBU(f.properties.buka_24_jam) }), onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties) }).addTo(appMap);
const jalanLayer = L.geoJSON(jalan, { style: { color: '#F59E0B', weight: 4 }, onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties) }).addTo(appMap);
const rumahLayer = L.geoJSON(rumah, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconRumah }), onEachFeature: (f, l) => bindPopup(l, 'rumah_ibadah', f.properties) }).addTo(appMap);
const wargaLayer = L.geoJSON(warga, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconWarga }), onEachFeature: (f, l) => bindPopup(l, 'warga_miskin', f.properties) }).addTo(appMap);
let merahCount = 0;
L.geoJSON(choro, {
const choroLayer = L.geoJSON(choro, {
style: (f) => {
const count = f.properties.jumlah_warga_miskin;
let c = '#10B981'; // Hijau (0)
@@ -62,6 +54,28 @@ const loadAllData = async () => {
onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties)
}).addTo(appMap);
// Bind checkbox events
document.getElementById('layer-spbu').addEventListener('change', (e) => {
if (e.target.checked) appMap.addLayer(spbuLayer);
else appMap.removeLayer(spbuLayer);
});
document.getElementById('layer-jalan').addEventListener('change', (e) => {
if (e.target.checked) appMap.addLayer(jalanLayer);
else appMap.removeLayer(jalanLayer);
});
document.getElementById('layer-rumah').addEventListener('change', (e) => {
if (e.target.checked) appMap.addLayer(rumahLayer);
else appMap.removeLayer(rumahLayer);
});
document.getElementById('layer-warga').addEventListener('change', (e) => {
if (e.target.checked) appMap.addLayer(wargaLayer);
else appMap.removeLayer(wargaLayer);
});
document.getElementById('layer-choro').addEventListener('change', (e) => {
if (e.target.checked) appMap.addLayer(choroLayer);
else appMap.removeLayer(choroLayer);
});
document.getElementById('stat-total-warga').innerText = warga.features.length;
document.getElementById('stat-kavling-merah').innerText = merahCount;
@@ -101,10 +115,31 @@ const handleGeometryCreated = (type, geometry, layer) => {
try {
if(type==='spbu') await spbuService.create(payload);
if(type==='jalan') await jalanService.create(payload);
if(type==='kavling') await kavlingService.create(payload);
if(type==='kavling') {
const kavlingPayload = {
nama_pemilik: payload.nama,
luas: payload.luas || 0,
geometry: payload.geometry
};
await kavlingService.create(kavlingPayload);
}
if(type==='rumah_ibadah') await rumahIbadahService.create(payload);
if(type==='warga_miskin') await wargaMiskinService.create(payload);
window.showToast('Tersimpan'); setTimeout(()=>location.reload(), 800);
} catch(e) { window.showToast('Gagal simpan', 'error'); }
}, () => appMap.removeLayer(tempLayer));
};
const init = async () => {
appMap = initMap('map');
document.getElementById('btn-draw-rumah')?.addEventListener('click', () => { window.currentDrawType='rumah_ibadah'; new L.Draw.Marker(appMap).enable(); });
document.getElementById('btn-draw-warga')?.addEventListener('click', () => { window.currentDrawType='warga_miskin'; new L.Draw.Marker(appMap).enable(); });
drawControl = setupDrawControls(appMap, handleGeometryCreated);
await loadAllData();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}