100 lines
3.7 KiB
Plaintext
100 lines
3.7 KiB
Plaintext
package templates
|
|
|
|
import (
|
|
"fmt"
|
|
|
|
"github.com/Cameron-Reed1/todo-web/types"
|
|
)
|
|
|
|
templ RootPage() {
|
|
<!Doctype HTML>
|
|
<html lang="en-US">
|
|
<head>
|
|
<title>Todo</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
|
<link rel="stylesheet" href="/css/styles.css"/>
|
|
|
|
<script src="/js/lib/htmx.min.js"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<script src="https://kit.fontawesome.com/469cdddb31.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav>
|
|
<div id="nav-container">
|
|
<div id="nav-left">
|
|
<a id="new-button" href="#create-item">New</a>
|
|
</div>
|
|
<div id="nav-center"></div>
|
|
<div id="nav-right"></div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="main-content">
|
|
<div id="lists">
|
|
<div id="overdue-list" class="todo-list">
|
|
<div class="todo-list-title">Overdue</div>
|
|
<div class="todo-list-items" hx-get="/overdue" hx-trigger="load" hx-swap="outerHTML"></div>
|
|
</div>
|
|
<div id="today-list" class="todo-list">
|
|
<div class="todo-list-title">Today</div>
|
|
<div class="todo-list-items" hx-get="/today" hx-trigger="load" hx-swap="outerHTML"></div>
|
|
</div>
|
|
<div id="upcoming-list" class="todo-list">
|
|
<div class="todo-list-title">Upcoming</div>
|
|
<div class="todo-list-items" hx-get="/upcoming" hx-trigger="load" hx-swap="outerHTML"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="create-item" hx-post="/new" hx-swap="none" hx-push-url="#">
|
|
<div id="create-item-title">Create new Todo</div>
|
|
<div id="create-item-form-container">
|
|
<div class="create-item-form-column">
|
|
<div class="create-item-form-column">
|
|
<label for="name">Name</label>
|
|
<br/>
|
|
<input type="text" name="name"/>
|
|
<br/>
|
|
<label for="start">Start</label>
|
|
<br/>
|
|
<input name="start" type="datetime-local"/>
|
|
<br/>
|
|
<label for="due">Due</label>
|
|
<br/>
|
|
<input name="due" type="datetime-local"/>
|
|
</div>
|
|
</div>
|
|
<div class="create-item-form-column"></div>
|
|
</div>
|
|
<div id="create-item-button-container">
|
|
<button id="create-item-save-button" class="button" type="submit" onclick="setTimeout(() => window.location = window.location.origin, 100)">Save</button>
|
|
<a id="create-item-close-button" class="button" href="#">Close</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
}
|
|
|
|
templ TodoItem(item types.Todo) {
|
|
<div class="todo-item">
|
|
<input type="checkbox" name="completed" checked?={ item.Completed } hx-patch={ string(templ.URL(fmt.Sprintf("/set/%d", item.Id))) }/>
|
|
<div class="todo-text">{ item.Text }</div>
|
|
<div class="todo-item-actions">
|
|
<i class="action-edit fa-solid fa-pencil"></i>
|
|
<i class="action-delete fa-solid fa-trash" hx-delete={ fmt.Sprintf("/delete/%d", item.Id) } hx-target="closest .todo-item" hx-swap="outerHTML"></i>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ TodoList(items []types.Todo) {
|
|
<div class="todo-list-items">
|
|
for _, item := range items {
|
|
@TodoItem(item)
|
|
}
|
|
</div>
|
|
}
|