2024-08-18 04:29:25 +00:00
|
|
|
package templates
|
|
|
|
|
|
|
|
|
|
import (
|
|
|
|
|
"fmt"
|
|
|
|
|
|
|
|
|
|
"github.com/Cameron-Reed1/todo-web/types"
|
|
|
|
|
)
|
|
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
templ RootPage(username string, basic_css bool) {
|
2024-08-18 04:29:25 +00:00
|
|
|
<!Doctype HTML>
|
2024-09-06 00:21:52 +00:00
|
|
|
<html lang="en-US" data-show-completed="false">
|
2024-08-18 04:29:25 +00:00
|
|
|
<head>
|
|
|
|
|
<title>Todo</title>
|
|
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
|
|
|
2024-10-01 18:30:33 +00:00
|
|
|
if basic_css {
|
|
|
|
|
<link rel="stylesheet" href="/css/basic.css"/>
|
|
|
|
|
} else {
|
|
|
|
|
<link rel="stylesheet" href="/css/styles.css"/>
|
|
|
|
|
}
|
2024-08-18 04:29:25 +00:00
|
|
|
|
2024-08-19 22:02:45 +00:00
|
|
|
<script src="/js/script.js"></script>
|
2024-08-18 04:29:25 +00:00
|
|
|
<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">
|
2024-09-23 18:50:21 +00:00
|
|
|
<div id="nav-left" class="nav-section">
|
|
|
|
|
<a id="new-button" class="focus-highlight" href="#create-item">New</a>
|
2024-08-18 04:29:25 +00:00
|
|
|
</div>
|
2024-09-23 18:50:21 +00:00
|
|
|
<div id="nav-center" class="nav-section"></div>
|
|
|
|
|
<div id="nav-right" class="nav-section">
|
|
|
|
|
<div>
|
|
|
|
|
<label for="show-completed">Show completed</label>
|
|
|
|
|
<input id="show-completed" type="checkbox" name="show-completed"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="profile">
|
|
|
|
|
<div id="profile-icon" class="focus-highlight">
|
|
|
|
|
<i class="fa-solid fa-user"></i>
|
|
|
|
|
<i class="fa-solid fa-caret-down"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="profile-dropdown">
|
|
|
|
|
<div id="profile-name" class="focus-highlight">{ username }</div>
|
|
|
|
|
<div id="profile-logout" class="focus-highlight" hx-post="/logout" hx-swap="none">Log out</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-09-06 00:21:52 +00:00
|
|
|
</div>
|
2024-08-18 04:29:25 +00:00
|
|
|
</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>
|
2024-08-19 22:02:45 +00:00
|
|
|
<div class="new-item"></div>
|
2024-08-18 04:29:25 +00:00
|
|
|
</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>
|
2024-08-19 22:02:45 +00:00
|
|
|
<div class="new-item"></div>
|
2024-08-18 04:29:25 +00:00
|
|
|
</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>
|
2024-08-19 22:02:45 +00:00
|
|
|
<div class="new-item"></div>
|
2024-08-18 04:29:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-08-19 22:02:45 +00:00
|
|
|
<form id="create-item" hx-post="/new" hx-swap="none">
|
2024-08-20 05:26:47 +00:00
|
|
|
<div class="form-title">Create new Todo</div>
|
|
|
|
|
<div class="form-container">
|
|
|
|
|
<div class="form-column">
|
|
|
|
|
<label for="name">Name</label>
|
|
|
|
|
<br/>
|
|
|
|
|
<input id="create-item-name" type="text" name="name"/>
|
|
|
|
|
<br/>
|
|
|
|
|
<label for="start">Start</label>
|
|
|
|
|
<br/>
|
|
|
|
|
<input id="create-item-start" name="start" type="datetime-local"/>
|
|
|
|
|
<br/>
|
|
|
|
|
<label for="due">Due</label>
|
|
|
|
|
<br/>
|
|
|
|
|
<input id="create-item-due" name="due" type="datetime-local"/>
|
2024-08-18 04:29:25 +00:00
|
|
|
</div>
|
2024-08-20 05:26:47 +00:00
|
|
|
<div class="form-column"></div>
|
2024-08-18 04:29:25 +00:00
|
|
|
</div>
|
2024-08-20 05:26:47 +00:00
|
|
|
<div class="form-button-container">
|
|
|
|
|
<button id="create-save" class="form-save-button button" type="submit">Save</button>
|
|
|
|
|
<a class="form-close-button button" href="#">Close</a>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form id="edit-item" data-id="" hx-put="/update" hx-swap="outerHTML">
|
|
|
|
|
<div class="form-title">Edit Todo</div>
|
|
|
|
|
<div class="form-container">
|
|
|
|
|
<div class="form-column">
|
|
|
|
|
<label for="name">Name</label>
|
|
|
|
|
<br/>
|
|
|
|
|
<input id="edit-item-name" type="text" name="name"/>
|
|
|
|
|
<br/>
|
|
|
|
|
<label for="start">Start</label>
|
|
|
|
|
<br/>
|
|
|
|
|
<input id="edit-item-start" name="start" type="datetime-local"/>
|
|
|
|
|
<br/>
|
|
|
|
|
<label for="due">Due</label>
|
|
|
|
|
<br/>
|
|
|
|
|
<input id="edit-item-due" name="due" type="datetime-local"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-column"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-button-container">
|
|
|
|
|
<button id="edit-save" class="form-save-button button" type="submit">Save</button>
|
|
|
|
|
<a class="form-close-button button" href="#">Close</a>
|
2024-08-18 04:29:25 +00:00
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-20 05:26:47 +00:00
|
|
|
script edit(item_id string) {
|
|
|
|
|
edit(item_id)
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-18 04:29:25 +00:00
|
|
|
templ TodoItem(item types.Todo) {
|
2024-08-20 05:26:47 +00:00
|
|
|
<div id={ fmt.Sprintf("item-%d", item.Id) } class="todo-item" data-idnum={ fmt.Sprintf("%d", item.Id) } data-start={ fmt.Sprintf("%d", item.Start) } data-due={ fmt.Sprintf("%d", item.Due) }>
|
2024-08-18 04:29:25 +00:00
|
|
|
<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">
|
2024-08-20 05:26:47 +00:00
|
|
|
<i class="action-edit fa-solid fa-pencil" onclick="edit(this.parentElement.parentElement.id)"></i>
|
2024-08-18 04:29:25 +00:00
|
|
|
<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>
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-19 22:02:45 +00:00
|
|
|
templ OobTodoItem(targetSelector string, item types.Todo) {
|
|
|
|
|
<div hx-swap-oob={ fmt.Sprintf("%s:%s", "afterend", targetSelector) } >
|
|
|
|
|
@TodoItem(item)
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
templ TodoList(fillerText string, items []types.Todo) {
|
|
|
|
|
<div class="todo-list-items" data-item-count={ fmt.Sprintf("%d", len(items)) }>
|
|
|
|
|
<div class="filler-item">{ fillerText }</div>
|
2024-08-18 04:29:25 +00:00
|
|
|
for _, item := range items {
|
|
|
|
|
@TodoItem(item)
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
