z0rayy
1172 lines
40 KiB
JavaScript
1172 lines
40 KiB
JavaScript
// ============================================
|
|
// app.js — Main Application Logic
|
|
// ============================================
|
|
|
|
// ------- API Endpoints -------
|
|
const API = {
|
|
SPBU: {
|
|
READ: 'backend/read.php',
|
|
CREATE: 'backend/create.php',
|
|
UPDATE: 'backend/update.php',
|
|
DELETE: 'backend/delete.php'
|
|
},
|
|
JALAN: {
|
|
READ: 'backend/read_jalan.php',
|
|
CREATE: 'backend/create_jalan.php',
|
|
UPDATE: 'backend/update_jalan.php',
|
|
DELETE: 'backend/delete_jalan.php'
|
|
},
|
|
PARSIL: {
|
|
READ: 'backend/read_parsil.php',
|
|
CREATE: 'backend/create_parsil.php',
|
|
UPDATE: 'backend/update_parsil.php',
|
|
DELETE: 'backend/delete_parsil.php'
|
|
},
|
|
IBADAH: {
|
|
READ: 'backend/read_ibadah.php',
|
|
CREATE: 'backend/create_ibadah.php',
|
|
UPDATE: 'backend/update_ibadah.php',
|
|
DELETE: 'backend/delete_ibadah.php'
|
|
},
|
|
MISKIN: {
|
|
READ: 'backend/read_miskin.php',
|
|
CREATE: 'backend/create_miskin.php',
|
|
UPDATE: 'backend/update_miskin.php',
|
|
DELETE: 'backend/delete_miskin.php'
|
|
}
|
|
};
|
|
|
|
// ------- Global State -------
|
|
window.appState = {
|
|
data: {
|
|
spbu: [],
|
|
jalan: [],
|
|
parsil: [],
|
|
ibadah: [],
|
|
miskin: []
|
|
},
|
|
currentPanel: 'panel-map',
|
|
editingId: null,
|
|
editingType: null,
|
|
mapInstance: null,
|
|
layers: {}
|
|
};
|
|
|
|
// ============================================
|
|
// Map Toolbar — Global Functions (called via onclick in HTML)
|
|
// ============================================
|
|
|
|
window._mapClickMode = null;
|
|
|
|
window.mapToolActivatePoint = function(type, label) {
|
|
window._mapClickMode = type;
|
|
document.querySelectorAll('.map-tool-btn').forEach(b => b.classList.remove('active'));
|
|
const btn = document.getElementById('map-add-' + type);
|
|
if (btn) btn.classList.add('active');
|
|
const status = document.getElementById('map-tool-status');
|
|
const cancel = document.getElementById('map-tool-cancel');
|
|
if (status) {
|
|
status.style.display = 'block';
|
|
status.innerHTML = '📍 Klik lokasi di peta<br><small>untuk tambah <b>' + label + '</b></small>';
|
|
}
|
|
if (cancel) cancel.style.display = 'block';
|
|
const inst = window.appState.mapInstance;
|
|
if (inst) inst.getContainer().style.cursor = 'crosshair';
|
|
};
|
|
|
|
window.mapToolActivateDraw = function(type) {
|
|
const inst = window.appState.mapInstance;
|
|
document.querySelectorAll('.map-tool-btn').forEach(b => b.classList.remove('active'));
|
|
const btn = document.getElementById('map-add-' + type);
|
|
if (btn) btn.classList.add('active');
|
|
const status = document.getElementById('map-tool-status');
|
|
const cancel = document.getElementById('map-tool-cancel');
|
|
if (inst && inst.pm && typeof inst.pm.enableDraw === 'function') {
|
|
inst.pm.enableDraw(type === 'jalan' ? 'Line' : 'Polygon');
|
|
if (status) {
|
|
status.style.display = 'block';
|
|
status.innerHTML = type === 'jalan'
|
|
? '✏️ Gambar garis<br><small>Klik tiap titik, double-klik selesai</small>'
|
|
: '✏️ Gambar area<br><small>Klik tiap sudut, double-klik selesai</small>';
|
|
}
|
|
if (cancel) cancel.style.display = 'block';
|
|
} else {
|
|
if (type === 'jalan') openAddJalanModal();
|
|
else openAddParsilModal();
|
|
}
|
|
};
|
|
|
|
window.mapToolCancel = function() {
|
|
window._mapClickMode = null;
|
|
document.querySelectorAll('.map-tool-btn').forEach(b => b.classList.remove('active'));
|
|
const status = document.getElementById('map-tool-status');
|
|
const cancel = document.getElementById('map-tool-cancel');
|
|
if (status) status.style.display = 'none';
|
|
if (cancel) cancel.style.display = 'none';
|
|
const inst = window.appState.mapInstance;
|
|
if (inst) {
|
|
inst.getContainer().style.cursor = '';
|
|
if (inst.pm && typeof inst.pm.disableDraw === 'function') inst.pm.disableDraw();
|
|
}
|
|
};
|
|
|
|
// ============================================
|
|
// Utility Functions
|
|
// ============================================
|
|
|
|
function showToast(message, type = 'info', duration = 3000) {
|
|
const container = document.getElementById('toast-container');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast toast-${type}`;
|
|
|
|
const icon = {
|
|
success: '✓',
|
|
error: '✗',
|
|
info: 'i',
|
|
warning: '!'
|
|
}[type] || 'i';
|
|
|
|
toast.innerHTML = `<span class="toast-icon">${icon}</span><span>${message}</span>`;
|
|
|
|
container.appendChild(toast);
|
|
setTimeout(() => toast.classList.add('show'), 10);
|
|
|
|
setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, duration);
|
|
}
|
|
|
|
function showModal(modalId) {
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.add('show');
|
|
}
|
|
}
|
|
|
|
function hideModal(modalId) {
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.remove('show');
|
|
}
|
|
}
|
|
|
|
function switchPanel(panelId) {
|
|
// Hide all panels
|
|
document.querySelectorAll('.content-panel').forEach(p => {
|
|
p.classList.remove('active');
|
|
});
|
|
|
|
// Deactivate all sidebar items
|
|
document.querySelectorAll('.sidebar-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
|
|
// Show selected panel
|
|
const panel = document.getElementById(panelId);
|
|
if (panel) {
|
|
panel.classList.add('active');
|
|
|
|
// Mark sidebar item as active
|
|
const sidebarItem = document.querySelector(`[data-panel="${panelId}"]`);
|
|
if (sidebarItem) {
|
|
sidebarItem.classList.add('active');
|
|
}
|
|
}
|
|
|
|
// Update page title
|
|
const sidebarItem = document.querySelector(`[data-panel="${panelId}"]`);
|
|
if (sidebarItem) {
|
|
const title = sidebarItem.querySelector('.sidebar-item-text')?.textContent || 'Dashboard';
|
|
document.getElementById('page-title').textContent = title;
|
|
document.getElementById('breadcrumb-text').textContent = title;
|
|
}
|
|
|
|
window.appState.currentPanel = panelId;
|
|
}
|
|
|
|
// ============================================
|
|
// Data Loading & Management
|
|
// ============================================
|
|
|
|
async function loadAllData() {
|
|
try {
|
|
const [spbuRes, jalanRes, parsilRes, ibadahRes, miskinRes] = await Promise.all([
|
|
fetch(API.SPBU.READ),
|
|
fetch(API.JALAN.READ),
|
|
fetch(API.PARSIL.READ),
|
|
fetch(API.IBADAH.READ),
|
|
fetch(API.MISKIN.READ)
|
|
]);
|
|
|
|
const spbuData = await spbuRes.json();
|
|
const jalanData = await jalanRes.json();
|
|
const parsilData = await parsilRes.json();
|
|
const ibadahData = await ibadahRes.json();
|
|
const miskinData = await miskinRes.json();
|
|
|
|
window.appState.data.spbu = spbuData.success ? spbuData.data : [];
|
|
window.appState.data.jalan = jalanData.success ? jalanData.data : [];
|
|
window.appState.data.parsil = parsilData.success ? parsilData.data : [];
|
|
window.appState.data.ibadah = ibadahData.success ? ibadahData.data : [];
|
|
window.appState.data.miskin = miskinData.success ? miskinData.data : [];
|
|
|
|
updateBadges();
|
|
updateAnalytics();
|
|
renderTables();
|
|
renderMapLayers();
|
|
} catch (err) {
|
|
console.error('Error loading data:', err);
|
|
showToast('Gagal memuat data', 'error');
|
|
}
|
|
}
|
|
|
|
function updateBadges() {
|
|
document.getElementById('badge-spbu').textContent = window.appState.data.spbu.length;
|
|
document.getElementById('badge-jalan').textContent = window.appState.data.jalan.length;
|
|
document.getElementById('badge-parsil').textContent = window.appState.data.parsil.length;
|
|
document.getElementById('badge-ibadah').textContent = window.appState.data.ibadah.length;
|
|
document.getElementById('badge-miskin').textContent = window.appState.data.miskin.length;
|
|
|
|
const totalData = window.appState.data.spbu.length +
|
|
window.appState.data.jalan.length +
|
|
window.appState.data.parsil.length +
|
|
window.appState.data.ibadah.length +
|
|
window.appState.data.miskin.length;
|
|
|
|
document.getElementById('total-data-count').textContent = `${totalData} Data`;
|
|
}
|
|
|
|
function updateAnalytics() {
|
|
document.getElementById('stat-spbu').textContent = window.appState.data.spbu.length;
|
|
document.getElementById('stat-jalan').textContent = window.appState.data.jalan.length;
|
|
document.getElementById('stat-parsil').textContent = window.appState.data.parsil.length;
|
|
document.getElementById('stat-ibadah').textContent = window.appState.data.ibadah.length;
|
|
document.getElementById('stat-miskin').textContent = window.appState.data.miskin.length;
|
|
|
|
// Count SPBU 24 jam vs tidak
|
|
const spbu24 = window.appState.data.spbu.filter(s => s.status === '24jam').length;
|
|
const spbuTidak = window.appState.data.spbu.filter(s => s.status === 'tidak').length;
|
|
document.getElementById('stat-spbu-trend').textContent = `${spbu24} aktif 24jam`;
|
|
|
|
// Count jalan by type
|
|
const jalanNasional = window.appState.data.jalan.filter(j => j.status === 'Nasional').length;
|
|
document.getElementById('stat-jalan-trend').textContent = `${jalanNasional} Nasional`;
|
|
}
|
|
|
|
// ============================================
|
|
// Table Rendering
|
|
// ============================================
|
|
|
|
function renderTables() {
|
|
renderSPBUTable();
|
|
renderJalanTable();
|
|
renderParsilTable();
|
|
renderIbadahTable();
|
|
renderMiskinTable();
|
|
}
|
|
|
|
function renderSPBUTable(filter = 'all', search = '') {
|
|
const tbody = document.getElementById('table-spbu-body');
|
|
let data = window.appState.data.spbu;
|
|
|
|
if (filter !== 'all') {
|
|
data = data.filter(item => item.status === filter);
|
|
}
|
|
|
|
if (search) {
|
|
data = data.filter(item =>
|
|
item.nama.toLowerCase().includes(search.toLowerCase()) ||
|
|
item.no_spbu.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; color: var(--clr-muted); padding: 40px;">Tidak ada data</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = data.map(item => `
|
|
<tr>
|
|
<td><strong>${item.nama}</strong></td>
|
|
<td>${item.no_spbu}</td>
|
|
<td><span class="badge badge-${item.status === '24jam' ? 'success' : 'warning'}">${item.status === '24jam' ? '24 Jam' : 'Tidak 24 Jam'}</span></td>
|
|
<td>${item.latitude.toFixed(4)}, ${item.longitude.toFixed(4)}</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<button class="btn btn-sm" style="background: var(--clr-primary); color: white;" onclick="editSPBU(${item.id})">Edit</button>
|
|
<button class="btn btn-sm" style="background: var(--clr-danger); color: white;" onclick="deleteSPBU(${item.id})">Delete</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function renderJalanTable(filter = 'all', search = '') {
|
|
const tbody = document.getElementById('table-jalan-body');
|
|
let data = window.appState.data.jalan;
|
|
|
|
if (filter !== 'all') {
|
|
data = data.filter(item => item.status === filter);
|
|
}
|
|
|
|
if (search) {
|
|
data = data.filter(item => item.nama_jalan.toLowerCase().includes(search.toLowerCase()));
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: var(--clr-muted); padding: 40px;">Tidak ada data</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = data.map(item => `
|
|
<tr>
|
|
<td><strong>${item.nama_jalan}</strong></td>
|
|
<td><span class="badge badge-info">${item.status}</span></td>
|
|
<td>${item.panjang.toFixed(0)} m</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<button class="btn btn-sm" style="background: var(--clr-primary); color: white;" onclick="editJalan(${item.id})">Edit</button>
|
|
<button class="btn btn-sm" style="background: var(--clr-danger); color: white;" onclick="deleteJalan(${item.id})">Delete</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function renderParsilTable(filter = 'all', search = '') {
|
|
const tbody = document.getElementById('table-parsil-body');
|
|
let data = window.appState.data.parsil;
|
|
|
|
if (filter !== 'all') {
|
|
data = data.filter(item => item.status === filter);
|
|
}
|
|
|
|
if (search) {
|
|
data = data.filter(item => item.nama_pemilik.toLowerCase().includes(search.toLowerCase()));
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: var(--clr-muted); padding: 40px;">Tidak ada data</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = data.map(item => `
|
|
<tr>
|
|
<td><strong>${item.nama_pemilik}</strong></td>
|
|
<td><span class="badge badge-info">${item.status}</span></td>
|
|
<td>${item.luas.toFixed(0)} m2</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<button class="btn btn-sm" style="background: var(--clr-primary); color: white;" onclick="editParsil(${item.id})">Edit</button>
|
|
<button class="btn btn-sm" style="background: var(--clr-danger); color: white;" onclick="deleteParsil(${item.id})">Delete</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function renderIbadahTable(search = '') {
|
|
const tbody = document.getElementById('table-ibadah-body');
|
|
let data = window.appState.data.ibadah;
|
|
|
|
if (search) {
|
|
data = data.filter(item =>
|
|
item.nama.toLowerCase().includes(search.toLowerCase()) ||
|
|
item.alamat.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: var(--clr-muted); padding: 40px;">Tidak ada data</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = data.map(item => `
|
|
<tr>
|
|
<td><strong>${item.nama}</strong></td>
|
|
<td>${item.alamat.substring(0, 30)}...</td>
|
|
<td>${item.latitude.toFixed(4)}, ${item.longitude.toFixed(4)}</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<button class="btn btn-sm" style="background: var(--clr-primary); color: white;" onclick="editIbadah(${item.id})">Edit</button>
|
|
<button class="btn btn-sm" style="background: var(--clr-danger); color: white;" onclick="deleteIbadah(${item.id})">Delete</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
function renderMiskinTable(search = '') {
|
|
const tbody = document.getElementById('table-miskin-body');
|
|
let data = window.appState.data.miskin;
|
|
|
|
if (search) {
|
|
data = data.filter(item =>
|
|
item.nama_kk.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: var(--clr-muted); padding: 40px;">Tidak ada data</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = data.map(item => `
|
|
<tr>
|
|
<td><strong>${item.nama_kk}</strong></td>
|
|
<td>${item.keterangan || '-'}</td>
|
|
<td>${item.latitude.toFixed(4)}, ${item.longitude.toFixed(4)}</td>
|
|
<td>
|
|
<div class="table-actions">
|
|
<button class="btn btn-sm" style="background: var(--clr-primary); color: white;" onclick="editMiskin(${item.id})">Edit</button>
|
|
<button class="btn btn-sm" style="background: var(--clr-danger); color: white;" onclick="deleteMiskin(${item.id})">Delete</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
// ============================================
|
|
// CRUD Operations - SPBU
|
|
// ============================================
|
|
|
|
function openAddSPBUModal() {
|
|
document.getElementById('form-spbu-id').value = '';
|
|
document.getElementById('form-spbu-nama').value = '';
|
|
document.getElementById('form-spbu-no').value = '';
|
|
document.getElementById('form-spbu-status').value = '';
|
|
document.getElementById('form-spbu-lat').value = '';
|
|
document.getElementById('form-spbu-lng').value = '';
|
|
document.getElementById('modal-spbu-title').textContent = 'Add SPBU';
|
|
window.appState.editingId = null;
|
|
window.appState.editingType = 'spbu';
|
|
showModal('modal-spbu');
|
|
}
|
|
|
|
async function editSPBU(id) {
|
|
const item = window.appState.data.spbu.find(s => s.id == id);
|
|
if (!item) return;
|
|
|
|
document.getElementById('form-spbu-id').value = item.id;
|
|
document.getElementById('form-spbu-nama').value = item.nama;
|
|
document.getElementById('form-spbu-no').value = item.no_spbu;
|
|
document.getElementById('form-spbu-status').value = item.status;
|
|
document.getElementById('form-spbu-lat').value = item.latitude;
|
|
document.getElementById('form-spbu-lng').value = item.longitude;
|
|
document.getElementById('modal-spbu-title').textContent = 'Edit SPBU';
|
|
window.appState.editingId = id;
|
|
window.appState.editingType = 'spbu';
|
|
showModal('modal-spbu');
|
|
}
|
|
|
|
async function saveSPBU() {
|
|
const id = document.getElementById('form-spbu-id').value;
|
|
const nama = document.getElementById('form-spbu-nama').value;
|
|
const no_spbu = document.getElementById('form-spbu-no').value;
|
|
const status = document.getElementById('form-spbu-status').value;
|
|
const latitude = parseFloat(document.getElementById('form-spbu-lat').value);
|
|
const longitude = parseFloat(document.getElementById('form-spbu-lng').value);
|
|
|
|
if (!nama || !no_spbu || !status || !latitude || !longitude) {
|
|
showToast('Silakan isi semua field', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const payload = { nama, no_spbu, status, latitude, longitude };
|
|
const endpoint = id ? API.SPBU.UPDATE : API.SPBU.CREATE;
|
|
if (id) payload.id = id;
|
|
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast(id ? 'SPBU updated successfully' : 'SPBU created successfully', 'success');
|
|
hideModal('modal-spbu');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error saving SPBU', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error saving SPBU', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteSPBU(id) {
|
|
if (!confirm('Are you sure you want to delete this SPBU?')) return;
|
|
|
|
try {
|
|
const res = await fetch(API.SPBU.DELETE, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id })
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast('SPBU deleted successfully', 'success');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error deleting SPBU', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error deleting SPBU', 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// CRUD Operations - JALAN
|
|
// ============================================
|
|
|
|
function openAddJalanModal() {
|
|
document.getElementById('form-jalan-id').value = '';
|
|
document.getElementById('form-jalan-nama').value = '';
|
|
document.getElementById('form-jalan-status').value = '';
|
|
document.getElementById('form-jalan-panjang').value = '';
|
|
document.getElementById('form-jalan-geom').value = '';
|
|
document.getElementById('modal-jalan-title').textContent = 'Add Jalan';
|
|
showModal('modal-jalan');
|
|
}
|
|
|
|
async function editJalan(id) {
|
|
const item = window.appState.data.jalan.find(j => j.id == id);
|
|
if (!item) return;
|
|
|
|
document.getElementById('form-jalan-id').value = item.id;
|
|
document.getElementById('form-jalan-nama').value = item.nama_jalan;
|
|
document.getElementById('form-jalan-status').value = item.status;
|
|
document.getElementById('form-jalan-panjang').value = item.panjang;
|
|
document.getElementById('form-jalan-geom').value = item.geom;
|
|
document.getElementById('modal-jalan-title').textContent = 'Edit Jalan';
|
|
showModal('modal-jalan');
|
|
}
|
|
|
|
async function saveJalan() {
|
|
const id = document.getElementById('form-jalan-id').value;
|
|
const nama_jalan = document.getElementById('form-jalan-nama').value;
|
|
const status = document.getElementById('form-jalan-status').value;
|
|
const panjang = parseFloat(document.getElementById('form-jalan-panjang').value);
|
|
const geom = document.getElementById('form-jalan-geom').value;
|
|
|
|
if (!nama_jalan || !status || !panjang || !geom) {
|
|
showToast('Silakan isi semua field', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const payload = { nama_jalan, status, panjang, geom };
|
|
const endpoint = id ? API.JALAN.UPDATE : API.JALAN.CREATE;
|
|
if (id) payload.id = id;
|
|
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast(id ? 'Jalan updated successfully' : 'Jalan created successfully', 'success');
|
|
hideModal('modal-jalan');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error saving Jalan', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error saving Jalan', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteJalan(id) {
|
|
if (!confirm('Are you sure you want to delete this Jalan?')) return;
|
|
|
|
try {
|
|
const res = await fetch(API.JALAN.DELETE, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id })
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast('Jalan deleted successfully', 'success');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error deleting Jalan', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error deleting Jalan', 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// CRUD Operations - PARSIL
|
|
// ============================================
|
|
|
|
function openAddParsilModal() {
|
|
document.getElementById('form-parsil-id').value = '';
|
|
document.getElementById('form-parsil-nama').value = '';
|
|
document.getElementById('form-parsil-status').value = '';
|
|
document.getElementById('form-parsil-luas').value = '';
|
|
document.getElementById('form-parsil-geom').value = '';
|
|
document.getElementById('modal-parsil-title').textContent = 'Add Parsil';
|
|
showModal('modal-parsil');
|
|
}
|
|
|
|
async function editParsil(id) {
|
|
const item = window.appState.data.parsil.find(p => p.id == id);
|
|
if (!item) return;
|
|
|
|
document.getElementById('form-parsil-id').value = item.id;
|
|
document.getElementById('form-parsil-nama').value = item.nama_pemilik;
|
|
document.getElementById('form-parsil-status').value = item.status;
|
|
document.getElementById('form-parsil-luas').value = item.luas;
|
|
document.getElementById('form-parsil-geom').value = item.geom;
|
|
document.getElementById('modal-parsil-title').textContent = 'Edit Parsil';
|
|
showModal('modal-parsil');
|
|
}
|
|
|
|
async function saveParsil() {
|
|
const id = document.getElementById('form-parsil-id').value;
|
|
const nama_pemilik = document.getElementById('form-parsil-nama').value;
|
|
const status = document.getElementById('form-parsil-status').value;
|
|
const luas = parseFloat(document.getElementById('form-parsil-luas').value);
|
|
const geom = document.getElementById('form-parsil-geom').value;
|
|
|
|
if (!nama_pemilik || !status || !luas || !geom) {
|
|
showToast('Silakan isi semua field', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const payload = { nama_pemilik, status, luas, geom };
|
|
const endpoint = id ? API.PARSIL.UPDATE : API.PARSIL.CREATE;
|
|
if (id) payload.id = id;
|
|
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast(id ? 'Parsil updated successfully' : 'Parsil created successfully', 'success');
|
|
hideModal('modal-parsil');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error saving Parsil', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error saving Parsil', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteParsil(id) {
|
|
if (!confirm('Are you sure you want to delete this Parsil?')) return;
|
|
|
|
try {
|
|
const res = await fetch(API.PARSIL.DELETE, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id })
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast('Parsil deleted successfully', 'success');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error deleting Parsil', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error deleting Parsil', 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// CRUD Operations - IBADAH
|
|
// ============================================
|
|
|
|
function openAddIbadahModal() {
|
|
document.getElementById('form-ibadah-id').value = '';
|
|
document.getElementById('form-ibadah-nama').value = '';
|
|
document.getElementById('form-ibadah-alamat').value = '';
|
|
document.getElementById('form-ibadah-lat').value = '';
|
|
document.getElementById('form-ibadah-lng').value = '';
|
|
document.getElementById('modal-ibadah-title').textContent = 'Add Rumah Ibadah';
|
|
showModal('modal-ibadah');
|
|
}
|
|
|
|
async function editIbadah(id) {
|
|
const item = window.appState.data.ibadah.find(i => i.id == id);
|
|
if (!item) return;
|
|
|
|
document.getElementById('form-ibadah-id').value = item.id;
|
|
document.getElementById('form-ibadah-nama').value = item.nama;
|
|
document.getElementById('form-ibadah-alamat').value = item.alamat;
|
|
document.getElementById('form-ibadah-lat').value = item.latitude;
|
|
document.getElementById('form-ibadah-lng').value = item.longitude;
|
|
document.getElementById('modal-ibadah-title').textContent = 'Edit Rumah Ibadah';
|
|
showModal('modal-ibadah');
|
|
}
|
|
|
|
async function saveIbadah() {
|
|
const id = document.getElementById('form-ibadah-id').value;
|
|
const nama = document.getElementById('form-ibadah-nama').value;
|
|
const alamat = document.getElementById('form-ibadah-alamat').value;
|
|
const latitude = parseFloat(document.getElementById('form-ibadah-lat').value);
|
|
const longitude = parseFloat(document.getElementById('form-ibadah-lng').value);
|
|
|
|
if (!nama || !alamat || !latitude || !longitude) {
|
|
showToast('Silakan isi semua field', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const payload = { nama, alamat, latitude, longitude };
|
|
const endpoint = id ? API.IBADAH.UPDATE : API.IBADAH.CREATE;
|
|
if (id) payload.id = id;
|
|
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast(id ? 'Ibadah updated successfully' : 'Ibadah created successfully', 'success');
|
|
hideModal('modal-ibadah');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error saving Ibadah', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error saving Ibadah', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteIbadah(id) {
|
|
if (!confirm('Are you sure you want to delete this Rumah Ibadah?')) return;
|
|
|
|
try {
|
|
const res = await fetch(API.IBADAH.DELETE, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id })
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast('Ibadah deleted successfully', 'success');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error deleting Ibadah', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error deleting Ibadah', 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// CRUD Operations - MISKIN
|
|
// ============================================
|
|
|
|
function openAddMiskinModal() {
|
|
document.getElementById('form-miskin-id').value = '';
|
|
document.getElementById('form-miskin-nama').value = '';
|
|
document.getElementById('form-miskin-ket').value = '';
|
|
document.getElementById('form-miskin-lat').value = '';
|
|
document.getElementById('form-miskin-lng').value = '';
|
|
document.getElementById('modal-miskin-title').textContent = 'Add Penduduk Miskin';
|
|
showModal('modal-miskin');
|
|
}
|
|
|
|
async function editMiskin(id) {
|
|
const item = window.appState.data.miskin.find(m => m.id == id);
|
|
if (!item) return;
|
|
|
|
document.getElementById('form-miskin-id').value = item.id;
|
|
document.getElementById('form-miskin-nama').value = item.nama_kk;
|
|
document.getElementById('form-miskin-ket').value = item.keterangan || '';
|
|
document.getElementById('form-miskin-lat').value = item.latitude;
|
|
document.getElementById('form-miskin-lng').value = item.longitude;
|
|
document.getElementById('modal-miskin-title').textContent = 'Edit Penduduk Miskin';
|
|
showModal('modal-miskin');
|
|
}
|
|
|
|
async function saveMiskin() {
|
|
const id = document.getElementById('form-miskin-id').value;
|
|
const nama_kk = document.getElementById('form-miskin-nama').value;
|
|
const keterangan = document.getElementById('form-miskin-ket').value;
|
|
const latitude = parseFloat(document.getElementById('form-miskin-lat').value);
|
|
const longitude = parseFloat(document.getElementById('form-miskin-lng').value);
|
|
|
|
if (!nama_kk || !latitude || !longitude) {
|
|
showToast('Silakan isi field yang diperlukan', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const payload = { nama_kk, keterangan, latitude, longitude };
|
|
const endpoint = id ? API.MISKIN.UPDATE : API.MISKIN.CREATE;
|
|
if (id) payload.id = id;
|
|
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast(id ? 'Miskin updated successfully' : 'Miskin created successfully', 'success');
|
|
hideModal('modal-miskin');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error saving Miskin', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error saving Miskin', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteMiskin(id) {
|
|
if (!confirm('Are you sure you want to delete this Penduduk Miskin?')) return;
|
|
|
|
try {
|
|
const res = await fetch(API.MISKIN.DELETE, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id })
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
showToast('Miskin deleted successfully', 'success');
|
|
loadAllData();
|
|
} else {
|
|
showToast(result.message || 'Error deleting Miskin', 'error');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error:', err);
|
|
showToast('Error deleting Miskin', 'error');
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// Map Initialization & Rendering
|
|
// ============================================
|
|
|
|
function initMap() {
|
|
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap'
|
|
});
|
|
|
|
const map = L.map('map', {
|
|
center: [-0.0260, 109.3425],
|
|
zoom: 13,
|
|
zoomControl: true,
|
|
layers: [osm]
|
|
});
|
|
|
|
const baseMaps = {
|
|
"Standard (OSM)": osm,
|
|
"Dark": L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { maxZoom: 19 })
|
|
};
|
|
|
|
L.control.layers(baseMaps).addTo(map);
|
|
|
|
// Initialize Geoman Controls (only if Geoman library is loaded)
|
|
if (map.pm && typeof map.pm.addControls === 'function') {
|
|
map.pm.addControls({
|
|
position: 'topleft',
|
|
drawCircle: false,
|
|
drawCircleMarker: false,
|
|
drawText: false,
|
|
editMode: false,
|
|
dragMode: false,
|
|
cutPolygon: false,
|
|
removalMode: false
|
|
});
|
|
}
|
|
|
|
// ALWAYS set mapInstance — regardless of whether Geoman loaded
|
|
window.appState.mapInstance = map;
|
|
window.appState.layers = {
|
|
spbu24: L.layerGroup().addTo(map),
|
|
spbuTidak: L.layerGroup().addTo(map),
|
|
jalan: L.layerGroup().addTo(map),
|
|
parsil: L.layerGroup().addTo(map),
|
|
ibadah: L.layerGroup().addTo(map),
|
|
miskin: L.layerGroup().addTo(map)
|
|
};
|
|
|
|
// Map click handler — capture coordinates for toolbar point mode
|
|
map.on('click', function(e) {
|
|
if (!window._mapClickMode) return;
|
|
const lat = e.latlng.lat.toFixed(7);
|
|
const lng = e.latlng.lng.toFixed(7);
|
|
const mode = window._mapClickMode;
|
|
window.mapToolCancel(); // reset mode
|
|
if (mode === 'spbu') {
|
|
openAddSPBUModal();
|
|
setTimeout(function() {
|
|
var el1 = document.getElementById('form-spbu-lat');
|
|
var el2 = document.getElementById('form-spbu-lng');
|
|
if (el1) el1.value = lat;
|
|
if (el2) el2.value = lng;
|
|
}, 80);
|
|
} else if (mode === 'ibadah') {
|
|
openAddIbadahModal();
|
|
setTimeout(function() {
|
|
var el1 = document.getElementById('form-ibadah-lat');
|
|
var el2 = document.getElementById('form-ibadah-lng');
|
|
if (el1) el1.value = lat;
|
|
if (el2) el2.value = lng;
|
|
}, 80);
|
|
} else if (mode === 'miskin') {
|
|
openAddMiskinModal();
|
|
setTimeout(function() {
|
|
var el1 = document.getElementById('form-miskin-lat');
|
|
var el2 = document.getElementById('form-miskin-lng');
|
|
if (el1) el1.value = lat;
|
|
if (el2) el2.value = lng;
|
|
}, 80);
|
|
}
|
|
});
|
|
|
|
// Geoman pm:create handler (for line/polygon)
|
|
if (map.pm) {
|
|
map.on('pm:create', function(e) {
|
|
var layer = e.layer;
|
|
var shape = e.shape;
|
|
window.mapToolCancel();
|
|
if (shape === 'Line' || shape === 'Polyline') {
|
|
openAddJalanModal();
|
|
var gj = layer.toGeoJSON();
|
|
var geomEl = document.getElementById('form-jalan-geom');
|
|
if (geomEl) geomEl.value = JSON.stringify(gj.geometry);
|
|
var panjEl = document.getElementById('form-jalan-panjang');
|
|
if (panjEl && window.turf) panjEl.value = Math.round(turf.length(gj, { units: 'kilometers' }) * 1000);
|
|
} else if (shape === 'Polygon' || shape === 'Rectangle') {
|
|
openAddParsilModal();
|
|
var gj = layer.toGeoJSON();
|
|
var geomEl = document.getElementById('form-parsil-geom');
|
|
if (geomEl) geomEl.value = JSON.stringify(gj.geometry);
|
|
var luasEl = document.getElementById('form-parsil-luas');
|
|
if (luasEl && window.turf) luasEl.value = Math.round(turf.area(gj));
|
|
}
|
|
map.removeLayer(layer);
|
|
});
|
|
}
|
|
|
|
return map;
|
|
}
|
|
|
|
function renderMapLayers() {
|
|
const map = window.appState.mapInstance;
|
|
if (!map) return;
|
|
|
|
// Clear layers
|
|
Object.values(window.appState.layers).forEach(layer => layer.clearLayers());
|
|
|
|
// Render SPBU
|
|
window.appState.data.spbu.forEach(item => {
|
|
const is24 = item.status === '24jam';
|
|
const haloClass = is24 ? 'spbu' : 'spbu-off';
|
|
const customIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo ${haloClass}"></div><div class="marker-icon-inner">⛽</div>`,
|
|
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
|
|
});
|
|
|
|
const marker = L.marker([item.latitude, item.longitude], { icon: customIcon })
|
|
.bindPopup(`<strong>${item.nama}</strong><br>Status: ${is24 ? '24 Jam' : 'Tidak 24 Jam'}`);
|
|
|
|
const layer = item.status === '24jam' ? window.appState.layers.spbu24 : window.appState.layers.spbuTidak;
|
|
marker.addTo(layer);
|
|
});
|
|
|
|
// Render Jalan
|
|
window.appState.data.jalan.forEach(item => {
|
|
try {
|
|
const geom = JSON.parse(item.geom);
|
|
if (geom.coordinates) {
|
|
const colorMap = { 'Nasional': '#ef4444', 'Provinsi': '#eab308', 'Kabupaten': '#10b981' };
|
|
L.polyline(geom.coordinates, {
|
|
color: colorMap[item.status] || '#3b82f6',
|
|
weight: 3,
|
|
opacity: 0.7
|
|
}).bindPopup(`<strong>${item.nama_jalan}</strong><br>Status: ${item.status}<br>Panjang: ${item.panjang.toFixed(0)}m`).addTo(window.appState.layers.jalan);
|
|
}
|
|
} catch (e) {}
|
|
});
|
|
|
|
// Render Parsil
|
|
window.appState.data.parsil.forEach(item => {
|
|
try {
|
|
const geom = JSON.parse(item.geom);
|
|
if (geom.coordinates) {
|
|
const colorMap = { 'SHM': '#3b82f6', 'HGB': '#8b5cf6', 'HGU': '#ec4899', 'HP': '#14b8a6' };
|
|
L.polygon(geom.coordinates, {
|
|
color: colorMap[item.status] || '#3b82f6',
|
|
weight: 2,
|
|
opacity: 0.6,
|
|
fillOpacity: 0.4
|
|
}).bindPopup(`<strong>${item.nama_pemilik}</strong><br>Status: ${item.status}<br>Luas: ${item.luas.toFixed(0)}m2`).addTo(window.appState.layers.parsil);
|
|
}
|
|
} catch (e) {}
|
|
});
|
|
|
|
// Render Ibadah
|
|
window.appState.data.ibadah.forEach(item => {
|
|
const ibadahIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo ibadah"></div><div class="marker-icon-inner">🕌</div>`,
|
|
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
|
|
});
|
|
const marker = L.marker([item.latitude, item.longitude], { icon: ibadahIcon })
|
|
.bindPopup(`<strong>${item.nama}</strong><br>${item.alamat}`);
|
|
marker.addTo(window.appState.layers.ibadah);
|
|
});
|
|
|
|
// Render Miskin
|
|
window.appState.data.miskin.forEach(item => {
|
|
const miskinIcon = L.divIcon({
|
|
className: 'custom-marker',
|
|
html: `<div class="marker-halo miskin"></div><div class="marker-icon-inner">🏠</div>`,
|
|
iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14]
|
|
});
|
|
const marker = L.marker([item.latitude, item.longitude], { icon: miskinIcon })
|
|
.bindPopup(`<strong>${item.nama_kk}</strong><br>${item.keterangan || ''}`);
|
|
marker.addTo(window.appState.layers.miskin);
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// Event Listeners & Initialization
|
|
// ============================================
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initialize map
|
|
initMap();
|
|
|
|
// Sidebar navigation
|
|
document.querySelectorAll('[data-panel]').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const panelId = item.dataset.panel;
|
|
switchPanel(panelId);
|
|
});
|
|
});
|
|
|
|
// Sidebar toggle
|
|
document.getElementById('sidebar-toggle').addEventListener('click', () => {
|
|
document.querySelector('.sidebar').classList.toggle('collapsed');
|
|
});
|
|
|
|
// Modal close buttons
|
|
document.querySelectorAll('[data-modal]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const modalId = btn.dataset.modal;
|
|
hideModal(modalId);
|
|
});
|
|
});
|
|
|
|
// Modal overlay close
|
|
document.querySelectorAll('.modal-overlay').forEach(overlay => {
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) {
|
|
hideModal(overlay.id);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add buttons
|
|
document.getElementById('btn-add-spbu').addEventListener('click', openAddSPBUModal);
|
|
document.getElementById('btn-add-jalan').addEventListener('click', openAddJalanModal);
|
|
document.getElementById('btn-add-parsil').addEventListener('click', openAddParsilModal);
|
|
document.getElementById('btn-add-ibadah').addEventListener('click', openAddIbadahModal);
|
|
document.getElementById('btn-add-miskin').addEventListener('click', openAddMiskinModal);
|
|
|
|
// Save buttons
|
|
document.getElementById('btn-save-spbu').addEventListener('click', saveSPBU);
|
|
document.getElementById('btn-save-jalan').addEventListener('click', saveJalan);
|
|
document.getElementById('btn-save-parsil').addEventListener('click', saveParsil);
|
|
document.getElementById('btn-save-ibadah').addEventListener('click', saveIbadah);
|
|
document.getElementById('btn-save-miskin').addEventListener('click', saveMiskin);
|
|
|
|
// Search and filter - SPBU
|
|
document.getElementById('search-spbu').addEventListener('input', (e) => {
|
|
renderSPBUTable('all', e.target.value);
|
|
});
|
|
|
|
document.querySelectorAll('#panel-spbu .filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('#panel-spbu .filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
const search = document.getElementById('search-spbu').value;
|
|
renderSPBUTable(btn.dataset.filter, search);
|
|
});
|
|
});
|
|
|
|
// Search and filter - JALAN
|
|
document.getElementById('search-jalan').addEventListener('input', (e) => {
|
|
renderJalanTable('all', e.target.value);
|
|
});
|
|
|
|
document.querySelectorAll('#panel-jalan .filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('#panel-jalan .filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
const search = document.getElementById('search-jalan').value;
|
|
renderJalanTable(btn.dataset.filter, search);
|
|
});
|
|
});
|
|
|
|
// Search and filter - PARSIL
|
|
document.getElementById('search-parsil').addEventListener('input', (e) => {
|
|
renderParsilTable('all', e.target.value);
|
|
});
|
|
|
|
document.querySelectorAll('#panel-parsil .filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('#panel-parsil .filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
const search = document.getElementById('search-parsil').value;
|
|
renderParsilTable(btn.dataset.filter, search);
|
|
});
|
|
});
|
|
|
|
// Search - IBADAH
|
|
document.getElementById('search-ibadah').addEventListener('input', (e) => {
|
|
renderIbadahTable(e.target.value);
|
|
});
|
|
|
|
// Search - MISKIN
|
|
document.getElementById('search-miskin').addEventListener('input', (e) => {
|
|
renderMiskinTable(e.target.value);
|
|
});
|
|
|
|
// Load initial data
|
|
loadAllData();
|
|
|
|
showToast('Welcome to WebGIS SPBU System', 'info');
|
|
});
|