Enhanced PHP File Manager

📁 Current Path: 🏠 Root /home/u892747680/domains/sisteminformasic.com/public_html/cvsuryaornamen/js/admin.js

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/cvsuryaornamen/js/admin.js

Free Space:

9.97 TB

🔧 Quick Actions

✏️ Editing: pagination.js

document.addEventListener('DOMContentLoaded', function() {
    // Tab switching
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all buttons and panes
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabPanes.forEach(pane => pane.classList.remove('active'));
            
            // Add active class to clicked button and corresponding pane
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
    
    // AJAX Pagination dengan Fetch API
    async function loadProducts(page) {
        try {
            // Show loading indicator
            showLoading(true);
            
            // Fetch data dari server
            const response = await fetch(`load_products.php?page=${page}`);
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const html = await response.text();
            
            // Update products container
            document.getElementById('products-container').innerHTML = html;
            
            // Re-attach pagination event listeners
            attachPaginationListeners();
            
            // Smooth scroll to products section
            document.getElementById('products-container').scrollIntoView({ 
                behavior: 'smooth',
                block: 'start'
            });
            
        } catch (error) {
            console.error('Error loading products:', error);
            
            // Show user-friendly error message
            showErrorMessage('Gagal memuat produk. Silakan coba lagi.');
            
        } finally {
            // Hide loading indicator
            showLoading(false);
        }
    }
    
    function attachPaginationListeners() {
        const paginationLinks = document.querySelectorAll('.pagination-item[data-page]');
        
        paginationLinks.forEach(link => {
            link.addEventListener('click', async function(e) {
                e.preventDefault();
                
                if (!this.classList.contains('disabled') && 
                    !this.classList.contains('active')) {
                    
                    const page = this.getAttribute('data-page');
                    await loadProducts(page);
                }
            });
        });
    }
    
    function showLoading(show) {
        const loadingIndicator = document.getElementById('loading-indicator');
        if (loadingIndicator) {
            loadingIndicator.style.display = show ? 'flex' : 'none';
        }
    }
    
    function showErrorMessage(message) {
        // Create error toast/alert
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-toast';
        errorDiv.innerHTML = `
            <div class="error-content">
                <i class="fas fa-exclamation-triangle"></i>
                <span>${message}</span>
                <button class="close-error" onclick="this.parentElement.parentElement.remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;
        
        // Add error toast to body
        document.body.appendChild(errorDiv);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            if (errorDiv.parentElement) {
                errorDiv.remove();
            }
        }, 5000);
        
        // Animate in
        setTimeout(() => {
            errorDiv.classList.add('show');
        }, 10);
    }
    
    function showSuccessMessage(message) {
        // Create success toast/alert
        const successDiv = document.createElement('div');
        successDiv.className = 'success-toast';
        successDiv.innerHTML = `
            <div class="success-content">
                <i class="fas fa-check-circle"></i>
                <span>${message}</span>
                <button class="close-success" onclick="this.parentElement.parentElement.remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;
        
        document.body.appendChild(successDiv);
        
        setTimeout(() => {
            if (successDiv.parentElement) {
                successDiv.remove();
            }
        }, 3000);
        
        setTimeout(() => {
            successDiv.classList.add('show');
        }, 10);
    }
    
    // Initialize pagination listeners on page load
    attachPaginationListeners();
    
    // Handle delete product with confirmation
    document.addEventListener('click', function(e) {
        if (e.target.closest('a[href*="hapus_produk.php"]')) {
            e.preventDefault();
            
            const deleteLink = e.target.closest('a');
            const productName = deleteLink.closest('.product-card')
                .querySelector('.product-title').textContent;
            
            if (confirm(`Yakin ingin menghapus produk "${productName}"?`)) {
                handleDeleteProduct(deleteLink.getAttribute('href'));
            }
        }
    });
    
    async function handleDeleteProduct(deleteUrl) {
        try {
            showLoading(true);
            
            const response = await fetch(deleteUrl, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            if (response.ok) {
                showSuccessMessage('Produk berhasil dihapus!');
                
                // Reload current page products
                const currentPage = document.querySelector('.pagination-item.active');
                const page = currentPage ? currentPage.getAttribute('data-page') : 1;
                await loadProducts(page);
                
            } else {
                throw new Error('Gagal menghapus produk');
            }
            
        } catch (error) {
            console.error('Error deleting product:', error);
            showErrorMessage('Gagal menghapus produk. Silakan coba lagi.');
        } finally {
            showLoading(false);
        }
    }
    
    // Handle search functionality (if search input exists)
    const searchInput = document.getElementById('search-input');
    if (searchInput) {
        let searchTimeout;
        
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            
            searchTimeout = setTimeout(async () => {
                const searchTerm = this.value.trim();
                await searchProducts(searchTerm);
            }, 500); // Debounce 500ms
        });
    }
    
    async function searchProducts(searchTerm) {
        try {
            showLoading(true);
            
            const response = await fetch(`load_products.php?search=${encodeURIComponent(searchTerm)}&page=1`);
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const html = await response.text();
            document.getElementById('products-container').innerHTML = html;
            attachPaginationListeners();
            
        } catch (error) {
            console.error('Error searching products:', error);
            showErrorMessage('Gagal mencari produk. Silakan coba lagi.');
        } finally {
            showLoading(false);
        }
    }
    
    // Handle category filter (if category filter exists)
    const categoryFilter = document.getElementById('category-filter');
    if (categoryFilter) {
        categoryFilter.addEventListener('change', async function() {
            const categoryId = this.value;
            await filterByCategory(categoryId);
        });
    }
    
    async function filterByCategory(categoryId) {
        try {
            showLoading(true);
            
            const response = await fetch(`load_products.php?category=${categoryId}&page=1`);
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const html = await response.text();
            document.getElementById('products-container').innerHTML = html;
            attachPaginationListeners();
            
        } catch (error) {
            console.error('Error filtering products:', error);
            showErrorMessage('Gagal memfilter produk. Silakan coba lagi.');
        } finally {
            showLoading(false);
        }
    }
    
    // Handle keyboard navigation for pagination
    document.addEventListener('keydown', function(e) {
        if (e.target.tagName.toLowerCase() === 'input') return;
        
        const currentPage = document.querySelector('.pagination-item.active');
        if (!currentPage) return;
        
        let targetPage;
        
        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
            // Previous page
            const prevPage = currentPage.previousElementSibling;
            if (prevPage && prevPage.hasAttribute('data-page')) {
                targetPage = prevPage.getAttribute('data-page');
            }
        } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
            // Next page
            const nextPage = currentPage.nextElementSibling;
            if (nextPage && nextPage.hasAttribute('data-page')) {
                targetPage = nextPage.getAttribute('data-page');
            }
        }
        
        if (targetPage) {
            e.preventDefault();
            loadProducts(targetPage);
        }
    });
    
    // Handle window resize for responsive pagination
    let resizeTimeout;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            // Adjust pagination display if needed
            adjustPaginationDisplay();
        }, 250);
    });
    
    function adjustPaginationDisplay() {
        const pagination = document.getElementById('pagination-container');
        if (!pagination) return;
        
        const screenWidth = window.innerWidth;
        const paginationItems = pagination.querySelectorAll('.pagination-item:not(.dots)');
        
        // Hide some pagination numbers on small screens
        if (screenWidth < 768) {
            paginationItems.forEach((item, index) => {
                if (index > 0 && index < paginationItems.length - 1) {
                    const pageNum = parseInt(item.textContent);
                    const currentPageNum = parseInt(document.querySelector('.pagination-item.active').textContent);
                    
                    if (Math.abs(pageNum - currentPageNum) > 1) {
                        item.style.display = 'none';
                    } else {
                        item.style.display = 'inline-block';
                    }
                }
            });
        } else {
            // Show all pagination items on larger screens
            paginationItems.forEach(item => {
                item.style.display = 'inline-block';
            });
        }
    }
});

❌ Cancel