Learning & Research Dashboard
Resource Collection
Edit Dashboard Data
${tagsHTML}
`; resourceList.appendChild(card); }); }; const populateDataConfigForm = () => { if (!topicSelect) return; topicSelect.innerHTML = ''; researchData.forEach(data => { const option = document.createElement('option'); option.value = data.id; option.textContent = data.topic; topicSelect.appendChild(option); }); loadDynamicFieldsForTopic(topicSelect.value); }; const loadDynamicFieldsForTopic = (topicId) => { if (!dynamicFieldsContainer) return; const data = researchData.find(d => d.id == topicId); if (!data) return; dynamicFieldsContainer.innerHTML = ''; for (const [key, value] of Object.entries(data.metrics)) { const formGroup = document.createElement('div'); formGroup.className = 'dc-form-group'; formGroup.innerHTML = ` `; dynamicFieldsContainer.appendChild(formGroup); } const notesGroup = document.createElement('div'); notesGroup.className = 'dc-form-group'; notesGroup.innerHTML = ` `; dynamicFieldsContainer.appendChild(notesGroup); }; // --- EVENT HANDLERS --- // const switchTab = (tabId) => { activeTab = tabId; tabContents.forEach(content => content.classList.toggle('active', content.id === tabId)); tabButtons.forEach(button => button.classList.toggle('active', button.dataset.tab === tabId)); if (tabId === 'dashboard') renderDashboard(); if (tabId === 'research-hub') renderResources(); if (tabId === 'data-config') populateDataConfigForm(); }; tabButtons.forEach(button => { button.addEventListener('click', () => switchTab(button.dataset.tab)); }); // Data Config Form Logic topicSelect.addEventListener('change', (e) => loadDynamicFieldsForTopic(e.target.value)); $('#dc-edit-form').addEventListener('submit', (e) => { e.preventDefault(); const topicId = topicSelect.value; const data = researchData.find(d => d.id == topicId); if (data) { dynamicFieldsContainer.querySelectorAll('input[type="number"]').forEach(input => { const key = input.dataset.metricKey; data.metrics[key] = parseInt(input.value, 10); }); data.notes = $('#dc-notes').value; alert('Data saved successfully!'); } }); // Research Hub Form Logic $('#rh-add-resource-form').addEventListener('submit', (e) => { e.preventDefault(); const title = $('#rh-title').value; const url = $('#rh-url').value; const tags = $('#rh-tags').value.split(',').map(t => t.trim()).filter(Boolean); resources.push({ id: nextResourceId++, title, url, tags }); renderResources(); e.target.reset(); }); $('#rh-filter').addEventListener('input', (e) => renderResources(e.target.value)); // PDF Download $('#download-pdf-btn').addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(22); doc.text("Research Dashboard Summary", 105, 20, null, null, "center"); const tableData = []; researchData.forEach(data => { tableData.push([data.topic]); for(const [key, value] of Object.entries(data.metrics)) { tableData.push([` - ${key}`, value]); } tableData.push([` - Notes`, data.notes]); }); doc.autoTable({ startY: 30, head: [['Topic / Metric', 'Value']], body: tableData, theme: 'grid', headStyles: { fillColor: [44, 62, 80] }, // --primary-color didParseCell: function (data) { if (data.row.index % 4 === 0) { data.cell.styles.fontStyle = 'bold'; data.cell.styles.fillColor = '#ecf0f1'; } } }); doc.save('dashboard-summary.pdf'); }); // Navigation Buttons const tabOrder = ['dashboard', 'research-hub', 'data-config']; $('#next-btn').addEventListener('click', () => { const currentIndex = tabOrder.indexOf(activeTab); const nextIndex = (currentIndex + 1) % tabOrder.length; switchTab(tabOrder[nextIndex]); }); $('#prev-btn').addEventListener('click', () => { const currentIndex = tabOrder.indexOf(activeTab); const prevIndex = (currentIndex - 1 + tabOrder.length) % tabOrder.length; switchTab(tabOrder[prevIndex]); }); // --- INITIALIZATION --- // switchTab('dashboard'); });