anitrack/frontend/src/App.svelte

146 lines
5.6 KiB
Svelte
Raw Normal View History

2024-07-09 10:16:53 -04:00
<script lang="ts">
import {
aniListLoggedIn,
2024-08-11 21:13:22 -04:00
anilistModal,
aniListPrimary,
2024-08-11 21:13:22 -04:00
aniListUser,
2024-08-13 18:54:27 -04:00
malUser,
malLoggedIn,
aniListWatchlist,
GetAniListSingleItemAndOpenModal,
2024-08-11 21:13:22 -04:00
simklLoggedIn,
simklUser,
simklWatchList,
title,
2024-08-13 19:36:39 -04:00
watchListPage,
animePerPage,
2024-08-15 21:27:31 -04:00
malWatchList
} from "./GlobalVariablesAndHelperFunctions.svelte";
import {
CheckIfAniListLoggedIn,
CheckIfSimklLoggedIn,
2024-08-13 18:54:27 -04:00
CheckIfMyAnimeListLoggedIn,
GetAniListLoggedInUser,
GetAniListUserWatchingList,
2024-07-31 19:33:04 -04:00
GetSimklLoggedInUser,
SimklGetUserWatchlist,
2024-08-15 21:27:31 -04:00
GetMyAnimeListLoggedInUser, GetMyAnimeList,
} from "../wailsjs/go/main/App";
2024-08-11 20:42:57 -04:00
import {MediaListSort} from "./anilist/types/AniListTypes";
import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
import Header from "./Header.svelte";
2024-08-11 20:42:57 -04:00
import {Rating} from "flowbite-svelte";
2024-07-31 19:33:04 -04:00
import {default as Modal} from "./modal/Modal.svelte"
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
import {onMount} from "svelte";
2024-08-15 20:06:49 -04:00
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)
2024-08-13 19:36:39 -04:00
let page: number
let perPage: number
watchListPage.subscribe(value => page = value)
animePerPage.subscribe(value => perPage = value)
const size = "xl"
onMount(async () => {
2024-08-15 21:27:31 -04:00
await CheckIfAniListLoggedIn().then(loggedIn => {
if (loggedIn) {
GetAniListLoggedInUser().then(user => {
aniListUser.set(user)
if (isAniListPrimary) {
2024-08-15 21:27:31 -04:00
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => {
aniListWatchlist.set(watchList)
aniListLoggedIn.set(loggedIn)
})
} else {
2024-08-15 21:27:31 -04:00
aniListLoggedIn.set(loggedIn)
}
})
}
})
2024-08-15 21:27:31 -04:00
await CheckIfMyAnimeListLoggedIn().then(loggedIn => {
if (loggedIn) {
GetMyAnimeListLoggedInUser().then(user => {
malUser.set(user)
GetMyAnimeList(1000).then(watchList => {
malWatchList.set(watchList)
malLoggedIn.set(loggedIn)
})
2024-08-13 18:54:27 -04:00
})
}
})
2024-08-15 21:27:31 -04:00
await CheckIfSimklLoggedIn().then(loggedIn => {
if (loggedIn) {
GetSimklLoggedInUser().then(user => {
simklUser.set(user)
SimklGetUserWatchlist().then(result => {
simklWatchList.set(result)
2024-08-15 21:27:31 -04:00
simklLoggedIn.set(loggedIn)
})
})
}
})
})
2024-07-09 10:16:53 -04:00
</script>
2024-07-26 16:50:42 -04:00
<Header/>
2024-07-09 10:16:53 -04:00
<main>
{#if isAniListLoggedIn}
2024-07-31 19:33:04 -04:00
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
2024-08-13 18:54:27 -04:00
<h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
2024-08-15 20:06:49 -04:00
<Pagination />
2024-08-11 21:13:22 -04:00
<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}
2024-07-26 16:50:42 -04:00
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
2024-07-31 19:33:04 -04:00
<div class="flex flex-col items-center group">
<button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
2024-07-27 21:17:30 -04:00
<img class="rounded-lg" src={media.media.coverImage.large} alt={
2024-07-26 16:50:42 -04:00
media.media.title.english === "" ?
media.media.title.romaji :
media.media.title.english
2024-07-27 21:17:30 -04:00
}/>
2024-07-31 19:33:04 -04:00
</button>
2024-08-11 21:13:22 -04:00
<Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
2024-07-31 19:33:04 -04:00
<button class="mt-4 text-md font-semibold text-white-700"
on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
{
2024-07-27 21:17:30 -04:00
media.media.title.english === "" ?
2024-08-11 21:13:22 -04:00
media.media.title.romaji :
media.media.title.english
2024-07-31 19:33:04 -04:00
}
</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>
2024-07-26 16:50:42 -04:00
</div>
{/each}
</div>
2024-08-11 21:13:22 -04:00
2024-08-15 20:06:49 -04:00
<Pagination />
</div>
{/if}
2024-07-27 21:17:30 -04:00
<Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
2024-07-26 16:50:42 -04:00
<ChangeDataDialogue/>
</Modal>
2024-07-09 10:16:53 -04:00
</main>