anitrack/frontend/src/App.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>