timmybee/diploma_todoapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add task delete modal and alert

Browse Source
This commit is contained in:
Tim Basten
2026-05-05 17:00:42 +08:00
parent 584ef9cbb7
commit cf2df504b1
2 changed files with 44 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/dashboard.html
View File

@@ -156,7 +156,29 @@
</div>
</div>
</footer>
<!-- Modal -->
<!-- Toast-style alert container, populated by showAlert() in api.js -->
<div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1080;"></div>
<!-- Delete confirmation modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteTaskModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="deleteTaskModalLabel">Delete Task</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Are you sure you want to delete this task? This action cannot be undone.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button id="confirmDeleteButton" type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">

23
frontend/js/api.js
View File

@@ -42,6 +42,20 @@ function resetForm() {
taskForm.reset();
}
function showAlert(message, variant = 'success') {
const container = document.getElementById('alertContainer');
if (!container) return;
const alert = document.createElement('div');
alert.className = `alert alert-${variant} alert-dismissible fade show shadow-sm`;
alert.role = 'alert';
alert.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
container.appendChild(alert);
setTimeout(() => bootstrap.Alert.getOrCreateInstance(alert).close(), 3000);
}
const sortButton = document.getElementById("sortSelect");
window.addEventListener("DOMContentLoaded", () => {
sortButton.value = "default";
@@ -93,7 +107,11 @@ taskForm.addEventListener("submit", (event) => {
else if (event.target.classList.contains("delete")) {
const taskId = event.target.getAttribute("data-id");
deleteTask(taskId);
const confirmButton = document.getElementById('confirmDeleteButton');
confirmButton.addEventListener('click', async () => {
await deleteTask(taskId);
bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
}, { once: true });
}
else if (event.target.classList.contains('edit')) {
const task = {
@@ -148,7 +166,7 @@ function formatTask(task) {
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>
<button data-id="${task._id}" type="button" class="btn-close delete" data-bs-toggle="modal" data-bs-target="#deleteModal" aria-label="Close"></button>
</div>
<p class="${done}">${task.description}</p>
<p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</p>
@@ -328,6 +346,7 @@ async function deleteTask(taskId) {
const data = await response.json();
console.log({ message: "Deleted Task:", Task: data });
displayTasks();
showAlert('Task deleted successfully.');
} catch (error) {
console.error("Error:", error);