From b24a8fb5f6c0a2ebd04e19c31fffc87f678602d2 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Sat, 27 Jul 2024 12:59:31 -0400
Subject: [PATCH] added rating

---
 frontend/src/ChangeDataDialogue.svelte | 129 ++++++++++++++++++++++---
 1 file changed, 113 insertions(+), 16 deletions(-)

diff --git a/frontend/src/ChangeDataDialogue.svelte b/frontend/src/ChangeDataDialogue.svelte
index 8805749..d254d21 100644
--- a/frontend/src/ChangeDataDialogue.svelte
+++ b/frontend/src/ChangeDataDialogue.svelte
@@ -1,40 +1,137 @@
 <script lang="ts">
-    import { anime } from "./GetAniListSingleItemAndOpenModal.svelte";
+    import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
     import {Button} from "flowbite-svelte";
+    import StarRatting from "@ernane/svelte-star-rating"
+
+    const ratingInWords = {
+        1: "Apalling",
+        2: "Horrible",
+        3: "Very Bad",
+        4: "Bad",
+        5: "Average",
+        6: "Fine",
+        7: "Good",
+        8: "Very Good",
+        9: "Great",
+        10: "Masterpiece",
+    }
 
     const title = anime.data.MediaList.media.title.english !== "" ?
         anime.data.MediaList.media.title.english :
         anime.data.MediaList.media.title.romaji
+
+    let config = {
+        readOnly: false,
+        countStars: 5,
+        range: {
+            min: 0,
+            max: 5,
+            step: 0.5
+        },
+        score: anime.data.MediaList.score / 2,
+        showScore: false,
+        scoreFormat: function () {
+            return `(${this.score.toFixed(1)}/${this.countStars})`
+        },
+        name: "",
+        starConfig: {
+            size: 32,
+            fillColor: '#F9ED4F',
+            strokeColor: "#e2c714",
+            unfilledColor: '#FFF',
+            strokeUnfilledColor: '#000'
+        }
+    }
+
+    let values = {
+        progress: anime.data.MediaList.progress,
+        status: anime.data.MediaList.status,
+        startedAt: {
+            year: anime.data.MediaList.startedAt.year,
+            month: anime.data.MediaList.startedAt.month,
+            day: anime.data.MediaList.startedAt.day
+        },
+        completedAt: {
+            year: anime.data.MediaList.completedAt.year,
+            month: anime.data.MediaList.completedAt.month,
+            day: anime.data.MediaList.completedAt.day
+        },
+        repeat: anime.data.MediaList.repeat,
+        score: anime.data.MediaList.score,
+        notes: anime.data.MediaList.notes
+    }
+
+    const changeRating = (e) => {
+        config.score = e.target.valueAsNumber
+        values.score = e.target.valueAsNumber * 2
+    }
+
+    let count = 1;
+
+    const decrement = () => {
+        if (count > 0) {
+            count--
+        }
+    }
+
+    const increment = () => {
+        count++
+    }
 </script>
 
 <div>
     <div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4">
-        <div class="row-span-2 col-span-2">
+        <div class="row-span-2 col-span-2 space-y-3">
             <img class="rounded-lg" src={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
+            <StarRatting bind:config on:change={changeRating}/>
+            <p>Rating That Will Be Sent: {config.score * 2}</p>
+            <p>{ratingInWords[config.score * 2]}</p>
         </div>
 
         <div class="col-span-8">
             <form class="flex flex-row">
-                <div>
-                    <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select your
-                        country</label>
-                    <select id="countries"
-                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block 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">
 
-                        <option>United States</option>
-                        <option>Canada</option>
-                        <option>France</option>
-                        <option>Germany</option>
-                    </select>
+                <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>
+
+
+                    <div>
+                        <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select
+                            your
+                            country</label>
+                        <select id="countries"
+                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block 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">
+
+                            <option>United States</option>
+                            <option>Canada</option>
+                            <option>France</option>
+                            <option>Germany</option>
+                        </select>
+                    </div>
             </form>
         </div>
     </div>
     <footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
         <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end">
-            <Button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" on:click={() => alert('Handle "success"')}>Sync Changes</Button>
-            <Button class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Cancel</Button>
+            <Button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+                    on:click={() => alert('Handle "success"')}>Sync Changes
+            </Button>
+            <Button class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
+                Cancel
+            </Button>
         </div>
     </footer>
-</div>
-
+</div>
\ No newline at end of file