diff --git a/mixins/AnimeGrid.pixy b/mixins/AnimeGrid.pixy index b30ebbaa..e30b7ecf 100644 --- a/mixins/AnimeGrid.pixy +++ b/mixins/AnimeGrid.pixy @@ -1,7 +1,12 @@ component AnimeGrid(animeList []*arn.Anime, user *arn.User) .anime-grid each anime in animeList - a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID)) - img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji) - .anime-grid-title - .anime-grid-title-text= anime.Title.ByUser(user) \ No newline at end of file + .anime-grid-cell + a.ajax(href="/anime/" + toString(anime.ID)) + img.anime-grid-image.lazy(data-src=anime.Image("medium"), data-webp="true", alt=anime.Title.Romaji) + .anime-grid-title + .anime-grid-title-text= anime.Title.ByUser(user) + + if user != nil && !user.AnimeList().Contains(anime.ID) + button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID) + RawIcon("plus") \ No newline at end of file diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index fc71b530..c8cfb041 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -10,13 +10,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [ .anime-image-container.mountable img.anime-cover-image.lazy(data-src=anime.Image("large"), data-webp="true", alt=anime.Title.ByUser(user)) - //- if anime.StartDate != "" - //- .anime-start-date - //- span(title="Start date: " + anime.StartDate)= anime.StartDate[:4] - //- if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4] - //- span - - //- span(title="End date: " + anime.EndDate)= anime.EndDate[:4] - .space .anime-info @@ -25,7 +18,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [ h2.anime-alternative-title.mountable Japanese(anime.Title.Japanese) - //- h3.anime-section-name.anime-summary-header Summary p.anime-summary.mountable= anime.Summary AnimeActions(anime, user) @@ -35,12 +27,6 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [ AnimeTracks(anime, tracks) AnimeEpisodes(episodes) - //- //- h3.anime-section-name Reviews - //- //- p Coming soon. - - //- .footer - //- span Powered by Kitsu. - component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User) AnimeTrailer(anime) AnimeInformation(anime) diff --git a/scripts/Actions/AnimeList.ts b/scripts/Actions/AnimeList.ts index 06530483..1b73fdda 100644 --- a/scripts/Actions/AnimeList.ts +++ b/scripts/Actions/AnimeList.ts @@ -1,15 +1,23 @@ import { AnimeNotifier } from "../AnimeNotifier" // Add anime to collection -export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) { - button.innerText = "Adding..." - +export async function addAnimeToCollection(arn: AnimeNotifier, button: HTMLButtonElement) { + button.disabled = true + let {animeId} = button.dataset let apiEndpoint = arn.findAPIEndpoint(button) - arn.post(apiEndpoint + "/add/" + animeId, "") - .then(() => arn.reloadContent()) - .catch(err => arn.statusMessage.showError(err)) + try { + await arn.post(apiEndpoint + "/add/" + animeId, "") + arn.reloadContent() + + // Show status message + let response = await fetch("/api/anime/" + animeId) + let anime = await response.json() + arn.statusMessage.showInfo(`Added ${anime.title.canonical} to your collection.`) + } catch(err) { + arn.statusMessage.showError(err) + } } // Remove anime from collection diff --git a/styles/anime-grid.scarlet b/styles/anime-grid.scarlet index bbea5896..26b84b2b 100644 --- a/styles/anime-grid.scarlet +++ b/styles/anime-grid.scarlet @@ -7,7 +7,8 @@ shadow-up :hover - .anime-grid-title + .anime-grid-title, + .anime-grid-add-button opacity 1 < 450px @@ -34,4 +35,11 @@ color white text-shadow 0 0 3px black font-size 80% - line-height 1.8em \ No newline at end of file + line-height 1.8em + +.anime-grid-add-button + opacity 0 + position absolute + top 5px + right 5px + padding 0.25rem \ No newline at end of file