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

Compare commits

base: john-okeefe:d89121a4de246b2f9cc6edd56a3ef2463703508e
Branches Tags
john-okeefe:main
john-okeefe:0.1.5
john-okeefe:0.1.4
john-okeefe:0.1.3
john-okeefe:0.1.2
...
compare: john-okeefe:e3cde57f62bb01b40ad59e63eb19e89676008ade
Branches Tags
john-okeefe:main
john-okeefe:0.1.5
john-okeefe:0.1.4
john-okeefe:0.1.3
john-okeefe:0.1.2

6 Commits
d89121a4de ... e3cde57f62

Author SHA1 Message Date
John O'Keefe
e3cde57f62 made modal usable from header and body 2024-07-26 16:50:42 -04:00
John O'Keefe
70558a4128 added rounded corners to images 2024-07-26 16:50:16 -04:00
John O'Keefe
fbc9f766dd added userdialogue to header 2024-07-26 16:49:54 -04:00
John O'Keefe
2932cf1d3b moved flowbite location to ensure it loads 2024-07-26 16:49:32 -04:00
John O'Keefe
183537f7e7 created the user header dialogue 2024-07-26 16:49:04 -04:00
John O'Keefe
33d1d1cfde made search pretty and more usable 2024-07-26 16:48:06 -04:00
6 changed files with 76 additions and 35 deletions
Show Stats Expand all files Collapse all files

2
frontend/index.html
View File

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="./src/main.ts" type="module"></script>
<script src="./node_modules/flowbite/dist/flowbite.js"></script> <script src="./node_modules/flowbite/dist/flowbite.js"></script>
<script src="./src/main.ts" type="module"></script>
</body> </body>
</html> </html>

46
frontend/src/App.svelte
View File

@ -1,10 +1,7 @@
<script lang="ts"> <script lang="ts">
import {GetAniListSingleItemAndOpenModal, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte"; import {anilistModal, GetAniListSingleItemAndOpenModal, title} from "./GetAniListSingleItemAndOpenModal.svelte";
import { import {GetAniListUserWatchingList} from "../wailsjs/go/main/App";
AniListSearch, import {MediaListSort} from "./anilist/types/AniListTypes";
GetAniListUserWatchingList
} from "../wailsjs/go/main/App";
import {type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType" import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
import Header from "./Header.svelte"; import Header from "./Header.svelte";
import {Modal} from "flowbite-svelte"; import {Modal} from "flowbite-svelte";
@ -38,7 +35,7 @@
</script> </script>
<Header /> <Header/>
<main> <main>
@ -54,29 +51,32 @@
<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"> <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} {#each aniListWatchlist.data.Page.mediaList as media}
<button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group"> <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
<!-- <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">--> <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group">
<div class="justify-center rounded-lg bg-gray-200"> <img class="rounded-lg" src={media.media.coverImage.large} alt={
<img src={media.media.coverImage.large} alt="anime cover"/>
</div>
<h3 class="mt-4 text-sm text-white-700">{
media.media.title.english === "" ? media.media.title.english === "" ?
media.media.title.romaji : media.media.title.romaji :
media.media.title.english media.media.title.english
}</h3> }/>
<p class="mt-1 text-lg font-medium text-white-900">{media.progress} <h3 class="mt-4 text-sm text-white-700">{
/ {media.media.nextAiringEpisode.episode !== 0 ? media.media.title.english === "" ?
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p> media.media.title.romaji :
{#if media.media.episodes > 0} media.media.title.english
<p class="mt-1 text-lg font-medium text-white-900">Total }</h3>
Episodes: {media.media.episodes}</p> <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
{/if} / {media.media.nextAiringEpisode.episode !== 0 ?
</button> 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}
</button>
</div>
{/each} {/each}
</div> </div>
</div> </div>
{/if} {/if}
<Modal title={$title} bind:open={$anilistModal} {size} autoclose> <Modal title={$title} bind:open={$anilistModal} {size} autoclose>
<ChangeDataDialogue /> <ChangeDataDialogue/>
</Modal> </Modal>
</main> </main>

2
frontend/src/ChangeDataDialogue.svelte
View File

@ -10,7 +10,7 @@
<div> <div>
<div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4"> <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">
<img src={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image"> <img class="rounded-lg" src={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
</div> </div>
<div class="col-span-8"> <div class="col-span-8">

5
frontend/src/Header.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import logo from "./assets/images/AniTrackLogo.svg" import logo from "./assets/images/AniTrackLogo.svg"
import Search from "./Search.svelte" import Search from "./Search.svelte"
import UserDialogue from "./UserHeaderDialogue.svelte";
</script> </script>
@ -10,11 +11,11 @@
<a href="#" class="flex items-center"> <a href="#" class="flex items-center">
<img src={logo} class="mr-3 h-6 sm:h-9" alt="AniTrack Logo" /> <img src={logo} class="mr-3 h-6 sm:h-9" alt="AniTrack Logo" />
</a> </a>
<div class="flex items-center lg:order-2"> <div class="flex space-x-4 items-center lg:order-2">
<Search /> <Search />
<a href="#" 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">Log in AniList</a> <UserDialogue />
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false"> <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span> <span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>

22
frontend/src/Search.svelte
View File

@ -29,9 +29,11 @@
class="rounded-s-lg block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" class="rounded-s-lg block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
placeholder="Search for Anime" required/> placeholder="Search for Anime" required/>
<button id="aniListSearchButton" data-dropdown-toggle="aniListSearch" <button id="aniListSearchButton" data-dropdown-toggle="aniListSearch"
data-dropdown-offset-distance="0"
data-dropdown-offset-skidding="-50"
data-dropdown-placement="bottom" data-dropdown-placement="bottom"
class="absolute top-0 end-0 h-full p-2.5 text-sm font-medium text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" class="absolute top-0 end-0 h-full p-2.5 text-sm font-medium text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
on:click={runAniListSearch}> on:click={() => {if(aniSearch.length > 0) runAniListSearch()}}>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 20 20"> viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@ -43,21 +45,25 @@
</div> </div>
</div> </div>
<div id="aniListSearch" class="z-10 hidden bg-white rounded-lg shadow w-60 dark:bg-gray-700"> <div id="aniListSearch" class="z-10 hidden bg-white rounded-lg shadow w-80 dark:bg-gray-700">
{#if aniListSearchActive} {#if aniListSearchActive}
<ul class="h-48 py-2 overflow-y-auto text-gray-700 dark:text-gray-200" <ul class="h-56 w-full py-2 overflow-y-auto text-gray-700 dark:text-gray-200"
aria-labelledby="aniListSearchButton"> aria-labelledby="aniListSearchButton">
{#each aniListSearch.data.Page.media as media} {#each aniListSearch.data.Page.media as media}
<li> <li class="w-full">
<button on:click={() => GetAniListSingleItemAndOpenModal(media.id)} <button on:click={() => {
class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> GetAniListSingleItemAndOpenModal(media.id)
<img class="w-6 h-6 me-2 rounded-full" src={media.coverImage.large} }}
class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg">
<img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large}
alt="{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english} Cover"> alt="{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english} Cover">
<h3>{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</h3> <p class="bg-gray-800 text-left w-full h-24 p-2 rounded-tr-lg rounded-br-lg">{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</p>
</button> </button>
</li> </li>
{/each} {/each}
</ul> </ul>
{:else if aniSearch.length === 0}
<div class="m-4">Please enter a search term...</div>
{/if} {/if}
<a href="#" <a href="#"
class="flex items-center p-3 text-sm font-medium text-blue-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-blue-500 hover:underline"> class="flex items-center p-3 text-sm font-medium text-blue-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-blue-500 hover:underline">

34
frontend/src/UserHeaderDialogue.svelte Normal file
View File

@ -0,0 +1,34 @@
<script lang="ts">
let loggedIn = false
</script>
<div id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
{#if loggedIn}
<img class="w-10 h-10 rounded-full cursor-pointer" src="/docs/images/people/profile-picture-5.jpg" alt="User dropdown">
{:else}
<svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
{/if}
</div>
<!-- Dropdown menu -->
<div id="userDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
<div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
<div>Bonnie Green</div>
<div class="font-medium truncate">name@flowbite.com</div>
</div>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="avatarButton">
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
</li>
</ul>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
</div>
</div>