From ada48329049467a89b97a505a9571d25a08b5bb3 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Sat, 27 Jul 2024 21:17:30 -0400
Subject: [PATCH] added rating to watchlist queue

---
 frontend/src/App.svelte | 88 +++++++++++++++++++++++++++++++++--------
 1 file changed, 71 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index e92cec7..3abeee1 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -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>