Show overdue styling on tasks in offline mode

renderTaskItem() never applied the "overdue" CSS class at all, so
overdue tasks in offline mode looked like any other task instead of
getting the red highlight/due-date treatment they get online. Adds
isTaskOverdue(), mirroring Task.is_overdue, applied the same way
_task_item.html does it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Keith SmithandClaude Sonnet 5 committed 2026-09-05 00:15:22 -06:00
1 parent 373bfe6a6e
commit bde7be454b
2 files changed
+11 -4

No files matched your search

+10 -3
View File
@@ -114,9 +114,16 @@ function escapeHtml(str) {
return div.innerHTML; return div.innerHTML;
} }
function isTaskOverdue(task) {
// Mirrors Task.is_overdue in tasks/models.py.
if (!task.due_date || task.status === 'completed' || task.status === 'cancelled') return false;
return task.due_date < todayLocalStr();
}
function renderTaskItem(task, tagsBySyncId) { function renderTaskItem(task, tagsBySyncId) {
const overdue = isTaskOverdue(task);
const item = document.createElement('div'); const item = document.createElement('div');
item.className = `task-item priority-${task.priority}${task.status === 'completed' ? ' completed' : ''}`; item.className = `task-item priority-${task.priority}${overdue ? ' overdue' : ''}${task.status === 'completed' ? ' completed' : ''}`;
const toggleForm = document.createElement('button'); const toggleForm = document.createElement('button');
toggleForm.type = 'button'; toggleForm.type = 'button';
@@ -140,13 +147,13 @@ function renderTaskItem(task, tagsBySyncId) {
const metaParts = []; const metaParts = [];
if (task.due_date) { if (task.due_date) {
metaParts.push(`📅 ${formatDueDate(task.due_date)}`); metaParts.push(`<span class="task-due${overdue ? ' overdue' : ''}">📅 ${formatDueDate(task.due_date)}</span>`);
} }
const tagChips = renderTagChips(task, tagsBySyncId); const tagChips = renderTagChips(task, tagsBySyncId);
if (metaParts.length || tagChips) { if (metaParts.length || tagChips) {
const meta = document.createElement('div'); const meta = document.createElement('div');
meta.className = 'task-meta'; meta.className = 'task-meta';
meta.innerHTML = metaParts.map((p) => `<span>${p}</span>`).join(' ') + tagChips; meta.innerHTML = metaParts.join(' ') + tagChips;
content.appendChild(meta); content.appendChild(meta);
} }
+1 -1
View File
@@ -1,4 +1,4 @@
{% load static %}const CACHE_NAME = 'keepitgoing-shell-v6'; {% load static %}const CACHE_NAME = 'keepitgoing-shell-v7';
const OFFLINE_URL = '{% url "offline" %}'; const OFFLINE_URL = '{% url "offline" %}';
const OFFLINE_TASKS_URL = '{% url "offline-tasks" %}'; const OFFLINE_TASKS_URL = '{% url "offline-tasks" %}';