Initial commit
This commit is contained in:
266
templates/results.templ
Normal file
266
templates/results.templ
Normal file
@@ -0,0 +1,266 @@
|
||||
package templates
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
|
||||
"veola/internal/models"
|
||||
)
|
||||
|
||||
type ItemResultsData struct {
|
||||
Page
|
||||
Item models.Item
|
||||
Badge BadgeData
|
||||
History []models.PricePoint
|
||||
Results []models.Result
|
||||
Page_ int
|
||||
TotalPages int
|
||||
Order string
|
||||
HistoryChartJSON string
|
||||
}
|
||||
|
||||
type BadgeData struct {
|
||||
Label string
|
||||
Class string // v-badge-low / v-badge-avg / v-badge-target / ""
|
||||
}
|
||||
|
||||
type GlobalResultsData struct {
|
||||
Page
|
||||
Items []models.Item
|
||||
Results []ItemResultRow
|
||||
ItemID int64
|
||||
From string
|
||||
To string
|
||||
}
|
||||
|
||||
type ItemResultRow struct {
|
||||
models.Result
|
||||
ItemName string
|
||||
}
|
||||
|
||||
templ itemResultsBody(d ItemResultsData) {
|
||||
<div>
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-semibold">{ d.Item.Name }</h1>
|
||||
if d.Item.Category != "" {
|
||||
<div class="v-muted">{ d.Item.Category }</div>
|
||||
}
|
||||
</div>
|
||||
<div class="text-right">
|
||||
if d.Item.BestPrice != nil {
|
||||
<div class="font-mono text-3xl">{ fmtPrice(d.Item.BestPrice, "USD") }</div>
|
||||
if d.Item.BestPriceURL != "" {
|
||||
<a class="text-sm" href={ templ.SafeURL(d.Item.BestPriceURL) } target="_blank" rel="noopener">{ d.Item.BestPriceStore }</a>
|
||||
}
|
||||
} else {
|
||||
<div class="v-muted">no price yet</div>
|
||||
}
|
||||
if d.Badge.Label != "" {
|
||||
<div class="mt-2">
|
||||
<span class={ "v-badge", d.Badge.Class }>{ d.Badge.Label }</span>
|
||||
</div>
|
||||
}
|
||||
<form class="mt-3" hx-post={ fmt.Sprintf("/items/%d/run", d.Item.ID) } hx-swap="none">
|
||||
<input type="hidden" name="csrf_token" value={ d.CSRFToken }/>
|
||||
<button class="v-btn" type="submit">Run Now</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="v-card p-5 mb-6">
|
||||
<h2 class="font-semibold mb-3">Price History</h2>
|
||||
if len(d.History) < 2 {
|
||||
<div class="v-muted">Not enough history yet.</div>
|
||||
} else {
|
||||
<canvas id="price-chart" height="120"></canvas>
|
||||
<script src="/static/vendor/chart.umd.min.js"></script>
|
||||
<script id="price-data" type="application/json">{ d.HistoryChartJSON }</script>
|
||||
<script>
|
||||
(function(){
|
||||
var data = JSON.parse(document.getElementById('price-data').textContent);
|
||||
var ctx = document.getElementById('price-chart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [{
|
||||
label: 'Best price',
|
||||
data: data.points,
|
||||
borderColor: '#00e4a4',
|
||||
backgroundColor: 'rgba(0,228,164,0.15)',
|
||||
pointBackgroundColor: '#e84040',
|
||||
pointRadius: 3,
|
||||
tension: 0.25,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.07)' } },
|
||||
y: { ticks: { color: '#a8c0f0' }, grid: { color: 'rgba(255,255,255,0.07)' } }
|
||||
},
|
||||
plugins: { legend: { labels: { color: '#ffffff' } } }
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="v-card p-0 overflow-hidden">
|
||||
<table class="v-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title</th>
|
||||
<th>
|
||||
<a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results?order=%s", d.Item.ID, toggleOrder(d.Order, "price"))) }>Price</a>
|
||||
</th>
|
||||
<th>Store</th>
|
||||
<th>
|
||||
<a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results?order=%s", d.Item.ID, toggleOrder(d.Order, "found"))) }>Found</a>
|
||||
</th>
|
||||
<th>Alert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
for _, r := range d.Results {
|
||||
<tr>
|
||||
<td>
|
||||
if r.ImageURL != "" {
|
||||
<img src={ r.ImageURL } alt="" class="w-10 h-10 object-cover rounded"/>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
if r.URL != "" {
|
||||
<a href={ templ.SafeURL(r.URL) } target="_blank" rel="noopener">{ r.Title }</a>
|
||||
} else {
|
||||
{ r.Title }
|
||||
}
|
||||
if r.MatchedQuery != "" {
|
||||
<div class="v-muted text-xs">via "{ r.MatchedQuery }"</div>
|
||||
}
|
||||
</td>
|
||||
<td class={ "font-mono", priceClass(r.Price, d.Item.TargetPrice) }>{ fmtPrice(r.Price, r.Currency) }</td>
|
||||
<td class="v-muted">{ r.Source }</td>
|
||||
<td class="v-muted text-sm">{ humanTime(r.FoundAt) }</td>
|
||||
<td>
|
||||
if r.Alerted {
|
||||
<span class="v-pill v-pill-active">sent</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
if d.TotalPages > 1 {
|
||||
<div class="flex gap-2 justify-center my-4">
|
||||
for i := 1; i <= d.TotalPages; i++ {
|
||||
<a class={ pageClass(i, d.Page_) } href={ templ.SafeURL(fmt.Sprintf("/items/%d/results?page=%d&order=%s", d.Item.ID, i, d.Order)) }>{ fmt.Sprintf("%d", i) }</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
func pageClass(i, current int) string {
|
||||
if i == current {
|
||||
return "v-btn"
|
||||
}
|
||||
return "v-btn-ghost"
|
||||
}
|
||||
|
||||
func toggleOrder(current, axis string) string {
|
||||
switch axis {
|
||||
case "price":
|
||||
if current == "price_asc" {
|
||||
return "price_desc"
|
||||
}
|
||||
return "price_asc"
|
||||
case "found":
|
||||
if current == "found_desc" || current == "" {
|
||||
return "found_asc"
|
||||
}
|
||||
return "found_desc"
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
templ ItemResults(d ItemResultsData) {
|
||||
@Layout(d.Page, itemResultsBody(d))
|
||||
}
|
||||
|
||||
templ globalResultsBody(d GlobalResultsData) {
|
||||
<div>
|
||||
<h1 class="text-3xl font-semibold mb-6">All Results</h1>
|
||||
<form method="get" action="/results" class="flex items-end gap-3 mb-4">
|
||||
<div>
|
||||
<label class="v-label">Item</label>
|
||||
<select class="v-select" name="item_id">
|
||||
<option value="0">All</option>
|
||||
for _, it := range d.Items {
|
||||
<option value={ fmt.Sprintf("%d", it.ID) } selected?={ d.ItemID == it.ID }>{ it.Name }</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="v-label">From</label>
|
||||
<input class="v-input" type="date" name="from" value={ d.From }/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="v-label">To</label>
|
||||
<input class="v-input" type="date" name="to" value={ d.To }/>
|
||||
</div>
|
||||
<button class="v-btn" type="submit">Filter</button>
|
||||
</form>
|
||||
<div class="v-card p-0 overflow-hidden">
|
||||
<table class="v-table">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Title</th><th>Price</th><th>Store</th><th>Found</th><th>Alert</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
for _, r := range d.Results {
|
||||
<tr>
|
||||
<td><a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results", r.ItemID)) }>{ r.ItemName }</a></td>
|
||||
<td>
|
||||
if r.URL != "" {
|
||||
<a href={ templ.SafeURL(r.URL) } target="_blank" rel="noopener">{ r.Title }</a>
|
||||
} else {
|
||||
{ r.Title }
|
||||
}
|
||||
if r.MatchedQuery != "" {
|
||||
<div class="v-muted text-xs">via "{ r.MatchedQuery }"</div>
|
||||
}
|
||||
</td>
|
||||
<td class="font-mono">{ fmtPrice(r.Price, r.Currency) }</td>
|
||||
<td class="v-muted">{ r.Source }</td>
|
||||
<td class="v-muted text-sm">{ humanTime(r.FoundAt) }</td>
|
||||
<td>
|
||||
if r.Alerted {
|
||||
<span class="v-pill v-pill-active">sent</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ GlobalResults(d GlobalResultsData) {
|
||||
@Layout(d.Page, globalResultsBody(d))
|
||||
}
|
||||
|
||||
// ChartJSON helper for handlers.
|
||||
type ChartJSON struct {
|
||||
Labels []string `json:"labels"`
|
||||
Points []float64 `json:"points"`
|
||||
}
|
||||
|
||||
func MustChartJSON(c ChartJSON) string {
|
||||
b, _ := json.Marshal(c)
|
||||
return string(b)
|
||||
}
|
||||
Reference in New Issue
Block a user