raditarahman5-cloud
775 lines
37 KiB
JavaScript
775 lines
37 KiB
JavaScript
var map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
|
|
|
// Layer Groups yang Spesifik
|
|
var layerMasjid = L.layerGroup().addTo(map);
|
|
var layerMasjidRadius = L.layerGroup().addTo(map);
|
|
var layerPelaporan = L.layerGroup().addTo(map);
|
|
var layerWarga = L.layerGroup().addTo(map);
|
|
var layerSpbu24 = L.layerGroup().addTo(map);
|
|
var layerSpbuNon24 = L.layerGroup().addTo(map);
|
|
var layerLines = L.layerGroup().addTo(map);
|
|
var layerPolygons = L.layerGroup().addTo(map);
|
|
|
|
// Layers Control
|
|
var overlays = {};
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
|
|
overlays["🕌 Tempat Ibadah"] = layerMasjid;
|
|
overlays["📡 Radius Ibadah/Bantuan"] = layerMasjidRadius;
|
|
overlays["🚨 Pelaporan Darurat"] = layerPelaporan;
|
|
overlays["📍 Warga Rentan"] = layerWarga;
|
|
}
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'infra' || window.dashboardType === 'admin') {
|
|
overlays["⛽ SPBU 24 Jam (Hijau)"] = layerSpbu24;
|
|
overlays["⛽ SPBU Terbatas (Merah)"] = layerSpbuNon24;
|
|
overlays["🛣️ Jalan (Polyline)"] = layerLines;
|
|
overlays["🟩 Kavling (Polygon)"] = layerPolygons;
|
|
}
|
|
|
|
L.control.layers(null, overlays, { collapsed: false, position: 'topright' }).addTo(map);
|
|
|
|
var drawnItems = new L.FeatureGroup().addTo(map);
|
|
|
|
var currentRadius = 500;
|
|
var cachedData = null;
|
|
|
|
var drawControl = new L.Control.Draw({
|
|
draw: {
|
|
marker:false, circle:false, circlemarker:false,
|
|
polyline: { shapeOptions: { color: 'blue', weight: 4 } },
|
|
polygon: { shapeOptions: { color: 'red' } },
|
|
rectangle: false
|
|
},
|
|
edit: { featureGroup: drawnItems }
|
|
});
|
|
map.addControl(drawControl);
|
|
|
|
// Locate Control
|
|
var locateBtn = L.control({position: 'topleft'});
|
|
locateBtn.onAdd = function (map) {
|
|
var div = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
|
|
div.style.backgroundColor = 'white';
|
|
div.style.width = '34px';
|
|
div.style.height = '34px';
|
|
div.style.cursor = 'pointer';
|
|
div.style.display = 'flex';
|
|
div.style.alignItems = 'center';
|
|
div.style.justifyContent = 'center';
|
|
div.innerHTML = '<i class="fas fa-crosshairs" style="font-size:1.2rem; color:#2563eb;"></i>';
|
|
div.title = "Lokasi Anda Saat Ini";
|
|
div.onclick = function(){ map.locate({setView: true, maxZoom: 16}); }
|
|
return div;
|
|
};
|
|
locateBtn.addTo(map);
|
|
|
|
map.on('locationfound', function(e) {
|
|
L.circleMarker(e.latlng, {radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1}).addTo(map).bindPopup("Lokasi Anda").openPopup();
|
|
});
|
|
|
|
// Event Draw
|
|
map.on(L.Draw.Event.CREATED, function (e) {
|
|
var layer = e.layer;
|
|
var type = e.layerType;
|
|
drawnItems.addLayer(layer);
|
|
|
|
var panel = document.getElementById('panelInput');
|
|
if (panel) panel.classList.remove('collapsed');
|
|
|
|
if (type === 'polyline') {
|
|
document.getElementById('jenis').value = 'jalan';
|
|
toggleForm();
|
|
|
|
var coords = layer.getLatLngs();
|
|
document.getElementById('jalan_coords').value = JSON.stringify(coords);
|
|
|
|
// Calculate Length automatically
|
|
var length = 0;
|
|
for (var i = 0; i < coords.length - 1; i++) {
|
|
length += coords[i].distanceTo(coords[i + 1]);
|
|
}
|
|
document.getElementById('panjang_jalan').value = length.toFixed(2);
|
|
|
|
} else if (type === 'polygon') {
|
|
document.getElementById('jenis').value = 'parsil';
|
|
toggleForm();
|
|
|
|
var coords = layer.getLatLngs()[0];
|
|
document.getElementById('parsil_coords').value = JSON.stringify(coords);
|
|
}
|
|
});
|
|
|
|
map.on(L.Draw.Event.EDITED, function (e) {
|
|
var layers = e.layers;
|
|
layers.eachLayer(function (layer) {
|
|
if(layer.db_id && layer.db_tipe) {
|
|
var coords = (layer.db_tipe === 'parsil') ? layer.getLatLngs()[0] : layer.getLatLngs();
|
|
var fd = new FormData();
|
|
fd.append('action', 'update_koordinat');
|
|
fd.append('id', layer.db_id);
|
|
fd.append('tipe', layer.db_tipe);
|
|
fd.append('koordinat', JSON.stringify(coords));
|
|
|
|
if(layer.db_tipe === 'jalan') {
|
|
var length = 0;
|
|
for (var i = 0; i < coords.length - 1; i++) {
|
|
length += coords[i].distanceTo(coords[i + 1]);
|
|
}
|
|
fd.append('panjang_m', length.toFixed(2));
|
|
}
|
|
fetch('../api/api.php', { method: 'POST', body: fd });
|
|
}
|
|
});
|
|
Swal.fire({icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false});
|
|
});
|
|
|
|
map.on(L.Draw.Event.DELETED, function (e) {
|
|
var layers = e.layers;
|
|
layers.eachLayer(function (layer) {
|
|
if(layer.db_id && layer.db_tipe) {
|
|
var fd = new FormData();
|
|
fd.append('action', 'hapus_data');
|
|
fd.append('id', layer.db_id);
|
|
fd.append('tipe', layer.db_tipe);
|
|
fetch('../api/api.php', { method: 'POST', body: fd });
|
|
}
|
|
});
|
|
Swal.fire({icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false});
|
|
});
|
|
|
|
function toggleSidebar() { document.getElementById('sidebar').classList.toggle('active'); }
|
|
|
|
function toggleRightPanel() {
|
|
var panel = document.getElementById('panelInput');
|
|
if(panel) panel.classList.toggle('collapsed');
|
|
}
|
|
|
|
function filterData() {
|
|
var input = document.getElementById('searchInput').value.toLowerCase();
|
|
var cards = document.getElementsByClassName('item-data');
|
|
if(input.length > 0) document.getElementById('sidebar').classList.add('active');
|
|
for (var i = 0; i < cards.length; i++) {
|
|
cards[i].style.display = cards[i].getAttribute('data-nama').includes(input) ? "" : "none";
|
|
}
|
|
}
|
|
|
|
function changeRadius(v) {
|
|
currentRadius = parseInt(v);
|
|
document.getElementById('radiusVal').innerText = v;
|
|
if(cachedData) renderMap(cachedData);
|
|
}
|
|
|
|
var prevReportCount = -1;
|
|
function loadData(isPolling = false) {
|
|
fetch('../api/api.php?data=all')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
cachedData = data;
|
|
|
|
// Logika Notifikasi Bubble
|
|
if (prevReportCount !== -1 && data.pelaporan.length > prevReportCount) {
|
|
var newCount = data.pelaporan.length - prevReportCount;
|
|
Swal.fire({
|
|
title: 'Laporan Baru!',
|
|
text: `Ada ${newCount} laporan warga baru yang masuk.`,
|
|
icon: 'info',
|
|
toast: true,
|
|
position: 'top-end',
|
|
showConfirmButton: false,
|
|
timer: 5000
|
|
});
|
|
}
|
|
prevReportCount = data.pelaporan.length;
|
|
|
|
var badge = document.getElementById('notifBadge');
|
|
if(badge) {
|
|
if(data.pelaporan.length > 0) {
|
|
badge.style.display = 'block';
|
|
badge.innerText = data.pelaporan.length;
|
|
} else {
|
|
badge.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
if (!isPolling) {
|
|
renderSidebar(data);
|
|
renderMap(data);
|
|
} else {
|
|
// If polling, maybe just update sidebar if it's open, or wait for manual refresh
|
|
// But for real-time map, we can re-render map as well (might cause flicker if doing heavy edits)
|
|
// We'll skip re-rendering map to avoid interrupting user edits, just update the bubble
|
|
renderSidebar(data);
|
|
renderMap(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Auto-poll every 10 seconds
|
|
setInterval(() => {
|
|
// Only poll if not currently editing (edit_id is 0)
|
|
if(document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
|
|
loadData(true);
|
|
}
|
|
}, 10000);
|
|
|
|
function renderSidebar(data) {
|
|
var html = `<div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px">`;
|
|
if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
|
|
html += `
|
|
<div style="background:#fee2e2; padding:15px 10px; border-radius:10px; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.05)">
|
|
<b style="color:#ef4444; font-size:1.5rem">${data.pelaporan.length}</b><br><small style="color:#991b1b; font-weight:600">Laporan</small>
|
|
</div>
|
|
<div style="background:#fef3c7; padding:15px 10px; border-radius:10px; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.05)">
|
|
<b style="color:#d97706; font-size:1.5rem">${data.warga.length}</b><br><small style="color:#92400e; font-weight:600">Warga Rentan</small>
|
|
</div>`;
|
|
}
|
|
if (!window.dashboardType || window.dashboardType === 'infra' || window.dashboardType === 'admin') {
|
|
html += `
|
|
<div style="background:#dcfce7; padding:15px 10px; border-radius:10px; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.05)">
|
|
<b style="color:#16a34a; font-size:1.5rem">${data.spbu.length}</b><br><small style="color:#166534; font-weight:600">SPBU Terdata</small>
|
|
</div>
|
|
<div style="background:#e0e7ff; padding:15px 10px; border-radius:10px; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.05)">
|
|
<b style="color:#4f46e5; font-size:1.5rem">${data.jalan.length}</b><br><small style="color:#3730a3; font-weight:600">Jalur Jalan</small>
|
|
</div>`;
|
|
}
|
|
html += `</div>`;
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
|
|
// Pelaporan
|
|
html += `<div class="section-title" style="color:#ef4444">🚨 Laporan Darurat</div>`;
|
|
if(data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
|
|
data.pelaporan.forEach(p => {
|
|
html += `<div class="card item-data" data-nama="${p.nama_pelapor.toLowerCase()} ${p.isi_laporan.toLowerCase()}">
|
|
<div style="display:flex; justify-content:space-between">
|
|
<span onclick="fokus(${p.latitude}, ${p.longitude})" style="cursor:pointer">
|
|
<b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0,40)}...</span>
|
|
</span>
|
|
<div>
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('pelaporan', ${p.id})">Edit</button><br>
|
|
<button class="btn-del" onclick="hapusData(${p.id}, 'pelaporan')">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
// Warga
|
|
html += `<div class="section-title">📍 Penduduk Miskin / Rentan</div>`;
|
|
data.warga.forEach(w => {
|
|
html += `<div class="card item-data" data-nama="${w.nama.toLowerCase()}">
|
|
<div style="display:flex; justify-content:space-between">
|
|
<span onclick="fokus(${w.latitude}, ${w.longitude})" style="cursor:pointer">
|
|
<b>${w.nama}</b>
|
|
${w.riwayat_penyakit ? '<span class="badge" style="background:#fef3c7; color:#d97706;"><i class="fas fa-heartbeat"></i> Medis</span>' : ''}
|
|
</span>
|
|
<div>
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('warga', ${w.id})">Edit</button><br>
|
|
<button class="btn-del" onclick="hapusData(${w.id}, 'warga')">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
}
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'infra' || window.dashboardType === 'admin') {
|
|
// SPBU
|
|
html += `<div class="section-title">⛽ Stasiun Pengisian (SPBU)</div>`;
|
|
data.spbu.forEach(s => {
|
|
var is24 = s.kategori === '24jam';
|
|
html += `<div class="card item-data" data-nama="${s.nama.toLowerCase()}">
|
|
<div style="display:flex; justify-content:space-between">
|
|
<span onclick="fokus(${s.latitude}, ${s.longitude})" style="cursor:pointer">
|
|
<b>${s.nama}</b>
|
|
<small><i class="fas fa-phone"></i> ${s.no_hp}</small><br>
|
|
${is24 ? '<span class="badge" style="background:#dcfce7; color:#16a34a;">Buka 24 Jam</span>' : '<span class="badge" style="background:#fee2e2; color:#ef4444;">Tidak 24 Jam</span>'}
|
|
</span>
|
|
<div>
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('spbu', ${s.id})">Edit</button><br>
|
|
<button class="btn-del" onclick="hapusData(${s.id}, 'spbu')">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
}
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
|
|
// Tempat Ibadah
|
|
html += `<div class="section-title">🕌 Tempat Ibadah & Bantuan</div>`;
|
|
data.masjid.forEach(m => {
|
|
html += `<div class="card item-data" data-nama="${m.nama.toLowerCase()}">
|
|
<div style="display:flex; justify-content:space-between">
|
|
<span onclick="fokus(${m.latitude}, ${m.longitude})" style="cursor:pointer"><b>${m.nama}</b></span>
|
|
<div>
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('masjid', ${m.id})">Edit</button><br>
|
|
<button class="btn-del" onclick="hapusData(${m.id}, 'masjid')">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
}
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'infra' || window.dashboardType === 'admin') {
|
|
// Jalan
|
|
html += `<div class="section-title">🛣️ Manajemen Jalan</div>`;
|
|
data.jalan.forEach(j => {
|
|
var color = '#ef4444'; // default red
|
|
if(j.status_jalan === 'Nasional') color = '#ef4444';
|
|
else if(j.status_jalan === 'Provinsi') color = '#eab308';
|
|
else if(j.status_jalan === 'Kabupaten') color = '#22c55e';
|
|
html += `<div class="card item-data" data-nama="${j.nama_jalan.toLowerCase()}">
|
|
<div style="display:flex; justify-content:space-between">
|
|
<span>
|
|
<b>${j.nama_jalan}</b>
|
|
<small style="color:${color}; font-weight:bold;">${j.status_jalan}</small><br>
|
|
<small>${j.panjang_m} meter</small>
|
|
</span>
|
|
<div>
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('jalan', ${j.id})">Edit</button><br>
|
|
<button class="btn-del" onclick="hapusData(${j.id}, 'jalan')">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
// Parsil
|
|
html += `<div class="section-title">🟩 Manajemen Kavling / Parsil</div>`;
|
|
data.parsil.forEach(p => {
|
|
html += `<div class="card item-data" data-nama="${p.nama_pemilik.toLowerCase()}">
|
|
<div style="display:flex; justify-content:space-between">
|
|
<span>
|
|
<b>${p.nama_pemilik}</b><br>
|
|
<small>Status: <b>${p.status_hak}</b></small>
|
|
</span>
|
|
<div>
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('parsil', ${p.id})">Edit</button><br>
|
|
<button class="btn-del" onclick="hapusData(${p.id}, 'parsil')">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
}
|
|
|
|
document.getElementById('sidebarContent').innerHTML = html;
|
|
}
|
|
|
|
function renderMap(data) {
|
|
layerMasjid.clearLayers();
|
|
layerMasjidRadius.clearLayers();
|
|
layerPelaporan.clearLayers();
|
|
layerWarga.clearLayers();
|
|
layerSpbu24.clearLayers();
|
|
layerSpbuNon24.clearLayers();
|
|
layerLines.clearLayers();
|
|
layerPolygons.clearLayers();
|
|
|
|
var lokMasjid = data.masjid.map(m => L.latLng(m.latitude, m.longitude));
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
|
|
// Render Masjid / Tempat Ibadah
|
|
data.masjid.forEach(m => {
|
|
var popup = `<b>${m.jenis || 'Tempat Ibadah'}:</b> ${m.nama}<br>
|
|
<div style="margin-top:10px; text-align:center;">
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('masjid', ${m.id})">Edit</button>
|
|
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${m.id}, 'masjid')">Hapus</button>
|
|
</div>`;
|
|
var faClass = 'fa-mosque';
|
|
if(m.jenis === 'Gereja') faClass = 'fa-church';
|
|
else if(m.jenis === 'Vihara') faClass = 'fa-vihara';
|
|
else if(m.jenis === 'Pura') faClass = 'fa-torii-gate';
|
|
|
|
// Buat custom marker bentuk map pin dengan icon sesuai jenis
|
|
var masjidIcon = L.divIcon({
|
|
html: `
|
|
<div style="
|
|
width: 34px;
|
|
height: 34px;
|
|
background-color: #2563eb;
|
|
border-radius: 50% 50% 50% 0;
|
|
transform: rotate(-45deg);
|
|
border: 2px solid white;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
">
|
|
<i class="fas ${faClass}" style="
|
|
transform: rotate(45deg);
|
|
color: white;
|
|
font-size: 14px;
|
|
margin-top: 2px;
|
|
margin-left: -2px;
|
|
"></i>
|
|
</div>
|
|
`,
|
|
className: '', // Hilangkan background default Leaflet
|
|
iconSize: [34, 34],
|
|
iconAnchor: [17, 40], // Anchor ujung lancip di bawah
|
|
popupAnchor: [0, -40]
|
|
});
|
|
|
|
L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup)
|
|
.on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
|
|
L.circle([m.latitude, m.longitude], {
|
|
radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1
|
|
}).addTo(layerMasjidRadius);
|
|
});
|
|
|
|
// Render Pelaporan
|
|
data.pelaporan.forEach(p => {
|
|
var popup = `<b>🚨 Laporan:</b> ${p.isi_laporan}<br>
|
|
<div style="margin-top:10px; text-align:center;">
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('pelaporan', ${p.id})">Edit</button>
|
|
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${p.id}, 'pelaporan')">Hapus</button>
|
|
</div>`;
|
|
var pelaporanIcon = L.divIcon({
|
|
html: `
|
|
<div style="
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: #f97316; /* Orange color */
|
|
border-radius: 50% 50% 50% 0;
|
|
transform: rotate(-45deg);
|
|
border: 2px solid white;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
">
|
|
<i class="fas fa-exclamation" style="
|
|
transform: rotate(45deg);
|
|
color: white;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-top: 2px;
|
|
margin-left: -2px;
|
|
"></i>
|
|
</div>
|
|
`,
|
|
className: '',
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 38],
|
|
popupAnchor: [0, -38]
|
|
});
|
|
|
|
L.marker([p.latitude, p.longitude], {
|
|
icon: pelaporanIcon, draggable: true
|
|
}).addTo(layerPelaporan).bindPopup(popup)
|
|
.on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
|
|
});
|
|
}
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'infra' || window.dashboardType === 'admin') {
|
|
// Render SPBU
|
|
data.spbu.forEach(s => {
|
|
var is24 = s.kategori === '24jam';
|
|
var iconUrl = is24 ? 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png' : 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
|
|
var targetLayer = is24 ? layerSpbu24 : layerSpbuNon24;
|
|
|
|
var popup = `<b>⛽ ${s.nama}</b><br>Kategori: ${s.kategori === '24jam' ? 'Buka 24 Jam' : 'Tidak 24 Jam'}<br>
|
|
<div style="margin-top:10px; text-align:center;">
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('spbu', ${s.id})">Edit</button>
|
|
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${s.id}, 'spbu')">Hapus</button>
|
|
</div>`;
|
|
L.marker([s.latitude, s.longitude], {
|
|
icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true
|
|
}).addTo(targetLayer).bindPopup(popup)
|
|
.on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
|
|
});
|
|
}
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
|
|
// Render Warga
|
|
data.warga.forEach(w => {
|
|
var pos = L.latLng(w.latitude, w.longitude);
|
|
var isCovered = lokMasjid.some(m => pos.distanceTo(m) <= currentRadius);
|
|
|
|
// Buat elemen point berbentuk map pin (teardrop) dengan ikon rumah di dalamnya
|
|
var color = isCovered ? '#16a34a' : '#ef4444'; // Hijau aman, merah di luar
|
|
var houseIcon = L.divIcon({
|
|
html: `
|
|
<div style="
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: ${color};
|
|
border-radius: 50% 50% 50% 0;
|
|
transform: rotate(-45deg);
|
|
border: 2px solid white;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
">
|
|
<div style="
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
">
|
|
<i class="fas fa-home" style="
|
|
transform: rotate(45deg);
|
|
color: ${color};
|
|
font-size: 10px;
|
|
"></i>
|
|
</div>
|
|
</div>
|
|
`,
|
|
className: '', // Kosongkan agar background default leaflet tidak muncul
|
|
iconSize: [30, 30],
|
|
iconAnchor: [15, 36], // Titik jangkar di ujung bawah pin
|
|
popupAnchor: [0, -36]
|
|
});
|
|
|
|
var isPenerima = (w.histori_bantuan && w.histori_bantuan.trim().length > 0) ? 'Ya' : 'Belum';
|
|
var txtPendidikan = w.pendidikan ? w.pendidikan : 'Tidak diketahui';
|
|
var txtPenyakit = (w.riwayat_penyakit && w.riwayat_penyakit.trim().length > 0) ? w.riwayat_penyakit : 'Tidak ada';
|
|
|
|
var popup = `
|
|
<div style="min-width: 200px;">
|
|
<b style="font-size: 1.1em; color: #1e293b;"><i class="fas fa-user-circle"></i> Warga: ${w.nama}</b>
|
|
<hr style="margin: 5px 0; border: 0; border-top: 1px solid #cbd5e1;">
|
|
<table style="width: 100%; font-size: 0.85em; margin-bottom: 8px;">
|
|
<tr><td style="color: #64748b; padding-right: 10px;">Jangkauan</td><td>: <b>${isCovered ? '<span style="color:#16a34a">Aman (Dekat Fasilitas)</span>' : '<span style="color:#ef4444">Di Luar</span>'}</b></td></tr>
|
|
<tr><td style="color: #64748b;">Tanggungan</td><td>: <b>${w.jumlah_kk} Jiwa</b></td></tr>
|
|
<tr><td style="color: #64748b;">Pendidikan</td><td>: ${txtPendidikan}</td></tr>
|
|
<tr><td style="color: #64748b;">Riwayat Sakit</td><td>: <span style="color: ${txtPenyakit !== 'Tidak ada' ? '#ef4444' : '#64748b'}">${txtPenyakit}</span></td></tr>
|
|
<tr><td style="color: #64748b;">Terima Bantuan</td><td>: <b>${isPenerima === 'Ya' ? '<span style="color:#16a34a">Sudah</span>' : '<span style="color:#ef4444">Belum</span>'}</b></td></tr>
|
|
</table>
|
|
<div style="font-size: 0.8em; color: #64748b; margin-bottom: 10px; background: #f8fafc; padding: 5px; border-radius: 4px; border: 1px solid #e2e8f0;">
|
|
<b>Histori:</b> ${w.histori_bantuan || '<i>Tidak ada riwayat bantuan</i>'}
|
|
</div>
|
|
<div style="text-align:center;">
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('warga', ${w.id})">Edit Data</button>
|
|
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${w.id}, 'warga')">Hapus</button>
|
|
</div>
|
|
</div>`;
|
|
L.marker(pos, { icon: houseIcon, draggable: true })
|
|
.addTo(layerWarga).bindPopup(popup)
|
|
.on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
|
|
});
|
|
}
|
|
|
|
if (!window.dashboardType || window.dashboardType === 'infra' || window.dashboardType === 'admin') {
|
|
// Render Jalan (Polyline)
|
|
data.jalan.forEach(j => {
|
|
var coords = JSON.parse(j.koordinat);
|
|
var color = '#ef4444'; // default red
|
|
if(j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
|
|
else if(j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
|
|
else if(j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
|
|
|
|
var popup = `<b>🛣️ ${j.nama_jalan}</b><br>Status: ${j.status_jalan}<br>Panjang: ${j.panjang_m} meter<br>
|
|
<div style="margin-top:10px; text-align:center;">
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('jalan', ${j.id})">Edit</button>
|
|
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${j.id}, 'jalan')">Hapus</button>
|
|
</div>`;
|
|
var polyline = L.polyline(coords, {color: color, weight: 6}).addTo(layerLines).bindPopup(popup);
|
|
polyline.db_id = j.id;
|
|
polyline.db_tipe = 'jalan';
|
|
drawnItems.addLayer(polyline);
|
|
});
|
|
|
|
// Render Parsil (Polygon)
|
|
data.parsil.forEach(p => {
|
|
var coords = JSON.parse(p.koordinat);
|
|
var popup = `<b>🟩 Kavling</b><br>Pemilik: ${p.nama_pemilik}<br>Status Hak: ${p.status_hak}<br>
|
|
<div style="margin-top:10px; text-align:center;">
|
|
<button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('parsil', ${p.id})">Edit</button>
|
|
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${p.id}, 'parsil')">Hapus</button>
|
|
</div>`;
|
|
var polygon = L.polygon(coords, {color: '#2563eb', fillOpacity: 0.4}).addTo(layerPolygons).bindPopup(popup);
|
|
polygon.db_id = p.id;
|
|
polygon.db_tipe = 'parsil';
|
|
drawnItems.addLayer(polygon);
|
|
});
|
|
}
|
|
}
|
|
|
|
function toggleForm() {
|
|
var j = document.getElementById('jenis').value;
|
|
['pelaporan', 'warga', 'masjid', 'spbu', 'jalan', 'parsil'].forEach(f => {
|
|
var el = document.getElementById('form_' + f);
|
|
if (el) {
|
|
el.classList.toggle('hidden', j !== f);
|
|
}
|
|
});
|
|
}
|
|
|
|
map.on('click', e => {
|
|
document.getElementById('lat').value = e.latlng.lat;
|
|
document.getElementById('lng').value = e.latlng.lng;
|
|
L.popup().setLatLng(e.latlng).setContent("Dipilih: " + e.latlng.lat.toFixed(4) + ", " + e.latlng.lng.toFixed(4)).openOn(map);
|
|
});
|
|
|
|
function simpanData() {
|
|
var j = document.getElementById('jenis').value;
|
|
var fd = new FormData();
|
|
fd.append('action', 'simpan_' + j);
|
|
fd.append('edit_id', document.getElementById('edit_id').value);
|
|
|
|
var lat = document.getElementById('lat').value;
|
|
var lng = document.getElementById('lng').value;
|
|
|
|
if (j === 'jalan') {
|
|
fd.append('nama', document.getElementById('nama_jalan').value);
|
|
fd.append('status_jalan', document.getElementById('status_jalan').value);
|
|
fd.append('panjang', document.getElementById('panjang_jalan').value);
|
|
fd.append('koordinat', document.getElementById('jalan_coords').value);
|
|
} else if (j === 'parsil') {
|
|
fd.append('nama', document.getElementById('nama_pemilik').value);
|
|
fd.append('status_hak', document.getElementById('status_hak').value);
|
|
fd.append('koordinat', document.getElementById('parsil_coords').value);
|
|
} else {
|
|
if(j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") {
|
|
Swal.fire({icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!'});
|
|
return;
|
|
}
|
|
fd.append('lat', lat); fd.append('lng', lng);
|
|
|
|
if (j === 'pelaporan') {
|
|
fd.append('nama', document.getElementById('nama_pelapor').value);
|
|
fd.append('laporan', document.getElementById('isi_laporan').value);
|
|
} else if (j === 'warga') {
|
|
fd.append('nama', document.getElementById('nama_kk').value);
|
|
fd.append('jumlah_kk', document.getElementById('jumlah_kk').value);
|
|
fd.append('tanggal_lahir', document.getElementById('tanggal_lahir').value);
|
|
fd.append('pendidikan', document.getElementById('pendidikan').value);
|
|
fd.append('riwayat_penyakit', document.getElementById('riwayat_penyakit').value);
|
|
fd.append('histori_bantuan', document.getElementById('histori_bantuan').value);
|
|
fd.append('alamat', document.getElementById('alamat_warga').value);
|
|
} else if (j === 'masjid') {
|
|
fd.append('nama', document.getElementById('nama_masjid').value);
|
|
fd.append('jenis', document.getElementById('jenis_masjid').value);
|
|
fd.append('pic', document.getElementById('pic_masjid').value);
|
|
fd.append('alamat', document.getElementById('alamat_masjid').value);
|
|
} else if (j === 'spbu') {
|
|
fd.append('nama', document.getElementById('nama_spbu').value);
|
|
fd.append('no_hp', document.getElementById('no_hp_spbu').value);
|
|
fd.append('kategori', document.getElementById('kategori_spbu').value);
|
|
}
|
|
}
|
|
|
|
Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
|
|
fetch('../api/api.php', { method: 'POST', body: fd })
|
|
.then(res => res.json())
|
|
.then((res) => {
|
|
if (res.status === 'error') {
|
|
Swal.fire('Gagal!', res.message, 'error');
|
|
} else {
|
|
Swal.fire({icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false})
|
|
.then(() => location.reload());
|
|
}
|
|
});
|
|
}
|
|
|
|
function hapusData(id, tipe) {
|
|
Swal.fire({
|
|
title: 'Hapus Data?', text: "Data yang dihapus tidak dapat dikembalikan!", icon: 'warning',
|
|
showCancelButton: true, confirmButtonColor: '#ef4444', cancelButtonColor: '#94a3b8', confirmButtonText: 'Ya, Hapus!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
|
|
var fd = new FormData();
|
|
fd.append('action', 'hapus_data');
|
|
fd.append('id', id);
|
|
fd.append('tipe', tipe);
|
|
fetch('../api/api.php', { method: 'POST', body: fd })
|
|
.then(res => res.json())
|
|
.then((res) => {
|
|
if (res.status === 'error') {
|
|
Swal.fire('Gagal!', res.message, 'error');
|
|
} else {
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function fokus(lat, lng) { map.flyTo([lat, lng], 18); }
|
|
|
|
function batalEdit() {
|
|
document.getElementById('edit_id').value = "0";
|
|
document.getElementById('btnSimpanUtama').innerText = "Simpan Data";
|
|
document.getElementById('btnBatalEdit').style.display = "none";
|
|
document.getElementById('lat').value = "";
|
|
document.getElementById('lng').value = "";
|
|
}
|
|
|
|
function editData(tipe, id) {
|
|
var item = cachedData[tipe].find(x => x.id == id);
|
|
if(!item) return;
|
|
|
|
document.getElementById('edit_id').value = id;
|
|
document.getElementById('jenis').value = tipe;
|
|
toggleForm();
|
|
|
|
var panel = document.getElementById('panelInput');
|
|
if(panel) panel.classList.remove('collapsed');
|
|
|
|
if(tipe == 'warga') {
|
|
document.getElementById('nama_kk').value = item.nama;
|
|
document.getElementById('jumlah_kk').value = item.jumlah_kk;
|
|
document.getElementById('tanggal_lahir').value = item.tanggal_lahir || '';
|
|
document.getElementById('pendidikan').value = item.pendidikan || '';
|
|
document.getElementById('riwayat_penyakit').value = item.riwayat_penyakit || '';
|
|
document.getElementById('histori_bantuan').value = item.histori_bantuan || '';
|
|
document.getElementById('alamat_warga').value = item.alamat || '';
|
|
} else if (tipe == 'pelaporan') {
|
|
document.getElementById('nama_pelapor').value = item.nama_pelapor;
|
|
document.getElementById('isi_laporan').value = item.isi_laporan;
|
|
} else if (tipe == 'spbu') {
|
|
document.getElementById('nama_spbu').value = item.nama;
|
|
document.getElementById('no_hp_spbu').value = item.no_hp;
|
|
document.getElementById('kategori_spbu').value = item.kategori;
|
|
} else if (tipe == 'masjid') {
|
|
document.getElementById('nama_masjid').value = item.nama;
|
|
document.getElementById('pic_masjid').value = item.pic;
|
|
document.getElementById('alamat_masjid').value = item.alamat;
|
|
} else if (tipe == 'jalan') {
|
|
document.getElementById('nama_jalan').value = item.nama_jalan;
|
|
document.getElementById('status_jalan').value = item.status_jalan;
|
|
document.getElementById('panjang_jalan').value = item.panjang_m;
|
|
document.getElementById('jalan_coords').value = item.koordinat;
|
|
} else if (tipe == 'parsil') {
|
|
document.getElementById('nama_pemilik').value = item.nama_pemilik;
|
|
document.getElementById('status_hak').value = item.status_hak;
|
|
document.getElementById('parsil_coords').value = item.koordinat;
|
|
}
|
|
|
|
if(item.latitude && item.longitude) {
|
|
document.getElementById('lat').value = item.latitude;
|
|
document.getElementById('lng').value = item.longitude;
|
|
fokus(item.latitude, item.longitude);
|
|
}
|
|
|
|
document.getElementById('btnSimpanUtama').innerText = "Update Data";
|
|
document.getElementById('btnBatalEdit').style.display = "inline-block";
|
|
}
|
|
|
|
// INIT
|
|
loadData();
|
|
|
|
function updateMarkerCoord(id, tipe, latlng) {
|
|
var fd = new FormData();
|
|
fd.append('action', 'update_koordinat');
|
|
fd.append('id', id);
|
|
fd.append('tipe', tipe);
|
|
fd.append('lat', latlng.lat);
|
|
fd.append('lng', latlng.lng);
|
|
fetch('../api/api.php', { method: 'POST', body: fd })
|
|
.then(() => {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Tersimpan',
|
|
text: 'Posisi titik berhasil digeser!',
|
|
timer: 1500,
|
|
showConfirmButton: false,
|
|
toast: true,
|
|
position: 'top-end'
|
|
});
|
|
});
|
|
}
|