2022-04-04 11:40:34 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>{{ .title }}</title>
|
|
|
|
|
{{template "head" .}}
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
{{template "navbar" .}}
|
|
|
|
|
|
2022-04-06 14:24:01 +02:00
|
|
|
<div class="container">
|
2022-04-07 16:24:56 +02:00
|
|
|
<div class="mt-5 d-flex justify-content-between align-items-center">
|
|
|
|
|
<div class="fs-3 text-center">{{ .title }}</div>
|
|
|
|
|
<div class="col-6">
|
2022-04-07 16:37:10 +02:00
|
|
|
<input type="email" class="form-control" id="search" placeholder="search for task">
|
2022-04-07 16:24:56 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-04-04 11:40:34 +02:00
|
|
|
<hr>
|
2022-04-06 14:12:15 +02:00
|
|
|
<div id="tasks"></div>
|
2022-04-06 20:23:14 +02:00
|
|
|
<hr>
|
|
|
|
|
<form class="row g-3 needs-validation" novalidate>
|
|
|
|
|
<div class="col-1"></div>
|
|
|
|
|
<div class="col-8">
|
|
|
|
|
<div class="input-group has-validation">
|
|
|
|
|
<input type="text" class="form-control" id="description" required>
|
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
|
Please provide a description.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<button class="btn btn-primary" id="button" type="submit"><i class="bi bi-plus-lg"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
2022-04-04 11:40:34 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{{template "scripts" .}}
|
2022-04-06 20:59:10 +02:00
|
|
|
{{template "formScripts" .}}
|
2022-04-04 11:40:34 +02:00
|
|
|
<script>
|
2022-04-04 12:26:36 +02:00
|
|
|
userLoggedIn().then((loggedIn) => !loggedIn ? redirect("/view/login") : getAllTasks());
|
2022-04-06 14:12:15 +02:00
|
|
|
const tasksEl = document.getElementById("tasks");
|
2022-04-06 20:59:10 +02:00
|
|
|
const descriptionInput = document.getElementById("description");
|
2022-04-07 15:39:22 +02:00
|
|
|
let tasks = [];
|
2022-04-07 16:37:10 +02:00
|
|
|
let timer;
|
|
|
|
|
|
|
|
|
|
document.getElementById("search").addEventListener('keyup', e => {
|
|
|
|
|
const enteredText = e.currentTarget.value;
|
|
|
|
|
clearTimeout(timer);
|
|
|
|
|
if (e.key === "Enter ") {
|
2022-04-07 21:06:30 +02:00
|
|
|
getAllTasks(enteredText);
|
2022-04-07 16:37:10 +02:00
|
|
|
} else {
|
|
|
|
|
timer = setTimeout(() => {
|
2022-04-07 21:06:30 +02:00
|
|
|
getAllTasks(enteredText);
|
2022-04-07 16:37:10 +02:00
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
});
|
2022-04-06 20:59:10 +02:00
|
|
|
|
|
|
|
|
function submitForm(formData) {
|
|
|
|
|
axios.post("/tasks", formData, axiosConfig)
|
|
|
|
|
.then((response) => {
|
2022-04-07 15:39:22 +02:00
|
|
|
addTaskToTasks(response.data.task, tasks.length + 1);
|
2022-04-06 20:59:10 +02:00
|
|
|
form.classList.remove('was-validated');
|
|
|
|
|
descriptionInput.value = "";
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
showErrorToast(err.response.data.message);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-06 21:11:27 +02:00
|
|
|
function deleteTask(id) {
|
2022-04-07 16:05:43 +02:00
|
|
|
axios.delete("/tasks", {params: {id: id}, headers: {username: username}})
|
2022-04-07 15:39:22 +02:00
|
|
|
.then(() => {
|
|
|
|
|
getAllTasks();
|
2022-04-06 21:11:27 +02:00
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
showErrorToast(err.response.data.message);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-07 16:05:43 +02:00
|
|
|
function updateTask(id, done) {
|
|
|
|
|
axios.put("/tasks", null, {params: {id: id, done: done}, headers: {username: username}})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
showErrorToast(err.response.data.message);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-07 15:39:22 +02:00
|
|
|
function addTaskToTasks(task, number) {
|
|
|
|
|
tasks.push(task);
|
2022-04-06 20:59:10 +02:00
|
|
|
const newTask = document.createElement('div');
|
|
|
|
|
newTask.classList.add('row', 'g-0', 'align-items-center', 'mb-1');
|
2022-04-07 15:39:22 +02:00
|
|
|
newTask.id = task.ID;
|
2022-04-06 20:59:10 +02:00
|
|
|
newTask.innerHTML = `
|
2022-04-07 15:39:22 +02:00
|
|
|
<div class="col-1 text-center">${number}</div>
|
2022-04-06 20:59:10 +02:00
|
|
|
<div class="col-8">${task.Description}</div>
|
|
|
|
|
<div class="col-2 form-check form-switch d-flex justify-content-center">
|
2022-04-07 16:05:43 +02:00
|
|
|
<input onchange="updateTask(${task.ID},this.checked)" class="text-center form-check-input" type="checkbox" ${task.Done && "checked"} role="switch" id="flexSwitchCheckDefault">
|
2022-04-06 20:59:10 +02:00
|
|
|
</div>
|
2022-04-06 21:11:27 +02:00
|
|
|
<button onclick="deleteTask(${task.ID})" class="col-1 btn btn-danger"><i class="bi bi-trash"></i></button>
|
2022-04-06 20:59:10 +02:00
|
|
|
`;
|
|
|
|
|
tasksEl.appendChild(newTask);
|
|
|
|
|
}
|
2022-04-04 12:26:36 +02:00
|
|
|
|
2022-04-07 15:39:22 +02:00
|
|
|
function addTaskHeader() {
|
|
|
|
|
const taskHeader = document.createElement("div");
|
|
|
|
|
taskHeader.classList.add('row', 'g-0', 'align-items-center', 'mb-1');
|
|
|
|
|
taskHeader.innerHTML = `
|
2022-04-06 20:23:14 +02:00
|
|
|
<div class="fw-bold col-1 text-center">ID</div>
|
|
|
|
|
<div class="fw-bold col-8">Description</div>
|
|
|
|
|
<div class="fw-bold col-2 text-center">Done</div>
|
|
|
|
|
<div class="fw-bold col-1 text-center">Delete</div>
|
2022-04-06 14:24:01 +02:00
|
|
|
<hr class="mt-3 mb-2">
|
|
|
|
|
`;
|
2022-04-07 15:39:22 +02:00
|
|
|
tasksEl.appendChild(taskHeader);
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-07 21:06:30 +02:00
|
|
|
function getAllTasks(filter) {
|
2022-04-07 15:39:22 +02:00
|
|
|
tasksEl.innerHTML = "";
|
|
|
|
|
addTaskHeader();
|
2022-04-07 21:06:30 +02:00
|
|
|
axios.get("/tasks", {params: {filter: filter}, headers: {username: username}}).then((response) => {
|
2022-04-07 15:39:22 +02:00
|
|
|
tasks = response.data.tasks;
|
|
|
|
|
tasks.forEach((task, index) => {
|
|
|
|
|
addTaskToTasks(task, index + 1);
|
|
|
|
|
});
|
2022-04-06 14:12:15 +02:00
|
|
|
});
|
2022-04-04 12:26:36 +02:00
|
|
|
}
|
2022-04-04 11:40:34 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
