Nelson_Davey/Poverty_Mapping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2nd commit: Pemisahan halaman autentifikasi dengan halaman utama, modifikasi ikon, dan pemisahakan fitur berdasarkan role

Browse Source
This commit is contained in:
NelsonDavey17
2026-06-12 22:45:38 +07:00
parent d556912ea5
commit 319a5c878f
15 changed files with 248 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+42 -63
View File
@@ -22,7 +22,7 @@ const state = {
// KUNCI AUTENTIKASI
user: null,
authMode: 'login' // 'login' atau 'register'
};
const dataStore = {
@@ -160,46 +160,6 @@ function triggerToastNotification(pesan) {
// ====================================================
// AUTENTIKASI: GATEKEEPER & SINKRONISASI SESI
// ====================================================
window.switchAuthTab = (mode) => {
state.authMode = mode;
document.getElementById('tab-login').classList.toggle('active', mode === 'login');
document.getElementById('tab-register').classList.toggle('active', mode === 'register');
document.getElementById('btn-submit-auth').innerText = mode === 'login' ? 'Login Sistem' : 'Daftar Akun Baru';
document.getElementById('auth-error-msg').innerText = '';
};
window.eksekusiAuth = () => {
const user = document.getElementById('auth-username').value;
const pass = document.getElementById('auth-password').value;
const errMsg = document.getElementById('auth-error-msg');
if(!user || !pass) {
errMsg.innerText = "Username dan Password tidak boleh kosong!";
return;
}
errMsg.innerText = "Memproses request ke server...";
const endpoint = state.authMode === 'login' ? 'otak_auth/api_login.php' : 'otak_auth/api_register.php';
safeFetch(endpoint, { username: user, password: pass })
.then(res => {
if(state.authMode === 'register') {
triggerToastNotification(res.pesan);
switchAuthTab('login');
} else {
state.user = res.user;
document.getElementById('auth-screen').style.display = 'none';
triggerToastNotification(`Selamat datang, ${res.user}!`);
muatDataSemua(); // Booting peta dilanjutkan
}
})
.catch(err => {
errMsg.innerText = err.message;
});
};
window.eksekusiLogout = () => {
if(!confirm("Anda yakin ingin keluar dari sistem?")) return;
@@ -207,7 +167,7 @@ window.eksekusiLogout = () => {
safeFetch('otak_auth/api_logout.php')
.then(res => {
state.user = null;
document.getElementById('auth-screen').style.display = 'flex';
window.location.href = 'login.php';
document.getElementById('auth-username').value = '';
document.getElementById('auth-password').value = '';
triggerToastNotification("Sesi diakhiri secara aman.");
@@ -227,12 +187,30 @@ const cekSesiBackend = () => {
safeFetch('otak_auth/api_session.php')
.then(res => {
state.user = res.username;
document.getElementById('auth-screen').style.display = 'none';
window.USER_ROLE = res.role;
if(window.USER_ROLE !== 'admin') {
document.body.classList.add('role-user');
} else {
if(typeof RightToolbar !== 'undefined') map.addControl(new RightToolbar());
}
if (sessionStorage.getItem('just_logged_in') === 'true') {
Swal.fire({
title: 'Login Berhasil!',
html: `Selamat <b>${res.username}</b> masuk ke WebGIS-Pontianak sebagai <b>${res.role.toUpperCase()}</b>`,
icon: 'success',
timer: 3000,
showConfirmButton: false,
toast: true,
position: 'top-end'
});
sessionStorage.removeItem('just_logged_in');
}
muatDataSemua();
})
.catch(err => {
console.log("Tertahan di gerbang autentikasi: " + err.message);
document.getElementById('auth-screen').style.display = 'flex';
window.location.href = 'login.php';
});
};
@@ -440,15 +418,15 @@ const RightToolbar = L.Control.extend({
onAdd: function() {
const c = L.DomUtil.create('div', 'custom-leaflet-toolbar');
c.innerHTML = `
<button class="tool-btn" id="btn-tool-marker" title="SPBU" onclick="toggleMarkerMode()">📍</button>
<button class="tool-btn" id="btn-tool-jalan" title="Jalan" onclick="toggleRoadMode()">🛣️</button>
<button class="tool-btn" id="btn-tool-tanah" title="Tanah" onclick="toggleLandMode()">🟩</button>
<button class="tool-btn" id="btn-tool-marker" title="SPBU" onclick="toggleMarkerMode()"><i class="fa-solid fa-gas-pump"></i></button>
<button class="tool-btn" id="btn-tool-jalan" title="Jalan" onclick="toggleRoadMode()"><i class="fa-solid fa-road"></i></button>
<button class="tool-btn" id="btn-tool-tanah" title="Tanah" onclick="toggleLandMode()"><i class="fa-solid fa-draw-polygon"></i></button>
`;
L.DomEvent.disableClickPropagation(c);
return c;
}
});
map.addControl(new RightToolbar());
// ====================================================
// EVENT LISTENER ROUTER (KLIK PETA UTAMA)
@@ -495,7 +473,7 @@ map.on('click', async function(e) {
if(alamatInput) alamatInput.value = "Sedang melacak alamat dari satelit...";
document.getElementById('spbu-action-wrapper').innerHTML = `
<button class="btn btn-save" id="btn-eksekusi-spbu" onclick="eksekusiSimpanBaru()" disabled>Tunggu Alamat...</button>
<button class="btn btn-save admin-only" id="btn-eksekusi-spbu" onclick="eksekusiSimpanBaru()" disabled>Tunggu Alamat...</button>
<button class="btn btn-cancel" onclick="document.getElementById('modal-spbu').style.display='none'">Batal</button>
`;
document.getElementById('modal-spbu').style.display = 'flex';
@@ -702,8 +680,8 @@ function renderSPBU() {
document.getElementById('spbu-modal-title').innerText = "Detail & Kelola SPBU";
document.getElementById('spbu-action-wrapper').innerHTML = `
<button class="btn btn-warning" onclick="eksekusiUpdate(${d.id})">Simpan Perubahan</button>
<button class="btn btn-danger" onclick="eksekusiHapus(${d.id})">Hapus Marker</button>
<button class="btn btn-warning admin-only" onclick="eksekusiUpdate(${d.id})">Simpan Perubahan</button>
<button class="btn btn-danger admin-only" onclick="eksekusiHapus(${d.id})">Hapus Marker</button>
<button class="btn btn-cancel" onclick="document.getElementById('modal-spbu').style.display='none'">Tutup</button>
`;
document.getElementById('modal-spbu').style.display = 'flex';
@@ -904,7 +882,8 @@ function renderKemiskinan() {
fillColor: '#D69E2E',
fillOpacity: 0.15,
radius: d.radius_meter,
weight: 1
weight: 1,
interactive: false
}).addTo(map);
mapLayers.radiusIbadah[d.id] = circle;
@@ -1175,7 +1154,7 @@ window.selesaiGambarJalan = function() {
bukaGembokForm('jalan');
document.getElementById('jalan-action-wrapper').innerHTML = `
<button class="btn btn-save" onclick="eksekusiSimpanJalan()">Simpan Jalan</button>
<button class="btn btn-save admin-only" onclick="eksekusiSimpanJalan()">Simpan Jalan</button>
<button class="btn btn-cancel" onclick="batalGambarJalan()">Batal</button>
`;
@@ -1211,8 +1190,8 @@ window.handleRoadClick = function(id) {
document.getElementById('jalan-modal-title').innerText = "Detail & Kelola Jalan";
document.getElementById('jalan-action-wrapper').innerHTML = `
<button class="btn btn-warning" onclick="eksekusiUpdateJalan(${id})">Simpan Perubahan</button>
<button class="btn btn-danger" onclick="eksekusiHapusJalan(${id})">Hapus Jalan</button>
<button class="btn btn-warning admin-only" onclick="eksekusiUpdateJalan(${id})">Simpan Perubahan</button>
<button class="btn btn-danger admin-only" onclick="eksekusiHapusJalan(${id})">Hapus Jalan</button>
<button class="btn btn-cancel" onclick="document.getElementById('modal-jalan').style.display='none'">Tutup</button>
`;
@@ -1241,7 +1220,7 @@ window.selesaiGambarTanah = function() {
bukaGembokForm('tanah');
document.getElementById('tanah-action-wrapper').innerHTML = `
<button class="btn btn-save" onclick="eksekusiSimpanTanah()">Simpan Area</button>
<button class="btn btn-save admin-only" onclick="eksekusiSimpanTanah()">Simpan Area</button>
<button class="btn btn-cancel" onclick="batalGambarTanah()">Batal</button>
`;
@@ -1277,8 +1256,8 @@ window.handleLandClick = function(id) {
document.getElementById('tanah-modal-title').innerText = "Detail & Kelola Tanah";
document.getElementById('tanah-action-wrapper').innerHTML = `
<button class="btn btn-warning" onclick="eksekusiUpdateTanah(${id})">Simpan Perubahan</button>
<button class="btn btn-danger" onclick="eksekusiHapusTanah(${id})">Hapus Tanah</button>
<button class="btn btn-warning admin-only" onclick="eksekusiUpdateTanah(${id})">Simpan Perubahan</button>
<button class="btn btn-danger admin-only" onclick="eksekusiHapusTanah(${id})">Hapus Tanah</button>
<button class="btn btn-cancel" onclick="document.getElementById('modal-tanah').style.display='none'">Tutup</button>
`;
@@ -1825,7 +1804,7 @@ window.muatDaftarAnggota = (idPenduduk, isBernaung) => {
pelatihanHtml = `
<div style="display:flex; gap:4px; align-items:center;">
<select id="sel-pel-${m.id}" style="padding:4px; max-width:120px; font-size:0.75rem; border-radius:4px;">${opsi}</select>
<button class="btn btn-save" style="padding:4px 8px; font-size:0.75rem;" onclick="daftarPelatihanAnggota(${m.id})">Daftar</button>
<button class="btn btn-save admin-only" style="padding:4px 8px; font-size:0.75rem;" onclick="daftarPelatihanAnggota(${m.id})">Daftar</button>
</div>
`;
} else {
@@ -1841,8 +1820,8 @@ window.muatDaftarAnggota = (idPenduduk, isBernaung) => {
<td>${m.pekerjaan || '<i style="color:#718096;">Menganggur</i>'}</td>
<td>${pelatihanHtml}</td>
<td>
<button class="btn btn-warning" style="padding:4px 8px; font-size:0.75rem; margin-right:4px;" onclick="bukaFormEditAnggota(${m.id}, '${m.nik}', '${m.nama_lengkap}', '${m.tanggal_lahir}', '${m.pendidikan_terakhir}', '${m.pekerjaan || ''}')">Edit</button>
<button class="btn btn-danger" style="padding:4px 8px; font-size:0.75rem;" onclick="eksekusiHapusAnggota(${m.id})">Hapus</button>
<button class="btn btn-warning admin-only" style="padding:4px 8px; font-size:0.75rem; margin-right:4px;" onclick="bukaFormEditAnggota(${m.id}, '${m.nik}', '${m.nama_lengkap}', '${m.tanggal_lahir}', '${m.pendidikan_terakhir}', '${m.pekerjaan || ''}')">Edit</button>
<button class="btn btn-danger admin-only" style="padding:4px 8px; font-size:0.75rem;" onclick="eksekusiHapusAnggota(${m.id})">Hapus</button>
</td>
</tr>
`;
@@ -1866,7 +1845,7 @@ window.resetFormAnggota = () => {
const btnContainer = document.getElementById('anggota-pekerjaan').parentElement.nextElementSibling;
if(btnContainer) {
btnContainer.innerHTML = `<button class="btn btn-success" style="width:100%; padding: 10px;" onclick="eksekusiSimpanAnggota()">Tambah Anggota</button>`;
btnContainer.innerHTML = `<button class="btn btn-success admin-only" style="width:100%; padding: 10px;" onclick="eksekusiSimpanAnggota()">Tambah Anggota</button>`;
}
};
@@ -1883,7 +1862,7 @@ window.bukaFormEditAnggota = (id, nik, nama, lahir, pendidikan, pekerjaan) => {
const btnContainer = document.getElementById('anggota-pekerjaan').parentElement.nextElementSibling;
if(btnContainer) {
btnContainer.innerHTML = `
<button class="btn btn-warning" style="flex:1; padding: 10px;" onclick="eksekusiUpdateAnggota(${id})">Update Data</button>
<button class="btn btn-warning admin-only" style="flex:1; padding: 10px;" onclick="eksekusiUpdateAnggota(${id})">Update Data</button>
<button class="btn btn-cancel" style="padding: 10px;" onclick="resetFormAnggota()">Batal Edit</button>
`;
}