A web TODO list application
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
3.7 KiB

{{ template "base" . }}
{{ define "content" }}
<form action="javascript:void(0);">
<div class="container text-center">
<div class="row">
<div class="col">
<input type="text" class="form-control" id="new-todo-text" placeholder="TODO text">
</div>
<div class="col">
<button id="new-todo-submit" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</form>
<div class="container text-center" style="margin-top: 4ch;">
<table id="todos" class="table table-hover" style="word-wrap: break-word;"></table>
</div>
<script>
document.addEventListener('DOMContentLoaded', async function() {
let username = getUsername();
let password = getUserPassword();
document.getElementById("new-todo-text").focus();
// Make "Add" button to send
1 year ago
document.getElementById("new-todo-submit").addEventListener("click", async (event) => {
let newTodoTextInput = document.getElementById("new-todo-text");
let newTodoText = newTodoTextInput.value;
if (newTodoText.length < 1) {
newTodoTextInput.setCustomValidity("At least one character is needed!");
return;
} else {
newTodoTextInput.setCustomValidity("");
}
1 year ago
newTodoTextInput.value = "";
1 year ago
// Make a request
let response = await postNewTodo(username, password, {text: newTodoText});
if (response.ok) {
location.reload();
}
});
// Fetch and display TODOs
response = await getTodos(username, password);
let todosJson = await response.json();
let todos = [];
let completeButtonIDs = [];
let deleteButtonIDs = [];
if (response.ok && todosJson != null) {
let todosDiv = document.getElementById("todos");
todosJson.forEach((item) => {
// Do not work with completed TODOs yet
if (item.isDone == true) {
return;
}
todos.push(item);
let todoCompleteBtnID = "btn-complete-" + String(item.id);
let todoDeleteBtnID = "btn-delete-" + String(item.id);
let todoEditBtnID = "btn-edit-" + String(item.id);
// Display
let timeCreated = new Date(item.timeCreatedUnix * 1000);
todosDiv.innerHTML += "<tr><td>" + item.text + "</td>" +
"<td>" + " " + timeCreated.getDate() + "/" + timeCreated.getMonth() + "/" + timeCreated.getFullYear() + "</td>" +
"<td><button class='btn btn-success' id='" + todoCompleteBtnID + "'>" +
"<img src='/static/images/check.svg'></button><button class='btn btn-danger' id='" +
todoDeleteBtnID + "'><img src='/static/images/trash3-fill.svg'></button></td></tr>";
completeButtonIDs.push(todoCompleteBtnID);
deleteButtonIDs.push(todoDeleteBtnID);
});
}
// Loop over all buttons (doesn't matter which ones because the amounts are equal)
for (let i = 0; i < completeButtonIDs.length; i++) {
// Done button
document.getElementById(completeButtonIDs[i]).addEventListener("click", async (event) => {
// Mark as done
todos[i].isDone = true;
// Update
response = await updateTodo(username, password, todos[i].id, todos[i]);
if (response.ok) {
location.reload();
}
});
// Delete button
document.getElementById(deleteButtonIDs[i]).addEventListener("click", async (event) => {
response = await deleteTodo(username, password, todos[i].id);
if (response.ok) {
location.reload();
}
});
}
}, false)
</script>
{{ end }}