/** * HVAC Trainer Dashboard Enhanced JavaScript * * Handles dynamic filtering, sorting, pagination, and search for the events table. */ (function($) { 'use strict'; // Store current state let currentState = { status: 'all', search: '', orderby: 'date', order: 'DESC', page: 1, per_page: 10, date_from: '', date_to: '' }; // Debounce timer for search let searchTimer = null; // Initialize the dashboard when DOM is ready $(document).ready(function() { initializeEnhancedDashboard(); }); /** * Initialize all enhanced dashboard features */ function initializeEnhancedDashboard() { // Initialize state from URL params initializeStateFromURL(); // Set up event handlers initEventFilters(); initSearchBox(); initDateFilters(); initPerPageSelector(); initSortableColumns(); initPagination(); } /** * Initialize state from URL parameters */ function initializeStateFromURL() { const urlParams = new URLSearchParams(window.location.search); currentState.status = urlParams.get('event_status') || 'all'; currentState.search = urlParams.get('search') || ''; currentState.orderby = urlParams.get('orderby') || 'date'; currentState.order = urlParams.get('order') || 'DESC'; currentState.page = parseInt(urlParams.get('paged')) || 1; currentState.per_page = parseInt(urlParams.get('per_page')) || 10; currentState.date_from = urlParams.get('date_from') || ''; currentState.date_to = urlParams.get('date_to') || ''; // Update UI elements to match state $('#hvac-event-search').val(currentState.search); $('#hvac-date-from').val(currentState.date_from); $('#hvac-date-to').val(currentState.date_to); $('#hvac-per-page').val(currentState.per_page); } /** * Initialize status filter tabs */ function initEventFilters() { $('.hvac-event-filters a').on('click', function(e) { e.preventDefault(); const status = $(this).data('status'); currentState.status = status; currentState.page = 1; // Reset to first page when filtering // Update active class $('.hvac-event-filters a').removeClass('hvac-filter-active ast-button-primary').addClass('ast-button-secondary'); $(this).addClass('hvac-filter-active ast-button-primary').removeClass('ast-button-secondary'); // Refresh table refreshEventsTable(); }); } /** * Initialize search box */ function initSearchBox() { $('#hvac-event-search').on('keyup', function() { const searchTerm = $(this).val(); // Clear existing timer if (searchTimer) { clearTimeout(searchTimer); } // Set new timer to debounce search searchTimer = setTimeout(function() { currentState.search = searchTerm; currentState.page = 1; // Reset to first page when searching refreshEventsTable(); }, 500); // 500ms delay }); } /** * Initialize date filters */ function initDateFilters() { $('#hvac-date-from, #hvac-date-to').on('change', function() { currentState.date_from = $('#hvac-date-from').val(); currentState.date_to = $('#hvac-date-to').val(); currentState.page = 1; // Reset to first page when filtering refreshEventsTable(); }); } /** * Initialize per page selector */ function initPerPageSelector() { $('#hvac-per-page').on('change', function() { currentState.per_page = parseInt($(this).val()); currentState.page = 1; // Reset to first page when changing per page refreshEventsTable(); }); } /** * Initialize sortable column headers */ function initSortableColumns() { $(document).on('click', '.hvac-events-table-wrapper th.sortable a', function(e) { e.preventDefault(); const orderby = $(this).data('orderby'); const order = $(this).data('order'); currentState.orderby = orderby; currentState.order = order; currentState.page = 1; // Reset to first page when sorting refreshEventsTable(); }); } /** * Initialize pagination controls */ function initPagination() { // Pagination links $(document).on('click', '.pagination-links a:not(.disabled)', function(e) { e.preventDefault(); const page = parseInt($(this).data('page')); if (page) { currentState.page = page; refreshEventsTable(); } }); // Page input field $(document).on('keypress', '.current-page', function(e) { if (e.which === 13) { // Enter key e.preventDefault(); const page = parseInt($(this).val()); const totalPages = parseInt($('.total-pages').text()); if (page >= 1 && page <= totalPages) { currentState.page = page; refreshEventsTable(); } } }); } /** * Refresh the events table via AJAX */ function refreshEventsTable() { const $eventsTableWrapper = $('.hvac-events-table-wrapper'); // Show loading indicator $eventsTableWrapper.addClass('loading').append('
Loading events...
'); // Make AJAX request $.ajax({ url: hvac_dashboard.ajax_url, type: 'POST', data: { action: 'hvac_filter_events', status: currentState.status, search: currentState.search, orderby: currentState.orderby, order: currentState.order, page: currentState.page, per_page: currentState.per_page, date_from: currentState.date_from, date_to: currentState.date_to, nonce: hvac_dashboard.nonce }, success: function(response) { if (response.success) { // Replace the table HTML $eventsTableWrapper.html(response.data.html); // Update URL without reloading the page updateURL(); // Scroll to top of table $('html, body').animate({ scrollTop: $('.hvac-dashboard-events').offset().top - 50 }, 300); } else { showError('Error loading events: ' + response.data.message); } }, error: function() { showError('Error communicating with server.'); }, complete: function() { $eventsTableWrapper.removeClass('loading'); } }); } /** * Update URL parameters without reloading */ function updateURL() { if (!history.pushState) return; const params = new URLSearchParams(); // Only add non-default values to URL if (currentState.status !== 'all') params.set('event_status', currentState.status); if (currentState.search) params.set('search', currentState.search); if (currentState.orderby !== 'date') params.set('orderby', currentState.orderby); if (currentState.order !== 'DESC') params.set('order', currentState.order); if (currentState.page > 1) params.set('paged', currentState.page); if (currentState.per_page !== 10) params.set('per_page', currentState.per_page); if (currentState.date_from) params.set('date_from', currentState.date_from); if (currentState.date_to) params.set('date_to', currentState.date_to); const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : ''); window.history.pushState({ path: newUrl }, '', newUrl); } /** * Show error message */ function showError(message) { $('.hvac-events-table-wrapper') .html('

' + message + '

'); } })(jQuery);