anitrack/frontend/src/App.svelte

<script lang="ts">
    import {
        AniListSearch,
        GetAniListItem,
        GetAniListLoggedInUserId,
        GetAniListUserWatchingList
    } from "../wailsjs/go/main/App";
    import {type AniListItem, type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"

    let aniId = "157371"
    let aniSearch = ""
    let aniListItem: AniListItem
    let aniListSearch: AniSearchList
    let aniListLoggedIn = false
    let aniListWatchlist: AniListCurrentUserWatchList
    let page = 1
    let perPage = 20

    function getAniListitem(): void {
        GetAniListItem(Number(aniId)).then(result => aniListItem = result)
    }

    function runAniListSearch(): void {
        AniListSearch(aniSearch).then(result => aniListSearch = result)
    }

    function anilistGetUserWatchlist(): void {
        GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
            aniListWatchlist = result
            aniListLoggedIn = true
        })
    }
</script>

<main>
    <div class="input-box" id="aniSearch">
        <input autocomplete="off" bind:value={aniSearch} class="input" id="aniSearchInput" type="text"/>
        <button class="btn" on:click={runAniListSearch}>Search AniList</button>
    </div>

    <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}
                    <a href="#" class="group">
                        <!--                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">-->
                        <div class="justify-center rounded-lg bg-gray-200">
                            <img src={media.media.coverImage.large} alt="anime cover"/>
                        </div>
                        <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}
                    </a>
                {/each}
            </div>
        </div>
    {/if}
</main>

<style>

    #logo {
        display: block;
        width: 50%;
        height: 50%;
        margin: auto;
        padding: 10% 0 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-origin: content-box;
    }

    .result {
        height: 20px;
        line-height: 20px;
        margin: 1.5rem auto;
    }

    .input-box .btn {
        /*width: 60px;*/
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        border: none;
        margin: 0 0 0 20px;
        padding: 0 8px;
        cursor: pointer;
    }

    .input-box .btn:hover {
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        color: #333333;
    }

    .input-box .input {
        border: none;
        border-radius: 3px;
        outline: none;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        background-color: rgba(240, 240, 240, 1);
        -webkit-font-smoothing: antialiased;
    }

    .input-box .input:hover {
        border: none;
        background-color: rgba(255, 255, 255, 1);
    }

    .input-box .input:focus {
        border: none;
        background-color: rgba(255, 255, 255, 1);
    }

</style>