diff --git a/js/app.js b/js/app.js
index 5f50a0b..7e354e9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1814,6 +1814,13 @@ store.subscribe(renderFocusTasks);
store.subscribe(renderProfileSection);
store.subscribe(renderSidebarSubjects);
store.subscribe(renderStreak);
+store.subscribe(() => {
+ if (typeof currentView !== 'undefined' && currentView === 'heatmap') {
+ if (typeof fetchWorkload === 'function' && typeof renderHeatmap === 'function') {
+ fetchWorkload().then(renderHeatmap);
+ }
+ }
+});
function updateSidebarActive(id) {
document.querySelectorAll('.sidebar .nav-item').forEach(el => el.classList.remove('active'));
@@ -1882,13 +1889,25 @@ document.addEventListener('DOMContentLoaded', () => {
const allTasksBtn = document.getElementById('all-tasks-btn');
const archivedTasksBtn = document.getElementById('archived-tasks-btn');
const focusModeBtn = document.getElementById('focus-mode-btn');
+ const heatmapBtn = document.getElementById('heatmap-btn');
+
+<<<<<<< HEAD
+ function updateSidebarActive(id) {
+ document.querySelectorAll('.sidebar .nav-item').forEach(el => el.classList.remove('active'));
+ const btn = document.getElementById(id);
+ if(btn) btn.classList.add('active');
+ }
+=======
+>>>>>>> origin/main
calendarBtn.addEventListener('click', () => {
currentView = 'calendar';
hideProfileSection();
document.querySelector('.cal-section').classList.remove('hidden');
document.getElementById('tasks-section').classList.remove('hidden');
document.getElementById('focus-section').classList.add('hidden');
+ const heatmapSection = document.getElementById('heatmap-section');
+ if(heatmapSection) heatmapSection.classList.add('hidden');
updateSidebarActive('calendar-btn');
renderTasks();
});
@@ -1899,6 +1918,8 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.cal-section').classList.add('hidden');
document.getElementById('tasks-section').classList.remove('hidden');
document.getElementById('focus-section').classList.add('hidden');
+ const heatmapSection = document.getElementById('heatmap-section');
+ if(heatmapSection) heatmapSection.classList.add('hidden');
updateSidebarActive('all-tasks-btn');
renderTasks();
});
@@ -1909,6 +1930,8 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.cal-section').classList.add('hidden');
document.getElementById('tasks-section').classList.remove('hidden');
document.getElementById('focus-section').classList.add('hidden');
+ const heatmapSection = document.getElementById('heatmap-section');
+ if(heatmapSection) heatmapSection.classList.add('hidden');
updateSidebarActive('archived-tasks-btn');
renderTasks();
});
@@ -1920,11 +1943,99 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.cal-section').classList.add('hidden');
document.getElementById('tasks-section').classList.add('hidden');
document.getElementById('focus-section').classList.remove('hidden');
+ const heatmapSection = document.getElementById('heatmap-section');
+ if(heatmapSection) heatmapSection.classList.add('hidden');
updateSidebarActive('focus-mode-btn');
renderFocusTasks();
});
}
+
+ let heatmapData = {};
+ async function fetchWorkload() {
+ try {
+ const res = await fetch('/api/workload');
+ if (res.ok) {
+ heatmapData = await res.json();
+ }
+ } catch (err) {
+ console.error('Failed to fetch workload:', err);
+ }
+ }
+
+ function renderHeatmap() {
+ const grid = document.getElementById('heatmap-grid');
+ const tooltip = document.getElementById('heatmap-tooltip');
+ if (!grid || !tooltip) return;
+
+ grid.innerHTML = '';
+ const now = new Date();
+ // Default to current year
+ const yearStart = new Date(now.getFullYear(), 0, 1);
+ const yearEnd = new Date(now.getFullYear(), 11, 31);
+
+ // adjust start to first Sunday
+ const startDay = new Date(yearStart);
+ startDay.setDate(startDay.getDate() - startDay.getDay());
+
+ const endDay = new Date(yearEnd);
+ endDay.setDate(endDay.getDate() + (6 - endDay.getDay()));
+
+ let current = new Date(startDay);
+ while (current <= endDay) {
+ const dateStr = current.toISOString().split('T')[0];
+ const data = heatmapData[dateStr] || { count: 0, tasks: [] };
+
+ const cell = document.createElement('div');
+ cell.className = 'heatmap-cell';
+
+ if (data.count === 0) cell.classList.add('workload-none');
+ else if (data.count <= 2) cell.classList.add('workload-low');
+ else if (data.count <= 5) cell.classList.add('workload-medium');
+ else cell.classList.add('workload-heavy');
+
+ cell.addEventListener('mouseenter', (e) => {
+ const rect = cell.getBoundingClientRect();
+ tooltip.style.left = \`\${rect.left + window.scrollX}px\`;
+ tooltip.style.top = \`\${rect.top + window.scrollY - 10}px\`;
+ tooltip.style.transform = 'translate(-50%, -100%)';
+
+ let html = \`
\${current.toDateString()} (\${data.count} tasks)\`;
+ if (data.count > 0) {
+ html += '
' + data.tasks.slice(0, 5).map(t => \`- \${escapeHtml(t.title)}
\`).join('') + '
';
+ if (data.count > 5) html += \`
+\${data.count - 5} more...
\`;
+ }
+ tooltip.innerHTML = html;
+ tooltip.classList.remove('hidden');
+ });
+
+ cell.addEventListener('mouseleave', () => {
+ tooltip.classList.add('hidden');
+ });
+
+ cell.addEventListener('click', () => {
+ selectedDate = dateStr;
+ document.getElementById('all-tasks-btn').click();
+ });
+
+ grid.appendChild(cell);
+ current.setDate(current.getDate() + 1);
+ }
+ }
+
+ if (heatmapBtn) {
+ heatmapBtn.addEventListener('click', () => {
+ currentView = 'heatmap';
+ document.querySelector('.cal-section').classList.add('hidden');
+ document.getElementById('tasks-section').classList.add('hidden');
+ document.getElementById('focus-section').classList.add('hidden');
+ const heatmapSection = document.getElementById('heatmap-section');
+ if (heatmapSection) heatmapSection.classList.remove('hidden');
+ updateSidebarActive('heatmap-btn');
+ fetchWorkload().then(() => renderHeatmap());
+ });
+ }
+
downloadBtn.addEventListener('click', () => {
currentView = 'review';
document.querySelector('.cal-section').classList.add('hidden');
@@ -1939,6 +2050,7 @@ document.addEventListener('DOMContentLoaded', () => {
renderCalendar();
});
+
document.getElementById('cal-next').addEventListener('click', () => {
currentMonthDate.setMonth(currentMonthDate.getMonth() + 1);
renderCalendar();
diff --git a/server.js b/server.js
index 3863485..51d58dc 100644
--- a/server.js
+++ b/server.js
@@ -363,6 +363,24 @@ app.get('/api/tasks', (req, res) => {
});
});
+// ================= WORKLOAD HEATMAP =================
+app.get('/api/workload', (req, res) => {
+ db.all('SELECT DATE(due_at) as date, title, due_at, status FROM tasks WHERE (archived = 0 OR archived IS NULL) ORDER BY due_at ASC', (err, rows) => {
+ if (err) return res.status(500).json({ error: err.message });
+ const workload = {};
+ rows.forEach(r => {
+ const date = r.date;
+ if (!date) return;
+ if (!workload[date]) {
+ workload[date] = { count: 0, tasks: [] };
+ }
+ workload[date].count++;
+ workload[date].tasks.push({ title: r.title, due_at: r.due_at, status: r.status });
+ });
+ res.json(workload);
+ });
+});
+
// ================= ADD TASKS =================
app.post('/api/tasks', (req, res) => {
try {