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

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

@ -398,14 +398,18 @@
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 && if (
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0) { currentAniListAnime.data.MediaList.media.episodes === 0 &&
max = currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode - 1 currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0
) {
max =
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
1;
} }
</script> </script>
@ -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
> >
<div class="relative flex items-center max-w-[8rem]">
<button
type="button"
id="decrement-button"
data-input-counter-decrement="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-s-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 2"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 1h16"
/>
</svg>
</button>
<input <input
type="number" type="number"
name="episodes" name="episodes"
min="0" min="0"
max={max} {max}
id="episodes" id="episodes"
class="border {currentAniListAnime.data.MediaList 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
.progress < 0 || {currentAniListAnime.data.MediaList.progress < 0 ||
(currentAniListAnime.data.MediaList.media.episodes > (currentAniListAnime.data.MediaList.media.episodes >
0 && 0 &&
currentAniListAnime.data.MediaList.progress > currentAniListAnime.data.MediaList.progress >
currentAniListAnime.data.MediaList.media currentAniListAnime.data.MediaList.media
.episodes) .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' ? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
: '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" : '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} bind:value={currentAniListAnime.data.MediaList
.progress}
required 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
@ -460,7 +521,8 @@
</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
.episodes}
</div> </div>
{/if} {/if}
</div> </div>