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

Compare commits

base: john-okeefe:0.6.0
Branches Tags
john-okeefe:main
john-okeefe:0.7.0 john-okeefe:0.6.5 john-okeefe:0.6.0 john-okeefe:0.5.3 john-okeefe:0.5.2 john-okeefe:0.5.1 john-okeefe:0.5.0 john-okeefe:AniTrack-0.4.0 john-okeefe:0.2.1 john-okeefe:0.2.0 john-okeefe:0.1.9 john-okeefe:0.1.8 john-okeefe:0.1.7 john-okeefe:0.1.6 john-okeefe:0.1.5 john-okeefe:0.1.4 john-okeefe:0.1.3 john-okeefe:0.1.2
..
compare: john-okeefe:a2576b044c7220825e39ce4d7a3defe38b45cb85
Branches Tags
john-okeefe:main
john-okeefe:0.7.0 john-okeefe:0.6.5 john-okeefe:0.6.0 john-okeefe:0.5.3 john-okeefe:0.5.2 john-okeefe:0.5.1 john-okeefe:0.5.0 john-okeefe:AniTrack-0.4.0 john-okeefe:0.2.1 john-okeefe:0.2.0 john-okeefe:0.1.9 john-okeefe:0.1.8 john-okeefe:0.1.7 john-okeefe:0.1.6 john-okeefe:0.1.5 john-okeefe:0.1.4 john-okeefe:0.1.3 john-okeefe:0.1.2

10 Commits
0.6.0 ... a2576b044c

Author SHA1 Message Date
John O'Keefe
a2576b044c feat: implement dynamic sort parameter for AniList watchlist 
Add configurable sort functionality to AniList watchlist system:

- Add aniListSort writable store to GlobalVariablesAndHelperFunctions
- Update Pagination component to subscribe to and use dynamic sort parameter
- Refactor CheckIfAniListLoggedInAndLoadWatchList to use sort from store
- Remove hardcoded MediaListSort.UpdatedTimeDesc in favor of configurable sort
- Improve code formatting with arrow functions and consistent spacing
- Add sort parameter to all GetAniListUserWatchingList calls

This allows users to customize their watchlist sorting preference instead of being limited to the default 'updated time descending' sort order.
 2026-03-29 10:23:58 -04:00
John O'Keefe
2ee2d85e9e feat: add Sort component placeholder 
Add new Sort component to infrastructure for future sort functionality implementation in the watchlist UI.
 2026-03-29 10:23:55 -04:00
John O'Keefe
1090f112f3 refactor: standardize code formatting in AvatarMenu component 
- Convert from 4-space to 2-space indentation for consistency
- Improve import statement formatting and alignment
- Fix semicolon usage throughout the component
- Add conditional avatar dot indicator: green when all services (AniList, MAL, Simkl) are logged in, yellow otherwise
- Add missing newline at end of file
- General code style improvements for better readability and consistency with project standards
 2026-03-22 22:00:48 -04:00
John O'Keefe
58c9f449e0 chore: bump version to 0.6.5 2026-03-22 21:46:05 -04:00
John O'Keefe
f016c90353 chore: bump version to 0.6.5 
Update product version in preparation for release.
 2026-03-22 21:45:57 -04:00
John O'Keefe
6bbe0f0f48 Add disabled state to pagination navigation buttons 
- Disable decrement button when on first page (page <= 1)
- Disable increment button when on last page (page >= lastPage)
- Prevents users from triggering invalid page navigation requests
- Improves UX by providing visual feedback for boundary conditions

This change prevents unnecessary API calls and improves user experience by clearly indicating when navigation bounds have been reached. The buttons will now be disabled at the appropriate boundaries, matching the behavior already present in the numbered page navigation section.
 2026-03-22 21:17:20 -04:00
John O'Keefe
d841fee1e7 Fix TypeScript type safety in Pagination event handlers 
- Add proper type annotations to changePage function parameter using KeyboardEvent with HTMLInputElement currentTarget
- Add proper type annotations to changeCountPerPage function parameter using Event with HTMLSelectElement currentTarget
- Replace all e.target references with e.currentTarget to access properly typed DOM elements
- Add hover state styling to active page button for better UI feedback

This change resolves TypeScript errors where EventTarget type didn't have access to element-specific properties like 'value'. Using currentTarget instead of target provides the correct type since currentTarget refers to the element that has the event listener attached, ensuring type-safe access to input and select element properties.
 2026-03-22 21:09:13 -04:00
John O'Keefe
f29d8f378e Format Pagination component code for consistency 
- Update indentation from 4-space to 2-space convention throughout the component
- Reformat import statements to follow consistent spacing and alignment
- Standardize function and variable declarations with proper spacing
- Improve code readability with consistent formatting across all elements
- Clean up HTML template structure with proper indentation
- Add newline at end of file for standards compliance

This change ensures the Pagination component follows the project's code style conventions and improves maintainability through consistent formatting.
 2026-03-22 20:50:24 -04:00
John O'Keefe
35e93c0ca9 Fix media cover image sizing in WatchList component 
- Add explicit width (230px) and height (330px) to media cover images
- Apply object-cover class to maintain aspect ratio and prevent distortion
- Ensures uniform sizing across all media cover images in the watch list

This change improves visual consistency in the UI by standardizing the display dimensions of anime/manga cover images.
 2026-03-22 20:48:56 -04:00
John O'Keefe
8c169d549a Add disabled state constraints to progress adjustment buttons in Anime component 
- Disable decrement button when progress is at 0 or below to prevent negative values
- Disable increment button when:
  * Media has defined episodes and progress is complete (>= total episodes)
  * Or when progress has reached next airing episode boundary (nextAiringEpisode - 2)
- Improves user experience by preventing invalid progress adjustments
- Maintains data integrity by stopping users from setting impossible progress values
 2026-03-22 20:27:15 -04:00
8 changed files with 445 additions and 322 deletions
Expand all files Collapse all files

27
frontend/src/helperComponents/Anime.svelte
View File

@@ -483,7 +483,10 @@
completedAtDate = null; 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 <svg
class="w-3 h-3 text-white" class="w-3 h-3 text-white"
@@ -541,7 +544,27 @@
if (startedAtDate === null) startedAtDate = new Date(); 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 <svg
class="w-3 h-3 text-white" class="w-3 h-3 text-white"

314
frontend/src/helperComponents/AvatarMenu.svelte
View File

@@ -1,163 +1,177 @@
<script lang="ts"> <script lang="ts">
import { Avatar } from "flowbite-svelte"; import { Avatar } from "flowbite-svelte";
import type { AniListUser } from "../anilist/types/AniListTypes"; import type { AniListUser } from "../anilist/types/AniListTypes";
import { import {
aniListLoggedIn, aniListLoggedIn,
aniListUser, aniListUser,
malUser, malUser,
simklUser, simklUser,
malLoggedIn, malLoggedIn,
simklLoggedIn, simklLoggedIn,
loginToAniList, loginToAniList,
loginToMAL, loginToMAL,
loginToSimkl, loginToSimkl,
logoutOfAniList, logoutOfAniList,
logoutOfMAL, logoutOfMAL,
logoutOfSimkl logoutOfSimkl,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import * as runtime from "../../wailsjs/runtime"; import * as runtime from "../../wailsjs/runtime";
import type {MyAnimeListUser} from "../mal/types/MALTypes"; import type { MyAnimeListUser } from "../mal/types/MALTypes";
import type {SimklUser} from "../simkl/types/simklTypes"; import type { SimklUser } from "../simkl/types/simklTypes";
import { ShowVersion } from "../../wailsjs/go/main/App"; import { ShowVersion } from "../../wailsjs/go/main/App";
let currentAniListUser: AniListUser; let currentAniListUser: AniListUser;
let currentMALUser: MyAnimeListUser; let currentMALUser: MyAnimeListUser;
let currentSimklUser: SimklUser; let currentSimklUser: SimklUser;
let isAniListLoggedIn: boolean; let isAniListLoggedIn: boolean;
let isSimklLoggedIn: boolean; let isSimklLoggedIn: boolean;
let isMALLoggedIn: boolean; let isMALLoggedIn: boolean;
aniListUser.subscribe((value) => (currentAniListUser = value)); aniListUser.subscribe((value) => (currentAniListUser = value));
malUser.subscribe((value) => (currentMALUser = value)) malUser.subscribe((value) => (currentMALUser = value));
simklUser.subscribe(value => currentSimklUser = value) simklUser.subscribe((value) => (currentSimklUser = value));
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value)); aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
malLoggedIn.subscribe((value) => (isMALLoggedIn = value)); malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
function dropdownUser(): void { function dropdownUser(): void {
let dropdown = document.querySelector("#userDropdown"); let dropdown = document.querySelector("#userDropdown");
dropdown.classList.toggle("hidden"); dropdown.classList.toggle("hidden");
if (!dropdown.classList.contains("hidden")) { if (!dropdown.classList.contains("hidden")) {
document.addEventListener("click", clickOutside) document.addEventListener("click", clickOutside);
}
} }
}
function clickOutside(event: Event): void { function clickOutside(event: Event): void {
let dropdown = document.querySelector("#userDropdown") let dropdown = document.querySelector("#userDropdown");
let toggleBtn = document.querySelector("#userDropdownButton") let toggleBtn = document.querySelector("#userDropdownButton");
if (!dropdown.contains(event.target as Node) && !toggleBtn.contains(event.target as Node)) { if (
dropdown.classList.add("hidden") !dropdown.contains(event.target as Node) &&
document.removeEventListener("click", clickOutside) !toggleBtn.contains(event.target as Node)
} ) {
dropdown.classList.add("hidden");
document.removeEventListener("click", clickOutside);
} }
}
</script> </script>
<div class="relative"> <div class="relative">
<button id="userDropdownButton" on:click={dropdownUser}> <button id="userDropdownButton" on:click={dropdownUser}>
{#if isAniListLoggedIn} {#if isAniListLoggedIn}
<Avatar <Avatar
src={currentAniListUser.data.Viewer.avatar.medium} src={currentAniListUser.data.Viewer.avatar.medium}
class="cursor-pointer" class="cursor-pointer"
dot={{ color: "green" }} dot={isAniListLoggedIn && isMALLoggedIn && isSimklLoggedIn
/> ? { color: "green" }
{:else} : { color: "yellow" }}
<Avatar class="cursor-pointer" dot={{ color: "red" }} /> />
{/if} {:else}
</button> <Avatar class="cursor-pointer" dot={{ color: "red" }} />
<div {/if}
id="userDropdown" </button>
class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 divide-y rounded-lg shadow w-44 bg-gray-700 divide-gray-600" <div
> id="userDropdown"
<div class="px-4 py-3 text-sm text-white"> class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 divide-y rounded-lg shadow w-44 bg-gray-700 divide-gray-600"
{#if isAniListLoggedIn} >
<div>{currentAniListUser.data.Viewer.name}</div> <div class="px-4 py-3 text-sm text-white">
{:else} {#if isAniListLoggedIn}
<div>You are not logged into AniList</div> <div>{currentAniListUser.data.Viewer.name}</div>
{/if} {:else}
</div> <div>You are not logged into AniList</div>
<ul {/if}
class="py-2 text-sm text-gray-200"
aria-labelledby="dropdownUserAvatarButton"
>
{#if isAniListLoggedIn}
<li>
<button
on:click={logoutOfAniList}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
>
<span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser.data.Viewer.name}
</button>
</li>
{:else}
<li>
<button on:click={() => {
dropdownUser()
loginToAniList()
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
<span class="maple-font text-lg mr-4">A</span>Login to AniList
</button>
</li>
{/if}
{#if isMALLoggedIn}
<li>
<button
on:click={logoutOfMAL}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
>
<span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
</button>
</li>
{:else}
<li>
<button on:click={() => {
dropdownUser()
loginToMAL()
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
<span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
</button>
</li>
{/if}
{#if isSimklLoggedIn}
<li>
<button
on:click={logoutOfSimkl}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
>
<span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
</button>
</li>
{:else}
<li>
<button on:click={() => {
dropdownUser()
loginToSimkl()
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
<span class="maple-font text-lg mr-4">S</span>Login to Simkl
</button>
</li>
{/if}
</ul>
<div class="py-2">
<button
on:click={() => {
dropdownUser()
ShowVersion()
}}
class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
>
Version
</button>
<button
on:click={() => runtime.Quit()}
class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
>
Exit Application
</button>
</div>
</div> </div>
</div> <ul
class="py-2 text-sm text-gray-200"
aria-labelledby="dropdownUserAvatarButton"
>
{#if isAniListLoggedIn}
<li>
<button
on:click={logoutOfAniList}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
>
<span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser
.data.Viewer.name}
</button>
</li>
{:else}
<li>
<button
on:click={() => {
dropdownUser();
loginToAniList();
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
>
<span class="maple-font text-lg mr-4">A</span>Login to AniList
</button>
</li>
{/if}
{#if isMALLoggedIn}
<li>
<button
on:click={logoutOfMAL}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
>
<span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
</button>
</li>
{:else}
<li>
<button
on:click={() => {
dropdownUser();
loginToMAL();
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
>
<span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
</button>
</li>
{/if}
{#if isSimklLoggedIn}
<li>
<button
on:click={logoutOfSimkl}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
>
<span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser
.user.name}
</button>
</li>
{:else}
<li>
<button
on:click={() => {
dropdownUser();
loginToSimkl();
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
>
<span class="maple-font text-lg mr-4">S</span>Login to Simkl
</button>
</li>
{/if}
</ul>
<div class="py-2">
<button
on:click={() => {
dropdownUser();
ShowVersion();
}}
class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
>
Version
</button>
<button
on:click={() => runtime.Quit()}
class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
>
Exit Application
</button>
</div>
</div>
</div>

341
frontend/src/helperComponents/Pagination.svelte
View File

@@ -1,145 +1,220 @@
<script lang="ts"> <script lang="ts">
import { import {
aniListLoggedIn, aniListLoggedIn,
aniListWatchlist, aniListSort,
animePerPage, aniListWatchlist,
watchListPage, animePerPage,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; watchListPage,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType" import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App"; import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
import {MediaListSort} from "../anilist/types/AniListTypes";
let aniListWatchListLoaded: AniListCurrentUserWatchList let aniListWatchListLoaded: AniListCurrentUserWatchList;
let page: number let page: number;
let perPage: number let perPage: number;
let sort: string;
watchListPage.subscribe(value => page = value) watchListPage.subscribe((value) => (page = value));
animePerPage.subscribe(value => perPage = value) animePerPage.subscribe((value) => (perPage = value));
aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value) aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
aniListSort.subscribe((value) => (sort = value));
const perPageOptions = [10, 20, 50] const perPageOptions = [10, 20, 50];
function ChangeWatchListPage(newPage: number) { function ChangeWatchListPage(newPage: number) {
GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => { GetAniListUserWatchingList(newPage, perPage, sort).then((result) => {
watchListPage.set(newPage) watchListPage.set(newPage);
aniListWatchlist.set(result) aniListWatchlist.set(result);
aniListLoggedIn.set(true) aniListLoggedIn.set(true);
}) });
} }
function changePage(e): void { function changePage(
if ((e.key === "Enter" || e.key === "Tab") && Number(e.target.value) !== page) ChangeWatchListPage(Number(e.target.value)) e: KeyboardEvent & { currentTarget: HTMLInputElement },
} ): void {
if (
function changeCountPerPage(e): void { (e.key === "Enter" || e.key === "Tab") &&
GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => { Number(e.currentTarget.value) !== page
animePerPage.set(Number(e.target.value)) )
watchListPage.set(1) ChangeWatchListPage(Number(e.currentTarget.value));
aniListWatchlist.set(result) }
aniListLoggedIn.set(true)
})
}
function changeCountPerPage(
e: Event & { currentTarget: HTMLSelectElement },
): void {
GetAniListUserWatchingList(1, Number(e.currentTarget.value), sort).then(
(result) => {
animePerPage.set(Number(e.currentTarget.value));
watchListPage.set(1);
aniListWatchlist.set(result);
aniListLoggedIn.set(true);
},
);
}
</script> </script>
<div class="mb-8"> <div class="mb-8">
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12} {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
<nav aria-label="Page navigation" class="hidden md:block"> <nav aria-label="Page navigation" class="hidden md:block">
<ul class="inline-flex -space-x-px text-base h-10"> <ul class="inline-flex -space-x-px text-base h-10">
{#if page === 1} {#if page === 1}
<li> <li>
<button disabled <button
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"> disabled
Previous 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"
</button> >
</li> Previous
{:else} </button>
<li> </li>
<button on:click={() => ChangeWatchListPage(page-1)} {:else}
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"> <li>
Previous <button
</button> on:click={() => ChangeWatchListPage(page - 1)}
</li> 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"
{/if} >
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i} Previous
{#if i + 1 === page} </button>
<li> </li>
<button on:click={() => ChangeWatchListPage(i+1)} {/if}
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> {#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i}
</li> {#if i + 1 === page}
{:else} <li>
<li> <button
<button on:click={() => ChangeWatchListPage(i+1)} 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> 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"
</li> >{i + 1}</button
{/if} >
{/each} </li>
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage} {:else}
<li> <li>
<button disabled <button
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"> on:click={() => ChangeWatchListPage(i + 1)}
Next 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"
</button> >{i + 1}</button
</li> >
{:else} </li>
<li> {/if}
<button on:click={() => ChangeWatchListPage(page+1)} {/each}
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"> {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
Next <li>
</button> <button
</li> disabled
{/if} 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"
</ul> >
</nav> Next
{/if} </button>
<div class="flex mt-5"> </li>
<div class="w-20 mx-auto"> {:else}
<select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage" <li>
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"> <button
{#each perPageOptions as option} on:click={() => ChangeWatchListPage(page + 1)}
<option value={option}> 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"
{option} >
</option> Next
{/each} </button>
</select> </li>
</div> {/if}
</ul>
<div> </nav>
<div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div> {/if}
{#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12} <div class="flex mt-5">
<div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div> <div class="w-20 mx-auto">
{:else} <select
<div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div> bind:value={perPage}
{/if} on:change={(e) => changeCountPerPage(e)}
</div> 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"
<div class="max-w-xs mx-auto"> >
<div class="relative flex items-center max-w-[11rem]"> {#each perPageOptions as option}
<button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)} <option value={option}>
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"> {option}
<svg class="w-3 h-3 text-white" aria-hidden="true" </option>
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2"> {/each}
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" </select>
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>
</div> </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>

0
frontend/src/helperComponents/Sort.svelte Normal file
View File

2
frontend/src/helperComponents/WatchList.svelte
View File

@@ -58,7 +58,7 @@
}} }}
> >
<img <img
class="rounded-lg" class="rounded-lg w-[230px] h-[330px] object-cover"
src={media.media.coverImage.large} src={media.media.coverImage.large}
alt={media.media.title.english === "" alt={media.media.title.english === ""
? media.media.title.romaji ? media.media.title.romaji

71
frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte
View File

@@ -1,34 +1,47 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
import {CheckIfAniListLoggedIn, GetAniListLoggedInUser, GetAniListUserWatchingList} from "../../wailsjs/go/main/App"; import {
import {MediaListSort} from "../anilist/types/AniListTypes"; CheckIfAniListLoggedIn,
import { aniListUser, watchListPage, animePerPage, aniListPrimary, aniListLoggedIn, aniListWatchlist } from "./GlobalVariablesAndHelperFunctions.svelte" GetAniListLoggedInUser,
GetAniListUserWatchingList,
} from "../../wailsjs/go/main/App";
import {
aniListUser,
watchListPage,
animePerPage,
aniListPrimary,
aniListLoggedIn,
aniListWatchlist,
aniListSort,
} from "./GlobalVariablesAndHelperFunctions.svelte";
let isAniListPrimary: boolean let isAniListPrimary: boolean;
let page: number let page: number;
let perPage: number let perPage: number;
let sort: string;
aniListPrimary.subscribe(value => isAniListPrimary = value) aniListPrimary.subscribe((value) => (isAniListPrimary = value));
watchListPage.subscribe(value => page = value) watchListPage.subscribe((value) => (page = value));
animePerPage.subscribe(value => perPage = value) animePerPage.subscribe((value) => (perPage = value));
aniListSort.subscribe((value) => (sort = value));
export const LoadAniListUser = async () => { export const LoadAniListUser = async () => {
await GetAniListLoggedInUser().then(user => { await GetAniListLoggedInUser().then((user) => {
aniListUser.set(user) aniListUser.set(user);
}) });
};
export const LoadAniListWatchList = async () => {
await GetAniListUserWatchingList(page, perPage, sort).then((watchList) => {
aniListWatchlist.set(watchList);
});
};
export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
const loggedIn = await CheckIfAniListLoggedIn();
if (loggedIn) {
await LoadAniListUser();
if (isAniListPrimary) await LoadAniListWatchList();
} }
aniListLoggedIn.set(loggedIn);
export const LoadAniListWatchList = async () => { };
await GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => { </script>
aniListWatchlist.set(watchList)
})
}
export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
const loggedIn = await CheckIfAniListLoggedIn()
if (loggedIn) {
await LoadAniListUser()
if (isAniListPrimary) await LoadAniListWatchList()
}
aniListLoggedIn.set(loggedIn)
}
</script>

10
frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
View File

@@ -53,6 +53,7 @@
export let loading = writable(false); export let loading = writable(false);
export let tableItems = writable([] as TableItems); export let tableItems = writable([] as TableItems);
export let watchlistNeedsRefresh = writable(false); export let watchlistNeedsRefresh = writable(false);
export let aniListSort = writable(MediaListSort.UpdatedTimeDesc);
export let watchListPage = writable(1); export let watchListPage = writable(1);
export let animePerPage = writable(20); export let animePerPage = writable(20);
@@ -60,6 +61,7 @@
let isAniListPrimary: boolean; let isAniListPrimary: boolean;
let page: number; let page: number;
let perPage: number; let perPage: number;
let sort: string;
let aniWatchlist: AniListCurrentUserWatchList; let aniWatchlist: AniListCurrentUserWatchList;
let currentAniListAnime: AniListGetSingleAnime; let currentAniListAnime: AniListGetSingleAnime;
@@ -73,6 +75,7 @@
malLoggedIn.subscribe((value) => (isMalLoggedIn = value)); malLoggedIn.subscribe((value) => (isMalLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
aniListAnime.subscribe((value) => (currentAniListAnime = value)); aniListAnime.subscribe((value) => (currentAniListAnime = value));
aniListSort.subscribe((value) => (sort = value));
export async function GetAnimeSingleItem( export async function GetAnimeSingleItem(
aniId: number, aniId: number,
@@ -136,11 +139,7 @@
GetAniListLoggedInUser().then((result) => { GetAniListLoggedInUser().then((result) => {
aniListUser.set(result); aniListUser.set(result);
if (isAniListPrimary) { if (isAniListPrimary) {
GetAniListUserWatchingList( GetAniListUserWatchingList(page, perPage, sort).then((result) => {
page,
perPage,
MediaListSort.UpdatedTimeDesc,
).then((result) => {
aniListWatchlist.set(result); aniListWatchlist.set(result);
aniListLoggedIn.set(true); aniListLoggedIn.set(true);
}); });
@@ -184,4 +183,3 @@
}); });
} }
</script> </script>

2
wails.json
View File

@@ -12,6 +12,6 @@
}, },
"info": { "info": {
"productName": "AniTrack", "productName": "AniTrack",
"productVersion": "0.6.0" "productVersion": "0.6.5"
} }
} }