213 lines
8.7 KiB
Svelte
213 lines
8.7 KiB
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>
|