`).reverse().join(''); } // Attach delete listeners journalFeed.querySelectorAll('button[data-index]').forEach(btn => { btn.addEventListener('click', (e) => { const index = parseInt(e.target.dataset.index, 10); deleteJournalEntry(index); }); }); renderMoodChart(); pdfDownloadBtn.style.display = journalEntries.length > 0 ? 'block' : 'none'; } function renderMoodChart() { if (!moodChartCanvas) return; const ctx = moodChartCanvas.getContext('2d'); const moodCounts = moodOptions.reduce((acc, mood) => { acc[mood] = 0; return acc; }, {}); journalEntries.forEach(entry => { if (moodCounts.hasOwnProperty(entry.mood)) { moodCounts[entry.mood]++; } }); if (moodChartInstance) { moodChartInstance.destroy(); } moodChartInstance = new Chart(ctx, { type: 'doughnut', data: { labels: Object.keys(moodCounts), datasets: [{ label: 'Mood Count', data: Object.values(moodCounts), backgroundColor: [ '#10B981', // Great (green) '#34D399', // Good (light green) '#F59E0B', // Okay (amber) '#F87171', // Struggling (red) '#EF4444' // Bad (dark red) ], borderColor: '#ffffff', borderWidth: 3 }] }, options: { responsive: true, maintainAspectRatio: false, // Per spec plugins: { legend: { position: 'bottom', }, tooltip: { callbacks: { label: function(context) { return `${context.label}: ${context.raw} entries`; } } } } } }); } function deleteJournalEntry(index) { const actualIndex = journalEntries.length - 1 - index; // Since we reverse the display journalEntries.splice(actualIndex, 1); renderDashboard(); } // --- New Entry (Tab 2) --- function renderNewEntryForm() { // Populate mood dropdown entryMood.innerHTML = moodOptions.map(mood => `${mood}`).join(''); // Populate dynamic prompts dynamicPrompts.innerHTML = journalPrompts.map((prompt, index) => ` `).join(''); // Set default date entryDate.value = new Date().toISOString().split('T')[0]; } function handleSaveEntry(e) { e.preventDefault(); const responses = []; dynamicPrompts.querySelectorAll('textarea').forEach(textarea => { responses.push({ prompt: textarea.dataset.prompt, answer: textarea.value }); }); const newEntry = { id: Date.now(), date: entryDate.value, mood: entryMood.value, responses: responses, notes: entryNotes.value }; journalEntries.push(newEntry); entryForm.reset(); renderNewEntryForm(); // Reset date showTab(0); // Go to dashboard (Spec B.4.o) } // --- Goals (Tab 3) --- function renderGoals() { if (recoveryGoals.length === 0) { goalsList.innerHTML = `

No goals set yet. Add one above to get started.

`; return; } goalsList.innerHTML = recoveryGoals.map((goal, index) => ` `).join(''); // Attach listeners goalsList.querySelectorAll('.rjg-goal-toggle').forEach(cb => { cb.addEventListener('change', (e) => { const index = parseInt(e.target.dataset.index, 10); recoveryGoals[index].complete = e.target.checked; renderGoals(); }); }); goalsList.querySelectorAll('.rjg-goal-delete').forEach(btn => { btn.addEventListener('click', (e) => { const index = parseInt(e.target.dataset.index, 10); recoveryGoals.splice(index, 1); renderGoals(); }); }); } function handleAddGoal(e) { e.preventDefault(); const text = newGoalInput.value.trim(); if (text) { recoveryGoals.push({ id: Date.now(), text: text, complete: false }); newGoalInput.value = ''; renderGoals(); } } // --- Configuration (Tab 4) --- function renderConfig() { promptsList.innerHTML = journalPrompts.map((prompt, index) => ` `).join(''); // Attach listeners promptsList.querySelectorAll('.rjg-prompt-delete').forEach(btn => { btn.addEventListener('click', (e) => { const index = parseInt(e.target.dataset.index, 10); journalPrompts.splice(index, 1); renderConfig(); renderNewEntryForm(); // Update the entry form }); }); } function handleAddPrompt(e) { e.preventDefault(); const text = newPromptInput.value.trim(); if (text && !journalPrompts.includes(text)) { journalPrompts.push(text); newPromptInput.value = ''; renderConfig(); renderNewEntryForm(); // Update the entry form } } // --- Data & PDF --- function loadSampleData() { journalPrompts = [ "What was my biggest challenge today?", "What am I grateful for today?", "What is one small victory I achieved?", "How did I take care of myself today?" ]; recoveryGoals = [ { id: 1, text: "Attend a support group meeting", complete: true }, { id: 2, text: "Practice mindfulness for 10 minutes", complete: false }, { id: 3, text: "Reach out to a friend in the US", complete: false } ]; journalEntries = [ { id: 1, date: "2025-10-27", mood: "Good", responses: [ { prompt: "What was my biggest challenge today?", answer: "Waking up on time was tough, but I did it." }, { prompt: "What am I grateful for today?", answer: "My friend in Chicago called." }, { prompt: "What is one small victory I achieved?", answer: "I went for a 20-minute walk." }, { prompt: "How did I take care of myself today?", answer: "Ate a healthy breakfast." } ], notes: "Felt pretty positive overall." }, { id: 2, date: "2025-10-28", mood: "Struggling", responses: [ { prompt: "What was my biggest challenge today?", answer: "Felt a lot of anxiety about work." }, { prompt: "What am I grateful for today?", answer: "My family." }, { prompt: "What is one small victory I achieved?", answer: "I still managed to get my main work task done." }, { prompt: "How did I take care of myself today?", answer: "I used a breathing exercise." } ], notes: "Tough day, but I got through it." } ]; renderNewEntryForm(); renderGoals(); renderConfig(); showTab(0); } async function downloadPDF() { const pdfTarget = document.getElementById('rjg-pdf-target'); pdfTarget.classList.add('rjg-pdf-view'); try { const canvas = await html2canvas(pdfTarget, { scale: 2, logging: false, useCORS: true, onclone: (doc) => { // Ensure chart renders in PDF const originalCanvas = moodChartCanvas; const newCanvas = doc.getElementById('rjg-mood-chart'); if (newCanvas) { newCanvas.getContext('2d').drawImage(originalCanvas, 0, 0); } } }); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; const pageMargin = 15; const contentWidth = pdfWidth - (pageMargin * 2); const contentHeight = (canvas.height * contentWidth) / canvas.width; pdf.addImage(imgData, 'PNG', pageMargin, pageMargin, contentWidth, contentHeight); pdf.save('Recovery_Journal.pdf'); } catch (error) { console.error("Error generating PDF:", error); } finally { pdfTarget.classList.remove('rjg-pdf-view'); } } // --- 4. EVENT BINDING & INITIALIZATION --- navTabs.forEach((tab, index) => { tab.addEventListener('click', () => showTab(index)); }); entryForm.addEventListener('submit', handleSaveEntry); addGoalForm.addEventListener('submit', handleAddGoal); addPromptForm.addEventListener('submit', handleAddPrompt); loadSampleBtn.addEventListener('click', loadSampleData); pdfDownloadBtn.addEventListener('click', downloadPDF); // Initial Load loadSampleData(); showTab(0); });