From eeb4a62f26b19403f914c9ad56711cb32a856d99 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Wed, 31 Jul 2024 19:33:04 -0400
Subject: [PATCH] cleaned up grid links and text

---
 frontend/src/App.svelte | 141 ++++++++++++----------------------------
 1 file changed, 43 insertions(+), 98 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index c766ab1..d042240 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -5,42 +5,19 @@
         CheckIfSimklLoggedIn,
         GetAniListLoggedInUser,
         GetAniListUserWatchingList,
-        GetSimklLoggedInUser, SimklGetUserWatchlist,
+        GetSimklLoggedInUser,
+        SimklGetUserWatchlist,
     } from "../wailsjs/go/main/App";
     import {type AniListUser, 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 {Button, Modal} from "flowbite-svelte";
-
+    import {Button, Rating} from "flowbite-svelte";
+    import {default as Modal} from "./modal/Modal.svelte"
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
     import {onMount} from "svelte";
     import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
     import {writable} from "svelte/store";
 
-    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 aniListPrimary = true
     let simklUser: SimklUser
@@ -99,24 +76,24 @@
         })
     }
 
-    function anilistGetUserWatchlist(): void {
-        GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
-            aniListWatchlist = result
-            aniListLoggedIn = true
-        })
-    }
-
-    let count = 1;
-
-    const decrement = () => {
-        if (count > 0) {
-            count--
-        }
-    }
-
-    const increment = () => {
-        count++
-    }
+    // function anilistGetUserWatchlist(): void {
+    //     GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+    //         aniListWatchlist = result
+    //         aniListLoggedIn = true
+    //     })
+    // }
+    //
+    // let count = 1;
+    //
+    // const decrement = () => {
+    //     if (count > 0) {
+    //         count--
+    //     }
+    // }
+    //
+    // const increment = () => {
+    //     count++
+    // }
 
 
 </script>
@@ -137,75 +114,43 @@
     {/if}
 
     {#if aniListLoggedIn}
-        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
-            <h1>Your Watching List</h1>
+        <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
+            <h1 class="text-left text-xl font-bold mb-4">Your Watching List</h1>
 
             <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, true)} class="group">
-                            <div class="flex flex-col items-center">
+                        <div class="flex flex-col items-center group">
+                            <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
                                 <img class="rounded-lg" src={media.media.coverImage.large} alt={
                                 media.media.title.english === "" ?
                                     media.media.title.romaji :
                                     media.media.title.english
                             }/>
-                                {config.score = media.score / 2.0}
-                                <StarRatting {config}/>
-                                <h3 class="mt-4 text-sm text-white-700">{
+                            </button>
+                            <Rating id="anime-rating" total={5} size={35} rating={media.score/2.0} />
+                            <button class="mt-4 text-md font-semibold text-white-700"
+                                    on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
+                                {
                                     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>
+                                    media.media.title.romaji :
+                                    media.media.title.english
+                                }
+                            </button>
+                            <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>
                     </div>
                 {/each}
             </div>
         </div>
     {/if}
 
-    <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 class="relative max-w-sm">-->
-    <!--        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">-->
-    <!--            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">-->
-    <!--                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>-->
-    <!--            </svg>-->
-    <!--        </div>-->
-    <!--        <input-->
-    <!--                datepicker-->
-    <!--                datepicker-buttons-->
-    <!--                datepicker-autoselect-today-->
-    <!--                datepicker-autohide-->
-    <!--                datepicker-title="Started At"-->
-    <!--                id="startedAt"-->
-    <!--                type="text"-->
-    <!--                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"-->
-    <!--                placeholder="Select date">-->
-    <!--    </div>-->
     <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
         <ChangeDataDialogue/>
     </Modal>