72 lines
3.0 KiB
Svelte
72 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import {anilistModal, GetAniListSingleItemAndOpenModal, title} from "./GetAniListSingleItemAndOpenModal.svelte";
|
|
import {GetAniListUserWatchingList} from "../wailsjs/go/main/App";
|
|
import {MediaListSort} from "./anilist/types/AniListTypes";
|
|
import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
|
|
import Header from "./Header.svelte";
|
|
import {Modal} from "flowbite-svelte";
|
|
|
|
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
|
|
|
|
let aniListLoggedIn = false
|
|
let aniListWatchlist: AniListCurrentUserWatchList
|
|
let page = 1
|
|
let perPage = 20
|
|
const size = "xl"
|
|
|
|
function anilistGetUserWatchlist(): void {
|
|
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
|
|
aniListWatchlist = result
|
|
aniListLoggedIn = true
|
|
})
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<Header/>
|
|
|
|
<main>
|
|
|
|
|
|
<button class="btn" on:click={anilistGetUserWatchlist}>Login to AniList</button>
|
|
{#if aniListLoggedIn}
|
|
<div>You are logged in {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
|
|
{/if}
|
|
|
|
{#if aniListLoggedIn}
|
|
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
|
|
<h1>Your Watching List</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 aniListWatchlist.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">
|
|
<button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group">
|
|
<img class="rounded-lg" src={media.media.coverImage.large} alt={
|
|
media.media.title.english === "" ?
|
|
media.media.title.romaji :
|
|
media.media.title.english
|
|
}/>
|
|
<h3 class="mt-4 text-sm text-white-700">{
|
|
media.media.title.english === "" ?
|
|
media.media.title.romaji :
|
|
media.media.title.english
|
|
}</h3>
|
|
<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}
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<Modal title={$title} bind:open={$anilistModal} {size} autoclose>
|
|
<ChangeDataDialogue/>
|
|
</Modal>
|
|
</main>
|