Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 58c9f449e0 | |||
| f016c90353 | |||
| 6bbe0f0f48 | |||
| d841fee1e7 | |||
| f29d8f378e | |||
| 35e93c0ca9 | |||
| 8c169d549a |
@@ -483,7 +483,10 @@
|
||||
completedAtDate = null;
|
||||
}
|
||||
}}
|
||||
class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
|
||||
disabled={currentAniListAnime.data.MediaList.progress <= 0}
|
||||
class={currentAniListAnime.data.MediaList.progress <= 0
|
||||
? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
|
||||
: "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 text-white"
|
||||
@@ -541,7 +544,27 @@
|
||||
if (startedAtDate === null) startedAtDate = new Date();
|
||||
}
|
||||
}}
|
||||
class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
|
||||
disabled={(currentAniListAnime.data.MediaList.media.episodes >
|
||||
0 &&
|
||||
currentAniListAnime.data.MediaList.progress >=
|
||||
currentAniListAnime.data.MediaList.media.episodes) ||
|
||||
(currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode > 0 &&
|
||||
currentAniListAnime.data.MediaList.progress >
|
||||
currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode -
|
||||
2)}
|
||||
class={(currentAniListAnime.data.MediaList.media.episodes > 0 &&
|
||||
currentAniListAnime.data.MediaList.progress >=
|
||||
currentAniListAnime.data.MediaList.media.episodes) ||
|
||||
(currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode > 0 &&
|
||||
currentAniListAnime.data.MediaList.progress >
|
||||
currentAniListAnime.data.MediaList.media.nextAiringEpisode
|
||||
.episode -
|
||||
2)
|
||||
? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
|
||||
: "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 text-white"
|
||||
|
||||
@@ -1,145 +1,224 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
aniListLoggedIn,
|
||||
aniListWatchlist,
|
||||
animePerPage,
|
||||
watchListPage,
|
||||
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||
import {
|
||||
aniListLoggedIn,
|
||||
aniListWatchlist,
|
||||
animePerPage,
|
||||
watchListPage,
|
||||
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||
|
||||
import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
|
||||
import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
|
||||
import {MediaListSort} from "../anilist/types/AniListTypes";
|
||||
import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
|
||||
import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
|
||||
import { MediaListSort } from "../anilist/types/AniListTypes";
|
||||
|
||||
let aniListWatchListLoaded: AniListCurrentUserWatchList
|
||||
let page: number
|
||||
let perPage: number
|
||||
let aniListWatchListLoaded: AniListCurrentUserWatchList;
|
||||
let page: number;
|
||||
let perPage: number;
|
||||
|
||||
watchListPage.subscribe(value => page = value)
|
||||
animePerPage.subscribe(value => perPage = value)
|
||||
aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
|
||||
watchListPage.subscribe((value) => (page = value));
|
||||
animePerPage.subscribe((value) => (perPage = value));
|
||||
aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
|
||||
|
||||
const perPageOptions = [10, 20, 50]
|
||||
const perPageOptions = [10, 20, 50];
|
||||
|
||||
function ChangeWatchListPage(newPage: number) {
|
||||
GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
|
||||
watchListPage.set(newPage)
|
||||
aniListWatchlist.set(result)
|
||||
aniListLoggedIn.set(true)
|
||||
})
|
||||
}
|
||||
function ChangeWatchListPage(newPage: number) {
|
||||
GetAniListUserWatchingList(
|
||||
newPage,
|
||||
perPage,
|
||||
MediaListSort.UpdatedTimeDesc,
|
||||
).then((result) => {
|
||||
watchListPage.set(newPage);
|
||||
aniListWatchlist.set(result);
|
||||
aniListLoggedIn.set(true);
|
||||
});
|
||||
}
|
||||
|
||||
function changePage(e): void {
|
||||
if ((e.key === "Enter" || e.key === "Tab") && Number(e.target.value) !== page) ChangeWatchListPage(Number(e.target.value))
|
||||
}
|
||||
|
||||
function changeCountPerPage(e): void {
|
||||
GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => {
|
||||
animePerPage.set(Number(e.target.value))
|
||||
watchListPage.set(1)
|
||||
aniListWatchlist.set(result)
|
||||
aniListLoggedIn.set(true)
|
||||
})
|
||||
}
|
||||
function changePage(
|
||||
e: KeyboardEvent & { currentTarget: HTMLInputElement },
|
||||
): void {
|
||||
if (
|
||||
(e.key === "Enter" || e.key === "Tab") &&
|
||||
Number(e.currentTarget.value) !== page
|
||||
)
|
||||
ChangeWatchListPage(Number(e.currentTarget.value));
|
||||
}
|
||||
|
||||
function changeCountPerPage(
|
||||
e: Event & { currentTarget: HTMLSelectElement },
|
||||
): void {
|
||||
GetAniListUserWatchingList(
|
||||
1,
|
||||
Number(e.currentTarget.value),
|
||||
MediaListSort.UpdatedTimeDesc,
|
||||
).then((result) => {
|
||||
animePerPage.set(Number(e.currentTarget.value));
|
||||
watchListPage.set(1);
|
||||
aniListWatchlist.set(result);
|
||||
aniListLoggedIn.set(true);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-8">
|
||||
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
||||
<nav aria-label="Page navigation" class="hidden md:block">
|
||||
<ul class="inline-flex -space-x-px text-base h-10">
|
||||
{#if page === 1}
|
||||
<li>
|
||||
<button disabled
|
||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 cursor-default">
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button on:click={() => ChangeWatchListPage(page-1)}
|
||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
|
||||
{#if i + 1 === page}
|
||||
<li>
|
||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white">{i + 1}</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button on:click={() => ChangeWatchListPage(i+1)}
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">{i + 1}</button>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||
<li>
|
||||
<button disabled
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 cursor-default">
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button on:click={() => ChangeWatchListPage(page+1)}
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</nav>
|
||||
{/if}
|
||||
<div class="flex mt-5">
|
||||
<div class="w-20 mx-auto">
|
||||
<select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage"
|
||||
class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
|
||||
{#each perPageOptions as option}
|
||||
<option value={option}>
|
||||
{option}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
|
||||
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
||||
<div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
|
||||
{:else}
|
||||
<div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs mx-auto">
|
||||
<div class="relative flex items-center max-w-[11rem]">
|
||||
<button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)}
|
||||
class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||
<svg class="w-3 h-3 text-white" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M1 1h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
<input type="number" min="1" max="{aniListWatchListLoaded.data.Page.pageInfo.lastPage}"
|
||||
on:keydown={changePage} id="page-counter"
|
||||
class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-x-0 h-11 font-medium text-center text-sm block w-full pb-6 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
|
||||
value={page} required/>
|
||||
<div class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse">
|
||||
<span>Page #</span>
|
||||
</div>
|
||||
<button type="button" id="increment-button" on:click={() => ChangeWatchListPage(page+1)}
|
||||
class="hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||
<svg class="w-3 h-3 text-white" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 1v16M1 9h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
||||
<nav aria-label="Page navigation" class="hidden md:block">
|
||||
<ul class="inline-flex -space-x-px text-base h-10">
|
||||
{#if page === 1}
|
||||
<li>
|
||||
<button
|
||||
disabled
|
||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 cursor-default"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => ChangeWatchListPage(page - 1)}
|
||||
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
{#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i}
|
||||
{#if i + 1 === page}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => ChangeWatchListPage(i + 1)}
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 border-gray-700 bg-gray-700 text-white"
|
||||
>{i + 1}</button
|
||||
>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => ChangeWatchListPage(i + 1)}
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>{i + 1}</button
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||
<li>
|
||||
<button
|
||||
disabled
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 cursor-default"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => ChangeWatchListPage(page + 1)}
|
||||
class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</nav>
|
||||
{/if}
|
||||
<div class="flex mt-5">
|
||||
<div class="w-20 mx-auto">
|
||||
<select
|
||||
bind:value={perPage}
|
||||
on:change={(e) => changeCountPerPage(e)}
|
||||
id="countPerPage"
|
||||
class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
{#each perPageOptions as option}
|
||||
<option value={option}>
|
||||
{option}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
|
||||
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
|
||||
<div class="md:hidden">
|
||||
Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="max-w-xs mx-auto">
|
||||
<div class="relative flex items-center max-w-[11rem]">
|
||||
<button
|
||||
type="button"
|
||||
id="decrement-button"
|
||||
on:click={() => ChangeWatchListPage(page - 1)}
|
||||
class={page <= 1
|
||||
? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
|
||||
: "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
|
||||
disabled={page <= 1}
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 2"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M1 1h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max={aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||
on:keydown={changePage}
|
||||
id="page-counter"
|
||||
class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-x-0 h-11 font-medium text-center text-sm block w-full pb-6 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
|
||||
value={page}
|
||||
required
|
||||
/>
|
||||
<div
|
||||
class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse"
|
||||
>
|
||||
<span>Page #</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
id="increment-button"
|
||||
on:click={() => ChangeWatchListPage(page + 1)}
|
||||
class={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage
|
||||
? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
|
||||
: "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
|
||||
disabled={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage}
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3 text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 1v16M1 9h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
}}
|
||||
>
|
||||
<img
|
||||
class="rounded-lg"
|
||||
class="rounded-lg w-[230px] h-[330px] object-cover"
|
||||
src={media.media.coverImage.large}
|
||||
alt={media.media.title.english === ""
|
||||
? media.media.title.romaji
|
||||
|
||||
@@ -12,6 +12,6 @@
|
||||
},
|
||||
"info": {
|
||||
"productName": "AniTrack",
|
||||
"productVersion": "0.6.0"
|
||||
"productVersion": "0.6.5"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user