Update check-in Location Services requirement

static/css/qr_destination.css

@@ -844,3 +844,107 @@ body {
     --gray-800: #1e293b !important;
     --gray-900: #0f172a !important;
 }
+
+.location-warning-banner {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+  color: white;
+  padding: 15px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(238, 90, 36, 0.3);
+  animation: slideDown 0.3s ease-out;
+}
+
+.warning-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.warning-icon {
+  font-size: 24px;
+  color: #fff;
+  margin-top: 2px;
+}
+
+.warning-text {
+  flex: 1;
+}
+
+.warning-message {
+  display: block;
+  font-size: 14px;
+  line-height: 1.4;
+  margin-bottom: 12px;
+}
+
+.warning-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.warning-retry-btn,
+.warning-dismiss-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.warning-retry-btn:hover,
+.warning-dismiss-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+/* Blocked Form Styling */
+.location-blocked {
+  opacity: 0.6;
+  pointer-events: none;
+  position: relative;
+}
+
+.location-blocked::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 107, 107, 0.1);
+  border-radius: 8px;
+  z-index: 1;
+}
+
+/* Animation for warning banner */
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+  .warning-actions {
+    flex-direction: column;
+  }
+  
+  .warning-retry-btn,
+  .warning-dismiss-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}

static/js/qr_destination.js

@@ -144,6 +144,24 @@ function handleFormSubmit(event) {
     return;
   }
 
+  // STEP 1: Check Location Services FIRST
+  console.log("🔍 Step 1: Validating Location Services...");
+  
+  checkLocationServicesStatus()
+    .then(() => {
+      // Location services are working, proceed with check-in
+      console.log("✅ Location Services validated successfully");
+      proceedWithCheckin();
+    })
+    .catch((error) => {
+      // Location services are not working, block check-in
+      console.log("❌ Location Services validation failed:", error);
+      showLocationServicesBlockedMessage();
+      return;
+    });
+}
+
+function proceedWithCheckin() {
   const employeeId = document.getElementById("employee_id")?.value?.trim();
 
   if (!employeeId) {
@@ -166,6 +184,21 @@ function handleFormSubmit(event) {
   submitCheckin();
 }
 
+/**
+ * Show message when check-in is blocked due to location services
+ */
+function showLocationServicesBlockedMessage() {
+  const messages = {
+    en: "Check-in blocked: Location Services must be enabled to continue.",
+    es: "Registro bloqueado: Los Servicios de Ubicación deben estar habilitados para continuar."
+  };
+  
+  const currentLang = currentLanguage || "en";
+  const message = messages[currentLang];
+  
+  showCustomStatusMessage(message, "error");
+}
+
 // ENHANCED CHECK-IN SUBMISSION WITH MULTIPLE CHECK-IN SUPPORT
 function submitCheckin() {
   if (isSubmitting) {
@@ -713,45 +746,107 @@ function checkLocationServicesStatus() {
   // Check if geolocation is supported
   if (!navigator.geolocation) {
     showLocationServicesWarning("not_supported");
-    return;
+    blockCheckInProcess(true);
+    return Promise.reject("Location services not supported");
   }
 
+  return new Promise((resolve, reject) => {
     // Test location access with a quick check
     const timeoutId = setTimeout(() => {
       showLocationServicesWarning("timeout");
-  }, 3000); // 3 second timeout
+      blockCheckInProcess(true);
+      reject("Location services timeout");
+    }, 5000); // 5 second timeout
 
     navigator.geolocation.getCurrentPosition(
       (position) => {
         // Success - location services are working
         clearTimeout(timeoutId);
         hideLocationServicesWarning();
+        blockCheckInProcess(false);
+        
+        // Log successful location access
+        console.log("✅ Location Services: ENABLED and working");
+        
+        resolve(position);
       },
       (error) => {
         // Error - location services may be disabled
         clearTimeout(timeoutId);
+        blockCheckInProcess(true);
 
         switch (error.code) {
           case error.PERMISSION_DENIED:
             showLocationServicesWarning("permission_denied");
+            console.log("❌ Location Services: PERMISSION DENIED");
             break;
           case error.POSITION_UNAVAILABLE:
             showLocationServicesWarning("position_unavailable");
+            console.log("❌ Location Services: POSITION UNAVAILABLE");
             break;
           case error.TIMEOUT:
             showLocationServicesWarning("timeout");
+            console.log("❌ Location Services: TIMEOUT");
             break;
           default:
             showLocationServicesWarning("unknown_error");
+            console.log("❌ Location Services: UNKNOWN ERROR");
             break;
         }
+        
+        reject(error);
       },
       {
         enableHighAccuracy: false,
-      timeout: 2500,
+        timeout: 4000,
-      maximumAge: 60000,
+        maximumAge: 30000,
       }
     );
+  });
+}
+
+function blockCheckInProcess(shouldBlock) {
+  const submitButton = document.getElementById("submitCheckin");
+  const employeeIdInput = document.getElementById("employee_id");
+  const form = document.getElementById("checkinForm");
+  
+  if (shouldBlock) {
+    // Block check-in process
+    if (submitButton) {
+      submitButton.disabled = true;
+      submitButton.style.opacity = "0.5";
+      submitButton.style.cursor = "not-allowed";
+    }
+    
+    if (employeeIdInput) {
+      employeeIdInput.disabled = true;
+      employeeIdInput.style.opacity = "0.7";
+    }
+    
+    if (form) {
+      form.classList.add("location-blocked");
+    }
+    
+    console.log("🚫 Check-in process BLOCKED - Location Services required");
+  } else {
+    // Unblock check-in process
+    if (submitButton) {
+      submitButton.disabled = false;
+      submitButton.style.opacity = "1";
+      submitButton.style.cursor = "pointer";
+    }
+    
+    if (employeeIdInput) {
+      employeeIdInput.disabled = false;
+      employeeIdInput.style.opacity = "1";
+    }
+    
+    if (form) {
+      form.classList.remove("location-blocked");
+    }
+    
+    console.log("✅ Check-in process UNBLOCKED - Location Services working");
+  }
 }
 
 /**
@@ -764,27 +859,27 @@ function showLocationServicesWarning(errorType) {
   const warningMessages = {
   en: {
     not_supported:
-        "Location services are not supported by your browser.<br>Los servicios de ubicación no son compatibles con su navegador.",
+      "⚠️ Location Services Not Supported<br><strong>Check-in is currently blocked.</strong><br>Your browser does not support location services required for check-in.<br><br>Los servicios de ubicación no son compatibles. El registro está bloqueado.",
     permission_denied:
-        "Location access has been denied. Please enable location services for accurate check-in.<br>Se ha denegado el acceso a la ubicación. Habilite los servicios de ubicación para un registro preciso.",
+      "⚠️ Location Access Denied<br><strong>Check-in is currently blocked.</strong><br>Please enable location access in your browser settings to continue with check-in.<br><br>Acceso a ubicación denegado. Habilite el acceso para continuar.",
     position_unavailable:
-        "Location services appear to be disabled. Please turn on location services for accurate check-in.<br>Los servicios de ubicación parecen estar deshabilitados. Active los servicios de ubicación para un registro preciso.",
+      "⚠️ Location Services Disabled<br><strong>Check-in is currently blocked.</strong><br>Please turn on Location Services in your device settings and refresh the page.<br><br>Servicios de ubicación deshabilitados. Active los servicios y actualice la página.",
     timeout:
-        "Location services may be disabled. Please check your location settings for accurate check-in.<br>Los servicios de ubicación pueden estar deshabilitados. Verifique su configuración de ubicación para un registro preciso.",
+      "⚠️ Location Services Not Responding<br><strong>Check-in is currently blocked.</strong><br>Location services may be disabled. Please check your device settings.<br><br>Los servicios de ubicación no responden. Verifique la configuración.",
     unknown_error:
-        "Unable to access location services. Please check your location settings.<br>No se puede acceder a los servicios de ubicación. Verifique su configuración de ubicación.",
+      "⚠️ Location Services Error<br><strong>Check-in is currently blocked.</strong><br>Unable to access location services. Please check your settings and try again.<br><br>Error de servicios de ubicación. Verifique la configuración.",
   },
   es: {
     not_supported:
-        "Los servicios de ubicación no son compatibles con su navegador.",
+      "⚠️ Servicios de Ubicación No Compatibles<br><strong>El registro está bloqueado.</strong><br>Su navegador no es compatible con los servicios de ubicación requeridos.",
     permission_denied:
-        "Se ha denegado el acceso a la ubicación. Habilite los servicios de ubicación para un registro preciso.",
+      "⚠️ Acceso a Ubicación Denegado<br><strong>El registro está bloqueado.</strong><br>Habilite el acceso a la ubicación en la configuración de su navegador.",
     position_unavailable:
-        "Los servicios de ubicación parecen estar deshabilitados. Active los servicios de ubicación para un registro preciso.",
+      "⚠️ Servicios de Ubicación Deshabilitados<br><strong>El registro está bloqueado.</strong><br>Active los Servicios de Ubicación en la configuración y actualice la página.",
     timeout:
-        "Los servicios de ubicación pueden estar deshabilitados. Verifique su configuración de ubicación para un registro preciso.",
+      "⚠️ Servicios de Ubicación No Responden<br><strong>El registro está bloqueado.</strong><br>Los servicios pueden estar deshabilitados. Verifique la configuración.",
     unknown_error:
-        "No se puede acceder a los servicios de ubicación. Verifique su configuración de ubicación.",
+      "⚠️ Error de Servicios de Ubicación<br><strong>El registro está bloqueado.</strong><br>No se puede acceder a los servicios. Verifique la configuración.",
   },
 };
 
@@ -841,20 +936,17 @@ function hideLocationServicesWarning() {
  * Add this to your existing initialization
  */
 function initializeLocationServicesCheck() {
-  // Check location services status when page loads
+  // Check location services status when page loads and block if necessary
   setTimeout(() => {
-    checkLocationServicesStatus();
+    console.log("🔍 Initializing Location Services check...");
+    checkLocationServicesStatus()
+      .then(() => {
+        console.log("✅ Initial Location Services check passed");
+      })
+      .catch(() => {
+        console.log("❌ Initial Location Services check failed - Check-in blocked");
+      });
   }, 1000); // Small delay to ensure page is fully loaded
 
-  // Also check before form submission
+  // Remove the override of handleFormSubmit since we've updated it directly
-  const originalHandleFormSubmit = handleFormSubmit;
-  window.handleFormSubmit = function (event) {
-    // Quick location check before submission
-    checkLocationServicesStatus();
-
-    // Continue with original form submission after brief delay
-    setTimeout(() => {
-      originalHandleFormSubmit.call(this, event);
-    }, 500);
-  };
 }