added pagination
This commit is contained in:
parent
15d61290be
commit
43a054ac92
@ -1,15 +1,15 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {
|
import {
|
||||||
anilistModal,
|
|
||||||
title,
|
|
||||||
simklWatchList,
|
|
||||||
aniListLoggedIn,
|
aniListLoggedIn,
|
||||||
simklLoggedIn,
|
anilistModal,
|
||||||
simklUser,
|
|
||||||
aniListUser,
|
|
||||||
aniListPrimary,
|
aniListPrimary,
|
||||||
|
aniListUser,
|
||||||
aniListWatchlist,
|
aniListWatchlist,
|
||||||
GetAniListSingleItemAndOpenModal,
|
GetAniListSingleItemAndOpenModal,
|
||||||
|
simklLoggedIn,
|
||||||
|
simklUser,
|
||||||
|
simklWatchList,
|
||||||
|
title,
|
||||||
} from "./GlobalVariablesAndHelperFunctions.svelte";
|
} from "./GlobalVariablesAndHelperFunctions.svelte";
|
||||||
import {
|
import {
|
||||||
CheckIfAniListLoggedIn,
|
CheckIfAniListLoggedIn,
|
||||||
@ -28,7 +28,6 @@
|
|||||||
import {onMount} from "svelte";
|
import {onMount} from "svelte";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let isAniListLoggedIn: boolean
|
let isAniListLoggedIn: boolean
|
||||||
let isAniListPrimary: boolean
|
let isAniListPrimary: boolean
|
||||||
let aniListWatchListLoaded: AniListCurrentUserWatchList
|
let aniListWatchListLoaded: AniListCurrentUserWatchList
|
||||||
@ -71,6 +70,14 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function ChangeWathcListPage(newPage: number) {
|
||||||
|
GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
|
||||||
|
page = newPage
|
||||||
|
aniListWatchlist.set(result)
|
||||||
|
aniListLoggedIn.set(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Header/>
|
<Header/>
|
||||||
@ -80,6 +87,51 @@
|
|||||||
<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 WatchList</h1>
|
<h1 class="text-left text-xl font-bold mb-4">Your WatchList</h1>
|
||||||
|
|
||||||
|
<div class="mb-8">
|
||||||
|
<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={() => ChangeWathcListPage(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={() => ChangeWathcListPage(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={() => ChangeWathcListPage(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={() => ChangeWathcListPage(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}
|
||||||
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
|
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
|
||||||
@ -111,6 +163,50 @@
|
|||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8">
|
||||||
|
<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={() => ChangeWathcListPage(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={() => ChangeWathcListPage(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={() => ChangeWathcListPage(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={() => ChangeWathcListPage(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}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user