dela/pages/index.html

{{ 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 
    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 = "";

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