88 lines
4.6 KiB
JavaScript
88 lines
4.6 KiB
JavaScript
const RI = (() => {
|
|
let all = [], editId = null;
|
|
|
|
const DEMO = [
|
|
{ id:1, nama:"Masjid Jami' Pontianak", jenis:'Masjid', kecamatan:'Pontianak Timur', kontak:'0561-732001', radius_meter:350, jumlah_kk:3, jumlah_penduduk:8, lat:-0.02596, lng:109.34307 },
|
|
{ id:2, nama:'Gereja Katedral Pontianak', jenis:'Gereja', kecamatan:'Pontianak Selatan', kontak:'0561-766000', radius_meter:300, jumlah_kk:2, jumlah_penduduk:5, lat:-0.03200, lng:109.33200 },
|
|
{ id:3, nama:'Vihara Bodhisattva Karaniya Metta', jenis:'Vihara', kecamatan:'Pontianak Kota', kontak:'0561-733456', radius_meter:300, jumlah_kk:2, jumlah_penduduk:4, lat:-0.02100, lng:109.33800 },
|
|
{ id:4, nama:'Klenteng Kwan Ti Miau', jenis:'Klenteng', kecamatan:'Pontianak Kota', kontak:'0561-740123', radius_meter:280, jumlah_kk:1, jumlah_penduduk:2, lat:-0.01900, lng:109.34100 },
|
|
{ id:5, nama:'Masjid Mujahidin Pontianak', jenis:'Masjid', kecamatan:'Pontianak Selatan', kontak:'0561-764567', radius_meter:400, jumlah_kk:1, jumlah_penduduk:2, lat:-0.04800, lng:109.32500 },
|
|
{ id:6, nama:'Gereja GPIB Immanuel', jenis:'Gereja', kecamatan:'Pontianak Kota', kontak:'0561-735890', radius_meter:300, jumlah_kk:1, jumlah_penduduk:1, lat:-0.02800, lng:109.34500 },
|
|
];
|
|
|
|
const JENIS_EMOJI = { Masjid:'🕌', Gereja:'⛪', Vihara:'🛕', Pura:'🛕', Klenteng:'🏮', Lainnya:'🏛️' };
|
|
const JENIS_COLOR = { Masjid:'#06d6a0', Gereja:'#4cc9f0', Vihara:'#ffd166', Pura:'#f97316', Klenteng:'#b48eff', Lainnya:'#6b7a99' };
|
|
|
|
async function load() {
|
|
try { all = await Api.get('/rumah-ibadah'); } catch { all = DEMO; }
|
|
render(all);
|
|
}
|
|
|
|
function render(data) {
|
|
ge('ri-grid').innerHTML = data.map(r => `
|
|
<div class="ri-card" style="border-top:3px solid ${JENIS_COLOR[r.jenis]||'#6b7a99'}">
|
|
<div class="ri-icon-big">${JENIS_EMOJI[r.jenis]||'🏛️'}</div>
|
|
<div class="ri-name">${r.nama}</div>
|
|
<div class="ri-type">${r.jenis} · ${r.kecamatan||'—'}</div>
|
|
<div class="ri-stats">
|
|
<div class="ri-stat">
|
|
<div class="ri-stat-num" style="color:${JENIS_COLOR[r.jenis]}">${r.jumlah_kk||0}</div>
|
|
<div class="ri-stat-lbl">KK Binaan</div>
|
|
</div>
|
|
<div class="ri-stat">
|
|
<div class="ri-stat-num" style="color:var(--blue)">${r.jumlah_penduduk||0}</div>
|
|
<div class="ri-stat-lbl">Jiwa</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:11px;color:var(--muted);margin-bottom:10px">
|
|
📞 ${r.kontak||'—'} · ⭕ Radius ${r.radius_meter}m
|
|
</div>
|
|
${App.canEdit() ? `
|
|
<div style="display:flex;gap:6px">
|
|
<button class="btn btn-secondary btn-sm" style="flex:1" onclick="RI.showForm(${r.id})">✏️ Edit</button>
|
|
<button class="btn btn-danger btn-sm" onclick="RI.hapus(${r.id})">🗑</button>
|
|
</div>` : ''}
|
|
</div>`).join('');
|
|
}
|
|
|
|
async function showForm(id = null) {
|
|
editId = id;
|
|
ge('mri-title').textContent = id ? '✏️ Edit Rumah Ibadah' : '🕌 Tambah Rumah Ibadah';
|
|
if (id) {
|
|
const r = all.find(x => x.id == id) || {};
|
|
sv('fri-nama', r.nama); sv('fri-jenis', r.jenis);
|
|
sv('fri-radius', r.radius_meter||300); sv('fri-lat', r.lat);
|
|
sv('fri-lng', r.lng); sv('fri-kec', r.kecamatan);
|
|
sv('fri-kontak', r.kontak); sv('fri-alamat', r.alamat);
|
|
} else {
|
|
['fri-nama','fri-kec','fri-kontak','fri-alamat'].forEach(i => sv(i,''));
|
|
sv('fri-radius','300'); sv('fri-lat',''); sv('fri-lng','');
|
|
}
|
|
App.showModal('modal-ri');
|
|
}
|
|
|
|
async function save() {
|
|
if (!gv('fri-nama')) { App.toast('Nama wajib diisi','error'); return; }
|
|
if (!gv('fri-lat') || !gv('fri-lng')) { App.toast('Koordinat (lat/lng) wajib diisi','error'); return; }
|
|
const body = {
|
|
nama: gv('fri-nama'), jenis: gv('fri-jenis'),
|
|
radius_meter: +gv('fri-radius')||300,
|
|
lat: +gv('fri-lat'), lng: +gv('fri-lng'),
|
|
kecamatan: gv('fri-kec'), kontak: gv('fri-kontak'), alamat: gv('fri-alamat'),
|
|
};
|
|
try {
|
|
if (editId) { await Api.put(`/rumah-ibadah/${editId}`, body); App.toast('Data diperbarui ✅','success'); }
|
|
else { await Api.post('/rumah-ibadah', body); App.toast('Rumah ibadah ditambahkan ✅','success'); }
|
|
App.closeModal('modal-ri'); load();
|
|
} catch(e) { App.toast(e.message,'error'); }
|
|
}
|
|
|
|
async function hapus(id) {
|
|
if (!confirm('Nonaktifkan rumah ibadah ini?')) return;
|
|
try { await Api.delete(`/rumah-ibadah/${id}`); App.toast('Dinonaktifkan','success'); load(); }
|
|
catch(e) { App.toast(e.message,'error'); }
|
|
}
|
|
|
|
return { load, showForm, save, hapus, getAll: () => all };
|
|
})();
|