From 97afabee489208d5c699635287f7cb67b5bfe362 Mon Sep 17 00:00:00 2001 From: TropiiDev Date: Mon, 28 Apr 2025 21:26:34 -0400 Subject: [PATCH] Delete and edit tasks fully working v0.0.19 --- assets/css/user.css | 70 +++++++++++++++++++++++++++++++ assets/js/user.js | 95 +++++++++++++++++++++++++++++++++--------- assets/pages/user.html | 77 +++++++++++++++++++++------------- 3 files changed, 194 insertions(+), 48 deletions(-) diff --git a/assets/css/user.css b/assets/css/user.css index e78bec8..004f343 100644 --- a/assets/css/user.css +++ b/assets/css/user.css @@ -265,6 +265,76 @@ color: var(--white); } +.modal-form { + display: flex; + flex-direction: column; + gap: 1rem; + width: 100%; +} + +.modal-form label { + color: var(--silver); + font-size: 0.9rem; + margin-top: 0.5rem; +} + +.modal-form input { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid var(--gray); + border-radius: 4px; + padding: 0.75rem; + color: var(--white); + font-size: 1rem; + transition: border-color 0.2s ease; +} + +.task-modal-form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.task-modal-completed-status { + color: var(--white); + margin: 0; + font-size: 1rem; +} + +.task-modal-form .button-group { + display: flex; + gap: 1rem; + margin-top: 1rem; +} + +.delete-task-btn, +.submit-task-btn { + flex: 1; + padding: 0.75rem; + background: none; + border: 1px solid var(--gray); + border-radius: 4px; + color: var(--white); + font-size: 0.9rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.delete-task-btn { + border-color: #dc3545; + color: #dc3545; +} + +.delete-task-btn:hover { + background-color: rgba(220, 53, 69, 0.1); + transform: translateY(-2px); +} + +.submit-task-btn:hover { + background-color: rgba(255, 255, 255, 0.1); + border-color: var(--white); + transform: translateY(-2px); +} + /* Show modal when visible class is added */ .email-modal.visible, diff --git a/assets/js/user.js b/assets/js/user.js index 37f67c6..a92c4e9 100644 --- a/assets/js/user.js +++ b/assets/js/user.js @@ -31,15 +31,29 @@ addTaskBtn.addEventListener("click", function() { taskModal.classList.remove("visible"); }); - submitTaskBtn.addEventListener("click", function() { + submitTaskBtn.addEventListener("click", function(e) { + e.preventDefault(); const taskName = document.querySelector('.add-task-modal-name-input').value; const taskDescription = document.querySelector('.add-task-modal-description-input').value; + if (taskName == "" || taskName == undefined) { + setTaskTooltip("add", "error", "Please enter a name"); + return; + } + const getUserTasksPromise = getUserTasks(token); + getUserTasksPromise.then((res) => res.json()).then((json => { + let taskId = 0; + const tasks = json.tasks; + if (tasks != null) { + let tasksLength = tasks.length; + taskId = tasksLength + 1; + } - const newTaskPromise = newTask(taskName, taskDescription, token); - newTaskPromise.then((res) => res.json()).then((json => { - window.location.reload(); - })) - }) + const newTaskPromise = newTask(taskName, taskDescription, taskId, token); + newTaskPromise.then((res) => res.json()).then((json => { + window.location.reload(); + })); + })); + }); }); // Check if the user is logged in @@ -82,6 +96,14 @@ const setTooltip = (type, message) => { tooltip.style.display = "block"; } +const setTaskTooltip = (taskType, type, message) => { + const taskTooltip = document.querySelector(`.${taskType}-task-tooltip`); + taskTooltip.classList.add(type); + taskTooltip.classList.add('visible'); + taskTooltip.innerText = message + taskTooltip.style.display = "block"; +} + // loading user tasks const loadUserTasks = () => { @@ -93,7 +115,7 @@ const loadUserTasks = () => { } for (let i = 0; i < tasks.length; i++) { - createTaskItem(tasks[i]['title'], tasks[i]['is_completed'], i); + createTaskItem(tasks[i]['title'], tasks[i]['is_completed'], tasks[i]['task_id']); } const checkboxes = document.querySelectorAll('.checkbox'); @@ -101,9 +123,10 @@ const loadUserTasks = () => { for (let j = 0; j < checkboxes.length; j++) { checkboxes[j].addEventListener("click", function() { setTooltip("info", `Updating task '${tasks[j]['title']}'`); - const updateTaskPromise = updateTask(token, tasks[j]['title'], tasks[j]['description'], checkboxes[j].checked); + const updateTaskPromise = updateTask(token, tasks[j]['title'], tasks[j]['description'], checkboxes[j].checked, tasks[j]['task_id']); updateTaskPromise.then((res => { setTooltip("success", `Task '${tasks[j]['title']}' updated!`); + window.location.reload(); })); }); } @@ -111,6 +134,9 @@ const loadUserTasks = () => { const userTasks = document.querySelectorAll('.user-task'); for (let j = 0; j < userTasks.length; j++) { userTasks[j].addEventListener("click", function() { + // I know this looks like hell. It is + const taskSubmitBtn = document.querySelector('.submit-task-btn'); + const taskDeleteBtn = document.querySelector('.delete-task-btn'); const taskTitle = tasks[j]['title']; const taskDescription = tasks[j]['description']; const taskCompletedStatus = tasks[j]['is_completed']; @@ -119,7 +145,9 @@ const loadUserTasks = () => { const taskModalDescription = document.querySelector('.task-modal-description'); const taskModalCompletedStatus = document.querySelector('.task-modal-completed-status'); const closeTaskModal = document.querySelector('.close-edit-task-modal'); - taskModalTitle.innerHTML = taskTitle; + const taskId = tasks[j]['task_id']; + + taskModalTitle.placeholder = taskTitle; taskModalDescription.placeholder = taskDescription; taskModalCompletedStatus.innerHTML = taskCompletedStatus ? "yes" : "no"; taskModal.classList.add('visible'); @@ -128,8 +156,24 @@ const loadUserTasks = () => { taskModal.classList.remove('visible'); }); + taskSubmitBtn.addEventListener('click', function(e) { + e.preventDefault(); + const newTaskTitle = document.querySelector('.task-modal-title').value != "" ? document.querySelector('.task-modal-title').value : taskTitle; + const newTaskDescription = document.querySelector('.task-modal-description').value != "" ? document.querySelector('.task-modal-description').value : taskDescription; + const updateTaskPromise = updateTask(token, newTaskTitle, newTaskDescription, taskCompletedStatus, taskId); + updateTaskPromise.then((res) => res.json()).then((json => { + window.location.reload(); + })); + }); - }) + taskDeleteBtn.addEventListener("click", function(e) { + e.preventDefault(); + const deleteTaskPromise = deleteTask(token, taskId); + deleteTaskPromise.then((res => { + window.location.reload(); + })); + }) + }); } })); } @@ -165,30 +209,43 @@ const createTaskItem = (title, isCompleted, index) => { userTasksDiv.appendChild(taskItemDiv); } -const updateTask = (userToken, taskTitle, taskDescription, completedStatus) => { - const body = JSON.stringify({ - "title": taskTitle, - "description": taskDescription, - "is_completed": completedStatus - }); +const updateTask = (userToken, taskTitle, taskDescription, completedStatus, taskId) => { const res = fetch(`${url}/user/update-tasks`, { method: "PATCH", headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"}, - body: body + body: JSON.stringify({ + "title": taskTitle, + "description": taskDescription, + "is_completed": completedStatus, + "task_id": taskId + }) }); return res; } -const newTask = (title, description, userToken) => { +const newTask = (title, description, taskId, userToken) => { const res = fetch(`${url}/user/update-tasks`, { method: "PATCH", headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"}, body: JSON.stringify({ "title": title, "description": description, - "is_completed": false + "is_completed": false, + "task_id": taskId + }) + }); + + return res; +} + +const deleteTask = (userToken, taskId) => { + const res = fetch(`${url}/user/delete-task`, { + method: "DELETE", + headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"}, + body: JSON.stringify({ + task_id: taskId }) }); diff --git a/assets/pages/user.html b/assets/pages/user.html index ea9f549..7f995fe 100644 --- a/assets/pages/user.html +++ b/assets/pages/user.html @@ -27,7 +27,7 @@

User Tasks

- +
@@ -42,12 +42,15 @@

Change email?

Enter a new email below

+
- - -
+
+ + - + +
+ @@ -58,14 +61,17 @@

Change password?

Enter a new password below

+
- - - - -
+
+ + + + - + +
+ @@ -76,12 +82,15 @@

Change username?

Enter a new username below

+
- - +
+ + + + +
- - @@ -92,14 +101,17 @@

Add a task

Enter a new task below

+
- - - - -
+
+ + + + - + +
+ @@ -107,18 +119,25 @@
-

Finish API

+

Edit a task

View task details

+
- - - - +
+ + + + + + + +
+ + +
+
- - -