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

improved episode input in Anime Page

Browse Source
This commit is contained in:
John O'Keefe 2024-12-14 13:48:55 -05:00
parent 1fd453f399
commit f24ee9edfd
1 changed files with 89 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/src/helperComponents/Anime.svelte
View File

@ -398,15 +398,19 @@
setTimeout(() => submitSuccess.set(false), 2000); setTimeout(() => submitSuccess.set(false), 2000);
}; };
let max = 999 let max = 999;
if (currentAniListAnime.data.MediaList.media.episodes !== 0) { if (currentAniListAnime.data.MediaList.media.episodes !== 0) {
max = currentAniListAnime.data.MediaList.media.episodes max = currentAniListAnime.data.MediaList.media.episodes;
}
if (
currentAniListAnime.data.MediaList.media.episodes === 0 &&
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0
) {
max =
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
1;
} }
if (currentAniListAnime.data.MediaList.media.episodes === 0 &&
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0) {
max = currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode - 1
}
</script> </script>
<form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10"> <form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
@ -433,24 +437,81 @@
class="text-left block mb-2 text-sm font-medium text-white" class="text-left block mb-2 text-sm font-medium text-white"
>Episode Progress</label >Episode Progress</label
> >
<input <div class="relative flex items-center max-w-[8rem]">
type="number" <button
name="episodes" type="button"
min="0" id="decrement-button"
max={max} data-input-counter-decrement="quantity-input"
id="episodes" on:click={() =>
class="border {currentAniListAnime.data.MediaList (currentAniListAnime.data.MediaList.progress -= 1)}
.progress < 0 || class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
(currentAniListAnime.data.MediaList.media.episodes > >
0 && <svg
currentAniListAnime.data.MediaList.progress > class="w-3 h-3 text-gray-900 dark:text-white"
currentAniListAnime.data.MediaList.media aria-hidden="true"
.episodes) xmlns="http://www.w3.org/2000/svg"
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500' fill="none"
: 'border-gray-500 text-white focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400" viewBox="0 0 18 2"
bind:value={currentAniListAnime.data.MediaList.progress} >
required <path
/> stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 1h16"
/>
</svg>
</button>
<input
type="number"
name="episodes"
min="0"
{max}
id="episodes"
class="border border-x-0 p-2.5 h-11 text-center text-sm block w-full placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
{currentAniListAnime.data.MediaList.progress < 0 ||
(currentAniListAnime.data.MediaList.media.episodes >
0 &&
currentAniListAnime.data.MediaList.progress >
currentAniListAnime.data.MediaList.media
.episodes) ||
(currentAniListAnime.data.MediaList.media
.nextAiringEpisode.episode > 0 &&
currentAniListAnime.data.MediaList.progress >
currentAniListAnime.data.MediaList.media
.nextAiringEpisode.episode -
1)
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
: 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'} w-24"
bind:value={currentAniListAnime.data.MediaList
.progress}
required
/>
<button
type="button"
id="increment-button"
data-input-counter-increment="quantity-input"
on:click={() =>
(currentAniListAnime.data.MediaList.progress += 1)}
class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
>
<svg
class="w-3 h-3 text-gray-900 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"
/>
</svg>
</button>
</div>
<div> <div>
/ {currentAniListAnime.data.MediaList.media / {currentAniListAnime.data.MediaList.media
.nextAiringEpisode.episode !== 0 .nextAiringEpisode.episode !== 0
@ -459,9 +520,10 @@
: currentAniListAnime.data.MediaList.media.episodes} : currentAniListAnime.data.MediaList.media.episodes}
</div> </div>
{#if currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0} {#if currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0}
<div> <div>
of {currentAniListAnime.data.MediaList.media.episodes} of {currentAniListAnime.data.MediaList.media
</div> .episodes}
</div>
{/if} {/if}
</div> </div>