@@ -847,6 +940,93 @@
}
}
+ // Apply filters and sort
+ function applyFiltersAndSort() {
+ const categoryFilter = document.getElementById('categoryFilter').value;
+ const statusFilter = document.getElementById('statusFilter').value;
+ const sortSelect = document.getElementById('sortSelect').value;
+
+ // Save to localStorage
+ localStorage.setItem('habitCategoryFilter', categoryFilter);
+ localStorage.setItem('habitStatusFilter', statusFilter);
+ localStorage.setItem('habitSort', sortSelect);
+
+ renderHabits();
+ }
+
+ // Restore filters from localStorage
+ function restoreFilters() {
+ const categoryFilter = localStorage.getItem('habitCategoryFilter') || 'all';
+ const statusFilter = localStorage.getItem('habitStatusFilter') || 'all';
+ const sortSelect = localStorage.getItem('habitSort') || 'priority_asc';
+
+ document.getElementById('categoryFilter').value = categoryFilter;
+ document.getElementById('statusFilter').value = statusFilter;
+ document.getElementById('sortSelect').value = sortSelect;
+ }
+
+ // Filter habits based on selected filters
+ function filterHabits(habits) {
+ const categoryFilter = document.getElementById('categoryFilter').value;
+ const statusFilter = document.getElementById('statusFilter').value;
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ return habits.filter(habit => {
+ // Category filter
+ if (categoryFilter !== 'all' && habit.category !== categoryFilter) {
+ return false;
+ }
+
+ // Status filter
+ if (statusFilter !== 'all') {
+ const isDoneToday = isCheckedToday(habit);
+ const shouldCheckToday = habit.should_check_today; // Added by backend in GET endpoint
+
+ if (statusFilter === 'active_today' && !shouldCheckToday) {
+ return false;
+ }
+ if (statusFilter === 'done_today' && !isDoneToday) {
+ return false;
+ }
+ if (statusFilter === 'overdue' && (!shouldCheckToday || isDoneToday)) {
+ return false;
+ }
+ }
+
+ return true;
+ });
+ }
+
+ // Sort habits based on selected sort option
+ function sortHabits(habits) {
+ const sortOption = document.getElementById('sortSelect').value;
+ const sorted = [...habits];
+
+ switch (sortOption) {
+ case 'priority_asc':
+ sorted.sort((a, b) => (a.priority || 50) - (b.priority || 50));
+ break;
+ case 'priority_desc':
+ sorted.sort((a, b) => (b.priority || 50) - (a.priority || 50));
+ break;
+ case 'name_asc':
+ sorted.sort((a, b) => a.name.localeCompare(b.name));
+ break;
+ case 'name_desc':
+ sorted.sort((a, b) => b.name.localeCompare(a.name));
+ break;
+ case 'streak_desc':
+ sorted.sort((a, b) => (b.current_streak || 0) - (a.current_streak || 0));
+ break;
+ case 'streak_asc':
+ sorted.sort((a, b) => (a.current_streak || 0) - (b.current_streak || 0));
+ break;
+ }
+
+ return sorted;
+ }
+
// Render habits grid
function renderHabits() {
const container = document.getElementById('habitsContainer');
@@ -863,7 +1043,23 @@
return;
}
- const habitsHtml = habits.map(habit => renderHabitCard(habit)).join('');
+ // Apply filters and sort
+ let filteredHabits = filterHabits(habits);
+ let sortedHabits = sortHabits(filteredHabits);
+
+ if (sortedHabits.length === 0) {
+ container.innerHTML = `
+
+
+
No habits match your filters
+
Try adjusting the filters above
+
+ `;
+ lucide.createIcons();
+ return;
+ }
+
+ const habitsHtml = sortedHabits.map(habit => renderHabitCard(habit)).join('');
container.innerHTML = `
${habitsHtml}
`;
lucide.createIcons();
@@ -1662,6 +1858,7 @@
// Initialize page
lucide.createIcons();
+ restoreFilters();
loadHabits();