Internal
Public Access
Keith SmithandClaude Sonnet 5
fc045a0c4b
The offline task app was showing every cached task including completed ones, with no sorting -- unlike the online dashboard, which hides completed tasks by default and sorts by due date. Ports the same filter tabs (All/Today/Upcoming/Overdue/Completed) and sort options (due date asc/desc, priority high/low) from tasks/views.py's DashboardView so offline mode isn't a degraded view. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
58 lines
2.7 KiB
HTML
58 lines
2.7 KiB
HTML
{% load static %}<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Offline - KeepItGoing</title>
|
|
<link rel="icon" type="image/svg+xml" href="{% static 'favicons/favicon.svg' %}">
|
|
<link rel="stylesheet" href="{% static 'css/app.css' %}">
|
|
<script>
|
|
(function() {
|
|
var saved = localStorage.getItem('theme');
|
|
var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (saved === 'dark' || (!saved && systemDark)) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div style="max-width: 640px; margin: 0 auto; padding: var(--space-lg);">
|
|
<div class="task-pane-header">
|
|
<h1 class="task-pane-title">Tasks (Offline)</h1>
|
|
<select id="offline-sort-select" class="form-select" style="width: auto;">
|
|
<option value="due_date">Due Date (Earliest)</option>
|
|
<option value="due_date_desc">Due Date (Latest)</option>
|
|
<option value="priority">Priority (High to Low)</option>
|
|
<option value="priority_low">Priority (Low to High)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<p class="text-muted" style="margin-bottom: var(--space-lg);">
|
|
You're offline. Changes you make here will sync automatically once you're back online.
|
|
</p>
|
|
|
|
<div id="offline-filter-tabs" style="display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg);">
|
|
<button type="button" class="btn btn-sm btn-primary" data-filter="all">All Tasks</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-filter="today">Today</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-filter="upcoming">Upcoming</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-filter="overdue">Overdue</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-filter="completed">Completed</button>
|
|
</div>
|
|
|
|
<form id="offline-add-task-form" class="quick-add">
|
|
<input type="text" id="offline-task-title" class="quick-add-input" placeholder="Add a new task..." required>
|
|
<button type="submit" class="btn btn-primary">Add</button>
|
|
</form>
|
|
|
|
<div id="offline-empty-state" class="empty-state" hidden>
|
|
<p>Loading...</p>
|
|
</div>
|
|
<div class="task-list" id="offline-task-list"></div>
|
|
</div>
|
|
|
|
<script src="{% static 'js/offline-db.js' %}"></script>
|
|
<script src="{% static 'js/offline-tasks.js' %}"></script>
|
|
</body>
|
|
</html>
|