561 lines
17 KiB
JavaScript
561 lines
17 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(10) : ""
|
|
);
|
|
formData.append(
|
|
"longitude",
|
|
userLocation.longitude ? userLocation.longitude.toFixed(10) : ""
|
|
);
|
|
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);
|
|
}
|