|
| 1 | +// options.js |
| 2 | +// Handles navigation and basic filtering for the options page |
| 3 | + |
| 4 | +document.addEventListener('DOMContentLoaded', () => { |
| 5 | + // Sidebar navigation |
| 6 | + const navItems = document.querySelectorAll('.nav-item'); |
| 7 | + const sections = document.querySelectorAll('.section'); |
| 8 | + navItems.forEach(item => { |
| 9 | + item.addEventListener('click', () => { |
| 10 | + navItems.forEach(i => i.classList.remove('active')); |
| 11 | + item.classList.add('active'); |
| 12 | + const sectionId = 'section-' + item.dataset.section; |
| 13 | + sections.forEach(sec => sec.classList.remove('active')); |
| 14 | + const activeSection = document.getElementById(sectionId); |
| 15 | + if (activeSection) activeSection.classList.add('active'); |
| 16 | + }); |
| 17 | + }); |
| 18 | + |
| 19 | + // All Problems: load and render problems |
| 20 | + const problemsList = document.getElementById('problemsList'); |
| 21 | + const searchInput = document.getElementById('searchInput'); |
| 22 | + const tagFilter = document.getElementById('tagFilter'); |
| 23 | + |
| 24 | + function renderProblems(problems, filterTag, searchTerm) { |
| 25 | + problemsList.innerHTML = ''; |
| 26 | + let filtered = problems; |
| 27 | + if (filterTag && filterTag !== 'all') { |
| 28 | + filtered = filtered.filter(p => Array.isArray(p.tags) && p.tags.includes(filterTag)); |
| 29 | + } |
| 30 | + if (searchTerm) { |
| 31 | + filtered = filtered.filter(p => p.title.toLowerCase().includes(searchTerm.toLowerCase())); |
| 32 | + } |
| 33 | + if (filtered.length === 0) { |
| 34 | + problemsList.innerHTML = '<p>No problems found.</p>'; |
| 35 | + } |
| 36 | + filtered.forEach(problem => { |
| 37 | + const item = document.createElement('div'); |
| 38 | + item.className = 'problem-item'; |
| 39 | + const difficultyClass = problem.difficulty ? problem.difficulty.toLowerCase() : ''; |
| 40 | + const tagsHtml = Array.isArray(problem.tags) && problem.tags.length > 0 |
| 41 | + ? `<span style='font-size:0.85em; color:#666; margin-left:8px;'>[${problem.tags.join(", ")}]</span>` |
| 42 | + : "<span style='font-size:0.85em; color:#bbb; margin-left:8px;'>[No tags]</span>"; |
| 43 | + item.innerHTML = ` |
| 44 | + <a href="${problem.url}" target="_blank">${problem.title}</a> |
| 45 | + <span class="difficulty ${difficultyClass}">${problem.difficulty}</span> |
| 46 | + ${tagsHtml} |
| 47 | + `; |
| 48 | + problemsList.appendChild(item); |
| 49 | + }); |
| 50 | + } |
| 51 | + |
| 52 | + // Load problems from storage |
| 53 | + browser.storage.local.get(null).then((allData) => { |
| 54 | + const problems = Object.values(allData).filter(p => |
| 55 | + p && |
| 56 | + typeof p.title === 'string' && p.title !== 'Unknown Title' && |
| 57 | + typeof p.slug === 'string' && p.slug !== 'unknown-problem' && |
| 58 | + typeof p.difficulty === 'string' && p.difficulty !== 'Unknown Difficulty' |
| 59 | + ); |
| 60 | + problems.sort((a, b) => (b.solvedAt || 0) - (a.solvedAt || 0)); |
| 61 | + // Populate tag filter |
| 62 | + const tagSet = new Set(); |
| 63 | + problems.forEach(p => { |
| 64 | + if (Array.isArray(p.tags)) { |
| 65 | + p.tags.forEach(tag => tagSet.add(tag)); |
| 66 | + } |
| 67 | + }); |
| 68 | + tagFilter.innerHTML = '<option value="all">All Tags</option>'; |
| 69 | + Array.from(tagSet).forEach(tag => { |
| 70 | + const opt = document.createElement('option'); |
| 71 | + opt.value = tag; |
| 72 | + opt.textContent = tag; |
| 73 | + tagFilter.appendChild(opt); |
| 74 | + }); |
| 75 | + // Initial render |
| 76 | + renderProblems(problems, tagFilter.value, searchInput.value); |
| 77 | + // Event listeners |
| 78 | + tagFilter.addEventListener('change', () => { |
| 79 | + renderProblems(problems, tagFilter.value, searchInput.value); |
| 80 | + }); |
| 81 | + searchInput.addEventListener('input', () => { |
| 82 | + renderProblems(problems, tagFilter.value, searchInput.value); |
| 83 | + }); |
| 84 | + }); |
| 85 | +}); |
0 commit comments