nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement export function

Browse Source
This commit is contained in:
Nguyen Ngo
2025-08-14 11:11:38 -04:00
parent 03c75d5d30
commit 8392db4798
6 changed files with 1302 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/attendance_report.js
+126
View File
@@ -945,3 +945,129 @@ function exportAttendanceWithAccuracy() {
link.click();
document.body.removeChild(link);
}
function exportAttendance() {
// Log export action
console.log('Export button clicked - redirecting to configuration page');
// Get current filters
const currentFilters = getCurrentFilters();
// Build URL with current filters
const params = new URLSearchParams();
if (currentFilters.date_from) params.append('date_from', currentFilters.date_from);
if (currentFilters.date_to) params.append('date_to', currentFilters.date_to);
if (currentFilters.location) params.append('location', currentFilters.location);
if (currentFilters.employee) params.append('employee', currentFilters.employee);
// Navigate to export configuration page
const configUrl = '/export-configuration' + (params.toString() ? '?' + params.toString() : '');
window.location.href = configUrl;
}
function getCurrentFilters() {
// Extract current filter values from the page
return {
date_from: document.getElementById('date_from')?.value || '',
date_to: document.getElementById('date_to')?.value || '',
location: document.getElementById('location')?.value || '',
employee: document.getElementById('employee')?.value || ''
};
}
// Add a quick CSV export function as backup (keep existing functionality)
function exportAttendanceCSV() {
// Build export URL with current filters for CSV
const params = new URLSearchParams();
const filters = getCurrentFilters();
if (filters.date_from) params.append('date_from', filters.date_from);
if (filters.date_to) params.append('date_to', filters.date_to);
if (filters.location) params.append('location', filters.location);
if (filters.employee) params.append('employee', filters.employee);
params.append('export', 'csv');
// Create a temporary link and click it to download
const downloadUrl = window.location.pathname + '?' + params.toString();
window.open(downloadUrl, '_blank');
}
// Enhanced export menu (if you want to add dropdown with multiple export options)
function showExportMenu() {
// Create export options menu
const existingMenu = document.getElementById('exportMenu');
if (existingMenu) {
existingMenu.remove();
return;
}
const exportBtn = document.querySelector('button[onclick="exportAttendance()"]');
if (!exportBtn) return;
const menu = document.createElement('div');
menu.id = 'exportMenu';
menu.style.cssText = `
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
z-index: 1000;
min-width: 200px;
margin-top: 5px;
`;
menu.innerHTML = `
<div style="padding: 0.5rem;">
<button onclick="exportAttendance(); closeExportMenu();"
style="width: 100%; padding: 0.75rem; border: none; background: none; text-align: left; cursor: pointer; border-radius: 4px;"
onmouseover="this.style.background='#f7fafc'"
onmouseout="this.style.background='none'">
<i class="fas fa-file-excel" style="color: #48bb78; margin-right: 0.5rem;"></i>
Excel Export (Customizable)
</button>
<button onclick="exportAttendanceCSV(); closeExportMenu();"
style="width: 100%; padding: 0.75rem; border: none; background: none; text-align: left; cursor: pointer; border-radius: 4px;"
onmouseover="this.style.background='#f7fafc'"
onmouseout="this.style.background='none'">
<i class="fas fa-file-csv" style="color: #4299e1; margin-right: 0.5rem;"></i>
Quick CSV Export
</button>
</div>
`;
exportBtn.parentElement.style.position = 'relative';
exportBtn.parentElement.appendChild(menu);
// Close menu when clicking outside
setTimeout(() => {
document.addEventListener('click', function closeOnClickOutside(e) {
if (!menu.contains(e.target) && e.target !== exportBtn) {
closeExportMenu();
document.removeEventListener('click', closeOnClickOutside);
}
});
}, 100);
}
function closeExportMenu() {
const menu = document.getElementById('exportMenu');
if (menu) {
menu.remove();
}
}
// Initialize export functionality when page loads
document.addEventListener('DOMContentLoaded', function() {
// Update export button to use enhanced functionality
const exportBtn = document.querySelector('button[onclick="exportAttendance()"]');
if (exportBtn) {
// You can modify the button to show a dropdown instead
// exportBtn.onclick = showExportMenu;
// exportBtn.innerHTML = '<i class="fas fa-download"></i> Export Data <i class="fas fa-chevron-down" style="margin-left: 0.5rem;"></i>';
}
console.log('Enhanced export functionality initialized');
});
static/js/export_configuration.js
+160
View File
@@ -0,0 +1,160 @@
document.addEventListener('DOMContentLoaded', function() {
console.log('Simple Export Configuration loaded');
// Setup basic event listeners
setupBasicListeners();
// Initial preview update
setTimeout(updatePreview, 100);
});
function setupBasicListeners() {
// Add listeners to checkboxes
const checkboxes = document.querySelectorAll('input[name="selected_columns"]');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
toggleColumnName(this.value);
setTimeout(updatePreview, 50);
});
});
// Add listeners to name inputs
const nameInputs = document.querySelectorAll('input[id^="name_"]');
nameInputs.forEach(function(input) {
input.addEventListener('input', function() {
setTimeout(updatePreview, 300);
});
});
// Form validation
const form = document.getElementById('exportForm');
if (form) {
form.addEventListener('submit', function(e) {
const selected = document.querySelectorAll('input[name="selected_columns"]:checked');
if (selected.length === 0) {
e.preventDefault();
alert('Please select at least one column to export.');
}
});
}
}
function toggleColumnName(columnKey) {
const checkbox = document.getElementById('col_' + columnKey);
const nameGroup = document.getElementById('name_group_' + columnKey);
if (checkbox && nameGroup) {
if (checkbox.checked) {
nameGroup.style.display = 'block';
} else {
nameGroup.style.display = 'none';
}
}
}
function updatePreview() {
const previewHeader = document.getElementById('previewHeader');
const previewTable = document.querySelector('.preview-table tbody');
if (!previewHeader || !previewTable) return;
const selectedColumns = Array.from(document.querySelectorAll('input[name="selected_columns"]:checked'));
if (selectedColumns.length === 0) {
previewHeader.innerHTML = '';
previewTable.innerHTML = '<tr><td colspan="100%" style="text-align:center; padding:2rem;">No columns selected</td></tr>';
updateGenerateButton(0);
return;
}
// Build header
let headerHTML = '';
selectedColumns.forEach(function(checkbox) {
const columnKey = checkbox.value;
const nameInput = document.getElementById('name_' + columnKey);
const customName = nameInput ? nameInput.value : columnKey;
headerHTML += '<th>' + customName + '</th>';
});
previewHeader.innerHTML = headerHTML;
// Build sample row
let sampleRowHTML = '<tr>';
selectedColumns.forEach(function(checkbox) {
const columnKey = checkbox.value;
const sampleData = getSampleData(columnKey);
sampleRowHTML += '<td>' + sampleData + '</td>';
});
sampleRowHTML += '</tr>';
previewTable.innerHTML = sampleRowHTML;
updateGenerateButton(selectedColumns.length);
}
function getSampleData(columnKey) {
const samples = {
'employee_id': 'EMP001',
'location_name': 'Main Office',
'status': 'Check In',
'check_in_date': '2025-01-15',
'check_in_time': '09:30:00',
'qr_address': '123 Business St',
'address': '123 Business St',
'device_info': 'iPhone',
'ip_address': '192.168.1.100',
'user_agent': 'Mobile Safari',
'latitude': '40.7128',
'longitude': '-74.0060',
'accuracy': '5.2',
'location_accuracy': '0.003'
};
return samples[columnKey] || 'Sample';
}
function updateGenerateButton(columnCount) {
const generateBtn = document.getElementById('generateBtn');
if (!generateBtn) return;
if (columnCount === 0) {
generateBtn.disabled = true;
generateBtn.innerHTML = 'Select columns to export';
} else {
generateBtn.disabled = false;
generateBtn.innerHTML = 'Generate Excel Export (' + columnCount + ' columns)';
}
}
function selectAllColumns() {
const checkboxes = document.querySelectorAll('input[name="selected_columns"]');
checkboxes.forEach(function(checkbox) {
checkbox.checked = true;
toggleColumnName(checkbox.value);
});
updatePreview();
}
function deselectAllColumns() {
const checkboxes = document.querySelectorAll('input[name="selected_columns"]');
checkboxes.forEach(function(checkbox) {
checkbox.checked = false;
toggleColumnName(checkbox.value);
});
updatePreview();
}
function resetToDefaults() {
// Get checkboxes and reset to defaults
const checkboxes = document.querySelectorAll('input[name="selected_columns"]');
checkboxes.forEach(function(checkbox) {
// Default enabled columns
const defaultEnabled = ['employee_id', 'location_name', 'status', 'check_in_date', 'check_in_time'];
checkbox.checked = defaultEnabled.includes(checkbox.value);
toggleColumnName(checkbox.value);
// Reset name input
const nameInput = document.getElementById('name_' + checkbox.value);
if (nameInput) {
nameInput.value = nameInput.getAttribute('value') || checkbox.value;
}
});
updatePreview();
}