john-okeefe/anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added rating to watchlist queue

Browse Source
This commit is contained in:
John O'Keefe 2024-07-27 21:17:30 -04:00
parent b24a8fb5f6
commit ada4832904
1 changed files with 71 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/App.svelte
View File

@ -4,11 +4,33 @@
import {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 {Modal} from "flowbite-svelte";
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
let aniListLoggedIn = false
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 aniListWatchlist: AniListCurrentUserWatchList
let page = 1
let perPage = 20
@ -21,6 +43,18 @@
})
}
let count = 1;
const decrement = () => {
if (count > 0) {
count--
}
}
const increment = () => {
count++
}
</script>
@ -41,31 +75,51 @@
<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)} class="group">
<img class="rounded-lg" src={media.media.coverImage.large} alt={
media.media.title.english === "" ?
media.media.title.romaji :
media.media.title.english
}/>
<h3 class="mt-4 text-sm text-white-700">{
<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
}</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}
}/>
{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}
<Modal title={$title} bind:open={$anilistModal} {size} autoclose>
<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>
<Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
<ChangeDataDialogue/>
</Modal>
</main>