Abimanyu Ridho
233 lines
10 KiB
JavaScript
233 lines
10 KiB
JavaScript
const persilCfg = {
|
|
SHM: { color: '#16a34a', label: 'Sertifikat Hak Milik' },
|
|
HGB: { color: '#2563eb', label: 'Hak Guna Bangunan' },
|
|
HGU: { color: '#d97706', label: 'Hak Guna Usaha' },
|
|
HP: { color: '#7c3aed', label: 'Hak Pakai' }
|
|
};
|
|
|
|
function renderPersilPanel(pb) {
|
|
return callAPI('data_persil.php').then(res => {
|
|
const data = res.data || [];
|
|
const cnt = k => data.filter(d => d.jenis_hak === k).length;
|
|
|
|
pb.innerHTML = `
|
|
<div class="layer-section">
|
|
<div class="layer-section-title">Filter Layer</div>
|
|
${Object.entries(persilCfg).map(([k, v]) => `
|
|
<div class="layer-item ${layerVisible['persil' + k] ? 'checked' : ''}" onclick="toggleLayer('persil${k}',this)">
|
|
<div class="layer-check">${layerVisible['persil' + k] ? '✓' : ''}</div>
|
|
<div class="layer-dot" style="background:${v.color}"></div>
|
|
<div class="layer-label">${k} — ${v.label}</div>
|
|
<div class="layer-count">${cnt(k)}</div>
|
|
</div>`).join('')}
|
|
</div>
|
|
<div class="layer-section">
|
|
<div class="layer-section-title">Tambah Data</div>
|
|
<button class="btn-add" onclick="startDrawPersil()">+ Tambah Persil</button>
|
|
</div>
|
|
<div class="layer-section">
|
|
<div class="layer-section-title">Data Persil (${data.length})</div>
|
|
<div class="data-list">
|
|
${data.length ? data.map(d => `
|
|
<div class="data-item" onclick="focusGeom(${d.id},'persil')">
|
|
<div class="item-icon">📐</div>
|
|
<div class="item-info">
|
|
<div class="item-name">${esc(d.nama_pemilik)}</div>
|
|
<div class="item-sub">${d.luas_m2.toFixed(1)} m² · ${d.no_sertifikat || '—'}</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:5px">
|
|
<div class="item-badge" style="background:${persilCfg[d.jenis_hak].color}18;color:${persilCfg[d.jenis_hak].color};border:1px solid ${persilCfg[d.jenis_hak].color}44">${d.jenis_hak}</div>
|
|
<button class="btn btn-ghost btn-sm" onclick="event.stopPropagation();editPersil(${d.id})">✏</button>
|
|
<button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deletePersil(${d.id})">✕</button>
|
|
</div>
|
|
</div>`).join('') : '<div class="loading">Belum ada data persil</div>'}
|
|
</div>
|
|
</div>`;
|
|
loadPersilLayer(data);
|
|
registerSearchEntries('persil', data.map(d => ({
|
|
key: `persil:${d.id}`,
|
|
label: d.nama_pemilik,
|
|
subtitle: `Persil ${d.jenis_hak} · ${d.luas_m2.toFixed(1)} m²${d.no_sertifikat ? ` · ${d.no_sertifikat}` : ''}`,
|
|
typeLabel: 'Persil',
|
|
icon: '📐',
|
|
searchText: normalizeSearchText(`${d.nama_pemilik} ${d.jenis_hak} persil tanah`),
|
|
focus: () => focusGeom(d.id, 'persil')
|
|
})));
|
|
updateStatusCount();
|
|
});
|
|
}
|
|
|
|
function loadPersilLayer(data) {
|
|
['SHM', 'HGB', 'HGU', 'HP'].forEach(k => layers['persil' + k].clearLayers());
|
|
data.forEach(d => {
|
|
const cfg = persilCfg[d.jenis_hak], coords = d.geojson.coordinates[0].map(c => [c[1], c[0]]);
|
|
const poly = L.polygon(coords, { color: cfg.color, fillColor: cfg.color, fillOpacity: 0.18, weight: 2 })
|
|
.bindPopup(`<h4>📐 ${esc(d.nama_pemilik)}</h4>
|
|
<p><b>Jenis Hak:</b> ${d.jenis_hak} — ${cfg.label}</p>
|
|
<p><b>Luas:</b> ${d.luas_m2.toFixed(2)} m² (${(d.luas_m2 / 10000).toFixed(4)} ha)</p>
|
|
${d.no_sertifikat ? `<p><b>No. Sertifikat:</b> ${d.no_sertifikat}</p>` : ''}
|
|
${d.keterangan ? `<p>${esc(d.keterangan)}</p>` : ''}
|
|
<div class="popup-actions"><button class="btn btn-ghost btn-sm" onclick="editPersil(${d.id})">✏ Edit</button><button class="btn btn-danger btn-sm" onclick="deletePersil(${d.id})">✕ Hapus</button></div>`);
|
|
poly._dataId = d.id;
|
|
poly._groupKey = 'persil' + d.jenis_hak;
|
|
layers['persil' + d.jenis_hak].addLayer(poly);
|
|
});
|
|
}
|
|
|
|
function openPersilForm() {
|
|
openModal('Simpan Persil Tanah', `
|
|
<div class="form-calc">📐 Luas: <b>${pendingArea.toFixed(2)} m²</b> = ${(pendingArea / 10000).toFixed(4)} ha </div>
|
|
<div class="form-group"><label class="form-label">Nama Pemilik *</label>
|
|
<input class="form-input" id="ps-nama" placeholder="Budi Santoso…"/></div>
|
|
<div class="form-row">
|
|
<div class="form-group"><label class="form-label">Jenis Hak *</label>
|
|
<select class="form-select" id="ps-hak">
|
|
<option value="SHM">SHM — Hak Milik</option>
|
|
<option value="HGB">HGB — Guna Bangunan</option>
|
|
<option value="HGU">HGU — Guna Usaha</option>
|
|
<option value="HP">HP — Hak Pakai</option>
|
|
</select></div>
|
|
<div class="form-group"><label class="form-label">No. Sertifikat</label>
|
|
<input class="form-input" id="ps-sert" placeholder="00001/Kel/…"/></div>
|
|
</div>
|
|
<div class="form-group"><label class="form-label">Keterangan</label>
|
|
<input class="form-input" id="ps-ket" placeholder="Opsional…"/></div>`,
|
|
`<button class="btn btn-ghost" onclick="closeModal();drawnItems.clearLayers()">Batal</button>
|
|
<button class="btn btn-primary" onclick="savePersil()">💾 Simpan</button>`);
|
|
}
|
|
|
|
async function savePersil() {
|
|
const body = {
|
|
nama_pemilik: document.getElementById('ps-nama').value.trim(),
|
|
jenis_hak: document.getElementById('ps-hak').value,
|
|
no_sertifikat: document.getElementById('ps-sert').value,
|
|
luas_m2: pendingArea,
|
|
keterangan: document.getElementById('ps-ket').value,
|
|
geojson: pendingGeoJSON
|
|
};
|
|
if (!body.nama_pemilik) return toast('Nama wajib diisi', 'error');
|
|
const res = await callAPI('data_persil.php', 'POST', body);
|
|
if (res.status === 'success') {
|
|
toast(res.message, 'success');
|
|
closeModal();
|
|
drawnItems.clearLayers();
|
|
pendingGeoJSON = null;
|
|
pendingArea = null;
|
|
switchTab('persil');
|
|
} else {
|
|
toast(res.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function editPersil(id) {
|
|
map.closePopup();
|
|
const res = await callAPI(`data_persil.php?id=${id}`);
|
|
const data = res.data;
|
|
const sourceLayer = findGeomLayer('persil', id);
|
|
if (!data) return toast('Data persil tidak ditemukan', 'error');
|
|
|
|
const groupKey = getGeometryGroupKey('persil', data);
|
|
const editLayer = sourceLayer ? cloneEditableLayer('persil', sourceLayer) : buildGeometryLayer('persil', data);
|
|
editLayer._dataId = id;
|
|
editLayer._groupKey = groupKey;
|
|
|
|
if (sourceLayer) layers[groupKey].removeLayer(sourceLayer);
|
|
drawnItems.clearLayers();
|
|
drawnItems.addLayer(editLayer);
|
|
|
|
geometryEditState = { type: 'persil', id, groupKey, sourceLayer, editLayer };
|
|
if (editLayer.editing && editLayer.editing.enable) {
|
|
editLayer.editing.enable();
|
|
} else {
|
|
const handler = getGeometryEditHandler();
|
|
if (!handler) {
|
|
drawnItems.clearLayers();
|
|
if (sourceLayer) layers[groupKey].addLayer(sourceLayer);
|
|
geometryEditState = null;
|
|
return toast('Mode edit geometri belum siap', 'error');
|
|
}
|
|
handler.enable();
|
|
}
|
|
map.fitBounds(editLayer.getBounds(), { padding: [50, 50], duration: 1 });
|
|
document.getElementById('panel-title').textContent = 'Edit Persil Tanah';
|
|
document.getElementById('panel-body').innerHTML = `
|
|
<div class="layer-section">
|
|
<div class="layer-section-title">Edit Persil</div>
|
|
<div style="font-size:11px;line-height:1.7;color:var(--text2);padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px">
|
|
Geser titik-titik batas bidang di peta lalu simpan perubahan.
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Nama Pemilik *</label>
|
|
<input class="form-input" id="ps-edit-nama" value="${esc(data.nama_pemilik)}" />
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Jenis Hak *</label>
|
|
<select class="form-select" id="ps-edit-hak">
|
|
${Object.entries(persilCfg).map(([k, v]) => `<option value="${k}"${data.jenis_hak === k ? ' selected' : ''}>${k} — ${v.label}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Luas Otomatis</label>
|
|
<input class="form-input" id="ps-edit-luas" value="${data.luas_m2.toFixed(2)} m²" disabled />
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">No. Sertifikat</label>
|
|
<input class="form-input" id="ps-edit-sert" value="${esc(data.no_sertifikat || '')}" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Keterangan</label>
|
|
<input class="form-input" id="ps-edit-ket" value="${esc(data.keterangan || '')}" />
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
document.getElementById('panel-body').insertAdjacentHTML('beforeend', `
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn btn-ghost" style="flex:1" onclick="cancelGeometryEdit()">Batal</button>
|
|
<button class="btn btn-primary" style="flex:1" onclick="savePersilEdit(${id})">Simpan Perubahan</button>
|
|
</div>`);
|
|
}
|
|
|
|
async function savePersilEdit(id) {
|
|
const state = geometryEditState;
|
|
if (!state || state.type !== 'persil') return;
|
|
const layer = state.editLayer;
|
|
const ringLatLngs = layer.getLatLngs()[0];
|
|
const ring = ringLatLngs.map(ll => [ll.lng, ll.lat]);
|
|
ring.push([ringLatLngs[0].lng, ringLatLngs[0].lat]);
|
|
const luas_m2 = turf.area(turf.polygon([ring]));
|
|
const body = {
|
|
nama_pemilik: document.getElementById('ps-edit-nama').value.trim(),
|
|
jenis_hak: document.getElementById('ps-edit-hak').value,
|
|
no_sertifikat: document.getElementById('ps-edit-sert').value,
|
|
luas_m2,
|
|
keterangan: document.getElementById('ps-edit-ket').value,
|
|
geojson: { type: 'Polygon', coordinates: [ring] }
|
|
};
|
|
if (!body.nama_pemilik) return toast('Nama wajib diisi', 'error');
|
|
const res = await callAPI(`data_persil.php?id=${id}`, 'PUT', body);
|
|
if (res.status === 'success') {
|
|
toast(res.message, 'success');
|
|
if (layer.editing && layer.editing.disable) layer.editing.disable();
|
|
const handler = getGeometryEditHandler();
|
|
if (handler) handler.disable();
|
|
drawnItems.clearLayers();
|
|
geometryEditState = null;
|
|
switchTab('persil');
|
|
} else {
|
|
toast(res.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function deletePersil(id) {
|
|
if (!confirm('Hapus?')) return;
|
|
const r = await callAPI(`data_persil.php?id=${id}`, 'DELETE');
|
|
if (r.status === 'success') {
|
|
toast('Dihapus', 'success');
|
|
map.closePopup();
|
|
switchTab('persil');
|
|
}
|
|
}
|