Buffered Total
${totalBufferedDuration} mins
`;
};
const renderWorkWeekPlanner = () => {
if (!weekPlannerContainer || !taskAssignmentContainer) return;
const bufferedTasks = getBufferedTasks();
const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
// Render assignment controls
if (tasks.length > 0) {
taskAssignmentContainer.innerHTML = `
${bufferedTasks.map(task => `
${task.name}
(${task.bufferedDuration} mins)
`).join('')}
`;
} else {
taskAssignmentContainer.innerHTML = '
Add tasks in Tab 1 to begin planning your week.
';
}
// Render day columns
weekPlannerContainer.innerHTML = daysOfWeek.map(day => {
const tasksForDay = bufferedTasks.filter(t => t.day === day);
const totalMinutes = tasksForDay.reduce((sum, t) => sum + t.bufferedDuration, 0);
return `
${day}
${tasksForDay.length > 0 ? tasksForDay.map(t => `
${t.name}
${t.bufferedDuration} mins
`).join('') : '
No tasks assigned.
'}
`;
}).join('');
};
const switchTab = (tabNumber) => {
currentTab = tabNumber;
[tabContent1, tabContent2, tabContent3].forEach(c => c.classList.add('hidden'));
[tabBtn1, tabBtn2, tabBtn3].forEach(b => b.classList.remove('active'));
if (currentTab === 1) {
tabContent1.classList.remove('hidden');
tabBtn1.classList.add('active');
prevBtn.style.visibility = 'hidden';
nextBtn.style.visibility = 'visible';
} else if (currentTab === 2) {
tabContent2.classList.remove('hidden');
tabBtn2.classList.add('active');
prevBtn.style.visibility = 'visible';
nextBtn.style.visibility = 'visible';
calculateAndRenderResults();
} else { // Tab 3
tabContent3.classList.remove('hidden');
tabBtn3.classList.add('active');
prevBtn.style.visibility = 'visible';
nextBtn.style.visibility = 'hidden';
renderWorkWeekPlanner();
}
};
const generatePDF = () => {
if (typeof jspdf === 'undefined' || !jspdf.jsPDF) {
alert('PDF generation library is not loaded.'); return;
}
if (tasks.length === 0) {
alert('Cannot generate PDF. No tasks have been added.'); return;
}
const { jsPDF } = jspdf;
const doc = new jsPDF();
const bufferedTasks = getBufferedTasks();
const totalOriginal = bufferedTasks.reduce((s, t) => s + t.duration, 0);
const totalBuffered = bufferedTasks.reduce((s, t) => s + t.bufferedDuration, 0);
const tableBody = bufferedTasks.map(task => [
task.name,
task.day || 'Unassigned',
task.duration,
task.bufferAmount,
task.bufferedDuration
]);
doc.setFontSize(18);
doc.setTextColor('#374151');
doc.text('Work Week Planner Summary', 14, 22);
const bufferType = bufferTypeSelect.value;
const bufferValue = bufferValueInput.value;
doc.setFontSize(11);
doc.setTextColor('#6B7280');
doc.text(`Buffer Applied: ${bufferValue}${bufferType === 'percentage' ? '%' : ' minutes (fixed)'}`, 14, 30);
doc.autoTable({
startY: 40,
head: [['Task', 'Day Assigned', 'Original (m)', 'Buffer (m)', 'New Total (m)']],
body: tableBody,
theme: 'grid',
headStyles: { fillColor: '#3b82f6' },
styles: { fontSize: 9 }
});
const finalY = doc.autoTable.previous.finalY;
doc.setFontSize(12);
doc.setTextColor('#1F2937');
doc.text('Total Summary:', 14, finalY + 15);
doc.setFontSize(11);
doc.setTextColor('#374151');
doc.text(`Original Total Time: ${totalOriginal} minutes`, 14, finalY + 22);
doc.setFont(undefined, 'bold');
doc.setTextColor('#2563EB');
doc.text(`Buffered Total Time: ${totalBuffered} minutes`, 14, finalY + 29);
doc.save('Work-Week-Planner-Schedule.pdf');
};
// --- Event Listeners ---
tabBtn1.addEventListener('click', () => switchTab(1));
tabBtn2.addEventListener('click', () => switchTab(2));
tabBtn3.addEventListener('click', () => switchTab(3));
prevBtn.addEventListener('click', () => switchTab(currentTab - 1));
nextBtn.addEventListener('click', () => switchTab(currentTab + 1));
bufferTypeSelect.addEventListener('change', (e) => {
bufferUnit.textContent = e.target.value === 'percentage' ? '%' : 'mins';
});
addTaskBtn.addEventListener('click', () => {
const name = taskNameInput.value.trim();
const duration = parseInt(taskDurationInput.value, 10);
if (name && duration > 0) {
tasks.push({ id: Date.now(), name, duration, day: undefined });
renderTaskList();
taskNameInput.value = '';
taskDurationInput.value = '';
taskNameInput.focus();
} else {
alert('Please enter a valid task name and a duration greater than 0.');
}
});
taskListContainer.addEventListener('click', (e) => {
if (e.target.classList.contains('remove-task-btn')) {
const taskId = parseInt(e.target.getAttribute('data-id'), 10);
tasks = tasks.filter(task => task.id !== taskId);
renderTaskList();
}
});
taskAssignmentContainer.addEventListener('change', (e) => {
if (e.target.classList.contains('day-selector')) {
const taskId = parseInt(e.target.getAttribute('data-id'), 10);
const selectedDay = e.target.value;
const task = tasks.find(t => t.id === taskId);
if (task) {
task.day = selectedDay === 'unassigned' ? undefined : selectedDay;
renderWorkWeekPlanner(); // Re-render the planner to reflect the change
}
}
});
downloadPdfBtn.addEventListener('click', generatePDF);
taskDurationInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
addTaskBtn.click();
}
});
setupInitialTasks();
});
