dela/pages/index.html

{{ 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="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) => {
            // Do not work with completed TODOs yet
            if (item.isDone == true) {
                return;
            }

            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 }}