created a responsive pagination system
This commit is contained in:
parent
eb7ad5d1a3
commit
f9c6f4b827
@ -32,6 +32,7 @@
|
|||||||
import {default as Modal} from "./modal/Modal.svelte"
|
import {default as Modal} from "./modal/Modal.svelte"
|
||||||
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
|
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
|
||||||
import {onMount} from "svelte";
|
import {onMount} from "svelte";
|
||||||
|
import Pagination from "./Pagination.svelte";
|
||||||
|
|
||||||
|
|
||||||
let isAniListLoggedIn: boolean
|
let isAniListLoggedIn: boolean
|
||||||
@ -87,14 +88,6 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
function ChangeWatchListPage(newPage: number) {
|
|
||||||
GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
|
|
||||||
watchListPage.set(newPage)
|
|
||||||
aniListWatchlist.set(result)
|
|
||||||
aniListLoggedIn.set(true)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Header/>
|
<Header/>
|
||||||
@ -104,50 +97,7 @@
|
|||||||
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
|
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
|
||||||
<h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
|
<h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
|
||||||
|
|
||||||
<div class="mb-8">
|
<Pagination />
|
||||||
<nav aria-label="Page navigation example">
|
|
||||||
<ul class="inline-flex -space-x-px text-base h-10">
|
|
||||||
{#if page === 1}
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<button disabled
|
|
||||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(page-1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
|
|
||||||
{#if i+1 === page}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i+1}</button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<button disabled
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(page+1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
|
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
|
||||||
{#each aniListWatchListLoaded.data.Page.mediaList as media}
|
{#each aniListWatchListLoaded.data.Page.mediaList as media}
|
||||||
@ -181,49 +131,7 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-8">
|
<Pagination />
|
||||||
<nav aria-label="Page navigation example">
|
|
||||||
<ul class="inline-flex -space-x-px text-base h-10">
|
|
||||||
{#if page === 1}
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<button disabled
|
|
||||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(page-1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
|
|
||||||
{#if i+1 === page}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i+1}</button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<button disabled
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li>
|
|
||||||
<button on:click={() => ChangeWatchListPage(page+1)}
|
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|||||||
145
frontend/src/Pagination.svelte
Normal file
145
frontend/src/Pagination.svelte
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
aniListLoggedIn,
|
||||||
|
aniListWatchlist,
|
||||||
|
animePerPage,
|
||||||
|
watchListPage,
|
||||||
|
} from "./GlobalVariablesAndHelperFunctions.svelte";
|
||||||
|
|
||||||
|
import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
|
||||||
|
import {GetAniListUserWatchingList} from "../wailsjs/go/main/App";
|
||||||
|
import {MediaListSort} from "./anilist/types/AniListTypes";
|
||||||
|
|
||||||
|
let aniListWatchListLoaded: AniListCurrentUserWatchList
|
||||||
|
let page: number
|
||||||
|
let perPage: number
|
||||||
|
|
||||||
|
watchListPage.subscribe(value => page = value)
|
||||||
|
animePerPage.subscribe(value => perPage = value)
|
||||||
|
aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
|
||||||
|
|
||||||
|
const perPageOptions = [10, 20, 50]
|
||||||
|
|
||||||
|
function ChangeWatchListPage(newPage: number) {
|
||||||
|
GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
|
||||||
|
watchListPage.set(newPage)
|
||||||
|
aniListWatchlist.set(result)
|
||||||
|
aniListLoggedIn.set(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function changePage(e): void {
|
||||||
|
if ((e.key === "Enter" || e.key === "Tab") && Number(e.target.value) !== page) ChangeWatchListPage(Number(e.target.value))
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeCountPerPage(e): void {
|
||||||
|
GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => {
|
||||||
|
animePerPage.set(Number(e.target.value))
|
||||||
|
watchListPage.set(1)
|
||||||
|
aniListWatchlist.set(result)
|
||||||
|
aniListLoggedIn.set(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mb-8">
|
||||||
|
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
||||||
|
<nav aria-label="Page navigation" class="hidden md:block">
|
||||||
|
<ul class="inline-flex -space-x-px text-base h-10">
|
||||||
|
{#if page === 1}
|
||||||
|
<li>
|
||||||
|
<button disabled
|
||||||
|
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li>
|
||||||
|
<button on:click={() => ChangeWatchListPage(page-1)}
|
||||||
|
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
|
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
|
||||||
|
{#if i + 1 === page}
|
||||||
|
<li>
|
||||||
|
<button on:click={() => ChangeWatchListPage(i+1)}
|
||||||
|
class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i + 1}</button>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li>
|
||||||
|
<button on:click={() => ChangeWatchListPage(i+1)}
|
||||||
|
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i + 1}</button>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||||
|
<li>
|
||||||
|
<button disabled
|
||||||
|
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li>
|
||||||
|
<button on:click={() => ChangeWatchListPage(page+1)}
|
||||||
|
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{/if}
|
||||||
|
<div class="flex mt-5">
|
||||||
|
<div class="w-20 mx-auto">
|
||||||
|
<select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||||
|
{#each perPageOptions as option}
|
||||||
|
<option value={option}>
|
||||||
|
{option}
|
||||||
|
</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
|
||||||
|
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
||||||
|
<div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
|
||||||
|
{:else}
|
||||||
|
<div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-xs mx-auto">
|
||||||
|
<div class="relative flex items-center max-w-[11rem]">
|
||||||
|
<button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)}
|
||||||
|
class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||||
|
<svg class="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M1 1h16"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<input type="number" min="1" max="{aniListWatchListLoaded.data.Page.pageInfo.lastPage}"
|
||||||
|
on:keydown={changePage} id="page-counter"
|
||||||
|
class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none bg-gray-50 border-x-0 border-gray-300 h-11 font-medium text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full pb-6 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
value={page} required/>
|
||||||
|
<div class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse">
|
||||||
|
<span>Page #</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" id="increment-button" on:click={() => ChangeWatchListPage(page+1)}
|
||||||
|
class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||||
|
<svg class="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||||
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M9 1v16M1 9h16"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user