${strategy.description}
${showActionButton ? `
` : ''}
`;
parentElement.appendChild(card);
});
if (showActionButton) {
parentElement.querySelectorAll('.add-to-action-plan-btn').forEach(btn => {
btn.addEventListener('click', (e) => openActionItemModal(e.target.dataset.id, e.target.dataset.name));
});
}
}
// --- My Action Plan ---
saveActionItemBtn.addEventListener('click', () => {
const strategyId = actionModalStrategyIdInput.value;
const strategyName = actionModalStrategyName.textContent; // Get from modal for context
const actionText = actionItemTextInput.value.trim();
if (!actionText) { alert("Please describe your specific action."); return; }
userActionPlan.push({
id: generateId(),
strategyId, // Link to original strategy
strategyName, // Store for easy display
actionText,
status: 'todo' // 'todo' or 'done'
});
saveActionPlan();
renderActionPlan();
actionItemModal.style.display = 'none';
});
function renderActionPlan() {
actionPlanListUL.innerHTML = '';
if (userActionPlan.length === 0) {
actionPlanListUL.innerHTML = '
Your action plan is empty. Add actions from recommended or browsed strategies!';
downloadActionPlanPdfBtn.style.display = 'none';
return;
}
downloadActionPlanPdfBtn.style.display = 'inline-block';
// Sort: todo first, then by original add order (implicit as array is pushed to)
userActionPlan.sort((a,b) => (a.status === 'todo' && b.status === 'done') ? -1 : (a.status === 'done' && b.status === 'todo') ? 1 : 0);
userActionPlan.forEach(item => {
const li = document.createElement('li');
li.className = `action-plan-item ${item.status}`;
li.innerHTML = `
${item.strategyName}: ${item.actionText}
`;
actionPlanListUL.appendChild(li);
});
actionPlanListUL.querySelectorAll('.mark-action-done-cb').forEach(cb => {
cb.addEventListener('change', (e) => {
const itemId = e.target.dataset.id;
const itemIndex = userActionPlan.findIndex(ap => ap.id === itemId);
if (itemIndex > -1) {
userActionPlan[itemIndex].status = e.target.checked ? 'done' : 'todo';
saveActionPlan();
renderActionPlan(); // Re-render to update style and order
}
});
});
actionPlanListUL.querySelectorAll('.delete-action-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
if (confirm("Delete this action item?")) {
userActionPlan = userActionPlan.filter(ap => ap.id !== e.target.dataset.id);
saveActionPlan();
renderActionPlan();
}
});
});
}
// --- PDF Downloads ---
downloadRecommendationsPdfBtn.addEventListener('click', () => {
const challengeName = selectedChallengeTextSpan.textContent;
const recommendations = [];
recommendedStrategiesListDiv.querySelectorAll('.strategy-card').forEach(card => {
recommendations.push({
name: card.querySelector('h4').textContent,
description: card.querySelector('p').textContent
});
});
if (recommendations.length === 0) { alert("No recommendations to download."); return; }
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const margin = 40; let yPos = margin; const pageWidth = doc.internal.pageSize.getWidth();
doc.setFontSize(18); doc.text('Time-Saving Strategy Recommendations', pageWidth / 2, yPos, { align: 'center' }); yPos += 20;
doc.setFontSize(12); doc.setTextColor(100);
doc.text(`For Challenge: ${challengeName}`, pageWidth / 2, yPos, { align: 'center' }); yPos += 15;
doc.setFontSize(10); doc.text(`Generated: ${new Date().toLocaleString()}`, pageWidth / 2, yPos, { align: 'center' }); yPos += 25;
recommendations.forEach(strat => {
if (yPos > doc.internal.pageSize.getHeight() - 80) { doc.addPage(); yPos = margin; } // Basic page break
doc.setFontSize(12); doc.setTextColor(varToRGB('--primary-color').r,varToRGB('--primary-color').g,varToRGB('--primary-color').b);
doc.text(strat.name, margin, yPos); yPos += 15;
doc.setFontSize(10); doc.setTextColor(50);
const descLines = doc.splitTextToSize(strat.description, pageWidth - 2 * margin);
doc.text(descLines, margin, yPos);
yPos += (descLines.length * 12) + 10;
});
doc.save(`Recommended_Strategies_for_${challengeName.replace(/\s+/g,'_')}.pdf`);
});
downloadActionPlanPdfBtn.addEventListener('click', () => {
if(userActionPlan.length === 0) { alert("No action items to download."); return; }
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const margin = 40; let yPos = margin;
doc.setFontSize(18); doc.text('My Time-Saving Action Plan', margin, yPos); yPos += 20;
doc.setFontSize(10); doc.setTextColor(100);
doc.text(`Generated: ${new Date().toLocaleString()}`, margin, yPos); yPos += 25;
const body = userActionPlan.map(item => [
item.strategyName,
item.actionText,
item.status.charAt(0).toUpperCase() + item.status.slice(1)
]);
doc.autoTable({
startY: yPos,
head: [['Strategy', 'Specific Action', 'Status']],
body: body, theme: 'grid',
headStyles: { fillColor: varToRGB('--primary-color', true), textColor: varToRGB('--light-text', true) },
styles: { fontSize: 9 },
columnStyles: {1: {cellWidth: 'auto'}}
});
doc.save('My_Time_Saving_Action_Plan.pdf');
});
function varToRGB(varName, asArray = false) {
const colorHex = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
if (!colorHex.startsWith('#')) { return asArray ? [0,0,0] : {r:0,g:0,b:0}; }
const r = parseInt(colorHex.slice(1, 3), 16); const g = parseInt(colorHex.slice(3, 5), 16); const b = parseInt(colorHex.slice(5, 7), 16);
return asArray ? [r,g,b] : {r,g,b};
}
// --- Initializations ---
renderAllStrategies(); // Populate browse tab initially
renderActionPlan(); // Populate action plan tab initially
})();
