anitrack/frontend/src/App.svelte

<script lang="ts">
    import {anilistModal, GetAniListSingleItemAndOpenModal, title} from "./GetAniListSingleItemAndOpenModal.svelte";
    import {
        CheckIfAniListLoggedIn,
        CheckIfSimklLoggedIn,
        GetAniListLoggedInUser,
        GetAniListUserWatchingList,
        GetSimklLoggedInUser,
        SimklGetUserWatchlist,
    } from "../wailsjs/go/main/App";
    import {type AniListUser, MediaListSort} from "./anilist/types/AniListTypes";
    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
    import Header from "./Header.svelte";
    import {Button, Rating} from "flowbite-svelte";
    import {default as Modal} from "./modal/Modal.svelte"
    import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
    import {onMount} from "svelte";
    import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
    import {writable} from "svelte/store";

    let aniListLoggedIn = false
    let aniListPrimary = true
    let simklUser: SimklUser
    let simklLoggedIn = false
    let aniListUser: AniListUser
    let aniListWatchlist: AniListCurrentUserWatchList
    export let simklWatchList = writable({} as SimklWatchList)
    let page = 1
    let perPage = 20
    const size = "xl"

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

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

    function loginToSimkl(): void {
        GetSimklLoggedInUser().then(result => {
            simklUser = result
            simklLoggedIn = true
        })
    }

    function loginToAniList(): void {
        GetAniListLoggedInUser().then(result => {
            aniListUser = result
            aniListLoggedIn = true
            if (aniListPrimary) {
                GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then(result => aniListWatchlist = result)
            }
        })
    }

    // function anilistGetUserWatchlist(): void {
    //     GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
    //         aniListWatchlist = result
    //         aniListLoggedIn = true
    //     })
    // }
    //
    // let count = 1;
    //
    // const decrement = () => {
    //     if (count > 0) {
    //         count--
    //     }
    // }
    //
    // const increment = () => {
    //     count++
    // }


</script>

<Header/>

<main>
    {#if aniListLoggedIn}
        <div>You are logged into AniList, {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
    {:else}
        <button class="btn" on:click={loginToAniList}>Login to AniList</button>
    {/if}

    {#if simklLoggedIn}
        <div>You are logged into Simkl, {simklUser.user.name}</div>
    {:else}
        <Button class="btn" on:click={loginToSimkl}>Login to Simkl</Button>
    {/if}

    {#if aniListLoggedIn}
        <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 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">
                        <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>