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.
 
 
 
 
 

89 lines
2.6 KiB

{{ template "base" . }}
{{ define "content" }}
<form action="javascript:void(0);">
<div class="mb-3">
<label for="new-todo-text" class="form-label">TODO</label>
<input type="text" class="form-control" id="new-todo-text">
</div>
<div class="mb-3">
<label for="new-todo-due" class="form-label">Due</label>
<input type="datetime-local" class="form-control" id="new-todo-due">
</div>
<button id="new-todo-submit" class="btn btn-primary">Add</button>
</form>
<div id="groups">
</div>
<div id="todos">
</div>
<script>
document.addEventListener('DOMContentLoaded', async function() {
let username = getUsername();
let password = getUserPassword();
// Make "Add" button to send
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("");
}
newTodoTextInput.value = "";
let newTodoDueInput = document.getElementById("new-todo-due");
let newTodoDue = newTodoDueInput.value;
newTodoDueInput.value = 0;
// Make a request
let response = await post_new_todo(username, password, {text: newTodoText});
if (response.ok) {
location.reload();
}
});
// Fetch and display TODOs
response = await get_todos(username, password);
let todosJson = await response.json();
let todos = [];
let completeButtonIDs = [];
if (response.ok && todosJson != null) {
let todosDiv = document.getElementById("todos");
todosJson.forEach((item) => {
console.log(item);
todos.push(item);
let todoCompleteBtnID = "btn-complete-" + String(item.id);
todosDiv.innerHTML += "<p>" + item.text +
"<small><button class='btn btn-success' style='margin:10px;' id='" + todoCompleteBtnID + "'>" +
"Done</button></small></p>";
completeButtonIDs.push(todoCompleteBtnID);
});
}
for (let i = 0; i < completeButtonIDs.length; i++) {
document.getElementById(completeButtonIDs[i]).addEventListener("click", async (event) => {
response = await delete_todo(username, password, todos[i].id);
if (response.ok) {
location.reload();
}
});
}
}, false)
</script>
{{ end }}