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 = {
|
||||
|
||||
48
frontend/js/features.js
Normal file
48
frontend/js/features.js
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* features.js
|
||||
*
|
||||
* Powers the Features page.
|
||||
*
|
||||
* Features:
|
||||
* - Loads the feature list from `./data/features.json` via fetch().
|
||||
* - Dynamically renders each feature as a Bootstrap card (icon,
|
||||
* title, description) inside the #featuresContainer grid.
|
||||
* - Shows an error message if the JSON file cannot be loaded.
|
||||
*
|
||||
* The feature list lives in JSON so that marketing can add, remove
|
||||
* or reorder features without the page template changing.
|
||||
*/
|
||||
|
||||
const featuresContainer = document.getElementById('featuresContainer');
|
||||
|
||||
async function loadFeatures() {
|
||||
try {
|
||||
const response = await fetch('./data/features.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load features: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
renderFeatures(data.features);
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
featuresContainer.innerHTML = `<p class="text-white text-center">Unable to load features.</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderFeatures(features) {
|
||||
featuresContainer.innerHTML = '';
|
||||
features.forEach(f => {
|
||||
const col = document.createElement('div');
|
||||
col.className = 'col-12 col-md-6 col-lg-4 mb-4';
|
||||
col.innerHTML = `
|
||||
<div class="rounded shadow bg-translucent p-4 h-100 text-white">
|
||||
<img src="${f.icon}" alt="" height="48" width="auto" class="mb-3">
|
||||
<h3 class="h5">${f.title}</h3>
|
||||
<p class="text-white-50 mb-0">${f.description}</p>
|
||||
</div>
|
||||
`;
|
||||
featuresContainer.appendChild(col);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', loadFeatures);
|
||||
67
frontend/js/pricing.js
Normal file
67
frontend/js/pricing.js
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* pricing.js
|
||||
*
|
||||
* Powers the Pricing page.
|
||||
*
|
||||
* Features:
|
||||
* - Loads the three plan definitions from `./data/pricing.json`
|
||||
* asynchronously via fetch().
|
||||
* - Dynamically renders one card per plan, highlighting the
|
||||
* "featured" plan with a coloured border and a "Most popular"
|
||||
* badge.
|
||||
* - Shows a graceful error message if the JSON file cannot be
|
||||
* loaded.
|
||||
*
|
||||
* Keeping plan data in a separate JSON file means marketing copy and
|
||||
* prices can be updated without touching the page markup.
|
||||
*/
|
||||
|
||||
const pricingContainer = document.getElementById('pricingContainer');
|
||||
|
||||
async function loadPricing() {
|
||||
try {
|
||||
const response = await fetch('./data/pricing.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load pricing: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
renderPlans(data.plans);
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
pricingContainer.innerHTML = `<p class="text-white text-center">Unable to load pricing. Please try again later.</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderPlans(plans) {
|
||||
pricingContainer.innerHTML = '';
|
||||
plans.forEach(plan => {
|
||||
const col = document.createElement('div');
|
||||
col.className = 'col-12 col-md-4 mb-4';
|
||||
|
||||
const featuresHtml = plan.features
|
||||
.map(f => `<li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">${f}</li>`)
|
||||
.join('');
|
||||
|
||||
const highlight = plan.featured ? 'pinkBorder' : '';
|
||||
const badge = plan.featured
|
||||
? '<span class="badge bg-primary mb-2">Most popular</span>'
|
||||
: '';
|
||||
|
||||
col.innerHTML = `
|
||||
<div class="rounded shadow bg-translucent p-4 h-100 d-flex flex-column ${highlight}">
|
||||
${badge}
|
||||
<h3 class="text-white">${plan.name}</h3>
|
||||
<p class="text-white-50">${plan.tagline}</p>
|
||||
<div class="mb-3">
|
||||
<span class="display-4 text-white">$${plan.price}</span>
|
||||
<span class="text-white-50 ms-2">${plan.period}</span>
|
||||
</div>
|
||||
<ul class="list-unstyled text-white flex-grow-1">${featuresHtml}</ul>
|
||||
<a href="${plan.href}" class="btn btn-primary mt-3">${plan.cta}</a>
|
||||
</div>
|
||||
`;
|
||||
pricingContainer.appendChild(col);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', loadPricing);
|
||||
78
frontend/js/support.js
Normal file
78
frontend/js/support.js
Normal file
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* support.js
|
||||
*
|
||||
* Powers the Support page.
|
||||
*
|
||||
* Features:
|
||||
* 1. FAQ accordion
|
||||
* - Loads Q&A pairs from `./data/faq.json`.
|
||||
* - Renders each as a Bootstrap accordion item so only one
|
||||
* answer is open at a time.
|
||||
*
|
||||
* 2. Contact form
|
||||
* - Validates that all fields have been filled in.
|
||||
* - Displays an inline success or error alert above the form.
|
||||
* - Does not currently persist messages; the form is purely a
|
||||
* frontend demonstration (see README / features notes).
|
||||
*/
|
||||
|
||||
const faqContainer = document.getElementById('faqContainer');
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const contactStatus = document.getElementById('contactStatus');
|
||||
|
||||
async function loadFaqs() {
|
||||
try {
|
||||
const response = await fetch('./data/faq.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load FAQs: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
renderFaqs(data.faqs);
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
faqContainer.innerHTML = `<p class="text-white text-center">Unable to load FAQs.</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderFaqs(faqs) {
|
||||
faqContainer.innerHTML = '';
|
||||
faqs.forEach((faq, i) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'accordion-item';
|
||||
item.innerHTML = `
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#faq-${i}" aria-expanded="false" aria-controls="faq-${i}">
|
||||
${faq.question}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq-${i}" class="accordion-collapse collapse" data-bs-parent="#faqContainer">
|
||||
<div class="accordion-body">${faq.answer}</div>
|
||||
</div>
|
||||
`;
|
||||
faqContainer.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
contactForm.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
const name = contactForm.name.value.trim();
|
||||
const email = contactForm.email.value.trim();
|
||||
const message = contactForm.message.value.trim();
|
||||
|
||||
if (!name || !email || !message) {
|
||||
showStatus('Please fill out all fields.', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
showStatus('Thanks, your message has been received. We will get back to you shortly.', 'success');
|
||||
contactForm.reset();
|
||||
});
|
||||
|
||||
function showStatus(message, type) {
|
||||
contactStatus.className = `alert alert-${type}`;
|
||||
contactStatus.textContent = message;
|
||||
contactStatus.classList.remove('d-none');
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', loadFaqs);
|
||||
Reference in New Issue
Block a user