Delete and edit tasks fully working v0.0.19
This commit is contained in:
TropiiDev
parent
461f21d5ef
commit
97afabee48
@ -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,
|
||||
|
||||
@ -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
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div class="right-grid">
|
||||
<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>
|
||||
<button id="add-task-button" class="add-task-button">Add a task</button>
|
||||
@ -42,12 +42,15 @@
|
||||
<h2>Change email?</h2>
|
||||
<p>Enter a new email below</p>
|
||||
</div>
|
||||
<div class="tooltip email-task-tooltip" style="display: none;"></div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-email-input">Email</label>
|
||||
<input id="modal-email-input" class="modal-email-input" placeholder="johndoe234@gmail.com" />
|
||||
</div>
|
||||
<form class="modal-form">
|
||||
<label for="modal-email-input">Email</label>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
@ -58,14 +61,17 @@
|
||||
<h2>Change password?</h2>
|
||||
<p>Enter a new password below</p>
|
||||
</div>
|
||||
<div class="tooltip password-task-tooltip" style="display: none;"></div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-password-input">Password</label>
|
||||
<input id="modal-password-input" class="modal-password-input" />
|
||||
<label for="modal-verify-password-input">Verify Password</label>
|
||||
<input id="modal-verify-password-input" class="modal-verify-password-input" />
|
||||
</div>
|
||||
<form class="modal-form password-form">
|
||||
<label for="modal-password-input">Password</label>
|
||||
<input type="password" id="modal-password-input" class="modal-password-input" />
|
||||
<label for="modal-verify-password-input">Verify Password</label>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
@ -76,12 +82,15 @@
|
||||
<h2>Change username?</h2>
|
||||
<p>Enter a new username below</p>
|
||||
</div>
|
||||
<div class="tooltip username-task-tooltip" style="display: none;"></div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-username-input">Username</label>
|
||||
<input id="modal-username-input" class="modal-username-input" placeholder="johndoe234" />
|
||||
<form class="modal-form username-form">
|
||||
<label for="modal-username-input">Username</label>
|
||||
<input id="modal-username-input" class="modal-username-input" placeholder="johndoe234" />
|
||||
|
||||
<button type="submit" class="submit-username-btn">Save Changes</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button class="submit-username-btn">Save Changes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -92,14 +101,17 @@
|
||||
<h2>Add a task</h2>
|
||||
<p>Enter a new task below</p>
|
||||
</div>
|
||||
<div class="tooltip add-task-tooltip" style="display: none;"></div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-name-input">Name</label>
|
||||
<input id="add-task-modal-name-input" class="add-task-modal-name-input" placeholder="Finish work" />
|
||||
<label for="add-task-modal-description-input">Description</label>
|
||||
<input id="modal-description-input" class="add-task-modal-description-input" placeholder="Finish work by 5pm" />
|
||||
</div>
|
||||
<form class="modal-form add-task-form">
|
||||
<label for="modal-name-input">Name</label>
|
||||
<input id="add-task-modal-name-input" class="add-task-modal-name-input" placeholder="Finish work" />
|
||||
<label for="add-task-modal-description-input">Description</label>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
@ -107,18 +119,25 @@
|
||||
<div class="main-modal">
|
||||
<div class="close-edit-task-modal"><i class="fa-solid fa-x"></i></div>
|
||||
<div class="modal-header">
|
||||
<h2 class="task-modal-title">Finish API</h2>
|
||||
<h2>Edit a task</h2>
|
||||
<p>View task details</p>
|
||||
</div>
|
||||
<div class="tooltip edit-task-tooltip" style="display: none;"></div>
|
||||
<div class="modal-content">
|
||||
<label for="modal-description-input">Description</label>
|
||||
<input id="modal-description-input" class="modal-description-input task-modal-description" placeholder="Finish the task API" />
|
||||
<label for="modal-completed-status">Is it completed?</label>
|
||||
<p id="modal-completed-status" class="task-modal-completed-status"></p>
|
||||
<form class="modal-form task-modal-form">
|
||||
<label for="task-modal-title">Title</label>
|
||||
<input id="task-modal-title" class="modal-title-input task-modal-title" />
|
||||
<label for="modal-description-input">Description</label>
|
||||
<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>
|
||||
|
||||
<div class="button-group">
|
||||
<button type="button" class="delete-task-btn">Delete Task</button>
|
||||
<button type="submit" class="submit-task-btn">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button class="delete-task-btn">Delete Task</button>
|
||||
<button class="submit-task-btn">Save Changes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user