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

improved loading for change individual anime from search

Browse Source
This commit is contained in:
John O'Keefe 2024-09-09 12:03:46 -04:00
parent 45b11fa8f4
commit 60a38ff569
9 changed files with 123 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/App.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import {
aniListLoggedIn,
aniListAnime,
GetAniListSingleItem,
} from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
@ -13,6 +12,8 @@
import {CheckIfAniListLoggedInAndLoadWatchList} from "./helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
import { CheckIfMALLoggedInAndSetUser } from "./helperModules/CheckIfMyAnimeListLoggedIn.svelte";
import {CheckIfSimklLoggedInAndSetUser} from "./helperModules/CheckIsSimklLoggedIn.svelte"
import {CheckIfAniListLoggedIn} from "../wailsjs/go/main/App";
import {AniListGetSingleAnimeDefaultData} from "./helperDefaults/AniListGetSingleAnime";
onMount(async () => {
await CheckIfAniListLoggedInAndLoadWatchList()
@ -25,10 +26,15 @@
<Router routes={{
'/': Home,
'/anime/:id': wrap({
asyncComponent: () => import('./routes/Anime.svelte'),
asyncComponent: () => import('./routes/AnimeRoutePage.svelte'),
conditions: [
() => $aniListLoggedIn,
async () => await CheckIfAniListLoggedIn(),
async (detail) => {
console.log("reached condition")
aniListAnime.update(value => {
value = AniListGetSingleAnimeDefaultData
return value
})
await GetAniListSingleItem(Number(detail.params.id), true)
return Object.keys($aniListAnime).length!==0
},

19
frontend/src/routes/Anime.svelte → frontend/src/helperComponents/Anime.svelte
View File

@ -7,12 +7,12 @@
simklAnime,
simklLoggedIn,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import {pop} from "svelte-spa-router";
import {push} from "svelte-spa-router";
import {Button} from "flowbite-svelte";
import type {AniListGetSingleAnime} from "../anilist/types/AniListCurrentUserWatchListType";
import Rating from "../helperComponents/Rating.svelte";
import Rating from "./Rating.svelte";
import convertAniListDateToString from "../helperFunctions/convertAniListDateToString";
import AnimeTable from "../helperComponents/AnimeTable.svelte";
import AnimeTable from "./AnimeTable.svelte";
import type {MALAnime, MalListStatus, MALUploadStatus} from "../mal/types/MALTypes";
import type {SimklAnime} from "../simkl/types/simklTypes";
import {writable} from "svelte/store";
@ -64,6 +64,7 @@
if (isAniListLoggedIn) AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.id,
title,
service: "AniList",
progress: currentAniListAnime.data.MediaList.progress,
status: currentAniListAnime.data.MediaList.status,
@ -77,6 +78,7 @@
if (isMalLoggedIn) AddAnimeServiceToTable({
id: currentMalAnime.id,
title: currentMalAnime.title,
service: "MyAnimeList",
progress: currentMalAnime.my_list_status.num_episodes_watched,
status: currentMalAnime.my_list_status.status,
@ -89,6 +91,7 @@
if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) AddAnimeServiceToTable({
id: currentSimklAnime.show.ids.simkl,
title: currentSimklAnime.show.title,
service: "Simkl",
progress: currentSimklAnime.watched_episodes_count,
status: currentSimklAnime.status,
@ -166,6 +169,7 @@
})
AddAnimeServiceToTable({
id: currentAniListAnime.data.MediaList.id,
title,
service: "AniList",
progress: currentAniListAnime.data.MediaList.progress,
status: currentAniListAnime.data.MediaList.status,
@ -200,6 +204,7 @@
})
AddAnimeServiceToTable({
id: currentMalAnime.id,
title: currentMalAnime.title,
service: "MyAnimeList",
progress: currentMalAnime.my_list_status.num_episodes_watched,
status: currentMalAnime.my_list_status.status,
@ -217,6 +222,7 @@
await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then((value: SimklAnime) => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
title: value.show.title,
service: "Simkl",
progress: value.watched_episodes_count,
status: value.status,
@ -237,6 +243,7 @@
await SimklSyncRating(currentSimklAnime, submitData.rating).then(value => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
title: value.show.title,
service: "Simkl",
progress: value.watched_episodes_count,
status: value.status,
@ -257,6 +264,7 @@
await SimklSyncStatus(currentSimklAnime, submitData.status.simkl).then(value => {
AddAnimeServiceToTable({
id: value.show.ids.simkl,
title: value.show.title,
service: "Simkl",
progress: value.watched_episodes_count,
status: value.status,
@ -280,6 +288,7 @@
}
</script>
<form on:submit|preventDefault={handleSubmit} class="container py-10">
<div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
<div class="md:col-span-2 space-y-3">
<img class="rounded-lg" src={currentAniListAnime.data.MediaList.media.coverImage.large}
@ -437,9 +446,9 @@
dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList()
return pop()
return push('/')
}}>
Back
Go Home
</Button>
</div>
</div>

4
frontend/src/helperComponents/AnimeTable.svelte
View File

@ -12,6 +12,10 @@
header: "Service Id",
accessor: 'id',
}),
table.column({
header: "Anime Title",
accessor: "title",
}),
table.column({
header: 'Service',
accessor: 'service',

10
frontend/src/helperComponents/Header.svelte
View File

@ -16,8 +16,7 @@
import type {MyAnimeListUser} from "../mal/types/MALTypes";
import AvatarMenu from "./AvatarMenu.svelte";
import logo from "../assets/images/AniTrackLogo.svg"
import {location, pop} from "svelte-spa-router";
import {CheckIfAniListLoggedInAndLoadWatchList} from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
import {location} from "svelte-spa-router";
let isAniListLoggedIn: boolean
let isSimklLoggedIn: boolean
@ -40,14 +39,7 @@
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
{#if currentLocation === "/"}
<a href="/"><img src={logo} class="h-8" alt="AniTrack Logo"/></a>
{:else}
<button on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList()
return pop()
}}><img src={logo} class="h-8" alt="AniTrack Logo"/></button>
{/if}
</div>
<div class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse">
<div class="min-[950px]:block min-[950px]:mr-4">

65
frontend/src/helperDefaults/AniListGetSingleAnime.ts Normal file
View File

@ -0,0 +1,65 @@
import type {AniListGetSingleAnime} from "../anilist/types/AniListCurrentUserWatchListType";
export const AniListGetSingleAnimeDefaultData: AniListGetSingleAnime = {
data: {
MediaList: {
id: 0,
mediaId: 0,
userId: 0,
media: {
id: 0,
idMal: 0,
title: {
romaji: "",
english: "",
native: "",
},
description: "",
coverImage: {
large: "",
},
season: "",
seasonYear: 0,
status: "",
episodes: 0,
nextAiringEpisode: {
airingAt: 0,
timeUntilAiring: 0,
episode: 0,
}
},
status: "",
startedAt: {
year: 0,
month: 0,
day: 0,
},
completedAt: {
year: 0,
month: 0,
day: 0,
},
notes: "",
progress: 0,
score: 0,
repeat: 0,
user: {
id: 0,
name: "",
avatar: {
large: "",
medium: "",
},
statistics: {
anime: {
count: 0,
statuses: [{
status: "",
count: 0,
}]
}
}
}
}
}
}

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

@ -11,21 +11,24 @@
watchListPage.subscribe(value => page = value)
animePerPage.subscribe(value => perPage = value)
export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
await CheckIfAniListLoggedIn().then(loggedIn => {
if (loggedIn) {
GetAniListLoggedInUser().then(user => {
aniListUser.set(user)
if (isAniListPrimary) {
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => {
aniListWatchlist.set(watchList)
aniListLoggedIn.set(loggedIn)
})
} else {
aniListLoggedIn.set(loggedIn)
}
})
}
export const LoadAniListUser = async () => {
await GetAniListLoggedInUser().then(user => {
aniListUser.set(user)
})
}
export const LoadAniListWatchList = async () => {
await GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => {
aniListWatchlist.set(watchList)
})
}
export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
const loggedIn = await CheckIfAniListLoggedIn()
if (loggedIn) {
await LoadAniListUser()
if (isAniListPrimary) await LoadAniListWatchList()
}
aniListLoggedIn.set(loggedIn)
}
</script>

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

@ -21,8 +21,9 @@
import {type AniListUser, MediaListSort} from "../anilist/types/AniListTypes";
import type {MALAnime, MALWatchlist, MyAnimeListUser} from "../mal/types/MALTypes";
import type {TableItems} from "../helperTypes/TableTypes";
import {AniListGetSingleAnimeDefaultData} from "../helperDefaults/AniListGetSingleAnime";
export let aniListAnime = writable({} as AniListGetSingleAnime)
export let aniListAnime = writable(AniListGetSingleAnimeDefaultData)
export let title = writable("")
export let aniListLoggedIn = writable(false)
export let simklLoggedIn = writable(false)

1
frontend/src/helperTypes/TableTypes.ts
View File

@ -2,6 +2,7 @@ export type TableItems = TableItem[]
export type TableItem = {
id: number
title: string
service: string
progress: number
status: string

9
frontend/src/routes/AnimeRoutePage.svelte Normal file
View File

@ -0,0 +1,9 @@
<script lang="ts">
import Anime from "../helperComponents/Anime.svelte"
export let params: Record<string, string>
</script>
{#key params.id}
<Anime />
{/key}