codemicro/railmiles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dynamic journey listing pagination controls

Browse source
This commit is contained in:
akp 2024-05-18 14:17:35 +01:00
parent 8a12085785
commit d0cd3787eb
No known key found for this signature in database
GPG key ID: CF8D58F3DEB20755
1 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web/src/routes/JourneyListing.svelte
View file

@ -22,6 +22,32 @@
return await response.json()
}
const makeWindow = () => {
let parts
if (totalNumPages < 3) {
parts = []
for (let i = 0; i < totalNumPages; i += 1) {
parts.push(i)
}
return parts
}
const cursor = currentPage + 1
if (cursor - 1 == 0) {
// we've got the first one selected
parts = [cursor, cursor + 1, cursor + 2]
} else if (cursor + 1 > totalNumPages) {
// we've got the last one selected
parts = [cursor - 2, cursor - 1, cursor]
} else {
parts = [cursor - 1, cursor, cursor + 1]
}
return parts
}
onMount(async () => {
const resp = await getPage(currentPage)
totalNumPages = resp.numPages
@ -50,11 +76,13 @@
<nav class="d-flex justify-content-center">
<ul class="pagination">
<li class={currentPage === 0 ? "page-item disabled" : "page-item"}><a role="button" tabindex="0" class="page-link" on:click={() => {currentPage = 0}}><i class="bi-chevron-double-left"></i></a></li>
<li class={currentPage === 0 ? "page-item disabled" : "page-item"}><a role="button" tabindex="0" class="page-link" on:click={() => {currentPage--}}><i class="bi-chevron-left"></i></a></li>
{#each {length: totalNumPages} as _, i}
<li class={currentPage === i ? "page-item active" : "page-item"}><a role="button" tabindex="0" class="page-link" on:click={() => {currentPage=i}}>{i+1}</a></li>
{#each makeWindow() as pageNumber, _ (pageNumber)}
<li class={currentPage === pageNumber - 1 ? "page-item active" : "page-item"}><a role="button" tabindex="0" class="page-link" on:click={() => {currentPage=pageNumber - 1}}>{pageNumber}</a></li>
{/each}
<li class={currentPage+1 === totalNumPages ? "page-item disabled" : "page-item"}><a role="button" tabindex="0" class="page-link" on:click={() => {currentPage++}}><i class="bi-chevron-right"></i></a></li>
<li class={currentPage+1 === totalNumPages ? "page-item disabled" : "page-item"}><a role="button" tabindex="0" class="page-link" on:click={() => {currentPage = totalNumPages-1}}><i class="bi-chevron-double-right"></i></a></li>
</ul>
</nav>