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

cleaned up grid links and text

Browse Source
This commit is contained in:
John O'Keefe 2024-07-31 19:33:04 -04:00
parent a0b00de615
commit eeb4a62f26
1 changed files with 43 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
frontend/src/App.svelte
View File

@ -5,42 +5,19 @@
CheckIfSimklLoggedIn, CheckIfSimklLoggedIn,
GetAniListLoggedInUser, GetAniListLoggedInUser,
GetAniListUserWatchingList, GetAniListUserWatchingList,
GetSimklLoggedInUser, SimklGetUserWatchlist, GetSimklLoggedInUser,
SimklGetUserWatchlist,
} from "../wailsjs/go/main/App"; } from "../wailsjs/go/main/App";
import {type AniListUser, MediaListSort} from "./anilist/types/AniListTypes"; import {type AniListUser, 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 StarRatting from '@ernane/svelte-star-rating' import {Button, Rating} from "flowbite-svelte";
import {Button, Modal} from "flowbite-svelte"; import {default as Modal} from "./modal/Modal.svelte"
import ChangeDataDialogue from "./ChangeDataDialogue.svelte"; import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
import {onMount} from "svelte"; import {onMount} from "svelte";
import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes"; import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
import {writable} from "svelte/store"; 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 aniListLoggedIn = false
let aniListPrimary = true let aniListPrimary = true
let simklUser: SimklUser let simklUser: SimklUser
@ -99,24 +76,24 @@
}) })
} }
function anilistGetUserWatchlist(): void { // function anilistGetUserWatchlist(): void {
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => { // GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
aniListWatchlist = result // aniListWatchlist = result
aniListLoggedIn = true // aniListLoggedIn = true
}) // })
} // }
//
let count = 1; // let count = 1;
//
const decrement = () => { // const decrement = () => {
if (count > 0) { // if (count > 0) {
count-- // count--
} // }
} // }
//
const increment = () => { // const increment = () => {
count++ // count++
} // }
</script> </script>
@ -137,75 +114,43 @@
{/if} {/if}
{#if aniListLoggedIn} {#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"> <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
<h1>Your Watching List</h1> <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"> <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}
<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 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 group">
<div class="flex flex-col items-center"> <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
<img class="rounded-lg" src={media.media.coverImage.large} alt={ <img class="rounded-lg" src={media.media.coverImage.large} alt={
media.media.title.english === "" ? media.media.title.english === "" ?
media.media.title.romaji : media.media.title.romaji :
media.media.title.english media.media.title.english
}/> }/>
{config.score = media.score / 2.0} </button>
<StarRatting {config}/> <Rating id="anime-rating" total={5} size={35} rating={media.score/2.0} />
<h3 class="mt-4 text-sm text-white-700">{ <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.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} </button>
/ {media.media.nextAiringEpisode.episode !== 0 ? <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p> / {media.media.nextAiringEpisode.episode !== 0 ?
{#if media.media.episodes > 0} media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
<p class="mt-1 text-lg font-medium text-white-900">Total {#if media.media.episodes > 0}
Episodes: {media.media.episodes}</p> <p class="mt-1 text-lg font-medium text-white-900">Total
{/if} Episodes: {media.media.episodes}</p>
</div> {/if}
</button> </div>
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>
{/if} {/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}> <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
<ChangeDataDialogue/> <ChangeDataDialogue/>
</Modal> </Modal>