From 58fb1e41c27bc1cf44a8f3a77136adf1ecd08680 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Mon, 19 Aug 2024 20:58:10 -0400
Subject: [PATCH] added visual indicators for episode and repeat inputs

---
 frontend/src/ChangeDataDialogue.svelte | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/ChangeDataDialogue.svelte b/frontend/src/ChangeDataDialogue.svelte
index 1cd365f..80919f4 100644
--- a/frontend/src/ChangeDataDialogue.svelte
+++ b/frontend/src/ChangeDataDialogue.svelte
@@ -434,12 +434,15 @@
                             type="number"
                             name="episodes"
                             min="0"
+                            max="{currentAniListAnime.data.MediaList.media.episodes}"
                             id="episodes"
-                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                            focus:border-primary-600 block w-24 p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
-                            dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                            class="bg-gray-50 border {values.progress < 0 || values.progress > currentAniListAnime.data.MediaList.media.episodes ?
+                            'border-red-300 dark:border-red-500 border-[2px] text-rose-500 dark:text-rose-300 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500' :
+                            'border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                            } text-sm rounded-lg block w-24 p-2.5 dark:bg-gray-600 dark:placeholder-gray-400"
                             bind:value={values.progress}
                             required>
+                    <div>of {currentAniListAnime.data.MediaList.media.episodes}</div>
                 </div>
 
 
@@ -476,8 +479,8 @@
                                 type="date"
                                 name="startedAt"
                                 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"
+                            focus:border-blue-500 dark:focus:ring-blue-500 dark: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"
                                 value={startedAtDate}
                                 placeholder="Date Started"
                                 on:change={transformStartedAtDate}
@@ -516,9 +519,10 @@
                             name="repeat"
                             min="0"
                             id="repeat"
-                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
-                            focus:border-primary-600 block w-24 p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
-                            dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                            class="bg-gray-50 border {values.repeat < 0 ?
+                            'border-red-300 dark:border-red-500 border-[2px] text-rose-500 dark:text-rose-300 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500' :
+                            'border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                            } text-sm rounded-lg block w-24 p-2.5 dark:bg-gray-600 dark:placeholder-gray-400 dark:text-white"
                             bind:value={values.repeat}
                             required>
                 </div>