536 lines
16 KiB
JavaScript
536 lines
16 KiB
JavaScript
/**
|
|
* QR Code Destination Page JavaScript - Enhanced with Multiple Check-ins Support
|
|
* Handles staff check-in functionality with GPS location support, language switching, and 30-minute interval validation
|
|
*/
|
|
|
|
// Global variables (PRESERVED FROM ORIGINAL)
|
|
let isSubmitting = false;
|
|
let currentTime = new Date();
|
|
|
|
// Location tracking variables (PRESERVED FROM ORIGINAL)
|
|
let userLocation = {
|
|
latitude: null,
|
|
longitude: null,
|
|
accuracy: null,
|
|
altitude: null,
|
|
timestamp: null,
|
|
source: "manual",
|
|
address: null,
|
|
};
|
|
let locationRequestActive = false;
|
|
let locationWatchId = null;
|
|
|
|
// BILINGUAL FUNCTIONALITY (PRESERVED FROM ORIGINAL)
|
|
let currentLanguage = 'en';
|
|
const translations = {
|
|
en: {
|
|
languageText: 'EN',
|
|
statusMessages: {
|
|
processing: 'Processing check-in...',
|
|
success: 'Check-in successful!',
|
|
error: 'Check-in failed. Please try again.',
|
|
duplicate: 'You have already checked in today.',
|
|
tooSoon: 'Please wait before checking in again.',
|
|
multipleSuccess: 'Submitted successfully!',
|
|
invalidId: 'Please enter a valid Employee ID.',
|
|
locationError: 'Unable to get location data.',
|
|
networkError: 'Network error. Please check your connection.'
|
|
}
|
|
},
|
|
es: {
|
|
languageText: 'ES',
|
|
statusMessages: {
|
|
processing: 'Procesando registro...',
|
|
success: '¡Registro exitoso!',
|
|
error: 'Error en el registro. Por favor intente de nuevo.',
|
|
duplicate: 'Ya se ha registrado hoy.',
|
|
tooSoon: 'Por favor espere antes de registrarse nuevamente.',
|
|
multipleSuccess: 'Submitted successful!!',
|
|
invalidId: 'Por favor ingrese un ID de empleado válido.',
|
|
locationError: 'No se pudo obtener datos de ubicación.',
|
|
networkError: 'Error de red. Verifique su conexión.'
|
|
}
|
|
}
|
|
};
|
|
|
|
// DOM Content Loaded Event (PRESERVED FROM ORIGINAL)
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
console.log("🎯 QR Destination page loaded");
|
|
|
|
// Initialize language functionality
|
|
initializeLanguage();
|
|
|
|
// Initialize form handling
|
|
initializeForm();
|
|
|
|
// Initialize location services
|
|
initializeLocation();
|
|
|
|
// Start real-time clock
|
|
startClock();
|
|
|
|
// Add fade-in animation to elements
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.fade-transition').forEach(el => {
|
|
el.classList.add('active');
|
|
});
|
|
}, 100);
|
|
});
|
|
|
|
// ENHANCED FORM HANDLING FOR MULTIPLE CHECK-INS
|
|
function initializeForm() {
|
|
const form = document.getElementById("checkinForm");
|
|
const submitButton = document.getElementById("submitCheckin");
|
|
|
|
if (form && submitButton) {
|
|
form.addEventListener("submit", handleFormSubmit);
|
|
|
|
// Add real-time Employee ID validation
|
|
const employeeIdInput = document.getElementById("employee_id");
|
|
if (employeeIdInput) {
|
|
employeeIdInput.addEventListener("input", validateEmployeeId);
|
|
employeeIdInput.addEventListener("keypress", function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleFormSubmit(e);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleFormSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
if (isSubmitting) {
|
|
console.log("⏳ Check-in already in progress, ignoring duplicate submission");
|
|
return;
|
|
}
|
|
|
|
console.log("🎯 Form submission triggered");
|
|
|
|
const employeeId = document.getElementById("employee_id")?.value?.trim();
|
|
|
|
if (!employeeId) {
|
|
showLocalizedStatusMessage('invalidId', 'error');
|
|
return;
|
|
}
|
|
|
|
if (employeeId.length < 2) {
|
|
showLocalizedStatusMessage('invalidId', 'error');
|
|
return;
|
|
}
|
|
|
|
// Show processing status
|
|
showLocalizedStatusMessage('processing', 'info');
|
|
|
|
// Submit the check-in
|
|
submitCheckin();
|
|
}
|
|
|
|
// ENHANCED CHECK-IN SUBMISSION WITH MULTIPLE CHECK-IN SUPPORT
|
|
function submitCheckin() {
|
|
console.log("🚀 Starting check-in submission process");
|
|
|
|
if (isSubmitting) {
|
|
console.log("⏳ Already submitting, aborting");
|
|
return;
|
|
}
|
|
|
|
isSubmitting = true;
|
|
updateSubmitButton(true);
|
|
|
|
const employeeId = document.getElementById("employee_id").value.trim();
|
|
|
|
if (!employeeId) {
|
|
showLocalizedStatusMessage('invalidId', 'error');
|
|
isSubmitting = false;
|
|
updateSubmitButton(false);
|
|
return;
|
|
}
|
|
|
|
console.log(`👤 Employee ID: ${employeeId}`);
|
|
console.log(`📍 User location:`, userLocation);
|
|
|
|
// Prepare form data
|
|
const formData = new FormData();
|
|
formData.append("employee_id", employeeId);
|
|
formData.append("latitude", userLocation.latitude ? userLocation.latitude.toFixed(8) : "");
|
|
formData.append("longitude", userLocation.longitude ? userLocation.longitude.toFixed(8) : "");
|
|
formData.append("accuracy", userLocation.accuracy || "");
|
|
formData.append("altitude", userLocation.altitude || "");
|
|
formData.append("location_source", userLocation.source || "manual");
|
|
formData.append("address", userLocation.address || "");
|
|
|
|
const currentUrl = window.location.pathname;
|
|
const checkinUrl = `${currentUrl}/checkin`;
|
|
|
|
console.log("🎯 Submitting to URL:", checkinUrl);
|
|
|
|
fetch(checkinUrl, {
|
|
method: "POST",
|
|
body: formData,
|
|
headers: {
|
|
"X-Requested-With": "XMLHttpRequest",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
console.log("📡 Server response status:", response.status);
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
console.log("📊 Server response data:", data);
|
|
handleCheckinResponse(data);
|
|
})
|
|
.catch((error) => {
|
|
console.error("❌ Check-in error:", error);
|
|
handleCheckinError(error);
|
|
})
|
|
.finally(() => {
|
|
isSubmitting = false;
|
|
updateSubmitButton(false);
|
|
});
|
|
}
|
|
|
|
// ENHANCED RESPONSE HANDLING FOR MULTIPLE CHECK-INS
|
|
function handleCheckinResponse(data) {
|
|
if (data.success) {
|
|
handleCheckinSuccess(data);
|
|
} else {
|
|
const errorMsg = data.message || 'Submission failed';
|
|
console.log("❌ Submission failed:", errorMsg);
|
|
|
|
// NEW: Handle different types of check-in failures
|
|
if (errorMsg.toLowerCase().includes('already submitted')) {
|
|
showLocalizedStatusMessage('duplicate', 'warning');
|
|
} else if (errorMsg.toLowerCase().includes('submit again in') || errorMsg.toLowerCase().includes('minutes')) {
|
|
// Handle 30-minute interval message
|
|
showCustomStatusMessage(errorMsg, 'warning');
|
|
} else {
|
|
showLocalizedStatusMessage('error', 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
// ENHANCED SUCCESS HANDLING WITH MULTIPLE CHECK-IN INFO
|
|
function handleCheckinSuccess(data) {
|
|
console.log("✅ Submitted successful!");
|
|
|
|
const responseData = data.data || data || {};
|
|
const checkinCount = responseData.checkin_count_today || 1;
|
|
const checkinSequence = responseData.checkin_sequence || 'Check-in';
|
|
|
|
// Show appropriate success message based on check-in count
|
|
if (checkinCount > 1) {
|
|
showLocalizedStatusMessage('multipleSuccess', 'success');
|
|
} else {
|
|
showLocalizedStatusMessage('success', 'success');
|
|
}
|
|
|
|
// Hide form (PRESERVED FROM ORIGINAL)
|
|
const form = document.getElementById("checkinForm");
|
|
if (form) {
|
|
form.style.display = "none";
|
|
}
|
|
|
|
// Update success card with enhanced information
|
|
const successCard = document.getElementById("successCard");
|
|
if (successCard) {
|
|
successCard.style.display = "block";
|
|
successCard.classList.add('active');
|
|
|
|
const updateElement = (id, value) => {
|
|
const el = document.getElementById(id);
|
|
if (el) {
|
|
el.textContent = value || "N/A";
|
|
}
|
|
};
|
|
|
|
const employeeId = responseData.employee_id || "Unknown";
|
|
const location = responseData.location || "Unknown Location";
|
|
const event = responseData.event || responseData.location_event || "Check-in";
|
|
const checkInTime = responseData.check_in_time || new Date().toLocaleTimeString();
|
|
const checkInDate = responseData.check_in_date || new Date().toLocaleDateString();
|
|
|
|
updateElement("successEmployeeId", employeeId);
|
|
updateElement("successLocation", location);
|
|
updateElement("successEvent", event);
|
|
updateElement("successCheckInTime", checkInTime);
|
|
updateElement("successCheckInDate", checkInDate);
|
|
|
|
// NEW: Add check-in sequence information
|
|
updateElement("successCheckinSequence", checkinSequence);
|
|
|
|
// Update additional info if available
|
|
if (responseData.device_info) {
|
|
updateElement("successDeviceInfo", responseData.device_info);
|
|
}
|
|
|
|
if (responseData.coordinates) {
|
|
updateElement("successCoordinates", responseData.coordinates);
|
|
}
|
|
|
|
if (responseData.address) {
|
|
updateElement("successAddress", responseData.address);
|
|
}
|
|
|
|
if (responseData.location_accuracy) {
|
|
updateElement("successLocationAccuracy", `${responseData.location_accuracy} miles`);
|
|
}
|
|
}
|
|
|
|
// NEW: Add option to check in again after success
|
|
//setTimeout(() => {
|
|
// addCheckInAgainOption();
|
|
//}, 3000);
|
|
}
|
|
|
|
// NEW: Add option to check in again
|
|
function addCheckInAgainOption() {
|
|
const successCard = document.getElementById("successCard");
|
|
if (successCard && !document.getElementById("checkInAgainButton")) {
|
|
const checkInAgainHtml = `
|
|
<div class="check-in-again-section" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e0e4e7;">
|
|
<p class="check-in-again-text" style="margin-bottom: 1rem; color: #64748b; font-size: 0.9rem;">
|
|
<span data-en="Need to check in again? You can do so after 30 minutes."
|
|
data-es="¿Necesita registrarse nuevamente? Puede hacerlo después de 30 minutos.">
|
|
Need to check in again? You can do so after 30 minutes.
|
|
</span>
|
|
</p>
|
|
<button id="checkInAgainButton" class="btn btn-outline" style="width: 100%;" onclick="resetForNewCheckin()">
|
|
<i class="fas fa-redo"></i>
|
|
<span data-en="Check In Again" data-es="Registrarse Nuevamente">Check In Again</span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
successCard.insertAdjacentHTML('beforeend', checkInAgainHtml);
|
|
|
|
// Apply current language translations
|
|
applyTranslations();
|
|
}
|
|
}
|
|
|
|
// NEW: Reset form for new check-in
|
|
function resetForNewCheckin() {
|
|
console.log("🔄 Resetting for new check-in");
|
|
|
|
// Show form again
|
|
const form = document.getElementById("checkinForm");
|
|
if (form) {
|
|
form.style.display = "block";
|
|
}
|
|
|
|
// Hide success card
|
|
const successCard = document.getElementById("successCard");
|
|
if (successCard) {
|
|
successCard.style.display = "none";
|
|
successCard.classList.remove('active');
|
|
}
|
|
|
|
// Clear previous employee ID
|
|
const employeeIdInput = document.getElementById("employee_id");
|
|
if (employeeIdInput) {
|
|
employeeIdInput.value = '';
|
|
employeeIdInput.focus();
|
|
}
|
|
|
|
// Clear status messages
|
|
clearStatusMessages();
|
|
|
|
// Reset location if needed
|
|
if (!userLocation.latitude || !userLocation.longitude) {
|
|
requestLocationData();
|
|
}
|
|
}
|
|
|
|
// NEW: Show custom status message (for interval warnings)
|
|
function showCustomStatusMessage(message, type = 'info') {
|
|
const statusContainer = document.getElementById("statusMessage");
|
|
if (statusContainer) {
|
|
statusContainer.className = `status-message ${type}`;
|
|
statusContainer.innerHTML = `
|
|
<div class="status-content">
|
|
<i class="fas ${getStatusIcon(type)}"></i>
|
|
<span>${message}</span>
|
|
</div>
|
|
`;
|
|
statusContainer.style.display = "block";
|
|
|
|
// Auto-hide after 5 seconds
|
|
setTimeout(() => {
|
|
statusContainer.style.display = "none";
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Helper function to get appropriate icon for status type
|
|
function getStatusIcon(type) {
|
|
switch (type) {
|
|
case 'success': return 'fa-check-circle';
|
|
case 'error': return 'fa-exclamation-circle';
|
|
case 'warning': return 'fa-clock';
|
|
case 'info':
|
|
default: return 'fa-info-circle';
|
|
}
|
|
}
|
|
|
|
// PRESERVED: All other existing functions remain unchanged
|
|
function showLocalizedStatusMessage(messageKey, type = 'info') {
|
|
const message = translations[currentLanguage].statusMessages[messageKey] ||
|
|
translations['en'].statusMessages[messageKey] ||
|
|
'Status update';
|
|
|
|
showCustomStatusMessage(message, type);
|
|
}
|
|
|
|
function clearStatusMessages() {
|
|
const statusContainer = document.getElementById("statusMessage");
|
|
if (statusContainer) {
|
|
statusContainer.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function handleCheckinError(error) {
|
|
console.error("❌ Check-in submission error:", error);
|
|
showLocalizedStatusMessage('networkError', 'error');
|
|
}
|
|
|
|
function updateSubmitButton(isLoading) {
|
|
const submitButton = document.getElementById("submitCheckin");
|
|
if (submitButton) {
|
|
if (isLoading) {
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span data-en="Processing..." data-es="Procesando...">Processing...</span>';
|
|
} else {
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = '<i class="fas fa-user-check"></i> <span data-en="Submit" data-es="Someter">Submit</span>';
|
|
}
|
|
applyTranslations();
|
|
}
|
|
}
|
|
|
|
function validateEmployeeId() {
|
|
const employeeIdInput = document.getElementById("employee_id");
|
|
const submitButton = document.getElementById("submitCheckin");
|
|
|
|
if (employeeIdInput && submitButton) {
|
|
const isValid = employeeIdInput.value.trim().length >= 2;
|
|
submitButton.disabled = !isValid || isSubmitting;
|
|
|
|
if (isValid) {
|
|
employeeIdInput.classList.remove('invalid');
|
|
employeeIdInput.classList.add('valid');
|
|
} else {
|
|
employeeIdInput.classList.remove('valid');
|
|
if (employeeIdInput.value.length > 0) {
|
|
employeeIdInput.classList.add('invalid');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// All location and language functions remain unchanged from original
|
|
function initializeLocation() {
|
|
console.log("📍 Initializing location services");
|
|
requestLocationData();
|
|
}
|
|
|
|
function requestLocationData() {
|
|
if (locationRequestActive) {
|
|
console.log("📍 Location request already active, skipping");
|
|
return;
|
|
}
|
|
|
|
if (!navigator.geolocation) {
|
|
console.log("❌ Geolocation not supported");
|
|
userLocation.source = "manual";
|
|
return;
|
|
}
|
|
|
|
locationRequestActive = true;
|
|
console.log("📍 Requesting location data...");
|
|
|
|
const options = {
|
|
enableHighAccuracy: true,
|
|
timeout: 10000,
|
|
maximumAge: 300000
|
|
};
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
handleLocationSuccess,
|
|
handleLocationError,
|
|
options
|
|
);
|
|
}
|
|
|
|
function handleLocationSuccess(position) {
|
|
console.log("✅ Location obtained successfully");
|
|
|
|
userLocation = {
|
|
latitude: position.coords.latitude,
|
|
longitude: position.coords.longitude,
|
|
accuracy: position.coords.accuracy,
|
|
altitude: position.coords.altitude,
|
|
timestamp: new Date(),
|
|
source: "gps",
|
|
address: null
|
|
};
|
|
|
|
console.log("📍 Location data:", userLocation);
|
|
|
|
// Reverse geocode to get address
|
|
reverseGeocode(userLocation.latitude, userLocation.longitude);
|
|
|
|
locationRequestActive = false;
|
|
}
|
|
|
|
function handleLocationError(error) {
|
|
console.log("❌ Location error:", error.message);
|
|
userLocation.source = "manual";
|
|
locationRequestActive = false;
|
|
}
|
|
|
|
function reverseGeocode(lat, lng) {
|
|
// This would typically use a geocoding service
|
|
// For now, just set a placeholder
|
|
userLocation.address = `${lat.toFixed(10)}, ${lng.toFixed(10)}`;
|
|
}
|
|
|
|
// Language functionality remains unchanged
|
|
function initializeLanguage() {
|
|
const languageToggle = document.getElementById('languageToggle');
|
|
if (languageToggle) {
|
|
languageToggle.addEventListener('click', toggleLanguage);
|
|
}
|
|
applyTranslations();
|
|
}
|
|
|
|
function toggleLanguage() {
|
|
currentLanguage = currentLanguage === 'en' ? 'es' : 'en';
|
|
applyTranslations();
|
|
console.log(`🌐 Language switched to: ${currentLanguage}`);
|
|
}
|
|
|
|
function applyTranslations() {
|
|
const languageText = document.getElementById('languageText');
|
|
if (languageText) {
|
|
languageText.textContent = translations[currentLanguage].languageText;
|
|
}
|
|
|
|
document.querySelectorAll(`[data-${currentLanguage}]`).forEach(element => {
|
|
element.textContent = element.getAttribute(`data-${currentLanguage}`);
|
|
});
|
|
}
|
|
|
|
function startClock() {
|
|
function updateClock() {
|
|
currentTime = new Date();
|
|
const timeElements = document.querySelectorAll('.current-time');
|
|
timeElements.forEach(el => {
|
|
el.textContent = currentTime.toLocaleTimeString();
|
|
});
|
|
}
|
|
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
} |