ux: add cursor crosshair and toast guidance for add mode
This commit is contained in:
+22
-2
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user