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.
240 lines
13 KiB
240 lines
13 KiB
{{ template "base" . }} |
|
|
|
{{ define "content" }} |
|
|
|
<!-- <div class="album py-5 bg-body-tertiary"> |
|
<div class="container"> |
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> |
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col"> |
|
<div class="card shadow-sm"> |
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> |
|
<div class="card-body"> |
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="btn-group"> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> |
|
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> |
|
</div> |
|
<small class="text-body-secondary">9 mins</small> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> --> |
|
|
|
<!-- <div> |
|
<form action="return false;"> |
|
<input type="text" name="" id="newTodoText"> |
|
<input type="date" name="" id="newTodoDue"> |
|
<button>Add</button> |
|
</form> |
|
</div> --> |
|
|
|
<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 }} |