From e0284f75188797bead3e150423b339571da8c435 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 1 Mar 2026 21:56:44 -0500
Subject: [PATCH] UI: Improve location button behavior and add Smart Location
 toggle in profile

---
 frontend/src/views/MapView.vue     |  9 ++-
 frontend/src/views/ProfileView.vue | 89 +++++++++++++++++++++++++++++-
 2 files changed, 96 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index f882bba..85094c6 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -56,6 +56,7 @@ const showPromoModal = ref(false);
 const selectedPromo = ref<any>(null);
 const currentCarouselIndex = ref(0);
 const carouselTimer = ref<any>(null);
+const isMapMoved = ref(false);
 
 // Search optimization: Simple debounce implementation
 // Helper functions
@@ -142,6 +143,11 @@ async function initializeMap() {
     map.value.addListener('click', () => {
       if (showETACard.value) showETACard.value = false;
     });
+
+    // Detect user interaction with the map to show/hide location button
+    map.value.addListener('dragstart', () => {
+      isMapMoved.value = true;
+    });
   }
   
   if (routeStore.selectedRouteId && routeStore.selectedRouteStops.length > 0 && routeStore.wasSelectedFromMap) {
@@ -286,6 +292,7 @@ function locateUser(): Promise<void> {
         setCenter(latitude, longitude);
         setZoom(16);
         reDrawUserMarker();
+        isMapMoved.value = false; // Reset interaction state
         resolve();
       },
       () => {
@@ -366,7 +373,7 @@ function handleImageError(event: Event) {
               <span v-if="couponStore.coupons.length > 0" class="offers-badge">{{ couponStore.coupons.length }}</span>
             </button>
 
-            <button v-if="isLoaded && !authStore.userProfile?.auto_location" class="location-loader-btn" @click="locateUser">
+            <button v-if="isLoaded && (!authStore.userProfile?.auto_location || isMapMoved)" class="location-loader-btn" @click="locateUser">
               <span class="material-icons">my_location</span>
             </button>
           </div>
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index 4f4b54b..1fa09e3 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -14,6 +14,7 @@ const userName = ref(localStorage.getItem('user_name') || t('profile.user'))
 const userEmail = ref(localStorage.getItem('user_email') || '')
 const userRole = ref(localStorage.getItem('user_role') || 'PASSENGER')
 const userPhoto = ref(localStorage.getItem('profile_photo_url') || '')
+const autoLocation = ref(false)
 
 const showQRModal = ref(false)
 const showEditModal = ref(false)
@@ -25,7 +26,8 @@ const selectedTitle = ref('')
 const editForm = ref({
   full_name: userName.value,
   password: '',
-  profile_photo: null as File | null
+  profile_photo: null as File | null,
+  auto_location: autoLocation.value
 })
 const photoPreview = ref(userPhoto.value)
 
@@ -38,7 +40,11 @@ onMounted(async () => {
     userEmail.value = freshUser.email
     userRole.value = freshUser.role
     userPhoto.value = freshUser.profile_photo_url || ''
+    autoLocation.value = freshUser.auto_location || false
     
+    editForm.value.full_name = freshUser.full_name
+    editForm.value.auto_location = freshUser.auto_location || false
+
     localStorage.setItem('user_name', freshUser.full_name)
     localStorage.setItem('profile_photo_url', freshUser.profile_photo_url || '')
     photoPreview.value = userPhoto.value
@@ -72,6 +78,8 @@ async function handleUpdateProfile() {
   try {
     const formData = new FormData()
     formData.append('full_name', editForm.value.full_name)
+    formData.append('auto_location', String(editForm.value.auto_location))
+    
     if (editForm.value.password) {
       formData.append('password', editForm.value.password)
     }
@@ -84,6 +92,7 @@ async function handleUpdateProfile() {
     // Update local state
     userName.value = updatedUser.full_name
     userPhoto.value = updatedUser.profile_photo_url || ''
+    autoLocation.value = updatedUser.auto_location
     
     // Update localStorage
     localStorage.setItem('user_name', updatedUser.full_name)
@@ -130,6 +139,10 @@ const getFullUrl = (path: string) => getImageUrl(path)
           <p>{{ userEmail }}</p>
           <div class="badge-row">
             <span class="role-badge">{{ userRole }}</span>
+            <span v-if="autoLocation" class="smart-badge">
+              <span class="material-icons">gps_fixed</span>
+              Smart Location
+            </span>
           </div>
         </div>
         
@@ -224,6 +237,14 @@ const getFullUrl = (path: string) => getImageUrl(path)
             <p class="field-hint">{{ t('profile.passwordHint') }}</p>
           </div>
 
+          <div class="form-group flex-row" style="margin-top: 1rem;">
+            <label class="custom-checkbox">
+              <input type="checkbox" v-model="editForm.auto_location" />
+              <span class="checkmark"></span>
+              <span class="cb-text">{{ t('auth.smartLocation') }}</span>
+            </label>
+          </div>
+
           <div class="modal-actions">
             <button type="button" class="btn-cancel" @click="showEditModal = false">{{ t('profile.cancel') }}</button>
             <button type="submit" class="btn-save" :disabled="isUpdating">
@@ -722,4 +743,70 @@ const getFullUrl = (path: string) => getImageUrl(path)
 
 .spin { animation: spin 1s linear infinite; }
 @keyframes spin { 100% { transform: rotate(360deg); } }
+
+.badge-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.smart-badge {
+  background: rgba(0, 212, 255, 0.1);
+  color: #00d4ff;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.smart-badge .material-icons { font-size: 0.9rem; }
+
+/* Custom Checkbox inside Modal */
+.custom-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.custom-checkbox input { display: none; }
+
+.checkmark {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 6px;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.custom-checkbox input:checked + .checkmark {
+  background: var(--active-color);
+  border-color: var(--active-color);
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  left: 6px; top: 2px;
+  width: 5px; height: 10px;
+  border: solid #000;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  display: none;
+}
+
+.custom-checkbox input:checked + .checkmark:after { display: block; }
+
+.cb-text {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
 </style>