Implement export function
This commit is contained in:
Nguyen Ngo
@@ -0,0 +1,449 @@
|
||||
/* Export Configuration Styles */
|
||||
.export-config-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.export-header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
margin: 0 auto 2rem;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
color: #2d3748;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-content h1 i {
|
||||
color: #48bb78;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: #718096;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Applied Filters Section */
|
||||
.applied-filters-section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
.filters-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.filters-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filters-header h3 {
|
||||
color: #2d3748;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.filters-header i {
|
||||
color: #4299e1;
|
||||
}
|
||||
|
||||
.filters-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
background: linear-gradient(135deg, #4299e1, #3182ce);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 25px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3);
|
||||
}
|
||||
|
||||
/* Export Configuration Section */
|
||||
.export-config-section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.config-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.config-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.config-header h3 {
|
||||
color: #2d3748;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.config-header i {
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Columns Grid */
|
||||
.columns-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
background: linear-gradient(135deg, #f7fafc, #edf2f7);
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-item:hover {
|
||||
border-color: #4299e1;
|
||||
box-shadow: 0 4px 16px rgba(66, 153, 225, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.column-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.column-checkbox input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-checkbox label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-checkbox label i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e0;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
color: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-checkbox input[type="checkbox"]:checked + label {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.column-checkbox input[type="checkbox"]:checked + label i {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.column-name-input {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-name-input label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: #4a5568;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.column-name-input input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-name-input input:focus {
|
||||
outline: none;
|
||||
border-color: #4299e1;
|
||||
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
|
||||
}
|
||||
|
||||
/* Preview Section */
|
||||
.preview-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.preview-header h3 {
|
||||
color: #2d3748;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1.5rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.preview-header i {
|
||||
color: #ed8936;
|
||||
}
|
||||
|
||||
.preview-table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.preview-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.preview-table th {
|
||||
background: linear-gradient(135deg, #4299e1, #3182ce);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #2b6cb0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.preview-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #a0aec0;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Submit Section */
|
||||
.submit-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.submit-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.submit-note {
|
||||
color: #718096;
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.submit-note i {
|
||||
color: #4299e1;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: linear-gradient(135deg, #38a169, #2f855a);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, #a0aec0, #718096);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: linear-gradient(135deg, #718096, #4a5568);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #4299e1;
|
||||
border: 2px solid #4299e1;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #4299e1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.export-config-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.export-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.columns-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.config-card,
|
||||
.preview-section,
|
||||
.submit-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.filters-display {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submit-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -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');
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
Reference in New Issue
Block a user