Abimanyu Ridho
225 lines
9.2 KiB
JavaScript
225 lines
9.2 KiB
JavaScript
function startAdd(type) {
|
|
cancelMapClick();
|
|
const btnId = type === 'ri' ? 'btn-add-ri' : 'btn-add-pm';
|
|
const label = type === 'ri' ? 'lokasi Rumah Ibadah' : 'lokasi Penduduk Miskin';
|
|
document.getElementById(btnId).classList.add('active');
|
|
showInstruction(`Klik di peta untuk menentukan ${label}`);
|
|
onceMapClick((lat, lng) => {
|
|
document.getElementById(btnId).classList.remove('active');
|
|
hideInstruction();
|
|
if (type === 'ri') openRIForm(null, lat, lng);
|
|
else openPMForm(null, lat, lng);
|
|
});
|
|
}
|
|
|
|
function openRIForm(data, lat, lng) {
|
|
const isEdit = !!data;
|
|
const fLat = isEdit ? data.latitude : lat;
|
|
const fLng = isEdit ? data.longitude : lng;
|
|
const isAdmin = window.currentUser && window.currentUser.role === 'admin';
|
|
const accountFieldsHTML = isAdmin ? `
|
|
<div style="margin-top:16px; border-top: 1px solid var(--line); padding-top:14px;">
|
|
<div class="layer-section-title">Akun Rumah Ibadah</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Username Rumah Ibadah</label>
|
|
<input class="form-input" id="ri-username" value="${esc(isEdit ? data.username || '' : '')}" placeholder="username_rumah_ibadah" autocomplete="off" readonly style="background-color:#f1f5f9;cursor:not-allowed;color:#64748b;"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Password Rumah Ibadah ${isEdit ? '(kosongkan jika tidak diubah)' : '*'}</label>
|
|
<input class="form-input" id="ri-password" type="password" placeholder="••••••••" autocomplete="new-password"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
` : '';
|
|
|
|
openModal(isEdit ? 'Edit Rumah Ibadah' : 'Tambah Rumah Ibadah', `
|
|
<div class="form-coord">📍 Koordinat: ${fLat.toFixed(7)}, ${fLng.toFixed(7)}</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Nama Rumah Ibadah *</label>
|
|
<input class="form-input" id="ri-nama" value="${esc(isEdit ? data.nama : '')}" placeholder="Masjid Al-Ikhlas…"/>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Jenis *</label>
|
|
<select class="form-select" id="ri-jenis">
|
|
${['Masjid', 'Gereja', 'Pura', 'Vihara', 'Klenteng', 'Lainnya'].map(j =>
|
|
`<option value="${j}"${isEdit && data.jenis === j ? ' selected' : ''}>${j}</option>`
|
|
).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Radius (meter) *</label>
|
|
<input class="form-input" id="ri-radius" type="number" value="${isEdit ? data.radius_meter : 500}" min="50" max="10000"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Alamat</label>
|
|
<input class="form-input" id="ri-alamat" value="${isEdit ? esc(data.alamat || '') : 'Memuat alamat otomatis...'}" placeholder="Jl. …"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">No. WhatsApp</label>
|
|
<input class="form-input" id="ri-nowa" value="${esc(isEdit ? data.no_wa || '' : '')}" placeholder="081234…"/>
|
|
</div>
|
|
${accountFieldsHTML}`,
|
|
`<button class="btn btn-ghost" onclick="closeModal()">Batal</button>
|
|
<button class="btn btn-primary" onclick="saveRI(${isEdit ? data.id : 'null'},${fLat},${fLng})">💾 Simpan</button>`);
|
|
|
|
// Attach dynamic username locking listener
|
|
if (isAdmin) {
|
|
const namaEl = document.getElementById('ri-nama');
|
|
const usernameEl = document.getElementById('ri-username');
|
|
if (namaEl && usernameEl) {
|
|
namaEl.addEventListener('input', () => {
|
|
usernameEl.value = namaEl.value
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]/g, '_')
|
|
.replace(/_+/g, '_')
|
|
.replace(/^_+|_+$/g, '');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Geocode address asynchronously
|
|
if (!isEdit) {
|
|
getAddressFromCoords(fLat, fLng).then(addr => {
|
|
const el = document.getElementById('ri-alamat');
|
|
if (el && el.value === 'Memuat alamat otomatis...') {
|
|
el.value = addr || '';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function saveRI(id, lat, lng) {
|
|
const usernameEl = document.getElementById('ri-username');
|
|
const passwordEl = document.getElementById('ri-password');
|
|
const body = {
|
|
nama: document.getElementById('ri-nama').value.trim(),
|
|
jenis: document.getElementById('ri-jenis').value,
|
|
alamat: document.getElementById('ri-alamat').value.trim(),
|
|
no_wa: document.getElementById('ri-nowa').value.trim(),
|
|
latitude: lat,
|
|
longitude: lng,
|
|
radius_meter: parseInt(document.getElementById('ri-radius').value),
|
|
username: usernameEl ? usernameEl.value.trim() : '',
|
|
password: passwordEl ? passwordEl.value : ''
|
|
};
|
|
if (!body.nama) return toast('Nama wajib diisi', 'error');
|
|
|
|
// Validate account password for new Rumah Ibadah
|
|
const isAdmin = window.currentUser && window.currentUser.role === 'admin';
|
|
if (isAdmin && !id) {
|
|
if (!body.username) return toast('Username Rumah Ibadah wajib terisi', 'error');
|
|
if (!body.password) return toast('Password Rumah Ibadah wajib diisi', 'error');
|
|
}
|
|
|
|
const res = await callAPI(id ? `rumah_ibadah.php?id=${id}` : 'rumah_ibadah.php', id ? 'PUT' : 'POST', body);
|
|
if (res.status === 'success') {
|
|
toast(res.message, 'success');
|
|
closeModal();
|
|
await recalcAllProximity();
|
|
switchTab('rumah_ibadah');
|
|
} else {
|
|
toast(res.message, 'error');
|
|
}
|
|
}
|
|
|
|
function openPMForm(data, lat, lng) {
|
|
const isEdit = !!data;
|
|
const fLat = isEdit ? data.latitude : lat;
|
|
const fLng = isEdit ? data.longitude : lng;
|
|
openModal(isEdit ? 'Edit Penduduk Miskin' : 'Tambah Penduduk Miskin', `
|
|
<div class="form-coord">📍 Koordinat: ${fLat.toFixed(7)}, ${fLng.toFixed(7)}</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Nama Lengkap *</label>
|
|
<input class="form-input" id="pm-nama" value="${esc(isEdit ? data.nama : '')}" placeholder="Ahmad Subarjo…"/>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">No. WhatsApp</label>
|
|
<input class="form-input" id="pm-nowa" value="${esc(isEdit ? data.no_wa || '' : '')}" placeholder="081234…"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">NIK</label>
|
|
<input class="form-input" id="pm-nik" value="${esc(isEdit ? data.nik || '' : '')}" placeholder="617101…"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Alamat</label>
|
|
<input class="form-input" id="pm-alamat" value="${isEdit ? esc(data.alamat || '') : 'Memuat alamat otomatis...'}" placeholder="Jl. …"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Jumlah Anggota Keluarga</label>
|
|
<input class="form-input" id="pm-jml" type="number" value="${isEdit ? data.jumlah_anggota : 1}" min="1" max="20"/>
|
|
</div>`,
|
|
`<button class="btn btn-ghost" onclick="closeModal()">Batal</button>
|
|
<button class="btn btn-primary" onclick="savePM(${isEdit ? data.id : 'null'},${fLat},${fLng})">💾 Simpan</button>`);
|
|
|
|
// Geocode address asynchronously
|
|
if (!isEdit) {
|
|
getAddressFromCoords(fLat, fLng).then(addr => {
|
|
const el = document.getElementById('pm-alamat');
|
|
if (el && el.value === 'Memuat alamat otomatis...') {
|
|
el.value = addr || '';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function savePM(id, lat, lng) {
|
|
const body = {
|
|
nama: document.getElementById('pm-nama').value.trim(),
|
|
no_wa: document.getElementById('pm-nowa').value.trim(),
|
|
nik: document.getElementById('pm-nik').value.trim(),
|
|
alamat: document.getElementById('pm-alamat').value.trim(),
|
|
jumlah_anggota: parseInt(document.getElementById('pm-jml').value) || 1,
|
|
latitude: lat,
|
|
longitude: lng
|
|
};
|
|
if (!body.nama) return toast('Nama wajib diisi', 'error');
|
|
const res = await callAPI(id ? `penduduk_miskin.php?id=${id}` : 'penduduk_miskin.php', id ? 'PUT' : 'POST', body);
|
|
if (res.status === 'success') {
|
|
toast(res.message, 'success');
|
|
closeModal();
|
|
switchTab('penduduk_miskin');
|
|
} else {
|
|
toast(res.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function editRI(id) {
|
|
map.closePopup();
|
|
const res = await callAPI(`rumah_ibadah.php?id=${id}`);
|
|
if (res.data) openRIForm(res.data, res.data.latitude, res.data.longitude);
|
|
}
|
|
|
|
async function deleteRI(id) {
|
|
if (!confirm('Hapus rumah ibadah ini?')) return;
|
|
const res = await callAPI(`rumah_ibadah.php?id=${id}`, 'DELETE');
|
|
if (res.status === 'success') {
|
|
toast('Dihapus', 'success');
|
|
map.closePopup();
|
|
await recalcAllProximity();
|
|
switchTab('rumah_ibadah');
|
|
}
|
|
}
|
|
|
|
async function editPM(id) {
|
|
map.closePopup();
|
|
const res = await callAPI(`penduduk_miskin.php?id=${id}`);
|
|
if (res.data) openPMForm(res.data, res.data.latitude, res.data.longitude);
|
|
}
|
|
|
|
async function deletePM(id) {
|
|
if (!confirm('Hapus data ini?')) return;
|
|
const res = await callAPI(`penduduk_miskin.php?id=${id}`, 'DELETE');
|
|
if (res.status === 'success') {
|
|
toast('Dihapus', 'success');
|
|
map.closePopup();
|
|
await recalcAllProximity();
|
|
switchTab('penduduk_miskin');
|
|
}
|
|
}
|
|
|
|
// Haversine formula — returns distance in meters between two lat/lng points
|