ux: add cursor crosshair and toast guidance for add mode

This commit is contained in:
2026-06-11 03:14:17 +07:00
parent 0cba830fda
commit cd8c51abf7
+22 -2
View File
@@ -495,9 +495,29 @@ function setMode(m) {
document.getElementById('mode-label').textContent = m ? `Mode: Tambah ${m === 'point' ? 'Point' : m === 'jalan' ? 'Jalan' : 'Parsil'}` : 'Mode: Idle';
['btn-point','btn-jalan','btn-parsil','btn-cancel'].forEach(id => {
const btn = document.getElementById(id);
btn.classList.toggle('bg-primary-container', id === `btn-${m}` && m !== null);
btn.classList.toggle('text-white', id === `btn-${m}` && m !== null);
if (btn) {
btn.classList.toggle('bg-primary-container', id === `btn-${m}` && m !== null);
btn.classList.toggle('text-white', id === `btn-${m}` && m !== null);
}
});
// Berikan feedback visual kursor dan toast panduan agar user tahu cara menambah data
const mapElement = document.getElementById('map');
if (mapElement) {
if (m) {
mapElement.style.cursor = 'crosshair';
if (m === 'point') {
showToast('📍 Mode Tambah SPBU aktif. Silakan KLIK di peta untuk menempatkan titik SPBU baru.', 'info');
} else if (m === 'jalan') {
showToast('🛣️ Mode Tambah Jalan aktif. Silakan KLIK di peta untuk mulai menggambar garis jalan.', 'info');
} else if (m === 'parsil') {
showToast('🗺️ Mode Tambah Parsil aktif. Silakan KLIK di peta untuk mulai menggambar batas area parsil.', 'info');
}
} else {
mapElement.style.cursor = '';
}
}
if (!m) cancelPendingShape(false);
updateDrawControl();
}