From 2cffd54c4d3fb9f0446950c4bae32ff57faeface Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Wed, 2 Oct 2024 19:26:52 -0400 Subject: [PATCH] made anime Id in table a link to their respective sites --- frontend/src/helperComponents/Anime.svelte | 260 +++++++++--------- .../src/helperComponents/AnimeTable.svelte | 19 +- .../src/helperComponents/WebsiteLink.svelte | 28 ++ frontend/src/helperTypes/TableTypes.ts | 4 +- 4 files changed, 173 insertions(+), 138 deletions(-) create mode 100644 frontend/src/helperComponents/WebsiteLink.svelte diff --git a/frontend/src/helperComponents/Anime.svelte b/frontend/src/helperComponents/Anime.svelte index 92c0ffd..353076b 100644 --- a/frontend/src/helperComponents/Anime.svelte +++ b/frontend/src/helperComponents/Anime.svelte @@ -6,26 +6,26 @@ malLoggedIn, simklAnime, simklLoggedIn, - } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; - import { push } from "svelte-spa-router"; - import { Button } from "flowbite-svelte"; - import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType"; - import Rating from "./Rating.svelte"; - import convertAniListDateToString from "../helperFunctions/convertAniListDateToString"; - import AnimeTable from "./AnimeTable.svelte"; + } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte" + import { push } from "svelte-spa-router" + import { Button } from "flowbite-svelte" + import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType" + import Rating from "./Rating.svelte" + import convertAniListDateToString from "../helperFunctions/convertAniListDateToString" + 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"; + } from "../mal/types/MALTypes" + import type { SimklAnime } from "../simkl/types/simklTypes" + import { writable } from "svelte/store" import type { StatusOption, StatusOptions, - } from "../helperTypes/StatusTypes"; - import type { AniListUpdateVariables } from "../anilist/types/AniListTypes"; - import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList"; + } from "../helperTypes/StatusTypes" + import type { AniListUpdateVariables } from "../anilist/types/AniListTypes" + import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList" import { AniListDeleteEntry, AniListUpdateEntry, @@ -35,32 +35,32 @@ SimklSyncRating, SimklSyncRemove, SimklSyncStatus, - } from "../../wailsjs/go/main/App"; - import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte"; - import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte"; + } from "../../wailsjs/go/main/App" + import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte" + import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte" - let isAniListLoggedIn: boolean; - let isMalLoggedIn: boolean; - let isSimklLoggedIn: boolean; - let currentAniListAnime: AniListGetSingleAnime; - let currentMalAnime: MALAnime; - let currentSimklAnime: SimklAnime; - let submitting = writable(false); - let isSubmitting: boolean; - let submitSuccess = writable(false); + let isAniListLoggedIn: boolean + let isMalLoggedIn: boolean + let isSimklLoggedIn: boolean + let currentAniListAnime: AniListGetSingleAnime + let currentMalAnime: MALAnime + let currentSimklAnime: SimklAnime + let submitting = writable(false) + let isSubmitting: boolean + let submitSuccess = writable(false) - aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value)); - malLoggedIn.subscribe((value) => (isMalLoggedIn = value)); - simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); - aniListAnime.subscribe((value) => (currentAniListAnime = value)); - malAnime.subscribe((value) => (currentMalAnime = value)); - simklAnime.subscribe((value) => (currentSimklAnime = value)); - submitting.subscribe((value) => (isSubmitting = value)); + aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value)) + malLoggedIn.subscribe((value) => (isMalLoggedIn = value)) + simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)) + aniListAnime.subscribe((value) => (currentAniListAnime = value)) + malAnime.subscribe((value) => (currentMalAnime = value)) + simklAnime.subscribe((value) => (currentSimklAnime = value)) + submitting.subscribe((value) => (isSubmitting = value)) const title = currentAniListAnime.data.MediaList.media.title.english !== "" ? currentAniListAnime.data.MediaList.media.title.english - : currentAniListAnime.data.MediaList.media.title.romaji; + : currentAniListAnime.data.MediaList.media.title.romaji const statusOptions: StatusOptions = [ { id: 0, aniList: "CURRENT", mal: "watching", simkl: "watching" }, { @@ -73,21 +73,21 @@ { id: 3, aniList: "DROPPED", mal: "dropped", simkl: "dropped" }, { id: 4, aniList: "PAUSED", mal: "on_hold", simkl: "hold" }, { id: 5, aniList: "REPEATING", mal: "rewatching", simkl: "watching" }, - ]; + ] let startingAnilistStatusOption: StatusOption = statusOptions.filter( (option) => currentAniListAnime.data.MediaList.status === option.aniList, - )[0]; + )[0] const startedAtDate = convertAniListDateToString( currentAniListAnime.data.MediaList.startedAt, - ); + ) const completedAtDate = convertAniListDateToString( currentAniListAnime.data.MediaList.completedAt, - ); + ) if (isAniListLoggedIn) AddAnimeServiceToTable({ - id: currentAniListAnime.data.MediaList.mediaId, + id: `a-${currentAniListAnime.data.MediaList.mediaId}`, title, service: "AniList", progress: currentAniListAnime.data.MediaList.progress, @@ -101,11 +101,11 @@ score: currentAniListAnime.data.MediaList.score, repeat: currentAniListAnime.data.MediaList.repeat, notes: currentAniListAnime.data.MediaList.notes, - }); + }) if (isMalLoggedIn) AddAnimeServiceToTable({ - id: currentMalAnime.id, + id: `m-${currentMalAnime.id}`, title: currentMalAnime.title, service: "MyAnimeList", progress: currentMalAnime.my_list_status.num_episodes_watched, @@ -115,11 +115,11 @@ score: currentMalAnime.my_list_status.score, repeat: currentMalAnime.my_list_status.num_times_rewatched, notes: currentMalAnime.my_list_status.comments, - }); + }) if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) AddAnimeServiceToTable({ - id: currentSimklAnime.show.ids.simkl, + id: `s-${currentSimklAnime.show.ids.simkl}`, title: currentSimklAnime.show.title, service: "Simkl", progress: currentSimklAnime.watched_episodes_count, @@ -129,18 +129,18 @@ score: currentSimklAnime.user_rating, repeat: 0, notes: "", - }); + }) const handleSubmit = async (e: any) => { - submitting.set(true); + submitting.set(true) let submitData: { - rating: number; - episodes: number; - status: StatusOption; - startedAt: string; - completedAt: string; - repeat: number; - notes: string; + rating: number + episodes: number + status: StatusOption + startedAt: string + completedAt: string + repeat: number + notes: string } = { rating: 0, episodes: 0, @@ -154,27 +154,27 @@ completedAt: "", repeat: 0, notes: "", - }; - const formData = new FormData(e.target); + } + const formData = new FormData(e.target) for (let field of formData) { - const [key, value] = field; + const [key, value] = field if (key === "rating") { - submitData.rating = Number(value) * 2; - continue; + submitData.rating = Number(value) * 2 + continue } if (key === "episodes") { - submitData.episodes = Number(value); - continue; + submitData.episodes = Number(value) + continue } if (key === "repeat") { - submitData.repeat = Number(value); - continue; + submitData.repeat = Number(value) + continue } if (key === "status") { - submitData.status = startingAnilistStatusOption; - continue; + submitData.status = startingAnilistStatusOption + continue } - submitData[key] = value; + submitData[key] = value } if ( @@ -190,18 +190,18 @@ notes: submitData.notes, startedAt: convertDateStringToAniList(submitData.startedAt), completedAt: convertDateStringToAniList(submitData.completedAt), - }; + } await AniListUpdateEntry(body).then( (value: AniListGetSingleAnime) => { // in future when you inevitably add tags to typescript, until Anilist fixes the api bug // where tags break the SaveMediaListEntry return, you'll want to use this delete line // delete value.data.MediaList.media.tags aniListAnime.update((newValue) => { - newValue = value; - return newValue; - }); + newValue = value + return newValue + }) AddAnimeServiceToTable({ - id: currentAniListAnime.data.MediaList.mediaId, + id: `a-${currentAniListAnime.data.MediaList.mediaId}`, title, service: "AniList", progress: currentAniListAnime.data.MediaList.progress, @@ -215,9 +215,9 @@ score: currentAniListAnime.data.MediaList.score, repeat: currentAniListAnime.data.MediaList.repeat, notes: currentAniListAnime.data.MediaList.notes, - }); + }) }, - ); + ) } if (malLoggedIn && currentMalAnime.id !== 0) { @@ -228,24 +228,24 @@ num_watched_episodes: submitData.episodes, num_times_rewatched: submitData.repeat, comments: submitData.notes, - }; + } await MyAnimeListUpdate(currentMalAnime, body).then( (malAnimeReturn: MalListStatus) => { malAnime.update((value) => { - value.my_list_status.status = malAnimeReturn.status; + value.my_list_status.status = malAnimeReturn.status value.my_list_status.is_rewatching = - malAnimeReturn.is_rewatching; - value.my_list_status.score = malAnimeReturn.score; + malAnimeReturn.is_rewatching + value.my_list_status.score = malAnimeReturn.score value.my_list_status.num_episodes_watched = - malAnimeReturn.num_episodes_watched; + malAnimeReturn.num_episodes_watched value.my_list_status.num_times_rewatched = - malAnimeReturn.num_times_rewatched; - value.my_list_status.comments = malAnimeReturn.comments; - return value; - }); + malAnimeReturn.num_times_rewatched + value.my_list_status.comments = malAnimeReturn.comments + return value + }) AddAnimeServiceToTable({ - id: currentMalAnime.id, + id: `m-${currentMalAnime.id}`, title: currentMalAnime.title, service: "MyAnimeList", progress: @@ -257,9 +257,9 @@ repeat: currentMalAnime.my_list_status .num_times_rewatched, notes: currentMalAnime.my_list_status.comments, - }); + }) }, - ); + ) } if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) { @@ -271,7 +271,7 @@ submitData.episodes, ).then((value: SimklAnime) => { AddAnimeServiceToTable({ - id: value.show.ids.simkl, + id: `s-${value.show.ids.simkl}`, title: value.show.title, service: "Simkl", progress: value.watched_episodes_count, @@ -281,12 +281,12 @@ score: value.user_rating, repeat: 0, notes: "", - }); + }) simklAnime.update((newValue) => { - newValue = value; - return newValue; - }); - }); + newValue = value + return newValue + }) + }) } if (currentSimklAnime.user_rating !== submitData.rating) { @@ -295,7 +295,7 @@ submitData.rating, ).then((value) => { AddAnimeServiceToTable({ - id: value.show.ids.simkl, + id: `s-${value.show.ids.simkl}`, title: value.show.title, service: "Simkl", progress: value.watched_episodes_count, @@ -305,12 +305,12 @@ score: value.user_rating, repeat: 0, notes: "", - }); + }) simklAnime.update((newValue) => { - newValue = value; - return newValue; - }); - }); + newValue = value + return newValue + }) + }) } if (currentSimklAnime.status !== submitData.status.simkl) { @@ -319,7 +319,7 @@ submitData.status.simkl, ).then((value) => { AddAnimeServiceToTable({ - id: value.show.ids.simkl, + id: `s-${value.show.ids.simkl}`, title: value.show.title, service: "Simkl", progress: value.watched_episodes_count, @@ -329,29 +329,29 @@ score: value.user_rating, repeat: 0, notes: "", - }); + }) simklAnime.update((newValue) => { - newValue = value; - return newValue; - }); - }); + newValue = value + return newValue + }) + }) } } - submitting.set(false); - submitSuccess.set(true); - setTimeout(() => submitSuccess.set(false), 2000); - }; + submitting.set(false) + submitSuccess.set(true) + setTimeout(() => submitSuccess.set(false), 2000) + } const deleteEntries = async () => { - submitting.set(true); + submitting.set(true) if ( isAniListLoggedIn && currentAniListAnime.data.MediaList.mediaId !== 0 ) { - await AniListDeleteEntry(currentAniListAnime.data.MediaList.id); + await AniListDeleteEntry(currentAniListAnime.data.MediaList.id) AddAnimeServiceToTable({ - id: currentAniListAnime.data.MediaList.mediaId, + id: `a-${currentAniListAnime.data.MediaList.mediaId}`, title, service: "AniList", progress: 0, @@ -361,12 +361,12 @@ score: 0, repeat: 0, notes: "", - }); + }) } if (malLoggedIn && currentMalAnime.id !== 0) { - await DeleteMyAnimeListEntry(currentMalAnime.id); + await DeleteMyAnimeListEntry(currentMalAnime.id) AddAnimeServiceToTable({ - id: currentMalAnime.id, + id: `m-${currentMalAnime.id}`, title: currentMalAnime.title, service: "MyAnimeList", progress: 0, @@ -376,12 +376,12 @@ score: 0, repeat: 0, notes: "", - }); + }) } if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) { - await SimklSyncRemove(currentSimklAnime); + await SimklSyncRemove(currentSimklAnime) AddAnimeServiceToTable({ - id: currentSimklAnime.show.ids.simkl, + id: `s-${currentSimklAnime.show.ids.simkl}`, title: currentSimklAnime.show.title, service: "Simkl", progress: 0, @@ -391,15 +391,18 @@ score: 0, repeat: 0, notes: "", - }); + }) } - submitting.set(false); - submitSuccess.set(true); - setTimeout(() => submitSuccess.set(false), 2000); - }; + submitting.set(false) + submitSuccess.set(true) + setTimeout(() => submitSuccess.set(false), 2000) + } -
+ +

+ {title} +

{ - await CheckIfAniListLoggedInAndLoadWatchList(); - return push("/"); + await CheckIfAniListLoggedInAndLoadWatchList() + return push("/") }} > Go Home @@ -674,4 +675,3 @@

{@html currentAniListAnime.data.MediaList.media.description}

- diff --git a/frontend/src/helperComponents/AnimeTable.svelte b/frontend/src/helperComponents/AnimeTable.svelte index 272593c..8aa25b9 100644 --- a/frontend/src/helperComponents/AnimeTable.svelte +++ b/frontend/src/helperComponents/AnimeTable.svelte @@ -1,15 +1,22 @@
diff --git a/frontend/src/helperComponents/WebsiteLink.svelte b/frontend/src/helperComponents/WebsiteLink.svelte new file mode 100644 index 0000000..4d21d50 --- /dev/null +++ b/frontend/src/helperComponents/WebsiteLink.svelte @@ -0,0 +1,28 @@ + + +{#if url.length > 0} + +{:else} + {id} +{/if} diff --git a/frontend/src/helperTypes/TableTypes.ts b/frontend/src/helperTypes/TableTypes.ts index d2d5f35..16f4519 100644 --- a/frontend/src/helperTypes/TableTypes.ts +++ b/frontend/src/helperTypes/TableTypes.ts @@ -1,7 +1,7 @@ export type TableItems = TableItem[] export type TableItem = { - id: number + id: string title: string service: string progress: number @@ -11,4 +11,4 @@ export type TableItem = { score: number repeat: number notes: string -} \ No newline at end of file +}