69 lines
3.3 KiB
Svelte
69 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
aniListLoggedIn,
|
|
aniListWatchlist,
|
|
GetAnimeSingleItem,
|
|
loading,
|
|
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
|
import {push} from "svelte-spa-router";
|
|
import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
|
|
import {Rating} from "flowbite-svelte";
|
|
import loader from '../helperFunctions/loader'
|
|
|
|
|
|
let isAniListLoggedIn: boolean
|
|
let aniListWatchListLoaded: AniListCurrentUserWatchList
|
|
|
|
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
|
|
aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
|
|
|
|
</script>
|
|
|
|
<div>
|
|
{#if isAniListLoggedIn}
|
|
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center">
|
|
<h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
|
|
|
|
<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}
|
|
<div use:loader={loading} class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
|
|
<div class="flex flex-col items-center group">
|
|
<button on:click={() => {
|
|
push(`#/anime/${media.media.id}`)
|
|
// loading.set(true)
|
|
// GetAniListSingleItem(media.media.id, true).then(() => {
|
|
// loading.set(false)
|
|
//
|
|
// })
|
|
}}
|
|
>
|
|
<img class="rounded-lg" src={media.media.coverImage.large} alt={
|
|
media.media.title.english === "" ?
|
|
media.media.title.romaji :
|
|
media.media.title.english
|
|
}/>
|
|
</button>
|
|
<Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
|
|
<button class="mt-4 text-md font-semibold text-white-700"
|
|
on:click={() => GetAnimeSingleItem(media.media.id, true)}>
|
|
{
|
|
media.media.title.english === "" ?
|
|
media.media.title.romaji :
|
|
media.media.title.english
|
|
}
|
|
</button>
|
|
<p class="mt-1 text-lg font-medium text-white-900">{media.progress}
|
|
/ {media.media.nextAiringEpisode.episode !== 0 ?
|
|
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
|
|
{#if media.media.episodes > 0}
|
|
<p class="mt-1 text-lg font-medium text-white-900">Total
|
|
Episodes: {media.media.episodes}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|