menambahkan fitur login dan edit data
This commit is contained in:
powji17
@@ -117,6 +117,8 @@ function perbaruiWarnaPrasejahtera() {
|
||||
|
||||
// --- MANAJEMEN MODE UI ---
|
||||
function ubahMode(mode) {
|
||||
if (ROLE === 'viewer') return;
|
||||
|
||||
console.log('Mode diklik:', mode, '| Mode saat ini:', currentMode); // ← tambah ini
|
||||
|
||||
if (currentMode === mode) {
|
||||
@@ -169,7 +171,10 @@ function ubahMode(mode) {
|
||||
function loadIbadah() {
|
||||
fetch('api/rumahibadah/load_ibadah.php').then(res => res.json()).then(data => {
|
||||
data.forEach(ib => {
|
||||
let marker = L.marker([ib.lat, ib.lng], { icon: buatIkonIbadah(ib.jenis), draggable: true })
|
||||
let marker = L.marker([ib.lat, ib.lng], {
|
||||
icon: buatIkonIbadah(ib.jenis),
|
||||
draggable: ROLE === 'admin' || ROLE === 'operator'
|
||||
})
|
||||
.addTo(layerIbadah);
|
||||
|
||||
// Lingkaran radius
|
||||
@@ -178,9 +183,27 @@ 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>
|
||||
<button onclick="hapusIbadah(${ib.id})" style="color:red; width:100%; cursor:pointer;">
|
||||
<i class="fa-solid fa-trash"></i> Hapus</button>`);
|
||||
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>`
|
||||
);
|
||||
|
||||
marker.on('dragend', function(e) {
|
||||
let pos = e.target.getLatLng();
|
||||
@@ -225,13 +248,29 @@ function loadDB() {
|
||||
${statusOrtuTeks}
|
||||
<b>Keterangan:</b> ${rumah.keterangan || '-'}<br>
|
||||
<hr style="margin: 5px 0;">
|
||||
<button onclick="hapusPrasejahtera(${rumah.id})" style="color: red; width: 100%; cursor:pointer; border:none; background:none;">
|
||||
<i class="fa-solid fa-trash"></i> Hapus Data
|
||||
</button>
|
||||
<div style="display:flex; gap:6px;">
|
||||
${ROLE === 'admin' || ROLE === 'operator' ? `
|
||||
<button onclick="editPrasejahtera(${rumah.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="hapusPrasejahtera(${rumah.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>
|
||||
`;
|
||||
|
||||
let marker = L.marker([rumah.lat, rumah.lng], { icon: ikonPrasejahtera, draggable: true })
|
||||
let marker = L.marker([rumah.lat, rumah.lng], {
|
||||
icon: ikonPrasejahtera,
|
||||
draggable: ROLE === 'admin' || ROLE === 'operator'
|
||||
})
|
||||
.addTo(layerPrasejahtera);
|
||||
marker.bindPopup(isiPopup);
|
||||
marker.on('dragend', function(e) {
|
||||
@@ -266,6 +305,8 @@ function refreshPeta() {
|
||||
|
||||
// --- EVENT KLIK PETA ---
|
||||
function onMapClick(e) {
|
||||
if (ROLE === 'viewer') return;
|
||||
|
||||
if (currentMode === 'point') {
|
||||
let formHtml = `
|
||||
<div style="width: 200px;">
|
||||
@@ -516,4 +557,221 @@ function toggleTerusan() {
|
||||
let ada = document.getElementById('ada_terusan').value;
|
||||
document.getElementById('grup_nominal_terusan').style.display = (ada === 'Ya') ? 'block' : 'none';
|
||||
if(ada === 'Tidak') document.getElementById('nominal_terusan').value = 0;
|
||||
}
|
||||
|
||||
// --- EDIT PRASEJAHTERA ---
|
||||
function editPrasejahtera(id) {
|
||||
fetch(`api/prasejahtera/get_prasejahtera.php?id=${id}`)
|
||||
.then(res => res.json())
|
||||
.then(d => {
|
||||
let formHtml = `
|
||||
<div style="width: 250px;">
|
||||
<h4 style="margin-top:0; border-bottom:1px solid #ddd; padding-bottom:5px;">
|
||||
<i class="fa-solid fa-pen-to-square"></i> Edit Data Prasejahtera
|
||||
</h4>
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Nama Kepala Keluarga:</label>
|
||||
<input type="text" id="edit_nama_kk" value="${d.nama_kepala_keluarga}"
|
||||
style="width:100%; margin-bottom:8px; padding:4px;">
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Jumlah Anak:</label>
|
||||
<input type="number" id="edit_jumlah_anak" value="${d.jumlah_anak}"
|
||||
style="width:100%; margin-bottom:8px; padding:4px;">
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Umur Anak (pisahkan dgn koma):</label>
|
||||
<input type="text" id="edit_umur_anak" value="${d.umur_anak || ''}"
|
||||
placeholder="Contoh: 15, 12, 8"
|
||||
style="width:100%; margin-bottom:8px; padding:4px;">
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Status Orang Tua:</label>
|
||||
<select id="edit_status_ortu" onchange="toggleEditStatusOrtu()"
|
||||
style="width:100%; margin-bottom:8px; padding:4px;">
|
||||
<option value="Bekerja" ${d.status_ortu === 'Bekerja' ? 'selected' : ''}>Bekerja</option>
|
||||
<option value="Pensiun" ${d.status_ortu === 'Pensiun' ? 'selected' : ''}>Pensiun</option>
|
||||
<option value="Meninggal" ${d.status_ortu === 'Meninggal' ? 'selected' : ''}>Meninggal Dunia</option>
|
||||
</select>
|
||||
|
||||
<div id="edit_grup_bekerja" style="display:${d.status_ortu === 'Bekerja' ? 'block' : 'none'};
|
||||
background:#e8f8f5; padding:5px; border-radius:4px; margin-bottom:8px;">
|
||||
<label style="font-size:12px; font-weight:bold;">Penghasilan/Bulan (Rp):</label>
|
||||
<input type="number" id="edit_penghasilan" value="${d.penghasilan || 0}"
|
||||
style="width:100%; padding:4px;">
|
||||
</div>
|
||||
|
||||
<div id="edit_grup_pensiun" style="display:${d.status_ortu === 'Pensiun' ? 'block' : 'none'};
|
||||
background:#fef9e7; padding:5px; border-radius:4px; margin-bottom:8px;">
|
||||
<label style="font-size:12px; font-weight:bold;">Ada Uang Pensiun?</label>
|
||||
<select id="edit_ada_pensiun" onchange="toggleEditPensiun()"
|
||||
style="width:100%; margin-bottom:5px; padding:4px;">
|
||||
<option value="Tidak" ${d.ada_pensiun === 'Tidak' ? 'selected' : ''}>Tidak Ada</option>
|
||||
<option value="Ya" ${d.ada_pensiun === 'Ya' ? 'selected' : ''}>Ya, Ada</option>
|
||||
</select>
|
||||
<div id="edit_grup_nominal_pensiun" style="display:${d.ada_pensiun === 'Ya' ? 'block' : 'none'};">
|
||||
<label style="font-size:12px; font-weight:bold;">Nominal Pensiun (Rp):</label>
|
||||
<input type="number" id="edit_nominal_pensiun" value="${d.nominal_pensiun || 0}"
|
||||
style="width:100%; padding:4px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="edit_grup_meninggal" style="display:${d.status_ortu === 'Meninggal' ? 'block' : 'none'};
|
||||
background:#fdedec; padding:5px; border-radius:4px; margin-bottom:8px;">
|
||||
<label style="font-size:12px; font-weight:bold;">Ada Uang Terusan?</label>
|
||||
<select id="edit_ada_terusan" onchange="toggleEditTerusan()"
|
||||
style="width:100%; margin-bottom:5px; padding:4px;">
|
||||
<option value="Tidak" ${d.ada_terusan === 'Tidak' ? 'selected' : ''}>Tidak Ada</option>
|
||||
<option value="Ya" ${d.ada_terusan === 'Ya' ? 'selected' : ''}>Ya, Ada</option>
|
||||
</select>
|
||||
<div id="edit_grup_nominal_terusan" style="display:${d.ada_terusan === 'Ya' ? 'block' : 'none'};">
|
||||
<label style="font-size:12px; font-weight:bold;">Nominal Terusan (Rp):</label>
|
||||
<input type="number" id="edit_nominal_terusan" value="${d.nominal_terusan || 0}"
|
||||
style="width:100%; padding:4px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Keterangan Tambahan:</label>
|
||||
<textarea id="edit_keterangan" style="width:100%; margin-bottom:10px; padding:4px;">${d.keterangan || ''}</textarea>
|
||||
|
||||
<button onclick="simpanEditPrasejahtera(${id})"
|
||||
style="width:100%; padding:8px; background:#2980b9; color:white;
|
||||
border:none; border-radius:4px; font-weight:bold; cursor:pointer;">
|
||||
<i class="fa-solid fa-save"></i> Simpan Perubahan
|
||||
</button>
|
||||
</div>`;
|
||||
|
||||
// Ganti konten popup yang sudah terbuka dengan form edit
|
||||
daftarMarker['p_' + id].getPopup().setContent(formHtml);
|
||||
})
|
||||
.catch(() => Toast.fire({ icon: 'error', title: 'Gagal memuat data!' }));
|
||||
}
|
||||
|
||||
function toggleEditStatusOrtu() {
|
||||
let status = document.getElementById('edit_status_ortu').value;
|
||||
document.getElementById('edit_grup_bekerja').style.display = status === 'Bekerja' ? 'block' : 'none';
|
||||
document.getElementById('edit_grup_pensiun').style.display = status === 'Pensiun' ? 'block' : 'none';
|
||||
document.getElementById('edit_grup_meninggal').style.display = status === 'Meninggal' ? 'block' : 'none';
|
||||
if (status !== 'Bekerja') document.getElementById('edit_penghasilan').value = 0;
|
||||
if (status !== 'Pensiun') { document.getElementById('edit_ada_pensiun').value = 'Tidak'; toggleEditPensiun(); }
|
||||
if (status !== 'Meninggal') { document.getElementById('edit_ada_terusan').value = 'Tidak'; toggleEditTerusan(); }
|
||||
}
|
||||
|
||||
function toggleEditPensiun() {
|
||||
let ada = document.getElementById('edit_ada_pensiun').value;
|
||||
document.getElementById('edit_grup_nominal_pensiun').style.display = ada === 'Ya' ? 'block' : 'none';
|
||||
if (ada === 'Tidak') document.getElementById('edit_nominal_pensiun').value = 0;
|
||||
}
|
||||
|
||||
function toggleEditTerusan() {
|
||||
let ada = document.getElementById('edit_ada_terusan').value;
|
||||
document.getElementById('edit_grup_nominal_terusan').style.display = ada === 'Ya' ? 'block' : 'none';
|
||||
if (ada === 'Tidak') document.getElementById('edit_nominal_terusan').value = 0;
|
||||
}
|
||||
|
||||
function simpanEditPrasejahtera(id) {
|
||||
let nama_kk = document.getElementById('edit_nama_kk').value.trim();
|
||||
if (!nama_kk) {
|
||||
Toast.fire({ icon: 'warning', title: 'Nama Kepala Keluarga wajib diisi!' });
|
||||
return;
|
||||
}
|
||||
|
||||
let dataKirim = {
|
||||
id: id,
|
||||
nama_kk: nama_kk,
|
||||
jumlah_anak: parseInt(document.getElementById('edit_jumlah_anak').value) || 0,
|
||||
umur_anak: document.getElementById('edit_umur_anak').value,
|
||||
status_ortu: document.getElementById('edit_status_ortu').value,
|
||||
penghasilan: parseInt(document.getElementById('edit_penghasilan').value) || 0,
|
||||
ada_pensiun: document.getElementById('edit_ada_pensiun').value,
|
||||
nominal_pensiun: parseInt(document.getElementById('edit_nominal_pensiun').value) || 0,
|
||||
ada_terusan: document.getElementById('edit_ada_terusan').value,
|
||||
nominal_terusan: parseInt(document.getElementById('edit_nominal_terusan').value) || 0,
|
||||
keterangan: document.getElementById('edit_keterangan').value
|
||||
};
|
||||
|
||||
fetch('api/prasejahtera/update_prasejahtera.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(dataKirim)
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
Toast.fire({ icon: 'success', title: 'Data Berhasil Diperbarui!' });
|
||||
map.closePopup();
|
||||
refreshPeta();
|
||||
} else {
|
||||
Toast.fire({ icon: 'error', title: 'Gagal: ' + (data.message || 'Error') });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- EDIT IBADAH ---
|
||||
function editIbadah(id) {
|
||||
fetch(`api/rumahibadah/get_ibadah.php?id=${id}`)
|
||||
.then(res => res.json())
|
||||
.then(d => {
|
||||
let jenisOptions = ['Masjid', 'Gereja', 'Vihara', 'Pura', 'Klenteng'].map(j =>
|
||||
`<option value="${j}" ${d.jenis === j ? 'selected' : ''}>${j}</option>`
|
||||
).join('');
|
||||
|
||||
let formHtml = `
|
||||
<div style="width: 220px;">
|
||||
<h4 style="margin-top:0; border-bottom:1px solid #ddd; padding-bottom:5px;">
|
||||
<i class="fa-solid fa-pen-to-square"></i> Edit Rumah Ibadah
|
||||
</h4>
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Jenis:</label>
|
||||
<select id="edit_jenis_ibadah" style="width:100%; margin-bottom:8px; padding:6px; box-sizing:border-box;">
|
||||
${jenisOptions}
|
||||
</select>
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Nama Rumah Ibadah:</label>
|
||||
<input type="text" id="edit_nama_ibadah" value="${d.nama_ibadah}"
|
||||
style="width:100%; margin-bottom:8px; padding:6px; box-sizing:border-box;">
|
||||
|
||||
<label style="font-size:12px; font-weight:bold;">Radius Bantuan (meter):</label>
|
||||
<input type="number" id="edit_radius_ibadah" value="${d.radius_m}"
|
||||
min="50" max="5000"
|
||||
style="width:100%; margin-bottom:12px; padding:6px; box-sizing:border-box;">
|
||||
|
||||
<button onclick="simpanEditIbadah(${id})"
|
||||
style="width:100%; padding:8px; background:#8e44ad; color:white;
|
||||
border:none; border-radius:4px; font-weight:bold; cursor:pointer;">
|
||||
<i class="fa-solid fa-save"></i> Simpan Perubahan
|
||||
</button>
|
||||
</div>`;
|
||||
|
||||
daftarMarker['ib_' + id].getPopup().setContent(formHtml);
|
||||
})
|
||||
.catch(() => Toast.fire({ icon: 'error', title: 'Gagal memuat data!' }));
|
||||
}
|
||||
|
||||
function simpanEditIbadah(id) {
|
||||
let nama = document.getElementById('edit_nama_ibadah').value.trim();
|
||||
if (!nama) {
|
||||
Toast.fire({ icon: 'warning', title: 'Nama Rumah Ibadah wajib diisi!' });
|
||||
return;
|
||||
}
|
||||
|
||||
let dataKirim = {
|
||||
id: id,
|
||||
nama_ibadah: nama,
|
||||
jenis: document.getElementById('edit_jenis_ibadah').value,
|
||||
radius_m: parseInt(document.getElementById('edit_radius_ibadah').value)
|
||||
};
|
||||
|
||||
fetch('api/rumahibadah/update_ibadah.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(dataKirim)
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
Toast.fire({ icon: 'success', title: 'Rumah Ibadah Diperbarui!' });
|
||||
map.closePopup();
|
||||
refreshPeta();
|
||||
} else {
|
||||
Toast.fire({ icon: 'error', title: 'Gagal: ' + (data.message || 'Error') });
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user