Create a modern, professional, interactive web page for **Test Case Management Demo**.
a85611d
verified
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize tooltips | |
| const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); | |
| tooltipTriggerList.map(function (tooltipTriggerEl) { | |
| return new bootstrap.Tooltip(tooltipTriggerEl); | |
| }); | |
| // Toggle mobile menu | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if(mobileMenuButton && mobileMenu) { | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| } | |
| // Sample data for charts (would be replaced with real data in production) | |
| const testStatusData = { | |
| labels: ['Passed', 'Failed', 'Pending'], | |
| datasets: [{ | |
| data: [124, 8, 32], | |
| backgroundColor: [ | |
| '#10B981', | |
| '#EF4444', | |
| '#F59E0B' | |
| ], | |
| hoverOffset: 4 | |
| }] | |
| }; | |
| // Initialize charts (example with Chart.js) | |
| if(typeof Chart !== 'undefined') { | |
| const ctx = document.getElementById('testStatusChart'); | |
| if(ctx) { | |
| new Chart(ctx, { | |
| type: 'doughnut', | |
| data: testStatusData, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| } | |
| // Filter functionality for test cases | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| const testCaseRows = document.querySelectorAll('tbody tr'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const filterValue = this.getAttribute('data-filter'); | |
| testCaseRows.forEach(row => { | |
| if(filterValue === 'all') { | |
| row.style.display = ''; | |
| } else { | |
| const rowType = row.querySelector('td:nth-child(3) span').textContent.toLowerCase(); | |
| if(rowType.includes(filterValue)) { | |
| row.style.display = ''; | |
| } else { | |
| row.style.display = 'none'; | |
| } | |
| } | |
| }); | |
| // Update active button | |
| filterButtons.forEach(btn => btn.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| }); |