created modal to show single anime status

frontend/src/App.svelte

@@ -1,28 +1,32 @@
 <script lang="ts">
     import {
         AniListSearch,
-        GetAniListItem,
-        GetAniListLoggedInUserId,
         GetAniListUserWatchingList
     } from "../wailsjs/go/main/App";
-    import {type AniListItem, type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
+    import {type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
     import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
+    import Header from "./Header.svelte";
+    import {Button, Modal} from "flowbite-svelte";
+    import type {AniListGetSingleAnime} from "./anilist/types/AniListCurrentUserWatchListType.js";
+    import {GetAniListItem} from "../wailsjs/go/main/App";
+    import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
 
-    let aniId = "157371"
     let aniSearch = ""
-    let aniListItem: AniListItem
     let aniListSearch: AniSearchList
+    let aniListSearchActive = false
     let aniListLoggedIn = false
     let aniListWatchlist: AniListCurrentUserWatchList
     let page = 1
     let perPage = 20
-
-    function getAniListitem(): void {
-        GetAniListItem(Number(aniId)).then(result => aniListItem = result)
-    }
+    let anilistModal = false;
+    let anime: AniListGetSingleAnime
+    let title: string
 
     function runAniListSearch(): void {
-        AniListSearch(aniSearch).then(result => aniListSearch = result)
+        AniListSearch(aniSearch).then(result => {
+            aniListSearch = result
+            aniListSearchActive = true
+        })
     }
 
     function anilistGetUserWatchlist(): void {
@@ -31,14 +35,50 @@
             aniListLoggedIn = true
         })
     }
+
+
+
+    function GetAniListSingleItemAndOpenModal(aniId: number): void {
+        GetAniListItem(aniId).then(result => {
+            anime = result
+            title = anime.data.MediaList.media.title.english === "" ?
+                anime.data.MediaList.media.title.romaji :
+                anime.data.MediaList.media.title.english
+            anilistModal = true
+        })
+    }
 </script>
 
+<Header />
+
 <main>
     <div class="input-box" id="aniSearch">
-        <input autocomplete="off" bind:value={aniSearch} class="input" id="aniSearchInput" type="text"/>
-        <button class="btn" on:click={runAniListSearch}>Search AniList</button>
+        <input autocomplete="off" bind:value={aniSearch} class="input text-black" id="aniSearchInput" type="text"/>
+        <button class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800" on:click={runAniListSearch}>Search AniList</button>
     </div>
 
+    {#if aniListSearchActive}
+        <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 Search Results</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 aniListSearch.data.Page.media as media}
+                    <button on:click={() => GetAniListSingleItemAndOpenModal(media.id)} class="group">
+                        <!--                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">-->
+                        <div class="justify-center rounded-lg bg-gray-200">
+                            <img src={media.coverImage.large} alt="anime cover"/>
+                        </div>
+                        <h3 class="mt-4 text-sm text-white-700">{
+                            media.title.english === "" ?
+                                media.title.romaji :
+                                media.title.english
+                        }</h3>
+                    </button>
+                {/each}
+            </div>
+        </div>
+    {/if}
+
     <button class="btn" on:click={anilistGetUserWatchlist}>Login to AniList</button>
     {#if aniListLoggedIn}
         <div>You are logged in {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
@@ -50,7 +90,7 @@
 
             <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}
-                    <a href="#" class="group">
+                    <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group">
                         <!--                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">-->
                         <div class="justify-center rounded-lg bg-gray-200">
                             <img src={media.media.coverImage.large} alt="anime cover"/>
@@ -67,68 +107,13 @@
                             <p class="mt-1 text-lg font-medium text-white-900">Total
                                 Episodes: {media.media.episodes}</p>
                         {/if}
-                    </a>
+                    </button>
+<!--                    <Button on:click={() => (anilistModal = true)}>Default modal</Button>-->
                 {/each}
             </div>
         </div>
     {/if}
+    <Modal title={title} bind:open={anilistModal} autoclose>
+        <ChangeDataDialogue anime={anime} />
+    </Modal>
 </main>
-
-<style>
-
-    #logo {
-        display: block;
-        width: 50%;
-        height: 50%;
-        margin: auto;
-        padding: 10% 0 0;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        background-origin: content-box;
-    }
-
-    .result {
-        height: 20px;
-        line-height: 20px;
-        margin: 1.5rem auto;
-    }
-
-    .input-box .btn {
-        /*width: 60px;*/
-        height: 30px;
-        line-height: 30px;
-        border-radius: 3px;
-        border: none;
-        margin: 0 0 0 20px;
-        padding: 0 8px;
-        cursor: pointer;
-    }
-
-    .input-box .btn:hover {
-        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-        color: #333333;
-    }
-
-    .input-box .input {
-        border: none;
-        border-radius: 3px;
-        outline: none;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
-        background-color: rgba(240, 240, 240, 1);
-        -webkit-font-smoothing: antialiased;
-    }
-
-    .input-box .input:hover {
-        border: none;
-        background-color: rgba(255, 255, 255, 1);
-    }
-
-    .input-box .input:focus {
-        border: none;
-        background-color: rgba(255, 255, 255, 1);
-    }
-
-</style>

frontend/src/ChangeDataDialogue.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type {AniListGetSingleAnime} from "./anilist/types/AniListCurrentUserWatchListType";
+    import {Button} from "flowbite-svelte";
+
+    export let anime: AniListGetSingleAnime
+</script>
+
+<div>
+    <div>
+
+
+        <form class="max-w-sm mx-auto">
+            <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 w-full 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>
+        </form>
+    </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>
+        </div>
+    </footer>
+</div>
+