john-okeefe/Anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

got search dropdown mostly finished

Browse Source 
From here I just want to polish up the looks and make it cleaner and
bigger
This commit is contained in:
John O'Keefe
2024-07-25 21:11:18 -04:00
parent 5a8b64b610
commit d89121a4de
4 changed files with 46 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/App.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import {GetAniListSingleItemAndOpenModal, anime, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
import {GetAniListSingleItemAndOpenModal, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
import {
AniListSearch,
GetAniListUserWatchingList
@ -11,22 +11,22 @@
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
let aniSearch = ""
let aniListSearch: AniSearchList
let aniListSearchActive = false
// let aniSearch = ""
// let aniListSearch: AniSearchList
// let aniListSearchActive = false
let aniListLoggedIn = false
let aniListWatchlist: AniListCurrentUserWatchList
let page = 1
let perPage = 20
const size = "xl"
function runAniListSearch(): void {
AniListSearch(aniSearch).then(result => {
aniListSearch = result
aniListSearchActive = true
})
}
//
// function runAniListSearch(): void {
// AniListSearch(aniSearch).then(result => {
// aniListSearch = result
// aniListSearchActive = true
// })
// }
function anilistGetUserWatchlist(): void {
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
@ -41,32 +41,7 @@
<Header />
<main>
<div class="input-box" id="aniSearch">
<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}