tropii/task-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete and edit tasks fully working v0.0.19

Browse Source
This commit is contained in:
TropiiDev 2025-04-28 21:26:34 -04:00
parent 461f21d5ef
commit 97afabee48
3 changed files with 194 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
assets/css/user.css
View File

@ -265,6 +265,76 @@
color: var(--white); 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 */ /* Show modal when visible class is added */
.email-modal.visible, .email-modal.visible,

95
assets/js/user.js
View File

@ -31,15 +31,29 @@ addTaskBtn.addEventListener("click", function() {
taskModal.classList.remove("visible"); 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 taskName = document.querySelector('.add-task-modal-name-input').value;
const taskDescription = document.querySelector('.add-task-modal-description-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); const newTaskPromise = newTask(taskName, taskDescription, taskId, token);
newTaskPromise.then((res) => res.json()).then((json => { newTaskPromise.then((res) => res.json()).then((json => {
window.location.reload(); window.location.reload();
})) }));
}) }));
});
}); });
// Check if the user is logged in // Check if the user is logged in
@ -82,6 +96,14 @@ const setTooltip = (type, message) => {
tooltip.style.display = "block"; 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 // loading user tasks
const loadUserTasks = () => { const loadUserTasks = () => {
@ -93,7 +115,7 @@ const loadUserTasks = () => {
} }
for (let i = 0; i < tasks.length; i++) { 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'); const checkboxes = document.querySelectorAll('.checkbox');
@ -101,9 +123,10 @@ const loadUserTasks = () => {
for (let j = 0; j < checkboxes.length; j++) { for (let j = 0; j < checkboxes.length; j++) {
checkboxes[j].addEventListener("click", function() { checkboxes[j].addEventListener("click", function() {
setTooltip("info", `Updating task '${tasks[j]['title']}'`); 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 => { updateTaskPromise.then((res => {
setTooltip("success", `Task '${tasks[j]['title']}' updated!`); setTooltip("success", `Task '${tasks[j]['title']}' updated!`);
window.location.reload();
})); }));
}); });
} }
@ -111,6 +134,9 @@ const loadUserTasks = () => {
const userTasks = document.querySelectorAll('.user-task'); const userTasks = document.querySelectorAll('.user-task');
for (let j = 0; j < userTasks.length; j++) { for (let j = 0; j < userTasks.length; j++) {
userTasks[j].addEventListener("click", function() { 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 taskTitle = tasks[j]['title'];
const taskDescription = tasks[j]['description']; const taskDescription = tasks[j]['description'];
const taskCompletedStatus = tasks[j]['is_completed']; const taskCompletedStatus = tasks[j]['is_completed'];
@ -119,7 +145,9 @@ const loadUserTasks = () => {
const taskModalDescription = document.querySelector('.task-modal-description'); const taskModalDescription = document.querySelector('.task-modal-description');
const taskModalCompletedStatus = document.querySelector('.task-modal-completed-status'); const taskModalCompletedStatus = document.querySelector('.task-modal-completed-status');
const closeTaskModal = document.querySelector('.close-edit-task-modal'); const closeTaskModal = document.querySelector('.close-edit-task-modal');
taskModalTitle.innerHTML = taskTitle; const taskId = tasks[j]['task_id'];
taskModalTitle.placeholder = taskTitle;
taskModalDescription.placeholder = taskDescription; taskModalDescription.placeholder = taskDescription;
taskModalCompletedStatus.innerHTML = taskCompletedStatus ? "yes" : "no"; taskModalCompletedStatus.innerHTML = taskCompletedStatus ? "yes" : "no";
taskModal.classList.add('visible'); taskModal.classList.add('visible');
@ -128,8 +156,24 @@ const loadUserTasks = () => {
taskModal.classList.remove('visible'); 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); userTasksDiv.appendChild(taskItemDiv);
} }
const updateTask = (userToken, taskTitle, taskDescription, completedStatus) => { const updateTask = (userToken, taskTitle, taskDescription, completedStatus, taskId) => {
const body = JSON.stringify({
"title": taskTitle,
"description": taskDescription,
"is_completed": completedStatus
});
const res = fetch(`${url}/user/update-tasks`, { const res = fetch(`${url}/user/update-tasks`, {
method: "PATCH", method: "PATCH",
headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"}, 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; return res;
} }
const newTask = (title, description, userToken) => { const newTask = (title, description, taskId, userToken) => {
const res = fetch(`${url}/user/update-tasks`, { const res = fetch(`${url}/user/update-tasks`, {
method: "PATCH", method: "PATCH",
headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"}, headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
body: JSON.stringify({ body: JSON.stringify({
"title": title, "title": title,
"description": description, "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
}) })
}); });

77
assets/pages/user.html
View File

@ -27,7 +27,7 @@
</div> </div>
<div class="right-grid"> <div class="right-grid">
<h2>User Tasks</h2> <h2>User Tasks</h2>
<div id='tooltip' class="tooltip" style="display: none;"></div> <div id='tooltip' class="tooltip task-tooltip" style="display: none;"></div>
<div class="user-tasks"> <div class="user-tasks">
</div> </div>
<button id="add-task-button" class="add-task-button">Add a task</button> <button id="add-task-button" class="add-task-button">Add a task</button>
@ -42,12 +42,15 @@
<h2>Change email?</h2> <h2>Change email?</h2>
<p>Enter a new email below</p> <p>Enter a new email below</p>
</div> </div>
<div class="tooltip email-task-tooltip" style="display: none;"></div>
<div class="modal-content"> <div class="modal-content">
<label for="modal-email-input">Email</label> <form class="modal-form">
<input id="modal-email-input" class="modal-email-input" placeholder="johndoe234@gmail.com" /> <label for="modal-email-input">Email</label>
</div> <input id="modal-email-input" class="modal-email-input" placeholder="johndoe234@gmail.com" />
<button class="submit-email-btn">Save Changes</button> <button type="submit" class="submit-email-btn">Save Changes</button>
</form>
</div>
</div> </div>
</section> </section>
@ -58,14 +61,17 @@
<h2>Change password?</h2> <h2>Change password?</h2>
<p>Enter a new password below</p> <p>Enter a new password below</p>
</div> </div>
<div class="tooltip password-task-tooltip" style="display: none;"></div>
<div class="modal-content"> <div class="modal-content">
<label for="modal-password-input">Password</label> <form class="modal-form password-form">
<input id="modal-password-input" class="modal-password-input" /> <label for="modal-password-input">Password</label>
<label for="modal-verify-password-input">Verify Password</label> <input type="password" id="modal-password-input" class="modal-password-input" />
<input id="modal-verify-password-input" class="modal-verify-password-input" /> <label for="modal-verify-password-input">Verify Password</label>
</div> <input type="password" id="modal-verify-password-input" class="modal-verify-password-input" />
<button class="submit-password-btn">Save Changes</button> <button type="submit" class="submit-password-btn">Save Changes</button>
</form>
</div>
</div> </div>
</section> </section>
@ -76,12 +82,15 @@
<h2>Change username?</h2> <h2>Change username?</h2>
<p>Enter a new username below</p> <p>Enter a new username below</p>
</div> </div>
<div class="tooltip username-task-tooltip" style="display: none;"></div>
<div class="modal-content"> <div class="modal-content">
<label for="modal-username-input">Username</label> <form class="modal-form username-form">
<input id="modal-username-input" class="modal-username-input" placeholder="johndoe234" /> <label for="modal-username-input">Username</label>
</div> <input id="modal-username-input" class="modal-username-input" placeholder="johndoe234" />
<button class="submit-username-btn">Save Changes</button> <button type="submit" class="submit-username-btn">Save Changes</button>
</form>
</div>
</div> </div>
</section> </section>
@ -92,14 +101,17 @@
<h2>Add a task</h2> <h2>Add a task</h2>
<p>Enter a new task below</p> <p>Enter a new task below</p>
</div> </div>
<div class="tooltip add-task-tooltip" style="display: none;"></div>
<div class="modal-content"> <div class="modal-content">
<label for="modal-name-input">Name</label> <form class="modal-form add-task-form">
<input id="add-task-modal-name-input" class="add-task-modal-name-input" placeholder="Finish work" /> <label for="modal-name-input">Name</label>
<label for="add-task-modal-description-input">Description</label> <input id="add-task-modal-name-input" class="add-task-modal-name-input" placeholder="Finish work" />
<input id="modal-description-input" class="add-task-modal-description-input" placeholder="Finish work by 5pm" /> <label for="add-task-modal-description-input">Description</label>
</div> <input id="modal-description-input" class="add-task-modal-description-input" placeholder="Finish work by 5pm" />
<button class="submit-add-task-btn">Save Changes</button> <button type="submit" class="submit-add-task-btn">Save Changes</button>
</form>
</div>
</div> </div>
</section> </section>
@ -107,18 +119,25 @@
<div class="main-modal"> <div class="main-modal">
<div class="close-edit-task-modal"><i class="fa-solid fa-x"></i></div> <div class="close-edit-task-modal"><i class="fa-solid fa-x"></i></div>
<div class="modal-header"> <div class="modal-header">
<h2 class="task-modal-title">Finish API</h2> <h2>Edit a task</h2>
<p>View task details</p> <p>View task details</p>
</div> </div>
<div class="tooltip edit-task-tooltip" style="display: none;"></div>
<div class="modal-content"> <div class="modal-content">
<label for="modal-description-input">Description</label> <form class="modal-form task-modal-form">
<input id="modal-description-input" class="modal-description-input task-modal-description" placeholder="Finish the task API" /> <label for="task-modal-title">Title</label>
<label for="modal-completed-status">Is it completed?</label> <input id="task-modal-title" class="modal-title-input task-modal-title" />
<p id="modal-completed-status" class="task-modal-completed-status"></p> <label for="modal-description-input">Description</label>
</div> <input id="modal-description-input" class="modal-description-input task-modal-description" />
<label for="modal-completed-status">Is it completed?</label>
<p id="modal-completed-status" class="task-modal-completed-status"></p>
<button class="delete-task-btn">Delete Task</button> <div class="button-group">
<button class="submit-task-btn">Save Changes</button> <button type="button" class="delete-task-btn">Delete Task</button>
<button type="submit" class="submit-task-btn">Save Changes</button>
</div>
</form>
</div>
</div> </div>
</section> </section>