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 StarRatting from '@ernane/svelte-star-rating'
    import {Button, Modal} from "flowbite-svelte";

    import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
    import {onMount} from "svelte";
    import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
    import {writable} from "svelte/store";

    const config = {
        readOnly: false,
        countStars: 5,
        range: {
            min: 0,
            max: 5,
            step: 0.5
        },
        score: 0.0,
        showScore: true,
        scoreFormat: function () {
            return `(${this.score.toFixed(1)}/${this.countStars})`
        },
        name: "",
        starConfig: {
            size: 20,
            fillColor: '#F9ED4F',
            strokeColor: "#e2c714",
            unfilledColor: '#FFF',
            strokeUnfilledColor: '#000'
        }
    }

    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 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}
                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
                        <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)} class="group">
                            <div class="flex flex-col items-center">
                                <img class="rounded-lg" src={media.media.coverImage.large} alt={
                                media.media.title.english === "" ?
                                    media.media.title.romaji :
                                    media.media.title.english
                            }/>
                                {config.score = media.score / 2.0}
                                <StarRatting {config}/>
                                <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}
                            </div>
                        </button>
                    </div>
                {/each}
            </div>
        </div>
    {/if}

    <div class="flex items-center justify-center">
        <button on:click={decrement}
                class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-gray-400 hover:bg-gray-500">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
            </svg>
        </button>
        <input bind:value={count} class="text-2xl font-bold mx-4"/>
        <button on:click={increment}
                class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12M6 12h12"></path>
            </svg>
        </button>
    </div>
    <!--    <div class="relative max-w-sm">-->
    <!--        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">-->
    <!--            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">-->
    <!--                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>-->
    <!--            </svg>-->
    <!--        </div>-->
    <!--        <input-->
    <!--                datepicker-->
    <!--                datepicker-buttons-->
    <!--                datepicker-autoselect-today-->
    <!--                datepicker-autohide-->
    <!--                datepicker-title="Started At"-->
    <!--                id="startedAt"-->
    <!--                type="text"-->
    <!--                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500-->
    <!--                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600-->
    <!--                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
    <!--                placeholder="Select date">-->
    <!--    </div>-->
    <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
        <ChangeDataDialogue/>
    </Modal>
</main>