anitrack/frontend/src/App.svelte

<script lang="ts">
    import {
        anilistModal,
        title,
        simklWatchList,
        aniListLoggedIn,
        simklLoggedIn,
        simklUser,
        aniListUser,
        aniListPrimary,
        aniListWatchlist,
        GetAniListSingleItemAndOpenModal,
    } from "./GlobalVariablesAndHelperFunctions.svelte";
    import {
        CheckIfAniListLoggedIn,
        CheckIfSimklLoggedIn,
        GetAniListLoggedInUser,
        GetAniListUserWatchingList,
        GetSimklLoggedInUser,
        SimklGetUserWatchlist,
    } 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 CheckIfSimklLoggedIn().then(result => {
            if (result) {
                GetSimklLoggedInUser().then(result => {
                    simklUser.set(result)
                    SimklGetUserWatchlist().then(result => {
                        simklWatchList.set(result)
                        simklLoggedIn.set(result)
                    })
                })
            }
        })
    })
</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 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 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>
    {/if}

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