Go to the "Configuration" tab to add entries.

`; return; } // 3. Render Entries comparisonEntries.forEach(entry => { dashboardTable.appendChild(createDashboardItem(entry)); }); setupDashboardListeners(); } /** * Creates an editable item row for the dashboard */ function createDashboardItem(entry) { const itemEl = document.createElement("div"); itemEl.className = "rst-dash-item"; itemEl.dataset.id = entry.id; itemEl.innerHTML = ` ${escapeHTML(entry.detailsA)} ${escapeHTML(entry.detailsB)} × `; return itemEl; } /** * Attaches listeners to the dashboard elements */ function setupDashboardListeners() { if (!dashboardTable) return; // Listen for all input/change events to update state dashboardTable.querySelectorAll('input, textarea').forEach(element => { element.addEventListener('input', handleDashboardUpdate); }); // Listen for removal clicks (delegation) dashboardTable.querySelectorAll('button[data-action="remove-dash"]').forEach(button => { button.addEventListener('click', handleDashboardRemove); }); } /** * Handles updates made directly to items (inputs, textareas) */ function handleDashboardUpdate(e) { const itemEl = e.target.closest(".rst-dash-item"); if (!itemEl) return; const itemId = parseInt(itemEl.dataset.id); const entryIndex = comparisonEntries.findIndex(entry => entry.id === itemId); if (entryIndex === -1) return; const field = e.target.dataset.field; if (!field) return; // Update the master state array comparisonEntries[entryIndex][field] = e.target.value; } /** * Handles removing an item directly from the dashboard */ function handleDashboardRemove(e) { const itemEl = e.target.closest(".rst-dash-item"); if (itemEl) { const idToRemove = parseInt(itemEl.dataset.id); comparisonEntries = comparisonEntries.filter(entry => entry.id !== idToRemove); renderDashboard(); // Re-render to clear item and ensure clean state updateConfigListDisplay(); // Update config list too } } /** * Generates a PDF report from the dashboard data (CRITICAL FUNCTION) */ function downloadPDF() { // 1. PDF Library Check if (typeof window.jspdf === 'undefined' || typeof window.jspdf.jsPDF.autoTable === 'undefined') { alert("Error: PDF libraries could not be loaded. Please try again."); return; } // 2. Data Check if (comparisonEntries.length === 0) { alert("The comparison form is empty. Please add entries first."); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF("l", "pt", "a4"); // Landscape orientation for wide content const margin = 40; let yPos = margin; const textA = configTextA.value || "Text A"; const textB = configTextB.value || "Text B"; const tableHead = [ ["Theme / Concept", `${textA} Details`, `${textA} Citation`, `${textB} Details`, `${textB} Citation`] ]; const tableBody = []; // 3. Collect Data from DASHBOARD (Current State) comparisonEntries.forEach((entry) => { // Use the current state of the entry (which reflects dashboard edits) tableBody.push([ entry.theme, entry.detailsA, entry.citationA, entry.detailsB, entry.citationB ]); }); // 4. Document Title doc.setFontSize(20); doc.text(`Comparative Analysis: ${textA} vs ${textB}`, margin, yPos); yPos += 30; // 5. Generate Table doc.autoTable({ startY: yPos, head: tableHead, body: tableBody, theme: 'striped', headStyles: { fillColor: [0, 115, 230], // Blue textColor: [255, 255, 255], }, columnStyles: { 0: { cellWidth: 100 }, // Theme 1: { cellWidth: 200 }, // Details A 2: { cellWidth: 80 }, // Citation A 3: { cellWidth: 200 }, // Details B 4: { cellWidth: 80 }, // Citation B }, styles: { fontSize: 9, cellPadding: 4, overflow: 'linebreak', valign: 'top' }, margin: { left: margin, right: margin } }); // 6. Save PDF doc.save("Religious_Text_Comparison.pdf"); } /** * Helper to escape HTML */ function escapeHTML(str) { if (!str) return ""; return str .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } // --- 4. INITIALIZATION & EVENT LISTENERS --- // Tab Listeners tabButtons.forEach((btn) => { btn.addEventListener("click", () => showTab(btn.dataset.target)); }); navButtons.forEach((btn) => { btn.addEventListener("click", () => showTab(btn.dataset.target)); }); // Config Tab Listeners if (addEntryForm) { addEntryForm.addEventListener("submit", handleAddEntry); } if (configList) { configList.addEventListener("click", handleConfigListClick); } if (configTextA) { configTextA.addEventListener('input', renderDashboard); configTextB.addEventListener('input', renderDashboard); } // Generate button auto-switches to dashboard if (generateBtn) { generateBtn.addEventListener("click", () => renderDashboard() || showTab('rst-tab-dashboard')); } // Dashboard Tab Listeners if (pdfBtn) { pdfBtn.addEventListener("click", downloadPDF); } // General delegation for dashboard updates and removal if (dashboardTable) { // Input events handled in setupDashboardListeners } // Load sample data comparisonEntries = [ { id: entryIdCounter++, theme: 'Creation Narrative', detailsA: 'Creation occurs over six days, culminating in humanity being made in God\'s image. God rests on the seventh day. Focus on order and structure.', citationA: 'Genesis 1-2', detailsB: 'Creation occurs over six days. God creates humanity from clay and breathes His spirit into them. God is never weary. Focus is on God\'s power and sovereignty.', citationB: 'Surah 7:54, 15:28' }, ]; updateConfigListDisplay(); renderDashboard(); showTab("rst-tab-dashboard"); });