267 lines
7.1 KiB
Plaintext
267 lines
7.1 KiB
Plaintext
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)
|
|
}
|