${entry.notes ? `

${entry.notes}

` : ''} `; logHistoryContainer.appendChild(entryDiv); }); } function renderChart() { if (state.chart) { state.chart.destroy(); } if (state.entries.length === 0) { return; } const ctx = chartCanvas.getContext('2d'); state.chart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'Pain Intensity', data: state.entries.map(e => ({ x: e.datetime, y: e.intensity })), borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.1, fill: true, }] }, options: { responsive: true, maintainAspectRatio: false, scales: { x: { type: 'time', time: { unit: 'day', tooltipFormat: 'MMM d, yyyy h:mm a' }, title: { display: true, text: 'Date' } }, y: { beginAtZero: true, max: 10, title: { display: true, text: 'Intensity (0-10)' } } } } }); } // --- PDF Generation --- async function generatePDF() { if (state.entries.length === 0) { alert("No entries to report. Please add a pain log entry first."); return; } // Populate PDF data document.getElementById('pdf-report-date').textContent = new Date().toLocaleString(undefined, { dateStyle: 'long' }); // Render chart to an image for the PDF const chartContainer = document.getElementById('pdf-chart-container'); const chartImage = new Image(); chartImage.src = state.chart.toBase64Image(); chartContainer.innerHTML = ''; chartImage.style.width = '100%'; chartImage.style.height = '100%'; chartContainer.appendChild(chartImage); // Render log history for the PDF const pdfLogContainer = document.getElementById('pdf-log-history'); pdfLogContainer.innerHTML = ` ${state.entries.map(entry => ` `).join('')}

Date & Time	Intensity	Location	Notes
${entry.datetime.toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' })}	${entry.intensity}	${entry.location || ''}	${entry.notes || ''}

`; // Generate PDF const { jsPDF } = window.jspdf; const originalButtonText = downloadPdfBtn.textContent; downloadPdfBtn.textContent = 'Generating...'; downloadPdfBtn.disabled = true; const content = document.getElementById('pdf-content'); const clone = content.cloneNode(true); clone.style.position = 'absolute'; clone.style.left = '-9999px'; clone.style.top = '0'; clone.style.display = 'block'; document.body.appendChild(clone); try { const canvas = await html2canvas(clone, { scale: 2, useCORS: true, logging: false }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = canvas.width; const imgHeight = canvas.height; const ratio = imgWidth / imgHeight; let finalImgWidth = pdfWidth; let finalImgHeight = pdfWidth / ratio; if (finalImgHeight > pdfHeight) { finalImgHeight = pdfHeight; finalImgWidth = pdfHeight * ratio; } pdf.addImage(imgData, 'PNG', 0, 0, finalImgWidth, finalImgHeight); pdf.save('Chronic-Pain-Report.pdf'); } catch (error) { console.error("PDF Generation Error:", error); } finally { document.body.removeChild(clone); downloadPdfBtn.textContent = 'Download PDF Report'; downloadPdfBtn.disabled = false; } } // --- Event Listeners --- addEntryBtn.addEventListener('click', addEntry); downloadPdfBtn.addEventListener('click', generatePDF); // --- Initial Call --- loadEntries(); initializeForm(); updateDashboard(); showTab(0); });