h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added seasons list

Browse Source
This commit is contained in:
Haelnorr
2026-02-01 13:25:11 +11:00
parent 96d534f045
commit 81d4ceb354
17 changed files with 660 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
internal/view/component/pagination/pagination.templ Normal file
View File

@@ -0,0 +1,101 @@
package pagination
import "git.haelnorr.com/h/oslstats/internal/db"
import "fmt"
templ Pagination(opts db.PageOpts, total int) {
<div class="mt-6 flex flex-col gap-4">
<input type="hidden" name="page" id="pagination-page"/>
<input type="hidden" name="per_page" id="pagination-per-page"/>
<!-- Page info and per-page selector -->
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
<div>
if total > 0 {
Showing { fmt.Sprintf("%d", opts.StartItem()) } - { fmt.Sprintf("%d", opts.EndItem(total)) } of { fmt.Sprintf("%d", total) } results
} else {
No results
}
</div>
<div class="flex items-center gap-2">
<label for="per-page-select">Per page:</label>
<select
id="per-page-select"
class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
x-model.number="perPage"
@change="setPerPage(perPage)"
>
<option value="1">1</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<!-- Pagination buttons -->
if total > 0 && opts.TotalPages(total) > 1 {
<div class="flex flex-wrap justify-center items-center gap-2">
<!-- First button -->
<button
type="button"
@click="goToPage(1)"
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
x-bind:disabled={ fmt.Sprintf("%t", !opts.HasPrevPage()) }
x-bind:class={ fmt.Sprintf("%t", !opts.HasPrevPage()) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">First</span>
<span class="sm:hidden">&lt;&lt;</span>
</button>
<!-- Previous button -->
<button
type="button"
@click={ fmt.Sprintf("goToPage(%d)", opts.Page-1) }
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
x-bind:disabled={ fmt.Sprintf("%t", !opts.HasPrevPage()) }
x-bind:class={ fmt.Sprintf("%t", !opts.HasPrevPage()) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">Previous</span>
<span class="sm:hidden">&lt;</span>
</button>
<!-- Page numbers -->
for _, pageNum := range opts.GetPageRange(total, 7) {
<button
type="button"
@click={ fmt.Sprintf("goToPage(%d)", pageNum) }
class={ "px-3 py-2 rounded-lg border transition",
templ.KV("bg-blue border-blue text-mantle font-bold", pageNum == opts.Page),
templ.KV("bg-mantle border-surface1 text-text hover:bg-surface0 hover:border-blue cursor-pointer", pageNum != opts.Page) }
>
{ fmt.Sprintf("%d", pageNum) }
</button>
}
<!-- Next button -->
<button
type="button"
@click={ fmt.Sprintf("goToPage(%d)", opts.Page+1) }
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
x-bind:disabled={ fmt.Sprintf("%t", !opts.HasNextPage(total)) }
x-bind:class={ fmt.Sprintf("%t", !opts.HasNextPage(total)) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">Next</span>
<span class="sm:hidden">&gt;</span>
</button>
<!-- Last button -->
<button
type="button"
@click={ fmt.Sprintf("goToPage(%d)", opts.TotalPages(total)) }
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
x-bind:disabled={ fmt.Sprintf("%t", !opts.HasNextPage(total)) }
x-bind:class={ fmt.Sprintf("%t", !opts.HasNextPage(total)) +
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
>
<span class="hidden sm:inline">Last</span>
<span class="sm:hidden">&gt;&gt;</span>
</button>
</div>
}
</div>
}