From f24ee9edfdb28402e9829758a5196eeb514da67a Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Sat, 14 Dec 2024 13:48:55 -0500
Subject: [PATCH] improved episode input in Anime Page

---
 frontend/src/helperComponents/Anime.svelte | 116 ++++++++++++++++-----
 1 file changed, 89 insertions(+), 27 deletions(-)

diff --git a/frontend/src/helperComponents/Anime.svelte b/frontend/src/helperComponents/Anime.svelte
index 49b903e..20a0531 100644
--- a/frontend/src/helperComponents/Anime.svelte
+++ b/frontend/src/helperComponents/Anime.svelte
@@ -398,15 +398,19 @@
         setTimeout(() => submitSuccess.set(false), 2000);
     };
 
-    let max = 999
+    let max = 999;
 
     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>
 
 <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"
                         >Episode Progress</label
                     >
-                    <input
-                        type="number"
-                        name="episodes"
-                        min="0"
-                        max={max}
-                        id="episodes"
-                        class="border {currentAniListAnime.data.MediaList
-                            .progress < 0 ||
-                        (currentAniListAnime.data.MediaList.media.episodes >
-                            0 &&
-                            currentAniListAnime.data.MediaList.progress >
-                                currentAniListAnime.data.MediaList.media
-                                    .episodes)
-                            ? '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"
-                        bind:value={currentAniListAnime.data.MediaList.progress}
-                        required
-                    />
+                    <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
+                            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>
                         / {currentAniListAnime.data.MediaList.media
                             .nextAiringEpisode.episode !== 0
@@ -459,9 +520,10 @@
                             : currentAniListAnime.data.MediaList.media.episodes}
                     </div>
                     {#if currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0}
-                    <div>
-                        of {currentAniListAnime.data.MediaList.media.episodes}
-                    </div>
+                        <div>
+                            of {currentAniListAnime.data.MediaList.media
+                                .episodes}
+                        </div>
                     {/if}
                 </div>