Achievable: ${goal.achievable}

Relevant: ${goal.relevant}

Deadline: ${goal.timeBound ? new Date(goal.timeBound + 'T00:00:00').toLocaleDateString() : 'N/A'}

${goal.dateAdded ? `

Added: ${new Date(goal.dateAdded).toLocaleDateString()}

` : ''} ${goal.isCompleted && goal.dateCompleted ? `

Completed On: ${new Date(goal.dateCompleted).toLocaleDateString()}

` : ''} ${!goal.isCompleted ? ` ` : ''} `; if (goal.isCompleted) { sgtCompletedGoalsList.appendChild(goalElement); hasCompletedGoals = true; } else { sgtActiveGoalsList.appendChild(goalElement); hasActiveGoals = true; } }); if (!hasActiveGoals && sgtActiveGoalsList.innerHTML === '') { sgtActiveGoalsList.innerHTML = '

No active goals yet. Add one using the form above or check your completed goals!

'; } if (!hasCompletedGoals) { sgtCompletedGoalsList.innerHTML = '

No goals completed yet.

'; } } // Add new goal sgtAddGoalForm.addEventListener('submit', function(e) { e.preventDefault(); const newGoal = { id: 'sgt-' + Date.now(), title: document.getElementById('sgtGoalTitle').value, specific: document.getElementById('sgtSpecific').value, measurable: document.getElementById('sgtMeasurable').value, achievable: document.getElementById('sgtAchievable').value, relevant: document.getElementById('sgtRelevant').value, timeBound: document.getElementById('sgtTimeBound').value, progress: 0, isCompleted: false, dateAdded: new Date().toISOString(), dateCompleted: null }; sgtGoals.push(newGoal); sgtSaveGoals(); sgtRenderGoals(); sgtAddGoalForm.reset(); }); // Open Edit Modal window.sgtOpenEditModal = function(goalId) { const goal = sgtGoals.find(g => g.id === goalId); if (!goal) return; document.getElementById('sgtEditGoalId').value = goal.id; document.getElementById('sgtEditGoalTitle').value = goal.title; document.getElementById('sgtEditSpecific').value = goal.specific; document.getElementById('sgtEditMeasurable').value = goal.measurable; document.getElementById('sgtEditAchievable').value = goal.achievable; document.getElementById('sgtEditRelevant').value = goal.relevant; document.getElementById('sgtEditTimeBound').value = goal.timeBound; document.getElementById('sgtEditProgress').value = goal.progress; document.getElementById('sgtEditProgressPercentage').textContent = goal.progress + '%'; sgtEditGoalModal.style.display = 'block'; } // Close Modal window.sgtCloseModal = function() { sgtEditGoalModal.style.display = 'none'; } // Close modal if user clicks outside of it window.onclick = function(event) { if (event.target == sgtEditGoalModal) { sgtCloseModal(); } } // Edit Goal Form Submission sgtEditGoalForm.addEventListener('submit', function(e) { e.preventDefault(); const goalId = document.getElementById('sgtEditGoalId').value; const goalIndex = sgtGoals.findIndex(g => g.id === goalId); if (goalIndex > -1) { sgtGoals[goalIndex].title = document.getElementById('sgtEditGoalTitle').value; sgtGoals[goalIndex].specific = document.getElementById('sgtEditSpecific').value; sgtGoals[goalIndex].measurable = document.getElementById('sgtEditMeasurable').value; sgtGoals[goalIndex].achievable = document.getElementById('sgtEditAchievable').value; sgtGoals[goalIndex].relevant = document.getElementById('sgtEditRelevant').value; sgtGoals[goalIndex].timeBound = document.getElementById('sgtEditTimeBound').value; sgtGoals[goalIndex].progress = parseInt(document.getElementById('sgtEditProgress').value); if (sgtGoals[goalIndex].progress === 100) { // Optionally auto-complete if progress hits 100%, or leave for explicit "Mark Complete" // sgtGoals[goalIndex].isCompleted = true; // sgtGoals[goalIndex].dateCompleted = new Date().toISOString(); } else { sgtGoals[goalIndex].isCompleted = false; // Ensure it's not completed if progress < 100 sgtGoals[goalIndex].dateCompleted = null; } sgtSaveGoals(); sgtRenderGoals(); sgtCloseModal(); } }); // Mark as complete window.sgtMarkComplete = function(goalId) { const goalIndex = sgtGoals.findIndex(g => g.id === goalId); if (goalIndex > -1) { sgtGoals[goalIndex].isCompleted = true; sgtGoals[goalIndex].progress = 100; sgtGoals[goalIndex].dateCompleted = new Date().toISOString(); sgtSaveGoals(); sgtRenderGoals(); } } // Mark as active (move from completed) window.sgtMarkActive = function(goalId) { const goalIndex = sgtGoals.findIndex(g => g.id === goalId); if (goalIndex > -1) { sgtGoals[goalIndex].isCompleted = false; // Optional: Reset progress or keep it at 100 to be edited by user // sgtGoals[goalIndex].progress = 0; sgtGoals[goalIndex].dateCompleted = null; sgtSaveGoals(); sgtRenderGoals(); // Switch to the active goals tab if not already there sgtOpenTab({currentTarget: document.querySelector('.sgt-tab-button[onclick*="GoalSetting"]')}, 'GoalSetting'); } } // Delete goal window.sgtDeleteGoal = function(goalId) { if (confirm('Are you sure you want to delete this goal? This action cannot be undone.')) { sgtGoals = sgtGoals.filter(g => g.id !== goalId); sgtSaveGoals(); sgtRenderGoals(); } } // PDF Download Functionality sgtDownloadPdfButton.addEventListener('click', function() { const doc = new jsPDF(); const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim(); const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim(); doc.setFontSize(18); doc.setTextColor(primaryColor); doc.text("SMART Goals Report", 14, 22); doc.setFontSize(11); doc.setTextColor(100); doc.text(`Report generated on: ${new Date().toLocaleDateString()}`, 14, 30); let yPos = 40; const activeGoals = sgtGoals.filter(goal => !goal.isCompleted); const completedGoals = sgtGoals.filter(goal => goal.isCompleted); const addGoalsToPdf = (title, goals, titleColor) => { if (goals.length > 0) { doc.setFontSize(14); doc.setTextColor(titleColor); doc.text(title, 14, yPos); yPos += 8; const tableColumn = ["Title", "Specific", "Measurable", "Achievable", "Relevant", "Deadline", "Progress/Status"]; const tableRows = []; goals.forEach(goal => { const goalData = [ goal.title || "N/A", goal.specific || "N/A", goal.measurable || "N/A", goal.achievable || "N/A", goal.relevant || "N/A", goal.timeBound ? new Date(goal.timeBound + 'T00:00:00').toLocaleDateString() : "N/A", goal.isCompleted ? `Completed: ${goal.dateCompleted ? new Date(goal.dateCompleted).toLocaleDateString() : 'N/A'}` : `${goal.progress}%` ]; tableRows.push(goalData); }); doc.autoTable({ head: [tableColumn], body: tableRows, startY: yPos, theme: 'grid', // 'striped', 'grid', 'plain' headStyles: { fillColor: titleColor, textColor: '#ffffff' }, styles: { font: 'Arial', fontSize: 8, cellPadding: 2, overflow: 'linebreak' }, columnStyles: { 0: { cellWidth: 30 }, // Title 1: { cellWidth: 30 }, // Specific 2: { cellWidth: 30 }, // Measurable 3: { cellWidth: 30 }, // Achievable 4: { cellWidth: 30 }, // Relevant 5: { cellWidth: 20 }, // Deadline 6: { cellWidth: 'auto'} // Progress/Status } }); yPos = doc.lastAutoTable.finalY + 15; } else { doc.setFontSize(12); doc.setTextColor(textColor); doc.text(`No ${title.toLowerCase()} to display.`, 14, yPos); yPos += 10; } }; addGoalsToPdf("Active Goals", activeGoals, primaryColor); addGoalsToPdf("Completed Goals", completedGoals, secondaryColor); doc.save(`SMART_Goals_Report_${new Date().toISOString().slice(0,10)}.pdf`); }); // Initial setup document.addEventListener('DOMContentLoaded', () => { sgtLoadGoals(); // Load goals when the DOM is ready // Set the first tab as active by default (already done by class 'active' in HTML, but good for JS control too) if (document.querySelector('#smartGoalTrackerTool .sgt-tab-button.active')) { document.querySelector('#smartGoalTrackerTool .sgt-tab-button.active').click(); } });