initial commit
This commit is contained in:
Abimanyu Ridho
@@ -0,0 +1,158 @@
|
||||
function renderSpbuPanel(pb) {
|
||||
return callAPI('spbu.php').then(res => {
|
||||
const data = res.data || [];
|
||||
const d24 = data.filter(s => s.buka_24jam);
|
||||
const dn24 = data.filter(s => !s.buka_24jam);
|
||||
|
||||
pb.innerHTML = `
|
||||
<div class="layer-section">
|
||||
<div class="layer-section-title">Filter Layer</div>
|
||||
${mkLayerItem('spbu24', '#16a34a', 'SPBU Buka 24 Jam', d24.length)}
|
||||
${mkLayerItem('spbuNon24', '#94a3b8', 'SPBU Tidak 24 Jam', dn24.length)}
|
||||
</div>
|
||||
<div class="layer-section">
|
||||
<div class="layer-section-title">Tambah Data</div>
|
||||
<button class="btn-add" id="btn-add-spbu" onclick="startAddSPBU()">＋ Tambah SPBU</button>
|
||||
</div>
|
||||
<div class="layer-section">
|
||||
<div class="layer-section-title">Daftar SPBU (${data.length})</div>
|
||||
<div class="data-list">
|
||||
${data.length ? data.map(s => `
|
||||
<div class="data-item" onclick="map.flyTo([${s.latitude},${s.longitude}],17)">
|
||||
<div class="item-icon">⛽</div>
|
||||
<div class="item-info">
|
||||
<div class="item-name">${esc(s.nama)}</div>
|
||||
<div class="item-sub">${s.no_wa || '—'}</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:5px">
|
||||
<div class="item-badge ${s.buka_24jam ? 'badge-green' : 'badge-amber'}">${s.buka_24jam ? '24 JAM' : 'TERBATAS'}</div>
|
||||
<button class="btn btn-ghost btn-sm" onclick="event.stopPropagation();editSPBU(${s.id})">✏</button>
|
||||
<button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteSPBU(${s.id})">✕</button>
|
||||
</div>
|
||||
</div>`).join('') : '<div class="loading">Belum ada data</div>'}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
loadSPBULayer(data);
|
||||
registerSearchEntries('spbu', data.map(s => ({
|
||||
key: `spbu:${s.id}`,
|
||||
label: s.nama,
|
||||
subtitle: `SPBU · ${s.buka_24jam ? '24 Jam' : 'Tidak 24 Jam'}${s.alamat ? ` · ${s.alamat}` : ''}`,
|
||||
typeLabel: 'SPBU',
|
||||
icon: '⛽',
|
||||
searchText: normalizeSearchText(`${s.nama} ${s.no_wa || ''} spbu`),
|
||||
focus: () => focusMarkerById(s.buka_24jam ? 'spbu24' : 'spbuNon24', s.id)
|
||||
})));
|
||||
updateStatusCount();
|
||||
});
|
||||
}
|
||||
|
||||
function loadSPBULayer(data) {
|
||||
layers.spbu24.clearLayers();
|
||||
layers.spbuNon24.clearLayers();
|
||||
data.forEach(s => {
|
||||
const is24 = s.buka_24jam;
|
||||
const color = is24 ? '#16a34a' : '#64748b';
|
||||
const icon = L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="width:30px;height:30px;background:${color};border:3px solid #fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.2);cursor:grab;">⛽</div>`,
|
||||
iconSize: [30, 30], iconAnchor: [15, 15]
|
||||
});
|
||||
const marker = L.marker([s.latitude, s.longitude], { icon, draggable: true }).bindPopup(`<h4>⛽ ${esc(s.nama)}</h4>
|
||||
<p><b>Status:</b> ${is24 ? '<span style="color:#16a34a;font-weight:600">✅ Buka 24 Jam</span>' : '⏰ Tidak 24 Jam'}</p>
|
||||
${s.no_wa ? `<p><b>WA:</b> ${s.no_wa}</p>` : ''}
|
||||
${s.alamat ? `<p><b>Alamat:</b> ${esc(s.alamat)}</p>` : ''}
|
||||
<div class="popup-drag-hint">↔ Seret marker untuk pindahkan lokasi — auto-save</div>
|
||||
<div class="popup-actions">
|
||||
<button class="btn btn-ghost btn-sm" onclick="editSPBU(${s.id})">✏ Edit</button>
|
||||
<button class="btn btn-danger btn-sm" onclick="deleteSPBU(${s.id})">✕ Hapus</button>
|
||||
</div>`);
|
||||
marker._dataId = s.id;
|
||||
|
||||
marker.on('dragend', async function (ev) {
|
||||
const { lat, lng } = ev.target.getLatLng();
|
||||
const res = await callAPI(`spbu.php?id=${s.id}`, 'PUT', {
|
||||
nama: s.nama, no_wa: s.no_wa, alamat: s.alamat,
|
||||
buka_24jam: s.buka_24jam, latitude: lat, longitude: lng
|
||||
});
|
||||
if (res.status === 'success') {
|
||||
s.latitude = lat;
|
||||
s.longitude = lng;
|
||||
toast(`📍 ${s.nama} dipindahkan`, 'success');
|
||||
} else {
|
||||
toast('Gagal update: ' + res.message, 'error');
|
||||
marker.setLatLng([s.latitude, s.longitude]);
|
||||
}
|
||||
});
|
||||
|
||||
is24 ? layers.spbu24.addLayer(marker) : layers.spbuNon24.addLayer(marker);
|
||||
});
|
||||
}
|
||||
|
||||
function startAddSPBU() {
|
||||
cancelMapClick();
|
||||
document.getElementById('btn-add-spbu').classList.add('active');
|
||||
showInstruction('Klik di peta untuk menentukan lokasi SPBU');
|
||||
onceMapClick((lat, lng) => {
|
||||
document.getElementById('btn-add-spbu').classList.remove('active');
|
||||
hideInstruction();
|
||||
openSPBUForm(null, lat, lng);
|
||||
});
|
||||
}
|
||||
|
||||
function openSPBUForm(data, lat, lng) {
|
||||
const isEdit = !!data;
|
||||
const fLat = isEdit ? data.latitude : lat;
|
||||
const fLng = isEdit ? data.longitude : lng;
|
||||
openModal(isEdit ? 'Edit SPBU' : 'Tambah SPBU', `
|
||||
<div class="form-coord">📍 Koordinat: ${fLat.toFixed(7)}, ${fLng.toFixed(7)}</div>
|
||||
<div class="form-group"><label class="form-label">Nama SPBU *</label>
|
||||
<input class="form-input" id="spbu-nama" value="${esc(isEdit ? data.nama : '')}" placeholder="SPBU 64.751.01"/></div>
|
||||
<div class="form-group"><label class="form-label">No. WhatsApp</label>
|
||||
<input class="form-input" id="spbu-nowa" value="${esc(isEdit ? data.no_wa || '' : '')}" placeholder="081234…"/></div>
|
||||
<div class="form-group"><label class="form-label">Alamat</label>
|
||||
<input class="form-input" id="spbu-alamat" value="${esc(isEdit ? data.alamat || '' : '')}" placeholder="Jl. …"/></div>
|
||||
<div class="form-group"><label class="form-label">Status Operasional</label>
|
||||
<select class="form-select" id="spbu-24">
|
||||
<option value="1"${isEdit && data.buka_24jam ? ' selected' : ''}>✅ Buka 24 Jam</option>
|
||||
<option value="0"${isEdit && !data.buka_24jam ? ' selected' : ''}>⏰ Tidak 24 Jam</option>
|
||||
</select></div>`,
|
||||
`<button class="btn btn-ghost" onclick="closeModal()">Batal</button>
|
||||
<button class="btn btn-primary" onclick="saveSPBU(${isEdit ? data.id : 'null'},${fLat},${fLng})">💾 Simpan</button>`);
|
||||
}
|
||||
|
||||
async function saveSPBU(id, lat, lng) {
|
||||
const body = {
|
||||
nama: document.getElementById('spbu-nama').value.trim(),
|
||||
no_wa: document.getElementById('spbu-nowa').value.trim(),
|
||||
alamat: document.getElementById('spbu-alamat').value.trim(),
|
||||
buka_24jam: document.getElementById('spbu-24').value === '1',
|
||||
latitude: lat,
|
||||
longitude: lng
|
||||
};
|
||||
if (!body.nama) return toast('Nama wajib diisi', 'error');
|
||||
const res = await callAPI(id ? `spbu.php?id=${id}` : 'spbu.php', id ? 'PUT' : 'POST', body);
|
||||
if (res.status === 'success') {
|
||||
toast(res.message, 'success');
|
||||
closeModal();
|
||||
switchTab('spbu');
|
||||
} else {
|
||||
toast(res.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function editSPBU(id) {
|
||||
map.closePopup();
|
||||
const r = await callAPI(`spbu.php?id=${id}`);
|
||||
if (r.data) openSPBUForm(r.data, r.data.latitude, r.data.longitude);
|
||||
}
|
||||
|
||||
async function deleteSPBU(id) {
|
||||
if (!confirm('Hapus SPBU?')) return;
|
||||
const r = await callAPI(`spbu.php?id=${id}`, 'DELETE');
|
||||
if (r.status === 'success') {
|
||||
toast('Dihapus', 'success');
|
||||
map.closePopup();
|
||||
switchTab('spbu');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user