Orthodontic Treatment Progress Tracker

Orthodontic Progress Tracker

Log Today's Progress

22 hours
1

Your Progress Dashboard

Weekly Wear Time Consistency

Progress Photo Gallery

Subject: Treatment Log
Date:
This report is a personal log. Share it with your orthodontist to facilitate discussions about your treatment.

${avgWear.toFixed(1)} hrs

Avg. Pain Level

${avgPain.toFixed(1)} / 5

`; // Render wear time chart for the last 7 entries const chartContainer = document.getElementById('wear-chart-container'); chartContainer.innerHTML = ''; const last7Entries = logData.slice(-7); last7Entries.forEach(entry => { const heightPercentage = (entry.wear / 24) * 100; const isLowWear = entry.wear < 20; const bar = document.createElement('div'); bar.className = 'w-1/12 text-center'; bar.innerHTML = `

${entry.date.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' })}

`; chartContainer.appendChild(bar); }); } function renderGallery() { const container = document.getElementById('photo-gallery-container'); const photos = logData.filter(entry => entry.photo); if (photos.length === 0) { container.innerHTML = `

No photos uploaded yet. Add a photo in the "Daily Log" tab.

`; return; } container.innerHTML = photos.map(entry => `
Progress on ${entry.date.toLocaleDateString()}

${entry.date.toLocaleDateString()}

`).join(''); } function generatePdf() { prepareReportData(); const reportContainer = document.getElementById('pdf-report-container'); reportContainer.style.display = 'block'; html2canvas(reportContainer, { scale: 2, useCORS: true, windowWidth: 800 }).then(canvas => { const { jsPDF } = window.jspdf; const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const ratio = canvas.width / canvas.height; const imgHeight = pdfWidth / ratio; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, imgHeight); pdf.save('Orthodontic-Progress-Report.pdf'); reportContainer.style.display = 'none'; }); } function prepareReportData() { document.getElementById('report-date').textContent = new Date().toLocaleDateString('en-US'); const reportBody = document.getElementById('pdf-report-body'); const summaryHtml = document.getElementById('summary-stats').innerHTML; const chartHtml = document.getElementById('wear-chart-container').innerHTML; const recentNotes = logData.filter(e => e.notes).slice(-5); const recentPhotos = logData.filter(e => e.photo).slice(-2); reportBody.innerHTML = `

Overall Summary

${summaryHtml}

Recent Wear Time Consistency

${chartHtml}

Recent Notes

${recentNotes.length > 0 ? recentNotes.map(e => `

${e.date.toLocaleDateString()}

${e.notes}

`).join('') : '

No notes logged.

'}

Recent Photos

${recentPhotos.length > 0 ? recentPhotos.map(e => `

${e.date.toLocaleDateString()}

`).join('') : '

No photos logged.

'}
`; } // --- Event Listeners --- logForm.addEventListener('submit', handleFormSubmit); wearTimeSlider.addEventListener('input', (e) => wearTimeValue.textContent = e.target.value); painLevelSlider.addEventListener('input', (e) => painLevelValue.textContent = e.target.value); document.getElementById('download-pdf-btn').addEventListener('click', generatePdf); // --- Initial Setup --- updateUI(); });
Scroll to Top