Vinlio Andriarles
566 lines
39 KiB
JavaScript
566 lines
39 KiB
JavaScript
// =========================================================================
|
|
// FILE: assets/js/webgis.js
|
|
// Otak Front-End untuk Peta Bansos (Melayani Admin Lokal & Super Admin)
|
|
// =========================================================================
|
|
|
|
// Variabel Global Leaflet
|
|
let tempLat, tempLng;
|
|
const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
|
|
L.control.zoom({ position: 'topright' }).addTo(map);
|
|
const baseOsm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);
|
|
|
|
// Inisialisasi Ikon
|
|
const redIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34] });
|
|
const greenIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34] });
|
|
const violetIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34] });
|
|
const daruratIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], className: 'marker-darurat' });
|
|
|
|
const layerIbadah = L.layerGroup().addTo(map);
|
|
const layerPenduduk = L.layerGroup().addTo(map);
|
|
let searchableLayers = [];
|
|
|
|
// --- UTILITAS UMUM ---
|
|
window.konfirmasiLogout = function(urlLogout) {
|
|
if(confirm("Apakah Anda yakin ingin keluar dari sistem?")) { window.location.href = urlLogout; }
|
|
}
|
|
window.tutupModal = function(modalId) { document.getElementById(modalId).style.display = "none"; }
|
|
window.onclick = function(event) { if (event.target.classList.contains('modal')) { event.target.style.display = "none"; } }
|
|
window.toggleOpsiLanjutan = function(id) {
|
|
let el = document.getElementById('opsi-' + id);
|
|
el.style.display = (el.style.display === 'none') ? 'block' : 'none';
|
|
}
|
|
window.cariLokasiSaya = function() { map.locate({setView: true, maxZoom: 16}); }
|
|
map.on('locationfound', function(e) { L.marker(e.latlng).addTo(map).bindPopup("📍 Anda di sini.").openPopup(); });
|
|
|
|
async function getAlamatOtomatis(lat, lng) {
|
|
try {
|
|
const r = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`);
|
|
const d = await r.json();
|
|
if(d && d.address) return [d.address.road, d.address.village||d.address.suburb, d.address.city_district].filter(Boolean).join(", ");
|
|
} catch (e) {} return "";
|
|
}
|
|
|
|
window.cariData = function() {
|
|
const kw = document.getElementById('searchInput').value.toLowerCase().trim(); if (!kw) return;
|
|
let f = false;
|
|
for (let i of searchableLayers) {
|
|
if (i.nama && i.nama.toLowerCase().includes(kw)) { map.flyTo(i.layer.getLatLng(), 18); i.layer.openPopup(); f = true; break; }
|
|
}
|
|
if (!f) alert("Data tidak ditemukan!");
|
|
}
|
|
window.handleEnter = function(e) { if (e.key === 'Enter') cariData(); }
|
|
|
|
|
|
// --- FUNGSI RENDER PETA (DIPANGGIL DARI PHP HTML) ---
|
|
function initWebGIS() {
|
|
// Kalkulasi Jarak & Radius Warga ke Institusi terdekat
|
|
DATA_PENDUDUK.forEach(p => {
|
|
let latlngPenduduk = L.latLng(p.latitude, p.longitude);
|
|
let minDist = Infinity; let closestIbadah = null;
|
|
|
|
DATA_IBADAH.forEach(ib => {
|
|
let dist = latlngPenduduk.distanceTo(L.latLng(ib.latitude, ib.longitude));
|
|
if (dist < minDist) { minDist = dist; closestIbadah = ib; }
|
|
});
|
|
|
|
p.closestIbadah = closestIbadah;
|
|
p.minDist = minDist;
|
|
p.isInside = (closestIbadah && minDist <= closestIbadah.radius);
|
|
|
|
if (p.isInside && closestIbadah) {
|
|
let ibadahIndex = DATA_IBADAH.findIndex(ib => ib.id === closestIbadah.id);
|
|
if(ibadahIndex !== -1) DATA_IBADAH[ibadahIndex].warga_count++;
|
|
}
|
|
});
|
|
|
|
// Render Tempat Ibadah
|
|
DATA_IBADAH.forEach(ib => {
|
|
const marker = L.marker([ib.latitude, ib.longitude], { icon: violetIcon });
|
|
|
|
let ibadahControls = IS_SUPER_ADMIN ? `
|
|
<div class="button-group">
|
|
<button class="btn-edit" onclick="editIbadah(${ib.id}, '${ib.nama}', '${ib.jenis}', ${ib.radius}, '${ib.alamat}', ${ib.latitude}, ${ib.longitude})">Edit Profil</button>
|
|
<button class="btn-delete" onclick="hapusIbadah(${ib.id})">Hapus</button>
|
|
</div>
|
|
` : '';
|
|
|
|
let htmlPopup = `
|
|
<div class="popup-content">
|
|
<div class="popup-title">🕌 ${ib.nama}</div>
|
|
<div style="font-size: 0.9rem;">Tipe: ${ib.jenis || 'Institusi'} <br> Radius: <b>${ib.radius} Meter</b></div>
|
|
<div class="stat-box">
|
|
👥 Warga dalam jangkauan: <span>${ib.warga_count} KK</span><br>
|
|
📦 Total Penyaluran: <span>${ib.total_log || 0} Kali</span>
|
|
</div>
|
|
${ibadahControls}
|
|
</div>
|
|
`;
|
|
marker.bindPopup(htmlPopup);
|
|
marker.addTo(layerIbadah);
|
|
L.circle([ib.latitude, ib.longitude], { radius: ib.radius, color: 'violet', fillOpacity: 0.1 }).addTo(layerIbadah);
|
|
searchableLayers.push({ nama: ib.nama, layer: marker, tipe: 'titik' });
|
|
});
|
|
|
|
// Render Warga Miskin
|
|
DATA_PENDUDUK.forEach(p => {
|
|
let isDarurat = p.is_darurat > 0;
|
|
let idMusibahAktif = p.id_musibah_aktif ? p.id_musibah_aktif : 'null';
|
|
let iconPenduduk = isDarurat ? daruratIcon : (p.isInside ? greenIcon : redIcon);
|
|
|
|
let statusBadge = ""; let statusLabel = "";
|
|
let statusKemiskinan = p.status_kemiskinan || "Data Belum Lengkap";
|
|
|
|
if (statusKemiskinan === "Data Belum Lengkap" || (!p.skor_aset && !p.pengeluaran)) {
|
|
statusBadge = "bg-gray"; statusLabel = "Data Belum Lengkap";
|
|
} else if (statusKemiskinan === "Sangat Miskin") {
|
|
statusBadge = "bg-red"; statusLabel = "SANGAT MISKIN (P1)";
|
|
} else if (statusKemiskinan === "Miskin") {
|
|
statusBadge = "bg-orange"; statusLabel = "MISKIN (P2)";
|
|
} else {
|
|
statusBadge = "bg-yellow"; statusLabel = "RENTAN MISKIN";
|
|
}
|
|
|
|
let radiusText = '';
|
|
let actionButtons = '';
|
|
let isOwnedByAdmin = IS_SUPER_ADMIN ? true : (p.closestIbadah && p.closestIbadah.id == ADMIN_ID_IBADAH && p.isInside);
|
|
|
|
let bannerDarurat = isDarurat ? `
|
|
<div style="background-color: #c0392b; color: white; padding: 6px; text-align: center; border-radius: 4px; font-weight: bold; margin-bottom: 8px; animation: blink-animation 1s infinite;">
|
|
🚨 STATUS DARURAT MUSIBAH
|
|
</div>
|
|
` : '';
|
|
|
|
if (p.isInside || IS_SUPER_ADMIN) {
|
|
radiusText = p.isInside ? `🟢 Masuk area <b>${p.closestIbadah.nama}</b>` : `🔴 Di luar jangkauan (Bypass Super Admin)`;
|
|
|
|
if (isOwnedByAdmin) {
|
|
let btnBantuanHtml = (!IS_SUPER_ADMIN) ? `<button class="btn-action" onclick="bukaFormBantuan(${p.id}, '${statusLabel}', ${p.latitude}, ${p.longitude}, ${idMusibahAktif})">📦 Catat Penyaluran Bantuan</button>` : '';
|
|
|
|
actionButtons = `
|
|
${btnBantuanHtml}
|
|
<button class="btn-danger" onclick="bukaFormMusibah(${p.id}, ${p.latitude}, ${p.longitude})">🚨 Lapor Musibah Darurat</button>
|
|
<button class="btn-info" onclick="bukaModalKeluarga(${p.id}, '${p.nama_kk}')">👨👩👧👦 Data Keluarga & Pelatihan</button>
|
|
|
|
<button class="btn-secondary" onclick="toggleOpsiLanjutan(${p.id})">⚙️ Opsi Lanjutan ▼</button>
|
|
|
|
<div id="opsi-${p.id}" style="display:none; margin-top:10px; border-top:1px dashed #ccc; padding-top:5px;">
|
|
<button class="btn-history" onclick="lihatRiwayat(${p.id}, '${p.nama_kk}', ${p.latitude}, ${p.longitude})">📜 Lihat Riwayat Bantuan</button>
|
|
<button class="btn-training" onclick="lihatLogPelatihan(${p.id}, '${p.nama_kk}', ${p.latitude}, ${p.longitude})">🎓 Lihat Log Pelatihan</button>
|
|
<div class="button-group">
|
|
<button class="btn-edit" onclick="editPenduduk(${p.id}, '${p.nama_kk}', '${p.alamat}', '${p.agama}', ${p.tanggungan}, ${p.pengeluaran}, ${p.lantai||0}, ${p.dinding||0}, ${p.sanitasi||0}, ${p.listrik||0}, ${p.air||0}, ${p.latitude}, ${p.longitude})">Edit Data Induk</button>
|
|
<button class="btn-delete" onclick="hapusPenduduk(${p.id})">Hapus Rumah</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
actionButtons = `<div style="margin-top:10px; padding:8px; background:#eee; color:#7f8c8d; font-size:0.85rem; text-align:center; border-radius:4px;">Wewenang: ${p.closestIbadah.nama}</div>`;
|
|
}
|
|
} else {
|
|
radiusText = `🔴 Di Luar Jangkauan Bantuan`;
|
|
actionButtons = `<div style="margin-top:10px; padding:8px; background:#f9ebea; color:#c0392b; font-size:0.85rem; text-align:center; border-radius:4px;">Tidak masuk radius wewenang tempat ibadah manapun.</div>`;
|
|
}
|
|
|
|
let marker = L.marker([p.latitude, p.longitude], { icon: iconPenduduk }).bindPopup(`
|
|
<div class="popup-content">
|
|
${bannerDarurat}
|
|
<div class="popup-title">🏠 Keluarga ${p.nama_kk}</div>
|
|
${p.alamat || 'Alamat tak diketahui'}<br>
|
|
Tanggungan: ${p.tanggungan || '?'} Jiwa<br>
|
|
<div style="margin-top: 5px;"><span class="badge ${statusBadge}">${statusLabel}</span></div>
|
|
<hr style="margin: 8px 0; border: 0.5px solid #ccc;">
|
|
<small>${radiusText}</small>
|
|
<div style="margin-top: 8px;">${actionButtons}</div>
|
|
</div>
|
|
`);
|
|
marker.addTo(layerPenduduk);
|
|
searchableLayers.push({ nama: p.nama_kk, layer: marker, tipe: 'titik' });
|
|
});
|
|
|
|
// Menampilkan Layer
|
|
loadBasemap(layerPenduduk, layerIbadah);
|
|
}
|
|
|
|
// --- FUNGSI LOAD KECAMATAN JSON ---
|
|
async function loadBasemap(layerPenduduk, layerIbadah) {
|
|
const adminGrp = L.layerGroup().addTo(map);
|
|
try {
|
|
// PERHATIAN: Sesuaikan URL json ini jika Anda memindahkannya ke folder assets
|
|
const dataAdmin = await (await fetch('assets/data/Admin_Kecamatan.json')).json();
|
|
L.geoJSON(dataAdmin, {
|
|
style: function (f) {
|
|
const n = (f.properties.Ket || "").toUpperCase();
|
|
let c = "#ccc";
|
|
if(n.includes("BARAT")) c="#e41a1c"; else if(n.includes("KOTA")) c="#377eb8"; else if(n.includes("SELATAN")) c="#4daf4a";
|
|
else if(n.includes("TENGGARA")) c="#984ea3"; else if(n.includes("TIMUR")) c="#ff7f00"; else if(n.includes("UTARA")) c="#f1c40f";
|
|
return { color: "black", weight: 2, fillOpacity: 0.2, fillColor: c };
|
|
},
|
|
onEachFeature: function (f, layer) {
|
|
const p = new Intl.NumberFormat('id-ID').format(f.properties.penduduk || 0);
|
|
layer.bindPopup(`<div style="text-align: center;"><b>Kecamatan ${f.properties.Ket || '?'}</b><hr>Penduduk: <b>${p} Jiwa</b></div>`);
|
|
}
|
|
}).addTo(adminGrp);
|
|
} catch (e) { console.error("Gagal load geojson kecamatan"); }
|
|
|
|
const lc = L.control.layers(null, { "Batas Kecamatan": adminGrp, "Lokasi Warga": layerPenduduk, "Tempat Ibadah (Ungu)": layerIbadah }, { collapsed: false }).addTo(map);
|
|
document.getElementById('layerControlWrapper').appendChild(lc.getContainer());
|
|
}
|
|
|
|
// --- DRAW CONTROL ---
|
|
const drawControl = new L.Control.Draw({ draw: { polyline: false, polygon: false, circle: false, rectangle: false, circlemarker: false, marker: { icon: redIcon } } }).addTo(map);
|
|
document.getElementById('drawControlWrapper').appendChild(drawControl.getContainer());
|
|
|
|
map.on(L.Draw.Event.CREATED, async function (e) {
|
|
const layer = e.layer;
|
|
tempLat = layer.getLatLng().lat; tempLng = layer.getLatLng().lng;
|
|
let latlngNew = L.latLng(tempLat, tempLng);
|
|
|
|
if (!IS_SUPER_ADMIN) {
|
|
let ibadahAdmin = DATA_IBADAH.find(ib => ib.id == ADMIN_ID_IBADAH);
|
|
if(ibadahAdmin && latlngNew.distanceTo(L.latLng(ibadahAdmin.latitude, ibadahAdmin.longitude)) > ibadahAdmin.radius) {
|
|
alert("Titik ini berada di LUAR radius tempat ibadah Anda. Anda tidak berhak menambahkan warga di area ini.");
|
|
return;
|
|
}
|
|
}
|
|
|
|
layer.bindPopup("<i>Menyiapkan form...</i>").addTo(map).openPopup();
|
|
const alamatAuto = await getAlamatOtomatis(tempLat, tempLng);
|
|
|
|
if (IS_SUPER_ADMIN) {
|
|
let modePilih = document.getElementById('modeTambah').value;
|
|
if(modePilih === 'warga') tampilkanFormPenduduk(layer, 0, '', alamatAuto, 'Islam', 0, '', 0, 0, 0, 0, 0, 'tambah');
|
|
else tampilkanFormIbadah(layer, 0, '', 'Masjid', 500, alamatAuto, 'tambah');
|
|
} else {
|
|
tampilkanFormPenduduk(layer, 0, '', alamatAuto, 'Islam', 0, '', 0, 0, 0, 0, 0, 'tambah');
|
|
}
|
|
});
|
|
|
|
// --- FUNGSI CRUD WARGA ---
|
|
function tampilkanFormPenduduk(layerOrId, id, nama, alamat, agama, tanggungan, pengeluaran, lantai, dinding, sanitasi, listrik, air, mode) {
|
|
tanggungan = tanggungan || 0; pengeluaran = pengeluaran || '';
|
|
const formContent = `
|
|
<div class="popup-content">
|
|
<div class="popup-title">${mode === 'tambah' ? 'Tambah Data Induk' : 'Edit Data Induk'} Warga</div>
|
|
<label>Nama Kepala Keluarga (KK)</label><input type="text" id="p_nama" value="${nama}">
|
|
<label>Alamat Lengkap</label><input type="text" id="p_alamat" value="${alamat}">
|
|
<label>Agama</label>
|
|
<select id="p_agama">
|
|
<option value="Islam" ${agama=='Islam'?'selected':''}>Islam</option><option value="Kristen Katolik" ${agama=='Kristen Katolik'?'selected':''}>Kristen Katolik</option><option value="Kristen Protestan" ${agama=='Kristen Protestan'?'selected':''}>Kristen Protestan</option>
|
|
<option value="Hindu" ${agama=='Hindu'?'selected':''}>Hindu</option><option value="Buddha" ${agama=='Buddha'?'selected':''}>Buddha</option><option value="Konghucu" ${agama=='Konghucu'?'selected':''}>Konghucu</option>
|
|
</select>
|
|
<div style="display:flex; gap: 5px;">
|
|
<div style="flex:1;"><label>Tanggungan</label><input type="number" id="p_tanggungan" value="${tanggungan}" readonly title="Otomatis dihitung"></div>
|
|
<div style="flex:2;"><label>Pengeluaran (Rp)</label><input type="number" id="p_pengeluaran" value="${pengeluaran}"></div>
|
|
</div>
|
|
<hr style="margin: 5px 0;"><label style="color:#d35400;">Observasi Fisik Rumah (PMT)</label>
|
|
<label>Lantai</label><select id="p_lantai"><option value="1" ${lantai==1?'selected':''}>Rendah</option><option value="0" ${lantai==0?'selected':''}>Bagus</option></select>
|
|
<label>Dinding</label><select id="p_dinding"><option value="1" ${dinding==1?'selected':''}>Bambu/Rumbia</option><option value="0" ${dinding==0?'selected':''}>Tembok Bata</option></select>
|
|
<label>Sanitasi</label><select id="p_sanitasi"><option value="1" ${sanitasi==1?'selected':''}>MCK Umum</option><option value="0" ${sanitasi==0?'selected':''}>Milik Sendiri</option></select>
|
|
<label>Listrik</label><select id="p_listrik"><option value="1" ${listrik==1?'selected':''}>Numpang</option><option value="0" ${listrik==0?'selected':''}>Meteran Sendiri</option></select>
|
|
<label>Air</label><select id="p_air"><option value="1" ${air==1?'selected':''}>Tak Terlindung</option><option value="0" ${air==0?'selected':''}>PDAM</option></select>
|
|
<button class="btn-save" onclick="simpanPenduduk(${id}, '${mode}')">Simpan Profil Rumah</button>
|
|
</div>`;
|
|
if (mode === 'tambah') layerOrId.setPopupContent(formContent); else L.popup().setLatLng([tempLat, tempLng]).setContent(formContent).openOn(map);
|
|
}
|
|
|
|
window.editPenduduk = function(id, nama, alamat, agama, tanggungan, pengeluaran, lantai, dinding, sanitasi, listrik, air, lat, lng) {
|
|
tempLat = lat; tempLng = lng; map.closePopup(); tampilkanFormPenduduk(null, id, nama, alamat, agama, tanggungan, pengeluaran, lantai, dinding, sanitasi, listrik, air, 'edit');
|
|
}
|
|
|
|
window.simpanPenduduk = async function(id, mode) {
|
|
let valLantai = parseInt(document.getElementById('p_lantai').value); let valDinding = parseInt(document.getElementById('p_dinding').value);
|
|
let valSanitasi = parseInt(document.getElementById('p_sanitasi').value); let valListrik = parseInt(document.getElementById('p_listrik').value);
|
|
let valAir = parseInt(document.getElementById('p_air').value);
|
|
let skorAset = valLantai + valDinding + valSanitasi + valListrik + valAir;
|
|
let valPengeluaran = parseFloat(document.getElementById('p_pengeluaran').value) || 0; let valTanggungan = parseInt(document.getElementById('p_tanggungan').value) || 1;
|
|
|
|
let pengeluaranKapita = valPengeluaran / (valTanggungan > 0 ? valTanggungan : 1);
|
|
let miskinMoneter = pengeluaranKapita < GARIS_KEMISKINAN_KALBAR;
|
|
let statusKemiskinan = (valPengeluaran > 0) ? (miskinMoneter && skorAset >= 3 ? "Sangat Miskin" : (miskinMoneter ? "Miskin" : "Rentan Miskin")) : "Data Belum Lengkap";
|
|
|
|
const fd = new FormData(); if (mode === 'edit') fd.append('id', id);
|
|
fd.append('latitude', tempLat); fd.append('longitude', tempLng); fd.append('nama_kk', document.getElementById('p_nama').value); fd.append('alamat', document.getElementById('p_alamat').value);
|
|
fd.append('agama', document.getElementById('p_agama').value); fd.append('tanggungan', valTanggungan); fd.append('pengeluaran', valPengeluaran); fd.append('skor_aset', skorAset);
|
|
fd.append('lantai', valLantai); fd.append('dinding', valDinding); fd.append('sanitasi', valSanitasi); fd.append('listrik', valListrik); fd.append('air', valAir); fd.append('status_kemiskinan', statusKemiskinan);
|
|
|
|
const endpoint = mode === 'tambah' ? 'api/penduduk/tambah_penduduk.php' : 'api/penduduk/update_penduduk.php';
|
|
const response = await fetch(endpoint, { method: 'POST', body: fd });
|
|
if ((await response.json()).status === 'success') location.reload(); else alert("Gagal menyimpan data!");
|
|
}
|
|
|
|
window.hapusPenduduk = async function(id) { if (confirm("Hapus rumah dan seluruh keluarga ini?")) { await fetch(`api/penduduk/hapus_penduduk.php?id=${id}`); location.reload(); } }
|
|
|
|
// --- FUNGSI CRUD KELUARGA & PELATIHAN ---
|
|
window.bukaModalKeluarga = async function(id_penduduk, nama_kk) {
|
|
map.closePopup();
|
|
document.getElementById('modalTitle').innerText = "👨👩👧👦 Manajemen Anggota & Pelatihan: Keluarga " + nama_kk;
|
|
document.getElementById('keluargaModal').style.display = "block";
|
|
|
|
let opsiPelatihanHtml = '';
|
|
try {
|
|
const resPelatihan = await fetch('api/transaksi/get_master_pelatihan.php');
|
|
const dataPelatihan = await resPelatihan.json();
|
|
dataPelatihan.forEach(pel => { opsiPelatihanHtml += `<option value="${pel.id}">${pel.nama_pelatihan} (Oleh: ${pel.penyelenggara})</option>`; });
|
|
} catch(e) {}
|
|
|
|
document.getElementById('modalBody').innerHTML = `<p style="text-align:center;">Memuat data anggota...</p>`;
|
|
|
|
const response = await fetch(`api/anggota/get_anggota_keluarga.php?id_penduduk=${id_penduduk}`);
|
|
const dataAnggota = await response.json();
|
|
|
|
let tableRows = '';
|
|
if(dataAnggota.length > 0) {
|
|
dataAnggota.forEach(ang => {
|
|
let aksiHtml = `
|
|
<div class="button-group" style="margin-top:0;">
|
|
<button class="btn-edit" style="width:48%; padding:4px; font-size:0.8rem; margin:0;" onclick="siapkanEditAnggota(${ang.id}, '${ang.nik}', '${ang.nama_lengkap}', '${ang.tanggal_lahir}', '${ang.pendidikan_terakhir}', '${ang.pekerjaan}')">Edit</button>
|
|
<button class="btn-delete" style="width:48%; padding:4px; font-size:0.8rem; margin:0;" onclick="hapusAnggota(${ang.id}, ${id_penduduk}, '${nama_kk}')">Hapus</button>
|
|
</div>`;
|
|
|
|
if(ang.rekomendasi_pelatihan) {
|
|
aksiHtml += `
|
|
<div style="margin-top:5px; background:#e8f8f5; padding:5px; border-radius:4px; border: 1px solid #27ae60;">
|
|
<span style="font-size:0.8rem; color:#27ae60; font-weight:bold;">✨ Rekomendasi Pelatihan</span><br>
|
|
<select id="sel_pelatihan_${ang.id}" style="font-size:0.8rem; width:100%; margin-bottom:5px;">
|
|
${opsiPelatihanHtml ? opsiPelatihanHtml : '<option value="">Tidak ada pelatihan aktif</option>'}
|
|
</select>
|
|
<button class="btn-training" style="padding:4px; font-size:0.8rem; margin:0;" onclick="daftarkanPelatihan(${ang.id}, ${id_penduduk}, '${nama_kk}')">Daftarkan</button>
|
|
</div>`;
|
|
} else { aksiHtml += `<div style="margin-top:5px; font-size:0.75rem; color:#7f8c8d;">❌ Tidak Memenuhi Syarat Pelatihan</div>`; }
|
|
|
|
tableRows += `<tr><td>${ang.nik}</td><td><b>${ang.nama_lengkap}</b><br><small>${ang.umur} Tahun</small></td><td>${ang.pendidikan_terakhir}</td><td>${ang.pekerjaan}</td><td style="width: 200px;">${aksiHtml}</td></tr>`;
|
|
});
|
|
} else { tableRows = `<tr><td colspan="5" style="text-align:center; padding: 15px;">Belum ada anggota keluarga ditambahkan.</td></tr>`; }
|
|
|
|
document.getElementById('modalBody').innerHTML = `
|
|
<div style="max-height: 40vh; overflow-y: auto; margin-bottom: 20px;">
|
|
<table class="history-table" style="width: 100%;">
|
|
<thead><tr><th>NIK</th><th>Nama & Umur</th><th>Pendidikan</th><th>Pekerjaan</th><th style="width: 200px;">Aksi</th></tr></thead>
|
|
<tbody>${tableRows}</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="formContainerAnggota" style="background-color: #f8f9fa; border: 1px solid #dcdde1; padding: 15px; border-radius: 6px;">
|
|
<h4 id="formAnggotaTitle" style="margin-top:0; color:#34495e;">+ Tambah Anggota Keluarga Baru</h4>
|
|
<input type="hidden" id="ak_id_edit" value="">
|
|
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
|
<div style="flex: 1 1 30%;"><label>NIK</label><input type="text" id="ak_nik" maxlength="16"></div>
|
|
<div style="flex: 1 1 30%;"><label>Nama Lengkap</label><input type="text" id="ak_nama"></div>
|
|
<div style="flex: 1 1 30%;"><label>Tanggal Lahir</label><input type="date" id="ak_tgl"></div>
|
|
<div style="flex: 1 1 30%;"><label>Pendidikan Terakhir</label><select id="ak_pendidikan"><option value="Tidak Sekolah">Tidak Sekolah</option><option value="SD Sederajat">SD Sederajat</option><option value="SMP Sederajat">SMP Sederajat</option><option value="SMA Sederajat">SMA Sederajat</option><option value="Diploma">Diploma</option><option value="Sarjana">Sarjana</option></select></div>
|
|
<div style="flex: 1 1 30%;"><label>Pekerjaan Saat Ini</label><input type="text" id="ak_pekerjaan" placeholder="Cth: Tidak Bekerja / Menganggur"></div>
|
|
<div style="flex: 1 1 100%; display:flex; align-items:flex-end; gap: 5px;">
|
|
<button id="btnSimpanAnggota" class="btn-info" style="margin:0; width:auto; padding: 10px 20px;" onclick="simpanAnggota(${id_penduduk}, '${nama_kk}')">Simpan Anggota</button>
|
|
<button id="btnBatalEdit" class="btn-secondary" style="margin:0; width:auto; padding: 10px 20px; display:none;" onclick="bukaModalKeluarga(${id_penduduk}, '${nama_kk}')">Batal Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
window.siapkanEditAnggota = function(id, nik, nama, tgl, pendidikan, pekerjaan) {
|
|
document.getElementById('ak_id_edit').value = id; document.getElementById('ak_nik').value = nik; document.getElementById('ak_nama').value = nama; document.getElementById('ak_tgl').value = tgl; document.getElementById('ak_pendidikan').value = pendidikan; document.getElementById('ak_pekerjaan').value = pekerjaan;
|
|
document.getElementById('formAnggotaTitle').innerText = "✏️ Edit Data Anggota Keluarga"; document.getElementById('formContainerAnggota').style.backgroundColor = "#fef9e7"; document.getElementById('formContainerAnggota').style.borderColor = "#f1c40f";
|
|
let btnSimpan = document.getElementById('btnSimpanAnggota'); btnSimpan.innerText = "Update Data Anggota"; btnSimpan.style.backgroundColor = "#f39c12"; document.getElementById('btnBatalEdit').style.display = "block";
|
|
}
|
|
|
|
window.simpanAnggota = async function(id_penduduk, nama_kk) {
|
|
let id_edit = document.getElementById('ak_id_edit').value;
|
|
const fd = new FormData(); if(id_edit) fd.append('id_anggota', id_edit);
|
|
fd.append('id_penduduk', id_penduduk); fd.append('nik', document.getElementById('ak_nik').value); fd.append('nama_lengkap', document.getElementById('ak_nama').value); fd.append('tanggal_lahir', document.getElementById('ak_tgl').value); fd.append('pendidikan_terakhir', document.getElementById('ak_pendidikan').value); fd.append('pekerjaan', document.getElementById('ak_pekerjaan').value);
|
|
|
|
if(!fd.get('nik') || !fd.get('nama_lengkap') || !fd.get('tanggal_lahir') || !fd.get('pekerjaan')) { alert("Lengkapi semua data!"); return; }
|
|
const r = await fetch(id_edit ? 'api/anggota/update_anggota_keluarga.php' : 'api/anggota/tambah_anggota_keluarga.php', { method: 'POST', body: fd });
|
|
if((await r.json()).status === 'success') { alert(id_edit ? "Berhasil diperbarui!" : "Berhasil ditambah!"); bukaModalKeluarga(id_penduduk, nama_kk); } else { alert("Gagal menyimpan."); }
|
|
}
|
|
|
|
window.hapusAnggota = async function(id_anggota, id_penduduk, nama_kk) {
|
|
if(confirm("Yakin ingin menghapus anggota ini?")) {
|
|
const r = await fetch(`api/anggota/hapus_anggota_keluarga.php?id=${id_anggota}`);
|
|
if((await r.json()).status === 'success') bukaModalKeluarga(id_penduduk, nama_kk);
|
|
}
|
|
}
|
|
|
|
window.daftarkanPelatihan = async function(id_anggota, id_penduduk, nama_kk) {
|
|
let id_pel = document.getElementById('sel_pelatihan_' + id_anggota).value; if(!id_pel) return;
|
|
if(confirm("Daftarkan anggota ini ke pelatihan?")) {
|
|
const fd = new FormData(); fd.append('id_anggota', id_anggota); fd.append('id_pelatihan', id_pel);
|
|
const r = await fetch('api/transaksi/tambah_log_pelatihan.php', { method: 'POST', body: fd });
|
|
if((await r.json()).status === 'success') alert("Berhasil didaftarkan!"); else alert("Gagal didaftarkan");
|
|
}
|
|
}
|
|
|
|
// --- FUNGSI BANTUAN & MUSIBAH ---
|
|
window.bukaFormMusibah = function(id_penduduk, lat, lng) {
|
|
map.closePopup();
|
|
L.popup().setLatLng([lat, lng]).setContent(`
|
|
<div class="popup-content"><div class="popup-title" style="color:#c0392b;">🚨 Lapor Musibah Darurat</div>
|
|
<label>Jenis Musibah</label><select id="m_jenis"><option value="Kebakaran">Kebakaran</option><option value="Sakit Keras">Sakit Keras</option><option value="Kematian">Kematian</option><option value="Kecelakaan">Kecelakaan</option><option value="Bencana Alam">Bencana Alam</option><option value="Lainnya">Lainnya</option></select>
|
|
<label>Deskripsi Kejadian</label><textarea id="m_deskripsi" rows="3" style="width:100%; border:1px solid #ccc; border-radius:4px;"></textarea>
|
|
<button class="btn-danger" style="margin-top:10px;" onclick="simpanLaporanMusibah(${id_penduduk})">Simpan Laporan Darurat</button>
|
|
</div>`).openOn(map);
|
|
}
|
|
|
|
window.simpanLaporanMusibah = async function(id_penduduk) {
|
|
let deskripsi = document.getElementById('m_deskripsi').value; if(!deskripsi.trim()) { alert("Isi deskripsi!"); return; }
|
|
const fd = new FormData(); fd.append('id_penduduk', id_penduduk); fd.append('id_ibadah', ADMIN_ID_IBADAH); fd.append('jenis_musibah', document.getElementById('m_jenis').value); fd.append('deskripsi', deskripsi);
|
|
const res = await (await fetch('api/transaksi/tambah_musibah.php', { method: 'POST', body: fd })).json();
|
|
if(res.status === 'success') { alert("Berhasil dicatat!"); location.reload(); } else { alert("Gagal."); }
|
|
}
|
|
|
|
window.bukaFormBantuan = function(id_penduduk, status, lat, lng, id_musibah = null) {
|
|
map.closePopup();
|
|
let beras = 0, minyak = 0, gula = 0, telur = 0, susu = 0, uang = 0;
|
|
if (status.includes("SANGAT MISKIN")) { beras = 10; minyak = 2; gula = 2; telur = 2; susu = 3; uang = 300000; }
|
|
else if (status.includes("MISKIN (P2)")) { beras = 5; minyak = 2; gula = 1; telur = 1; susu = 2; uang = 150000; }
|
|
else if (status.includes("RENTAN MISKIN")) { beras = 5; minyak = 1; gula = 1; telur = 0; susu = 1; uang = 0; }
|
|
|
|
L.popup().setLatLng([lat, lng]).setContent(`
|
|
<div class="popup-content" style="min-width: 280px;">
|
|
<div class="popup-title">Catat Penyaluran Bantuan</div>
|
|
<div style="background-color: #e8f8f5; border-left: 4px solid #27ae60; padding: 8px; margin-bottom: 12px; font-size: 0.85rem; border-radius: 2px;">Rekomendasi Kategori: <b>${status}</b></div>
|
|
<div style="display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;">
|
|
<div style="flex: 1 1 45%;"><label>Beras (kg)</label><input type="number" id="b_beras" value="${beras}"></div>
|
|
<div style="flex: 1 1 45%;"><label>Minyak (L)</label><input type="number" id="b_minyak" value="${minyak}"></div>
|
|
<div style="flex: 1 1 45%;"><label>Gula (kg)</label><input type="number" id="b_gula" value="${gula}"></div>
|
|
<div style="flex: 1 1 45%;"><label>Telur (kg)</label><input type="number" id="b_telur" value="${telur}"></div>
|
|
<div style="flex: 1 1 45%;"><label>Susu (Kaleng)</label><input type="number" id="b_susu" value="${susu}"></div>
|
|
<div style="flex: 1 1 45%;"><label>Tunai (Rp)</label><input type="number" id="b_uang" value="${uang}"></div>
|
|
</div>
|
|
<label>Catatan Opsional</label><input type="text" id="b_catatan" placeholder="Cth: Disesuaikan...">
|
|
<button class="btn-save" onclick="simpanLogBantuan(${id_penduduk}, ${id_musibah})">Simpan Log</button>
|
|
</div>`).openOn(map);
|
|
}
|
|
|
|
window.simpanLogBantuan = async function(id_penduduk, id_musibah) {
|
|
const fd = new FormData();
|
|
fd.append('id_penduduk', id_penduduk); fd.append('id_ibadah', ADMIN_ID_IBADAH);
|
|
if (id_musibah !== null && id_musibah !== undefined) { fd.append('id_musibah', id_musibah); }
|
|
fd.append('beras_kg', document.getElementById('b_beras').value); fd.append('minyak_l', document.getElementById('b_minyak').value);
|
|
fd.append('gula_kg', document.getElementById('b_gula').value); fd.append('telur_kg', document.getElementById('b_telur').value);
|
|
fd.append('susu_kaleng', document.getElementById('b_susu').value); fd.append('uang_tunai', document.getElementById('b_uang').value);
|
|
fd.append('catatan', document.getElementById('b_catatan').value);
|
|
|
|
const res = await (await fetch('api/transaksi/tambah_log_bantuan.php', { method: 'POST', body: fd })).json();
|
|
if (res.status === 'success') { alert("Berhasil dicatat!"); location.reload(); } else { alert("Gagal menyimpan."); }
|
|
}
|
|
|
|
// --- FUNGSI MODAL LEBAR (Riwayat Bantuan & Pelatihan) ---
|
|
window.lihatRiwayat = async function(id_penduduk, nama_kk, lat, lng) {
|
|
map.closePopup();
|
|
document.getElementById('rbModalTitle').innerText = "📜 Riwayat Penyaluran Bantuan: Keluarga " + nama_kk;
|
|
document.getElementById('riwayatBantuanModal').style.display = "block";
|
|
document.getElementById('rbModalBody').innerHTML = `<p style="text-align:center;">Memuat data riwayat...</p>`;
|
|
|
|
try {
|
|
const data = await (await fetch(`api/transaksi/get_log_bantuan.php?id_penduduk=${id_penduduk}`)).json();
|
|
let tableRows = '';
|
|
if(data.length > 0) {
|
|
data.forEach(log => {
|
|
let catatanTeks = (log.catatan !== undefined && log.catatan !== null && log.catatan !== '') ? log.catatan : '-';
|
|
tableRows += `
|
|
<tr>
|
|
<td style="width: 15%; font-weight: bold;">${log.tanggal_penyaluran}</td>
|
|
<td style="width: 25%; font-style: italic; color: #555;">${catatanTeks}</td>
|
|
<td style="line-height: 1.8;">
|
|
<b>Beras:</b> ${log.beras_kg} Kg; <b>Minyak:</b> ${log.minyak_l} L; <b>Gula:</b> ${log.gula_kg} Kg <br>
|
|
<b>Telur:</b> ${log.telur_kg} Kg; <b>Susu:</b> ${log.susu_kaleng} Kaleng; <b>Uang:</b> Rp${log.uang_tunai}
|
|
</td>
|
|
</tr>`;
|
|
});
|
|
} else { tableRows = `<tr><td colspan="3" style="text-align:center; padding: 15px;">Belum ada riwayat.</td></tr>`; }
|
|
|
|
document.getElementById('rbModalBody').innerHTML = `
|
|
<div style="max-height: 50vh; overflow-y: auto;">
|
|
<table class="history-table" style="width: 100%;">
|
|
<thead><tr><th>Tanggal</th><th>Catatan / Topik</th><th>Rincian Item Penyaluran</th></tr></thead>
|
|
<tbody>${tableRows}</tbody>
|
|
</table>
|
|
</div>`;
|
|
} catch (e) { document.getElementById('rbModalBody').innerHTML = `<p style="text-align:center; color:red;">Gagal memuat data.</p>`; }
|
|
}
|
|
|
|
window.lihatLogPelatihan = async function(id_penduduk, nama_kk, lat, lng) {
|
|
map.closePopup();
|
|
document.getElementById('rpModalTitle').innerText = "🎓 Riwayat Pelatihan: Keluarga " + nama_kk;
|
|
document.getElementById('riwayatPelatihanModal').style.display = "block";
|
|
document.getElementById('rpModalBody').innerHTML = `<p style="text-align:center;">Memuat data riwayat pelatihan...</p>`;
|
|
|
|
try {
|
|
const data = await (await fetch(`api/transaksi/get_log_pelatihan.php?id_penduduk=${id_penduduk}`)).json();
|
|
let tableRows = '';
|
|
if(data.length > 0) {
|
|
data.forEach(log => {
|
|
let statusColor = log.status_kelulusan === 'Lulus' ? 'color: #27ae60;' : (log.status_kelulusan === 'Sedang Berjalan' ? 'color: #f39c12;' : 'color: #c0392b;');
|
|
tableRows += `
|
|
<tr>
|
|
<td style="width: 35%;"><b>${log.nama_lengkap}</b><br><small style="color:#7f8c8d;">Daftar: ${log.tanggal_daftar}</small></td>
|
|
<td style="width: 45%;">${log.nama_pelatihan}<br><small>Oleh: ${log.penyelenggara}</small></td>
|
|
<td style="width: 20%; font-weight:bold; ${statusColor}">${log.status_kelulusan}</td>
|
|
</tr>`;
|
|
});
|
|
} else { tableRows = `<tr><td colspan="3" style="text-align:center; padding: 15px;">Belum ada riwayat.</td></tr>`; }
|
|
|
|
document.getElementById('rpModalBody').innerHTML = `
|
|
<div style="max-height: 50vh; overflow-y: auto;">
|
|
<table class="history-table" style="width: 100%;">
|
|
<thead><tr><th>Nama Anggota</th><th>Program Pelatihan</th><th>Status</th></tr></thead>
|
|
<tbody>${tableRows}</tbody>
|
|
</table>
|
|
</div>`;
|
|
} catch (error) { document.getElementById('rpModalBody').innerHTML = `<p style="text-align:center; color:red;">Gagal memuat log.</p>`; }
|
|
}
|
|
|
|
// --- FUNGSI SUPER ADMIN KHUSUS ---
|
|
window.updateGarisKemiskinan = async function() {
|
|
let newVal = document.getElementById('input_gk').value;
|
|
if(!newVal || newVal < 100000) { alert("Masukkan nilai yang valid!"); return; }
|
|
const fd = new FormData(); fd.append('garis_kemiskinan', newVal);
|
|
await fetch('api/sistem/update_pengaturan.php', { method: 'POST', body: fd });
|
|
alert("Garis Kemiskinan berhasil diperbarui!"); location.reload();
|
|
}
|
|
|
|
window.bukaModalMasterPelatihan = async function() {
|
|
document.getElementById('masterPelatihanModal').style.display = "block";
|
|
memuatDaftarMasterPelatihan();
|
|
}
|
|
|
|
window.memuatDaftarMasterPelatihan = async function() {
|
|
try {
|
|
const res = await fetch('api/transaksi/get_master_pelatihan.php');
|
|
const data = await res.json();
|
|
let html = `<table class="history-table"><thead><tr><th>Nama Pelatihan</th><th>Penyelenggara</th><th>Periode</th></tr></thead><tbody>`;
|
|
if(data.length > 0) {
|
|
data.forEach(p => {
|
|
html += `<tr><td><b>${p.nama_pelatihan}</b></td><td>${p.penyelenggara}</td><td>${p.tanggal_mulai} s/d ${p.tanggal_selesai}</td></tr>`;
|
|
});
|
|
} else { html += `<tr><td colspan="3" style="text-align:center;">Belum ada program aktif.</td></tr>`; }
|
|
html += `</tbody></table>`;
|
|
document.getElementById('listMasterPelatihan').innerHTML = html;
|
|
} catch(e) { document.getElementById('listMasterPelatihan').innerHTML = "Gagal memuat data."; }
|
|
}
|
|
|
|
window.simpanMasterPelatihan = async function() {
|
|
const fd = new FormData();
|
|
fd.append('nama_pelatihan', document.getElementById('mp_nama').value);
|
|
fd.append('penyelenggara', document.getElementById('mp_instansi').value);
|
|
fd.append('tanggal_mulai', document.getElementById('mp_mulai').value);
|
|
fd.append('tanggal_selesai', document.getElementById('mp_selesai').value);
|
|
fd.append('deskripsi', document.getElementById('mp_deskripsi').value);
|
|
|
|
if(!fd.get('nama_pelatihan') || !fd.get('tanggal_mulai')) { alert("Data tidak lengkap!"); return; }
|
|
const res = await (await fetch('api/transaksi/tambah_master_pelatihan.php', { method: 'POST', body: fd })).json();
|
|
if(res.status === 'success') { alert("Berhasil ditambahkan!"); memuatDaftarMasterPelatihan(); } else { alert("Gagal: " + res.pesan); }
|
|
}
|
|
|
|
function tampilkanFormIbadah(layerOrId, id, nama, jenis, radius, alamat, mode) {
|
|
const formHtml = `<div class="popup-content"><div class="popup-title">${mode === 'tambah' ? 'Tambah' : 'Edit'} Tempat Ibadah</div><label>Nama Institusi</label><input type="text" id="i_nama" value="${nama}"><label>Jenis</label><select id="i_jenis"><option value="Masjid" ${jenis==='Masjid'?'selected':''}>Masjid</option><option value="Gereja Katolik" ${jenis==='Gereja Katolik'?'selected':''}>Gereja Katolik</option><option value="Gereja Protestan" ${jenis==='Gereja Protestan'?'selected':''}>Gereja Protestan</option><option value="Vihara" ${jenis==='Vihara'?'selected':''}>Vihara</option><option value="Pura" ${jenis==='Pura'?'selected':''}>Pura</option><option value="Klenteng" ${jenis==='Klenteng'?'selected':''}>Klenteng</option></select><label>Radius Pelayanan (Meter)</label><input type="number" id="i_radius" value="${radius}"><label>Alamat</label><input type="text" id="i_alamat" value="${alamat}"><button class="btn-save" onclick="simpanIbadah(${id}, '${mode}')">Simpan Institusi</button></div>`;
|
|
if (mode === 'tambah') layerOrId.setPopupContent(formHtml); else L.popup().setLatLng([tempLat, tempLng]).setContent(formHtml).openOn(map);
|
|
}
|
|
window.editIbadah = function(id, nama, jenis, radius, alamat, lat, lng) { tempLat = lat; tempLng = lng; map.closePopup(); tampilkanFormIbadah(null, id, nama, jenis, radius, alamat, 'edit'); }
|
|
window.simpanIbadah = async function(id, mode) {
|
|
const fd = new FormData(); if (mode === 'edit') fd.append('id', id);
|
|
fd.append('latitude', tempLat); fd.append('longitude', tempLng); fd.append('nama', document.getElementById('i_nama').value); fd.append('jenis', document.getElementById('i_jenis').value); fd.append('radius', document.getElementById('i_radius').value); fd.append('alamat', document.getElementById('i_alamat').value);
|
|
await fetch(mode === 'tambah' ? 'api/ibadah/tambah_ibadah.php' : 'api/ibadah/update_ibadah.php', { method: 'POST', body: fd }); location.reload();
|
|
}
|
|
window.hapusIbadah = async function(id) { if (confirm("Hapus Institusi ini?")) { await fetch(`api/ibadah/hapus_ibadah.php?id=${id}`); location.reload(); } }
|
|
|
|
// Memulai Aplikasi setelah semua kode siap
|
|
initWebGIS(); |