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.
 
 
 
 
 

160 lines
5.1 KiB

{{ template "base" . }}
{{ define "content" }}
<h1 style="display: none;" id="categoryId">{{.CurrentGroupId}}</h1>
<!-- Main -->
<main class="d-flex flex-wrap">
<!-- Sidebar -->
<div id="sidebar" class="flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-5 fw-semibold">Categories</span>
</a>
{{ range .Groups }}
<div class="list-group list-group-flush border-bottom scrollarea">
<a href="/group/{{.ID}}" class="list-group-item list-group-item-action active py-3 lh-sm" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">{{ .Name }}</strong>
<small>{{ .TimeCreated }}</small>
</div>
<div class="col-10 mb-1 small">Is removable: {{ .Removable }}</div>
</a>
</div>
{{ end }}
</div>
<div class="p-2 flex-grow-1">
<form action="javascript:void(0);">
<div class="container">
<div class="row">
<div class="col">
<input type="text" class="form-control" id="new-todo-text" placeholder="TODO text">
</div>
<div class="col">
<input type="datetime-local" name="new-todo-due" id="new-todo-due" placeholder="Due">
</div>
<div class="col">
<button id="new-todo-submit" class="btn btn-primary">Add</button>
<button class="btn btn-secondary" id="show-done">Show Done</button>
</div>
</div>
</div>
</form>
<div class="container text-center">
<!-- Due -->
<table class="table table-hover" id="due-todos">
<thead>
<th>ToDo</th>
<th>Created</th>
<th>Due</th>
</thead>
<tbody class="text-break">
{{ range .Todos }}
{{ if not .IsDone }}
<tr>
<td>{{ .Text }}</td>
<td>{{ .TimeCreated }}</td>
<td>{{ .Due }}</td>
<td>
<button class="btn btn-success" onclick="markAsDoneRefresh({{.ID}});"><img src='/static/images/check.svg'></button>
<button class="btn btn-danger" onclick="deleteTodoRefresh({{.ID}});"><img src='/static/images/trash3-fill.svg'></button>
</td>
</tr>
{{ end }}
{{ end }}
</tbody>
</table>
<!-- Completed -->
<table class="table table-hover" style="display: none;" id="completed-todos">
<thead>
<th>ToDo</th>
<th>Created</th>
<th>Completed</th>
</thead>
<tbody class="text-break">
{{ range .Todos }}
{{ if .IsDone }}
<tr>
<td>{{ .Text }}</td>
<td>{{ .TimeCreated }}</td>
<td>{{ .CompletionTime }}</td>
<td>
<button class="btn btn-danger" onclick="deleteTodoRefresh({{.ID}});"><img src='/static/images/trash3-fill.svg'></button>
</td>
</tr>
{{ end }}
{{ end }}
</tbody>
</table>
</div>
</div>
</main>
<script>
async function markAsDoneRefresh(id) {
await markAsDone(id);
window.location.reload();
}
async function deleteTodoRefresh(id) {
await deleteTodo(id);
window.location.reload();
}
async function showDone() {
// Hide not done, show done
let completedTodos = document.getElementById("completed-todos");
completedTodos.style.display = "table";
let dueTodos = document.getElementById("due-todos");
dueTodos.style.display = "none";
}
document.addEventListener('DOMContentLoaded', async function() {
document.getElementById("new-todo-text").focus();
let showDoneButton = document.getElementById("show-done");
showDoneButton.addEventListener("click", (event) => {
// Rename the button
showDoneButton.innerText = "Show To Do";
showDoneButton.className = "btn btn-success";
// Show done
showDone();
// Make it "reset to default"
showDoneButton.addEventListener("click", (event) => {
location.reload();
});
});
// "Add" button
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 groupId = document.getElementById("categoryId").innerText;
// Make a request
let response = await postNewTodo({text: newTodoText, groupId: Number(groupId)});
if (response.ok) {
location.reload();
}
});
});
</script>
{{ end }}