feat: Enhance dashboard with stats cards and task filtering
- Added stats cards to display active, completed, overdue, and due-today tasks on the dashboard. - Implemented search functionality to filter tasks in real-time based on user input. - Introduced quick-pick date buttons for easier task date selection. - Updated task rendering logic to handle empty states for task lists. - Improved overall user interface with new CSS styles for stat cards and buttons. chore: Update environment variables and backend error handling - Fixed formatting in the .env file for consistency. - Enhanced error handling in the backend API for better debugging. feat: Revamp frontend pages with new features and pricing sections - Redesigned the index.html page to include a hero section and feature highlights. - Created a new features page with dynamic loading of features from JSON. - Implemented a pricing page that loads plans from JSON and highlights the featured plan. - Added support and FAQ sections with dynamic content loading and contact form functionality. - Introduced JSON files for FAQs, features, and pricing to allow easy updates without code changes.
This commit is contained in:
Tim Basten
@@ -1,8 +1,43 @@
|
||||
/**
|
||||
* api.js
|
||||
*
|
||||
* Powers the Dashboard page. Talks to the Express / Mongoose backend
|
||||
* at http://localhost:3001 to create, read, update and delete tasks.
|
||||
*
|
||||
* Core CRUD (original):
|
||||
* - displayTasks() GET /api/tasks
|
||||
* - createNewTask() POST /api/tasks/todo
|
||||
* - completeTask() PATCH /api/tasks/complete/:id
|
||||
* - taskNotCompleted() PATCH /api/tasks/notComplete/:id
|
||||
* - deleteTask() DELETE /api/tasks/delete/:id
|
||||
* - editTask() PUT /api/tasks/update/:id
|
||||
*
|
||||
* Added interactivity:
|
||||
* - Stats cards: renders live counts of Active, Completed, Overdue
|
||||
* and Due-Today tasks (see updateStats()).
|
||||
* - Search filter: an input box filters the rendered task lists by
|
||||
* title/description on every keystroke, without re-hitting the
|
||||
* API (see renderTasks()).
|
||||
* - Quick-pick date buttons: "Today", "Tomorrow" and "Next week"
|
||||
* populate the due-date field of the new-task form.
|
||||
*
|
||||
* The in-memory `allTasks` array holds the latest fetched list so
|
||||
* search filtering can be recomputed purely on the client side.
|
||||
*/
|
||||
|
||||
const taskForm = document.getElementById('taskForm');
|
||||
const toDoList = document.getElementById('toDoList');
|
||||
const completedList = document.getElementById('completedList');
|
||||
const toDoEmpty = document.getElementById('toDoEmpty');
|
||||
const completedEmpty = document.getElementById('completedEmpty');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const dueDateInput = document.getElementById('dueDate');
|
||||
const url = "http://localhost:3001";
|
||||
|
||||
// Cache of the most recent /api/tasks response so the search filter
|
||||
// can re-render instantly without refetching.
|
||||
let allTasks = [];
|
||||
|
||||
function resetForm() {
|
||||
taskForm.reset();
|
||||
}
|
||||
@@ -15,6 +50,26 @@ sortButton.addEventListener('change', () => {
|
||||
displayTasks();
|
||||
});
|
||||
|
||||
// Search filter: re-renders the two lists on every keystroke using
|
||||
// the cached `allTasks` array. No API round-trip required.
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', () => {
|
||||
renderTasks();
|
||||
});
|
||||
}
|
||||
|
||||
// Quick-pick date buttons: set the due-date input to today, tomorrow
|
||||
// or a week from now. Saves the user from having to open the date
|
||||
// picker for the most common options.
|
||||
document.querySelectorAll('.quick-date-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const offsetDays = { today: 0, tomorrow: 1, nextWeek: 7 }[btn.dataset.quick] ?? 0;
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + offsetDays);
|
||||
dueDateInput.value = date.toISOString().split('T')[0];
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
displayTasks();
|
||||
});
|
||||
@@ -77,47 +132,120 @@ async function displayTasks() {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to get tasks: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
function formatTask(task) {
|
||||
const li = document.createElement("li");
|
||||
li.classList.add("card", "p-3", "shadow-sm", "mt-2");
|
||||
const done = task.completed ? "text-decoration-line-through opacity-50" : "";
|
||||
li.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<h4 class="${done} col-11">${task.title}</h4>
|
||||
<button data-id="${task._id}" type="button" class="btn-close delete" aria-label="Close"></button>
|
||||
</div>
|
||||
<p class="${done}">${task.description}</p>
|
||||
<p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</p>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div>
|
||||
${task.completed ?
|
||||
`<button data-id="${task._id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
|
||||
:
|
||||
`
|
||||
<button data-bs-toggle="modal" data-bs-target="#editModal" data-title="${task.title}" data-description="${task.description}" data-due-date="${task.dueDate}" data-id="${task._id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
|
||||
<button data-id="${task._id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
<p class="m-0 ${done}"><strong>Created on: </strong>${new Date(task.dateCreated).toLocaleDateString()}</p>
|
||||
</div>
|
||||
`;
|
||||
return li;
|
||||
}
|
||||
toDoList.innerHTML = "";
|
||||
completedList.innerHTML = "";
|
||||
const tasks = data;
|
||||
tasks.forEach(task => {
|
||||
const formattedTask = formatTask(task);
|
||||
task.completed ? completedList.appendChild(formattedTask) : toDoList.appendChild(formattedTask);
|
||||
});
|
||||
allTasks = await response.json();
|
||||
updateStats(allTasks);
|
||||
renderTasks();
|
||||
resetForm();
|
||||
} catch (error) {
|
||||
console.error("Error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
function formatTask(task) {
|
||||
const li = document.createElement("li");
|
||||
li.classList.add("card", "p-3", "shadow-sm", "mt-2");
|
||||
const done = task.completed ? "text-decoration-line-through opacity-50" : "";
|
||||
li.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<h4 class="${done} col-11">${task.title}</h4>
|
||||
<button data-id="${task._id}" type="button" class="btn-close delete" aria-label="Close"></button>
|
||||
</div>
|
||||
<p class="${done}">${task.description}</p>
|
||||
<p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</p>
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div>
|
||||
${task.completed ?
|
||||
`<button data-id="${task._id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
|
||||
:
|
||||
`
|
||||
<button data-bs-toggle="modal" data-bs-target="#editModal" data-title="${task.title}" data-description="${task.description}" data-due-date="${task.dueDate}" data-id="${task._id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
|
||||
<button data-id="${task._id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
<p class="m-0 ${done}"><strong>Created on: </strong>${new Date(task.dateCreated).toLocaleDateString()}</p>
|
||||
</div>
|
||||
`;
|
||||
return li;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the cached task list into the To-Do and Completed columns.
|
||||
* Applies the current search term (if any) as a case-insensitive
|
||||
* match on title or description, and toggles per-column empty-state
|
||||
* messages when nothing matches.
|
||||
*/
|
||||
function renderTasks() {
|
||||
const term = (searchInput?.value || '').trim().toLowerCase();
|
||||
const filtered = term
|
||||
? allTasks.filter(t =>
|
||||
t.title.toLowerCase().includes(term) ||
|
||||
t.description.toLowerCase().includes(term))
|
||||
: allTasks;
|
||||
|
||||
toDoList.innerHTML = '';
|
||||
completedList.innerHTML = '';
|
||||
|
||||
let activeCount = 0;
|
||||
let completedCount = 0;
|
||||
|
||||
filtered.forEach(task => {
|
||||
const node = formatTask(task);
|
||||
if (task.completed) {
|
||||
completedList.appendChild(node);
|
||||
completedCount += 1;
|
||||
} else {
|
||||
toDoList.appendChild(node);
|
||||
activeCount += 1;
|
||||
}
|
||||
});
|
||||
|
||||
toDoEmpty?.classList.toggle('d-none', activeCount > 0);
|
||||
completedEmpty?.classList.toggle('d-none', completedCount > 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Recompute and display the four dashboard stat cards.
|
||||
*
|
||||
* Active - tasks that are not yet completed
|
||||
* Completed - tasks marked done
|
||||
* Overdue - active tasks whose due date is before today
|
||||
* Due Today - active tasks whose due date is today
|
||||
*
|
||||
* Dates are normalised to midnight so the comparison ignores time
|
||||
* of day.
|
||||
*/
|
||||
function updateStats(tasks) {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
let active = 0, completed = 0, overdue = 0, dueToday = 0;
|
||||
|
||||
tasks.forEach(task => {
|
||||
const due = new Date(task.dueDate);
|
||||
due.setHours(0, 0, 0, 0);
|
||||
|
||||
if (task.completed) {
|
||||
completed += 1;
|
||||
} else {
|
||||
active += 1;
|
||||
if (due.getTime() < today.getTime()) {
|
||||
overdue += 1;
|
||||
} else if (due.getTime() === today.getTime()) {
|
||||
dueToday += 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const set = (id, value) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = value;
|
||||
};
|
||||
set('statActive', active);
|
||||
set('statCompleted', completed);
|
||||
set('statOverdue', overdue);
|
||||
set('statDueToday', dueToday);
|
||||
}
|
||||
async function createNewTask() {
|
||||
|
||||
const taskDetails = {
|
||||
|
||||
Reference in New Issue
Block a user