122 lines
3.1 KiB
JavaScript
122 lines
3.1 KiB
JavaScript
const url = "https://task-api.fstropii.com";
|
|
const localhostUrl = "http://localhost:8000";
|
|
|
|
// Check if the user is logged in
|
|
const getCookie = (returnType) => {
|
|
let decodedCookie = decodeURIComponent(document.cookie);
|
|
if (decodedCookie == "") {
|
|
return;
|
|
}
|
|
|
|
let ca = decodedCookie.split(',');
|
|
|
|
const token = ca[0].split("token=")[1];
|
|
const type = ca[1].split("type=")[1];
|
|
const expiresDay = ca[2].split("expires=")[1];
|
|
const expiresDate = ca[3]
|
|
const expires = `${expiresDay}${expiresDate}`
|
|
|
|
if (returnType == "token") {
|
|
return token;
|
|
} else if (returnType == "type") {
|
|
return type
|
|
} else if (returnType == "expires") {
|
|
return expires;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
const token = getCookie("token");
|
|
|
|
if (token == undefined) {
|
|
// no user
|
|
window.location.href = '/';
|
|
}
|
|
|
|
const setTooltip = (type, message) => {
|
|
tooltip.classList.add(type);
|
|
tooltip.classList.add('visible');
|
|
tooltip.innerText = message
|
|
tooltip.style.display = "block";
|
|
}
|
|
|
|
|
|
// loading user tasks
|
|
const loadUserTasks = () => {
|
|
const tasksPromise = getUserTasks(token);
|
|
tasksPromise.then((res) => res.json()).then((json => {
|
|
const tasks = json.tasks
|
|
if (json.tasks == null) {
|
|
return;
|
|
}
|
|
|
|
for (let i = 0; i < tasks.length; i++) {
|
|
const taskItemDiv = document.createElement('div');
|
|
taskItemDiv.className = 'task-item';
|
|
|
|
createTaskItem(tasks[i]['title'], tasks[i]['is_completed'], i);
|
|
}
|
|
|
|
const checkboxes = document.querySelectorAll('.checkbox');
|
|
|
|
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);
|
|
updateTaskPromise.then((res => {
|
|
setTooltip("success", `Task '${tasks[j]['title']}' updated!`);
|
|
}));
|
|
})
|
|
}
|
|
}));
|
|
}
|
|
|
|
const getUserTasks = (userToken) => {
|
|
const res = fetch(`${url}/users/me`, {
|
|
headers: {Authorization: `Bearer ${userToken}`}
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
const createTaskItem = (title, isCompleted, index) => {
|
|
const userTasksDiv = document.querySelector('.user-tasks');
|
|
const taskItemDiv = document.createElement('div');
|
|
taskItemDiv.className = 'task-item';
|
|
|
|
const taskCheckbox = document.createElement('input');
|
|
taskCheckbox.className = `checkbox-${index} checkbox`;
|
|
taskCheckbox.type = 'checkbox';
|
|
|
|
if (isCompleted == true) {
|
|
taskCheckbox.checked = true;
|
|
}
|
|
|
|
const taskLabel = document.createElement('li');
|
|
taskLabel.innerHTML = title;
|
|
taskLabel.className = `task-${index}`;
|
|
|
|
|
|
taskItemDiv.appendChild(taskCheckbox);
|
|
taskItemDiv.appendChild(taskLabel);
|
|
userTasksDiv.appendChild(taskItemDiv);
|
|
}
|
|
|
|
const updateTask = (userToken, taskTitle, taskDescription, completedStatus) => {
|
|
const body = JSON.stringify({
|
|
"title": taskTitle,
|
|
"description": taskDescription,
|
|
"is_completed": completedStatus
|
|
});
|
|
|
|
const res = fetch(`${localhostUrl}/user/update-tasks`, {
|
|
method: "PATCH",
|
|
headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
|
|
body: body
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
loadUserTasks(token); |