460 lines
17 KiB
HTML
460 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Check In - {{ qr_code.name }}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/qr_destination.css') }}">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<style>
|
|
/* Additional styles for location tracking */
|
|
.location-status {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
margin: 15px 0;
|
|
font-size: 14px;
|
|
display: none;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.location-status.loading {
|
|
background: #d1ecf1;
|
|
border-color: #bee5eb;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.location-status.success {
|
|
background: #d4edda;
|
|
border-color: #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
|
|
.location-status.error {
|
|
background: #f8d7da;
|
|
border-color: #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
|
|
.location-info {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
display: none;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.location-info h4 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 14px;
|
|
color: #495057;
|
|
}
|
|
|
|
.coord-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.coord-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.coord-value {
|
|
font-family: 'Courier New', monospace;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.location-controls {
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.btn-small {
|
|
background: #6c757d;
|
|
color: white;
|
|
border: none;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
margin: 0 4px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.btn-small:hover {
|
|
background: #545b62;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="destination-container">
|
|
<!-- Header Section -->
|
|
<div class="destination-header">
|
|
<div class="header-icon">
|
|
<i class="fas fa-qrcode"></i>
|
|
</div>
|
|
<h1>{{ qr_code.location_event }}</h1>
|
|
<p class="location-info">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
{{ qr_code.location }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Check-in Form -->
|
|
<div class="checkin-card">
|
|
<div class="checkin-header">
|
|
<h2>
|
|
<i class="fas fa-user-check"></i>
|
|
Staff Check-In
|
|
</h2>
|
|
<p>Please enter your Employee ID to check in</p>
|
|
</div>
|
|
|
|
<form id="checkinForm" class="checkin-form">
|
|
<!-- HIDDEN LOCATION FIELDS - NEW ADDITION -->
|
|
<input type="hidden" id="latitude" name="latitude">
|
|
<input type="hidden" id="longitude" name="longitude">
|
|
<input type="hidden" id="accuracy" name="accuracy">
|
|
<input type="hidden" id="altitude" name="altitude">
|
|
<input type="hidden" id="locationSource" name="location_source" value="manual">
|
|
<input type="hidden" id="address" name="address">
|
|
|
|
<div class="form-group">
|
|
<label for="employee_id">
|
|
<i class="fas fa-id-badge"></i>
|
|
Employee ID
|
|
</label>
|
|
<input type="text"
|
|
id="employee_id"
|
|
name="employee_id"
|
|
required
|
|
placeholder="Enter your Employee ID"
|
|
autocomplete="off"
|
|
maxlength="20">
|
|
<small class="form-help">Use your official employee ID (3-20 characters)</small>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="btn-content">
|
|
<i class="fas fa-check"></i>
|
|
Check In Now
|
|
</span>
|
|
<div class="btn-loader" style="display: none;">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
Processing...
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Status Messages -->
|
|
<div id="statusMessage" class="status-message" style="display: none;">
|
|
<!-- Dynamic status messages will appear here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Card (Hidden by default) -->
|
|
<div id="successCard" class="success-card" style="display: none;">
|
|
<div class="success-icon">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<h2>Check-In Successful!</h2>
|
|
<div class="success-details">
|
|
<div class="success-item">
|
|
<strong>Employee ID:</strong>
|
|
<span id="successEmployeeId">-</span>
|
|
</div>
|
|
<div class="success-item">
|
|
<strong>Location:</strong>
|
|
<span id="successLocation">-</span>
|
|
</div>
|
|
<div class="success-item">
|
|
<strong>Event:</strong>
|
|
<span id="successEvent">-</span>
|
|
</div>
|
|
<div class="success-item">
|
|
<strong>Time:</strong>
|
|
<span id="successTime">-</span>
|
|
</div>
|
|
<div class="success-item">
|
|
<strong>Date:</strong>
|
|
<span id="successDate">-</span>
|
|
</div>
|
|
<!-- NEW LOCATION SUCCESS INFO -->
|
|
<div class="success-item" id="successLocationInfo" style="display: none;">
|
|
<strong>GPS Location:</strong>
|
|
<span id="successGpsInfo">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="success-actions">
|
|
<button onclick="checkInAnother()" class="btn btn-secondary">
|
|
<i class="fas fa-plus"></i>
|
|
Check In Another Employee
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="destination-footer">
|
|
<p>
|
|
<i class="fas fa-shield-alt"></i>
|
|
Secure attendance tracking system
|
|
</p>
|
|
<small>© 2025 QR Management System</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Processing check-in...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/qr_destination.js') }}"></script>
|
|
<script>
|
|
// Initialize page with QR code URL (EXISTING CODE)
|
|
window.qrUrl = '{{ qr_code.qr_url }}';
|
|
window.locationName = '{{ qr_code.location }}';
|
|
window.eventName = '{{ qr_code.location_event }}';
|
|
|
|
// GEOLOCATION INTEGRATION - NEW CODE
|
|
let userLocation = {
|
|
latitude: null,
|
|
longitude: null,
|
|
accuracy: null,
|
|
altitude: null,
|
|
timestamp: null,
|
|
source: 'manual',
|
|
address: null
|
|
};
|
|
|
|
let locationRequestActive = false;
|
|
|
|
// Add geolocation to existing page initialization
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('📍 Adding geolocation to existing QR system...');
|
|
|
|
// Check if geolocation is supported
|
|
if (navigator.geolocation) {
|
|
requestUserLocation();
|
|
} else {
|
|
showLocationStatus('error', 'Location not supported by this browser');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Request user location
|
|
*/
|
|
function requestUserLocation() {
|
|
if (locationRequestActive) return;
|
|
|
|
locationRequestActive = true;
|
|
showLocationStatus('loading', 'Getting your location...');
|
|
|
|
const options = {
|
|
enableHighAccuracy: true,
|
|
timeout: 15000,
|
|
maximumAge: 300000
|
|
};
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
handleLocationSuccess,
|
|
handleLocationError,
|
|
options
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Handle successful location
|
|
*/
|
|
function handleLocationSuccess(position) {
|
|
locationRequestActive = false;
|
|
|
|
const coords = position.coords;
|
|
console.log('✅ Location obtained:', coords);
|
|
|
|
// Store location data
|
|
userLocation = {
|
|
latitude: coords.latitude,
|
|
longitude: coords.longitude,
|
|
accuracy: coords.accuracy,
|
|
altitude: coords.altitude,
|
|
timestamp: position.timestamp,
|
|
source: 'gps',
|
|
address: null
|
|
};
|
|
|
|
// Update hidden form fields
|
|
updateLocationFormFields();
|
|
|
|
// Update display
|
|
updateLocationDisplay();
|
|
|
|
// Show success status
|
|
const accuracyText = coords.accuracy ? Math.round(coords.accuracy) : 'unknown';
|
|
showLocationStatus('success', `Location captured (±${accuracyText}m accuracy)`);
|
|
|
|
// Try to get address
|
|
reverseGeocodeLocation(coords.latitude, coords.longitude);
|
|
}
|
|
|
|
/**
|
|
* Handle location errors
|
|
*/
|
|
function handleLocationError(error) {
|
|
locationRequestActive = false;
|
|
|
|
let message = 'Unable to get location';
|
|
|
|
switch(error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
message = 'Location access denied - enable in browser settings';
|
|
break;
|
|
case error.POSITION_UNAVAILABLE:
|
|
message = 'Location unavailable - GPS signal weak';
|
|
break;
|
|
case error.TIMEOUT:
|
|
message = 'Location request timed out';
|
|
break;
|
|
}
|
|
|
|
showLocationStatus('error', `${message} - check-in will work without location`);
|
|
userLocation.source = 'manual';
|
|
updateLocationFormFields();
|
|
}
|
|
|
|
/**
|
|
* Update form fields with location data
|
|
*/
|
|
function updateLocationFormFields() {
|
|
document.getElementById('latitude').value = userLocation.latitude || '';
|
|
document.getElementById('longitude').value = userLocation.longitude || '';
|
|
document.getElementById('accuracy').value = userLocation.accuracy || '';
|
|
document.getElementById('altitude').value = userLocation.altitude || '';
|
|
document.getElementById('locationSource').value = userLocation.source || 'manual';
|
|
document.getElementById('address').value = userLocation.address || '';
|
|
|
|
console.log('📝 Updated form fields with location data');
|
|
}
|
|
|
|
/**
|
|
* Update location display
|
|
*/
|
|
function updateLocationDisplay() {
|
|
if (userLocation.latitude && userLocation.longitude) {
|
|
document.getElementById('displayLatitude').textContent = userLocation.latitude.toFixed(6);
|
|
document.getElementById('displayLongitude').textContent = userLocation.longitude.toFixed(6);
|
|
document.getElementById('displayAccuracy').textContent =
|
|
userLocation.accuracy ? `±${Math.round(userLocation.accuracy)}m` : 'Unknown';
|
|
document.getElementById('displayAddress').textContent = userLocation.address || 'Loading...';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get address from coordinates
|
|
*/
|
|
function reverseGeocodeLocation(lat, lng) {
|
|
fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=en`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data && data.locality) {
|
|
userLocation.address = data.locality;
|
|
document.getElementById('address').value = data.locality;
|
|
document.getElementById('displayAddress').textContent = data.locality;
|
|
console.log('🏠 Address found:', data.locality);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('⚠️ Address lookup failed:', error);
|
|
document.getElementById('displayAddress').textContent = 'Address not available';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Show location status
|
|
*/
|
|
function showLocationStatus(type, message) {
|
|
const statusElement = document.getElementById('locationStatus');
|
|
const messageElement = document.getElementById('locationMessage');
|
|
|
|
statusElement.className = `location-status ${type}`;
|
|
statusElement.style.display = 'flex';
|
|
|
|
let icon = '📡';
|
|
if (type === 'success') icon = '✅';
|
|
if (type === 'error') icon = '⚠️';
|
|
|
|
messageElement.innerHTML = `${icon} ${message}`;
|
|
|
|
// Auto-hide after 8 seconds unless it's loading
|
|
if (type !== 'loading') {
|
|
setTimeout(() => {
|
|
statusElement.style.display = 'none';
|
|
}, 8000);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle location info display
|
|
*/
|
|
function toggleLocationInfo() {
|
|
const locationInfo = document.getElementById('locationInfo');
|
|
if (locationInfo.style.display === 'none' || !locationInfo.style.display) {
|
|
updateLocationDisplay();
|
|
locationInfo.style.display = 'block';
|
|
} else {
|
|
locationInfo.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Retry location request
|
|
*/
|
|
function retryLocationRequest() {
|
|
userLocation = {
|
|
latitude: null,
|
|
longitude: null,
|
|
accuracy: null,
|
|
altitude: null,
|
|
timestamp: null,
|
|
source: 'manual',
|
|
address: null
|
|
};
|
|
requestUserLocation();
|
|
}
|
|
|
|
// Hook into existing form submission to include location data
|
|
const originalSubmitCheckin = window.submitCheckin;
|
|
if (typeof originalSubmitCheckin === 'function') {
|
|
window.submitCheckin = function(employeeId) {
|
|
// Ensure form has latest location data
|
|
updateLocationFormFields();
|
|
|
|
console.log('📤 Submitting with location data:', {
|
|
employee_id: employeeId,
|
|
latitude: userLocation.latitude,
|
|
longitude: userLocation.longitude,
|
|
accuracy: userLocation.accuracy,
|
|
source: userLocation.source
|
|
});
|
|
|
|
// Call original function
|
|
return originalSubmitCheckin(employeeId);
|
|
};
|
|
}
|
|
|
|
console.log('📍 Geolocation integration completed successfully!');
|
|
</script>
|
|
</body>
|
|
</html> |