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
02/frontend/css/main.css
+36
View File
@@ -299,6 +299,42 @@ body::before {
}
.leaflet-control-zoom a:hover { background: var(--primary-deep) !important; color: white !important; }
/* Custom Leaflet Layer Control style to match theme */
.leaflet-control-layers {
background: var(--bg-glass) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid var(--border-glass) !important;
border-radius: 14px !important;
box-shadow: var(--shadow) !important;
color: var(--text-main) !important;
font-family: var(--font) !important;
padding: 10px 14px !important;
transition: var(--transition);
}
.leaflet-control-layers-expanded {
min-width: 140px;
}
.leaflet-control-layers label {
margin-bottom: 6px !important;
font-size: 0.85rem !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
color: var(--text-main) !important;
font-weight: 500;
}
.leaflet-control-layers label:last-child {
margin-bottom: 0 !important;
}
.leaflet-control-layers input[type="checkbox"] {
cursor: pointer !important;
width: 15px !important;
height: 15px !important;
accent-color: var(--primary-deep) !important;
}
.leaflet-popup-content-wrapper {
background: var(--bg-glass) !important;
backdrop-filter: blur(16px) !important;
02/frontend/index.html
+28 -1
View File
@@ -58,6 +58,33 @@
<p>Kumulatif P01 + Analisis radius jarak Haversine.</p>
</div>
<!-- Layer Peta (Centang) -->
<div class="menu-group">
<div class="menu-title">Layer Peta</div>
<div class="form-panel" style="gap: 10px;">
<label class="checkbox-group">
<input type="checkbox" id="layer-spbu" checked>
<span>Stasiun SPBU</span>
</label>
<label class="checkbox-group">
<input type="checkbox" id="layer-jalan" checked>
<span>Jalur Jalan</span>
</label>
<label class="checkbox-group">
<input type="checkbox" id="layer-kavling" checked>
<span>Kavling Tanah</span>
</label>
<label class="checkbox-group">
<input type="checkbox" id="layer-rumah" checked>
<span>Rumah Ibadah</span>
</label>
<label class="checkbox-group">
<input type="checkbox" id="layer-warga" checked>
<span>Warga Miskin</span>
</label>
</div>
</div>
<!-- Entitas Dasar (P01) -->
<div class="menu-group">
<div class="menu-title">Entitas Dasar (P01)</div>
@@ -121,7 +148,7 @@
icon.className = t === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
}
</script>
<script type="module" src="js/app.js"></script>
<script type="module" src="js/app.js?v=20260613-9"></script>
</body>
</html>
02/frontend/js/app.js
+52 -17
View File
@@ -29,17 +29,6 @@ window.showToast = (msg, type='success') => {
setTimeout(() => { t.style.transform='translateX(100%)'; t.style.opacity=0; setTimeout(()=>t.remove(),300); }, 3000);
};
document.addEventListener('DOMContentLoaded', async () => {
appMap = initMap('map');
// Bind extra draw events for 02
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, kavling, rumah, warga] = await Promise.all([
@@ -47,11 +36,33 @@ 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(kavling, { style: { color: '#3B82F6', weight: 2, fillColor: '#3B82F6', fillOpacity: 0.3 }, onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties) }).addTo(appMap);
L.geoJSON(rumah, { pointToLayer: (f, ll) => L.marker(ll, { icon: iconRumah }), onEachFeature: (f, l) => bindPopup(l, 'rumah_ibadah', f.properties, f) }).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 kavlingLayer = L.geoJSON(kavling, { style: { color: '#3B82F6', weight: 2, fillColor: '#3B82F6', fillOpacity: 0.3 }, onEachFeature: (f, l) => bindPopup(l, 'kavling', 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, f) }).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);
// 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-kavling').addEventListener('change', (e) => {
if (e.target.checked) appMap.addLayer(kavlingLayer);
else appMap.removeLayer(kavlingLayer);
});
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);
});
} catch (e) {
window.showToast("Gagal meload data: "+e.message, 'error');
}
@@ -115,10 +126,34 @@ 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');
// Bind extra draw events for 02
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();
}