anitrack/frontend/src/App.svelte

<script lang="ts">
    import {
        aniListLoggedIn,
        anilistModal,
        aniListPrimary,
        aniListUser,
        malUser,
        malLoggedIn,
        aniListWatchlist,
        GetAniListSingleItemAndOpenModal,
        simklLoggedIn,
        simklUser,
        simklWatchList,
        title,
        watchListPage,
        animePerPage,
        malWatchList
    } from "./GlobalVariablesAndHelperFunctions.svelte";
    import {
        CheckIfAniListLoggedIn,
        CheckIfSimklLoggedIn,
        CheckIfMyAnimeListLoggedIn,
        GetAniListLoggedInUser,
        GetAniListUserWatchingList,
        GetSimklLoggedInUser,
        SimklGetUserWatchlist,
        GetMyAnimeListLoggedInUser, GetMyAnimeList,
    } 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";
    import Pagination from "./Pagination.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: number
    let perPage: number
    watchListPage.subscribe(value => page = value)
    animePerPage.subscribe(value => perPage = value)
    const size = "xl"

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

        await CheckIfMyAnimeListLoggedIn().then(loggedIn => {
            if (loggedIn) {
                GetMyAnimeListLoggedInUser().then(user => {
                    malUser.set(user)
                    GetMyAnimeList(1000).then(watchList => {
                        malWatchList.set(watchList)
                        malLoggedIn.set(loggedIn)
                    })
                })
            }
        })

        await CheckIfSimklLoggedIn().then(loggedIn => {
            if (loggedIn) {
                GetSimklLoggedInUser().then(user => {
                    simklUser.set(user)
                    SimklGetUserWatchlist().then(result => {
                        simklWatchList.set(result)
                        simklLoggedIn.set(loggedIn)
                    })
                })
            }
        })
    })
</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>

            <Pagination />

            <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>

            <Pagination />
        </div>
    {/if}

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