John O'Keefe
b68abfc1c9
Move the refresh button out of the WatchList component header and into its own RefreshWatchListButton.svelte component, placing it at the top of the Home route page with right-alignment. This gives the refresh control better visibility at the page level rather than being buried inside the watchlist header. Replace the removed refresh button in the WatchList header with the new Sort dropdown component, giving users sort controls directly alongside the watchlist title.
91 lines
3.3 KiB
Svelte
91 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";
|
|
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
|
import Sort from "../helperComponents/Sort.svelte";
|
|
|
|
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"
|
|
>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
|
|
<Sort />
|
|
</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"
|
|
>
|
|
{#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 w-[230px] h-[330px] object-cover"
|
|
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>
|