Initial commit

templates/items.templ

@@ -0,0 +1,162 @@
+package templates
+
+import (
+	"fmt"
+
+	"veola/internal/models"
+)
+
+type ItemsData struct {
+	Page
+	Items            []models.Item
+	Categories       []string
+	SelectedCategory string
+}
+
+templ itemsBody(d ItemsData) {
+	<div>
+		<div class="flex items-center justify-between mb-6">
+			<h1 class="text-3xl font-semibold">Items</h1>
+			<a class="v-btn" href="/items/new">+ Add Item</a>
+		</div>
+		if len(d.Categories) > 0 {
+			<form method="get" action="/items" class="mb-4 flex items-center gap-2">
+				<label class="v-label mb-0">Category</label>
+				<select class="v-select max-w-xs" name="category" onchange="this.form.submit()">
+					<option value="">All</option>
+					for _, c := range d.Categories {
+						<option value={ c } selected?={ c == d.SelectedCategory }>{ c }</option>
+					}
+				</select>
+			</form>
+		}
+		if len(d.Items) == 0 {
+			@itemsEmpty()
+		} else {
+			<div class="v-card p-0 overflow-hidden">
+				<table class="v-table">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Category</th>
+							<th>Target</th>
+							<th>Best Price</th>
+							<th>Last Polled</th>
+							<th>Status</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody id="items-tbody">
+						for _, it := range d.Items {
+							@itemRow(it, d.CSRFToken)
+						}
+					</tbody>
+				</table>
+			</div>
+		}
+	</div>
+}
+
+templ itemsEmpty() {
+	<div class="v-card p-8 flex flex-col md:flex-row items-center gap-6">
+		<div class="v-veola-portrait w-48 shrink-0">
+			<img src="/static/img/veola.webp" alt="Veola"/>
+		</div>
+		<div>
+			<h2 class="text-xl font-semibold mb-2">Nothing on the watchlist.</h2>
+			<p class="v-muted mb-4">Add an item and Veola will keep an eye on it.</p>
+			<a class="v-btn" href="/items/new">Add the first item</a>
+		</div>
+	</div>
+}
+
+templ itemRow(it models.Item, csrf string) {
+	<tr id={ fmt.Sprintf("item-row-%d", it.ID) }>
+		<td>
+			<a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results", it.ID)) }>{ it.Name }</a>
+			if it.LastPollError != "" {
+				<button class="v-pill v-pill-error ml-2" hx-get={ fmt.Sprintf("/items/%d/error", it.ID) } hx-target={ fmt.Sprintf("#item-error-%d", it.ID) } hx-swap="innerHTML">!</button>
+				<div id={ fmt.Sprintf("item-error-%d", it.ID) } class="v-error-text mt-1"></div>
+			}
+		</td>
+		<td class="v-muted">{ it.Category }</td>
+		<td class="font-mono">
+			if it.TargetPrice != nil {
+				{ fmtPrice(it.TargetPrice, "USD") }
+			} else {
+				<span class="v-muted">—</span>
+			}
+		</td>
+		<td>
+			if it.BestPrice != nil {
+				<div class={ "font-mono text-lg", priceClass(it.BestPrice, it.TargetPrice) }>{ fmtPrice(it.BestPrice, "USD") }</div>
+				if it.BestPriceURL != "" {
+					<a class="text-xs" href={ templ.SafeURL(it.BestPriceURL) } target="_blank" rel="noopener">{ it.BestPriceStore }</a>
+				} else if it.BestPriceStore != "" {
+					<span class="text-xs v-muted">{ it.BestPriceStore }</span>
+				}
+			} else {
+				<span class="v-muted">not yet</span>
+			}
+		</td>
+		<td class="v-muted text-sm">
+			if it.LastPolledAt != nil {
+				<span title={ it.LastPolledAt.Format("2006-01-02 15:04:05") }>{ humanTime(*it.LastPolledAt) }</span>
+			} else {
+				—
+			}
+		</td>
+		<td>
+			if it.Active {
+				<span class="v-pill v-pill-active">active</span>
+			} else {
+				<span class="v-pill v-pill-paused">paused</span>
+			}
+		</td>
+		<td class="text-right whitespace-nowrap">
+			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/toggle", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML">
+				<input type="hidden" name="csrf_token" value={ csrf }/>
+				<button class="v-btn-ghost text-sm" type="submit">
+					if it.Active {
+						Pause
+					} else {
+						Resume
+					}
+				</button>
+			</form>
+			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/run", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML">
+				<input type="hidden" name="csrf_token" value={ csrf }/>
+				<button class="v-btn-ghost text-sm" type="submit">Run Now</button>
+			</form>
+			<a class="v-btn-ghost text-sm" href={ templ.SafeURL(fmt.Sprintf("/items/%d/edit", it.ID)) }>Edit</a>
+			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/delete", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML" hx-confirm="Delete this item?">
+				<input type="hidden" name="csrf_token" value={ csrf }/>
+				<button class="v-btn-ghost text-sm" type="submit">Delete</button>
+			</form>
+		</td>
+	</tr>
+}
+
+func priceClass(best, target *float64) string {
+	if best == nil || target == nil {
+		return ""
+	}
+	if *best <= *target {
+		return "v-price-target"
+	}
+	return ""
+}
+
+templ Items(d ItemsData) {
+	@Layout(d.Page, itemsBody(d))
+}
+
+// ItemRow renders a single row partial, used by HTMX endpoints.
+templ ItemRow(it models.Item, csrf string) {
+	@itemRow(it, csrf)
+}
+
+// EmptyRow lets a delete handler return a row replacement that vanishes.
+templ EmptyRow() {
+	<tr></tr>
+}