anitrack/frontend/src/App.svelte

<script lang="ts">
    import {
        aniListLoggedIn,
        anilistModal,
        aniListPrimary,
        aniListUser,
        malUser,
        malLoggedIn,
        aniListWatchlist,
        GetAniListSingleItemAndOpenModal,
        simklLoggedIn,
        simklUser,
        simklWatchList,
        title,
    } from "./GlobalVariablesAndHelperFunctions.svelte";
    import {
        CheckIfAniListLoggedIn,
        CheckIfSimklLoggedIn,
        CheckIfMyAnimeListLoggedIn,
        GetAniListLoggedInUser,
        GetAniListUserWatchingList,
        GetSimklLoggedInUser,
        SimklGetUserWatchlist,
        GetMyAnimeListLoggedInUser,
    } from "../wailsjs/go/main/App";
    import {MediaListSort} from "./anilist/types/AniListTypes";
    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
    import Header from "./Header.svelte";
    import {Rating} from "flowbite-svelte";
    import {default as Modal} from "./modal/Modal.svelte"
    import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
    import {onMount} from "svelte";


    let isAniListLoggedIn: boolean
    let isAniListPrimary: boolean
    let aniListWatchListLoaded: AniListCurrentUserWatchList

    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
    aniListPrimary.subscribe((value) => isAniListPrimary = value)
    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)


    let page = 1
    let perPage = 20
    const size = "xl"

    onMount(async () => {
        await CheckIfAniListLoggedIn().then(result => {
            if (result) {
                GetAniListLoggedInUser().then(result => {
                    aniListUser.set(result)
                    if (isAniListPrimary) {
                        GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
                            aniListWatchlist.set(result)
                            aniListLoggedIn.set(true)
                        })
                    } else {
                        aniListLoggedIn.set(result)
                    }
                })
            }
        })

        await CheckIfMyAnimeListLoggedIn().then(result => {
            if (result) {
                GetMyAnimeListLoggedInUser().then(result => {
                    malUser.set(result)
                    malLoggedIn.set(result)
                })
            }
        })

        await CheckIfSimklLoggedIn().then(result => {
            if (result) {
                GetSimklLoggedInUser().then(result => {
                    simklUser.set(result)
                    SimklGetUserWatchlist().then(result => {
                        simklWatchList.set(result)
                        simklLoggedIn.set(result)
                    })
                })
            }
        })
    })

    function ChangeWathcListPage(newPage: number) {
        GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
            page = newPage
            aniListWatchlist.set(result)
            aniListLoggedIn.set(true)
        })
    }
</script>

<Header/>

<main>
    {#if isAniListLoggedIn}
        <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 AniList 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">
                {#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="flex flex-col items-center group">
                            <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
                                <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={() => GetAniListSingleItemAndOpenModal(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 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>
    {/if}

    <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
        <ChangeDataDialogue/>
    </Modal>
</main>