From c962a6ac9bc2ebb2a0de206f3839127be63b4610 Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Mon, 19 Aug 2024 12:51:09 -0400 Subject: [PATCH] working towards getting the table to update without closing the modal --- frontend/src/ChangeDataDialogue.svelte | 207 +++++++++++++++---------- 1 file changed, 123 insertions(+), 84 deletions(-) diff --git a/frontend/src/ChangeDataDialogue.svelte b/frontend/src/ChangeDataDialogue.svelte index 0fbae60..1cd365f 100644 --- a/frontend/src/ChangeDataDialogue.svelte +++ b/frontend/src/ChangeDataDialogue.svelte @@ -33,6 +33,7 @@ let submitting = writable(false) let isSubmitting: boolean let currentAniListAnime: AniListGetSingleAnime + let isSubmitSuccess = false aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value) malLoggedIn.subscribe((value) => isMalLoggedIn = value) @@ -62,7 +63,7 @@ startingAnilistStatusOption = statusOptions.filter(option => currentAniListAnime.data.MediaList.status === option.aniList)[0] - let items = [] as { + type TableItems = { id: number service: string progress: number @@ -72,53 +73,68 @@ score: number repeat: number notes: string - }[]; + }[] + + let items = writable([] as TableItems); + + let tableItems: TableItems + items.subscribe(value => tableItems = value) if(isAniListLoggedIn) { - items.push({ - id: currentAniListAnime.data.MediaList.id, - service: "AniList", - progress: currentAniListAnime.data.MediaList.progress, - status: currentAniListAnime.data.MediaList.status, - startedAt: `${currentAniListAnime.data.MediaList.startedAt.month}-${currentAniListAnime.data.MediaList.startedAt.day}-${currentAniListAnime.data.MediaList.startedAt.year}`, - completedAt: `${currentAniListAnime.data.MediaList.completedAt.month}-${currentAniListAnime.data.MediaList.completedAt.day}-${currentAniListAnime.data.MediaList.completedAt.year}`, - score: currentAniListAnime.data.MediaList.score, - repeat: currentAniListAnime.data.MediaList.repeat, - notes: currentAniListAnime.data.MediaList.notes + items.update(item => { + item.push({ + id: currentAniListAnime.data.MediaList.id, + service: "AniList", + progress: currentAniListAnime.data.MediaList.progress, + status: currentAniListAnime.data.MediaList.status, + startedAt: `${currentAniListAnime.data.MediaList.startedAt.month}-${currentAniListAnime.data.MediaList.startedAt.day}-${currentAniListAnime.data.MediaList.startedAt.year}`, + completedAt: `${currentAniListAnime.data.MediaList.completedAt.month}-${currentAniListAnime.data.MediaList.completedAt.day}-${currentAniListAnime.data.MediaList.completedAt.year}`, + score: currentAniListAnime.data.MediaList.score, + repeat: currentAniListAnime.data.MediaList.repeat, + notes: currentAniListAnime.data.MediaList.notes + }) + return item }) } if(isMalLoggedIn) { - items.push({ - id: currentMalAnime.id, - service: "MyAnimeList", - progress: currentMalAnime.my_list_status.num_episodes_watched, - status: currentMalAnime.my_list_status.status, - startedAt: currentMalAnime.my_list_status.start_date, - completedAt: currentMalAnime.my_list_status.finish_date, - score: currentMalAnime.my_list_status.score, - repeat: currentMalAnime.my_list_status.num_times_rewatched, - notes: currentMalAnime.my_list_status.comments + items.update(item => { + item.push({ + id: currentMalAnime.id, + service: "MyAnimeList", + progress: currentMalAnime.my_list_status.num_episodes_watched, + status: currentMalAnime.my_list_status.status, + startedAt: currentMalAnime.my_list_status.start_date, + completedAt: currentMalAnime.my_list_status.finish_date, + score: currentMalAnime.my_list_status.score, + repeat: currentMalAnime.my_list_status.num_times_rewatched, + notes: currentMalAnime.my_list_status.comments + }) + return item }) } if(isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0) { - items.push({ - id: currentSimklAnime.show.ids.simkl, - service: "Simkl", - progress: currentSimklAnime.watched_episodes_count, - status: currentSimklAnime.status, - startedAt: "", - completedAt: "", - score: currentSimklAnime.user_rating, - repeat: 0, - notes: "" + items.update(item => { + item.push({ + id: currentSimklAnime.show.ids.simkl, + service: "Simkl", + progress: currentSimklAnime.watched_episodes_count, + status: currentSimklAnime.status, + startedAt: "", + completedAt: "", + score: currentSimklAnime.user_rating, + repeat: 0, + notes: "" + }) + return item }) } const sortKey = writable('service'); // default sort key const sortDirection = writable(1); // default sort direction (ascending) - const sortItems = writable(items.slice()); // make a copy of the items array + const sortItems = writable(tableItems.slice()); // make a copy of the items array + console.log(tableItems[0]) // Define a function to sort the items const sortTable = (key: any) => { @@ -297,16 +313,19 @@ anime.data.MediaList.completedAt.day = value.data.SaveMediaListEntry.completedAt.day } - for (let item of items) { + for (let [index, item] of tableItems.entries()) { if (item.service === "AniList") { - item.id = anime.data.MediaList.id - item.progress = anime.data.MediaList.progress - item.status = anime.data.MediaList.status - item.startedAt = `${anime.data.MediaList.startedAt.month}-${anime.data.MediaList.startedAt.day}-${anime.data.MediaList.startedAt.year}` - item.completedAt = `${anime.data.MediaList.completedAt.month}-${anime.data.MediaList.completedAt.day}-${anime.data.MediaList.completedAt.year}` - item.score = anime.data.MediaList.score - item.repeat = anime.data.MediaList.repeat - item.notes = anime.data.MediaList.notes + items.update(value => { + value[index].id = anime.data.MediaList.id + value[index].progress = anime.data.MediaList.progress + value[index].status = anime.data.MediaList.status + value[index].startedAt = `${anime.data.MediaList.startedAt.month}-${anime.data.MediaList.startedAt.day}-${anime.data.MediaList.startedAt.year}` + value[index].completedAt = `${anime.data.MediaList.completedAt.month}-${anime.data.MediaList.completedAt.day}-${anime.data.MediaList.completedAt.year}` + value[index].score = anime.data.MediaList.score + value[index].repeat = anime.data.MediaList.repeat + value[index].notes = anime.data.MediaList.notes + return value + }) } } return anime @@ -323,37 +342,77 @@ comments: values.notes } - await MyAnimeListUpdate(currentMalAnime, body).then((value: MyListStatus) => { - currentMalAnime.my_list_status.status = value.status - currentMalAnime.my_list_status.is_rewatching = value.is_rewatching - currentMalAnime.my_list_status.score = value.score - currentMalAnime.my_list_status.num_episodes_watched = value.num_episodes_watched - currentMalAnime.my_list_status.num_times_rewatched = value.num_times_rewatched - currentMalAnime.my_list_status.comments = value.comments - + await MyAnimeListUpdate(currentMalAnime, body).then((malAnimeReturn: MyListStatus) => { + currentMalAnime.my_list_status.status = malAnimeReturn.status + currentMalAnime.my_list_status.is_rewatching = malAnimeReturn.is_rewatching + currentMalAnime.my_list_status.score = malAnimeReturn.score + currentMalAnime.my_list_status.num_episodes_watched = malAnimeReturn.num_episodes_watched + currentMalAnime.my_list_status.num_times_rewatched = malAnimeReturn.num_times_rewatched + currentMalAnime.my_list_status.comments = malAnimeReturn.comments + for (let [index, item] of tableItems.entries()) { + if (item.service === "MyAnimeList") { + items.update(value => { + value[index].id = currentMalAnime.id + value[index].progress = malAnimeReturn.num_episodes_watched + value[index].status = malAnimeReturn.status + value[index].startedAt = malAnimeReturn.start_date + value[index].completedAt = malAnimeReturn.finish_date + value[index].score = malAnimeReturn.score + value[index].repeat = malAnimeReturn.num_times_rewatched + value[index].notes = malAnimeReturn.comments + return value + }) + } + } }) } if (simklLoggedIn) { if (currentSimklAnime.watched_episodes_count !== values.progress) { - await SimklSyncEpisodes(currentSimklAnime, values.progress).then((value) => { - simklAnime.set(value) + await SimklSyncEpisodes(currentSimklAnime, values.progress).then((simklAnimeReturn) => { + simklAnime.set(simklAnimeReturn) + for (let [index, item] of tableItems.entries()) { + if (item.service === "Simkl") { + items.update(value => { + value[index].progress = simklAnimeReturn.watched_episodes_count + return value + }) + } + } }) } if (currentSimklAnime.user_rating !== values.score) { - await SimklSyncRating(currentSimklAnime, values.score).then((value) => { - simklAnime.set(value) + await SimklSyncRating(currentSimklAnime, values.score).then((simklAnimeReturn) => { + simklAnime.set(simklAnimeReturn) + for (let [index, item] of tableItems.entries()) { + if (item.service === "Simkl") { + items.update(value => { + value[index].score = simklAnimeReturn.user_rating + return value + }) + } + } }) } if (currentSimklAnime.status !== values.status.simkl) { - await SimklSyncStatus(currentSimklAnime, values.status.simkl).then((value) => { - simklAnime.set(value) + await SimklSyncStatus(currentSimklAnime, values.status.simkl).then((simklAnimeReturn) => { + simklAnime.set(simklAnimeReturn) + for (let [index, item] of tableItems.entries()) { + if (item.service === "Simkl") { + items.update(value => { + value[index].status = simklAnimeReturn.status + return value + }) + } + } }) } } submitting.set(false) + isSubmitSuccess = true + setTimeout(() => isSubmitSuccess = false, 2000) } @@ -499,7 +558,7 @@ {item.id} {item.service} - {item.progress} + {item.progress} {item.status} {item.startedAt} {item.completedAt} @@ -516,33 +575,13 @@