${habit.name}
`;
configList.appendChild(item);
});
};
const renderAll = () => {
renderDashboard();
renderConfigList();
};
// --- FORM & DATA HANDLING ---
const clearForm = () => {
habitForm.reset();
habitIdInput.value = '';
};
const handleFormSubmit = (e) => {
e.preventDefault();
const id = habitIdInput.value ? parseInt(habitIdInput.value) : Date.now();
const habitData = {
id: id,
name: habitNameInput.value,
completed: habits.find(h => h.id === id)?.completed || Array(7).fill(false)
};
const existingIndex = habits.findIndex(h => h.id === id);
if (existingIndex > -1) {
habits[existingIndex] = habitData;
} else {
habits.push(habitData);
}
renderAll();
clearForm();
};
const handleConfigListClick = (e) => {
const editBtn = e.target.closest('.edit-btn');
const deleteBtn = e.target.closest('.delete-btn');
if (editBtn) {
const id = parseInt(editBtn.dataset.id);
const habit = habits.find(h => h.id === id);
if (habit) {
habitIdInput.value = habit.id;
habitNameInput.value = habit.name;
}
} else if (deleteBtn) {
const id = parseInt(deleteBtn.dataset.id);
habits = habits.filter(h => h.id !== id);
renderAll();
if (habitIdInput.value == id) clearForm();
}
};
const handleCheckboxChange = (e) => {
if (e.target.classList.contains('habit-checkbox')) {
const habitId = parseInt(e.target.dataset.habitId);
const dayIndex = parseInt(e.target.dataset.dayIndex);
const isChecked = e.target.checked;
const habit = habits.find(h => h.id === habitId);
if (habit) {
habit.completed[dayIndex] = isChecked;
renderDashboard(); // Just re-render the dashboard for performance
}
}
};
// --- TAB NAVIGATION ---
const switchTab = (tabName) => {
const isDashboard = tabName === 'dashboard';
tabDashboard.classList.toggle('active', isDashboard);
tabDashboard.classList.toggle('inactive', !isDashboard);
tabConfig.classList.toggle('active', !isDashboard);
tabConfig.classList.toggle('inactive', isDashboard);
contentDashboard.classList.toggle('hidden', !isDashboard);
contentConfig.classList.toggle('hidden', isDashboard);
prevBtn.disabled = isDashboard;
nextBtn.disabled = !isDashboard;
};
// --- PDF DOWNLOAD ---
const handleDownloadPdf = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(18);
doc.text("Smart Work Habits - Weekly Report", 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(dashboardWeekEl.textContent, 14, 30);
const tableData = habits.map(h => {
const completedCount = h.completed.filter(Boolean).length;
const progress = Math.round((completedCount / 7) * 100);
return [
h.name,
...h.completed.map(c => c ? 'Yes' : 'No'),
`${progress}%`
];
});
doc.autoTable({
startY: 35,
head: [['Habit', ...weekDays, 'Completion']],
body: tableData,
theme: 'grid',
headStyles: { fillColor: [79, 70, 229] },
});
doc.save('Smart-Habits-Report.pdf');
};
// --- EVENT LISTENERS ---
tabDashboard.addEventListener('click', () => switchTab('dashboard'));
tabConfig.addEventListener('click', () => switchTab('config'));
prevBtn.addEventListener('click', () => switchTab('dashboard'));
nextBtn.addEventListener('click', () => switchTab('config'));
habitForm.addEventListener('submit', handleFormSubmit);
clearFormBtn.addEventListener('click', clearForm);
configList.addEventListener('click', handleConfigListClick);
dashboardGrid.addEventListener('change', handleCheckboxChange);
downloadPdfBtn.addEventListener('click', handleDownloadPdf);
// --- INITIALIZATION ---
const initializeTool = () => {
habits = [
{ id: 1, name: 'Set top 3 priorities for the day', completed: [true, true, false, true, true, false, false] },
{ id: 2, name: 'Use the Pomodoro Technique (25/5 cycles)', completed: [true, false, true, true, false, false, false] },
{ id: 3, name: 'Check emails only at scheduled times', completed: [true, true, true, true, true, false, false] },
{ id: 4, name: 'End-of-day review and plan for tomorrow', completed: [true, true, false, false, true, false, false] },
];
calculateWeekRange();
renderAll();
switchTab('dashboard');
};
initializeTool();
});
