From 1126e6ae6b3de49f70a44a62da5654748014e10a Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sat, 14 Oct 2017 12:45:22 +0200 Subject: [PATCH] Refactor --- pages/anime/anime.pixy | 2 +- pages/animelist/animelist.scarlet | 2 ++ pages/animelistitem/animelistitem.pixy | 2 +- scripts/Actions.ts | 50 +++++++++++++++----------- scripts/AnimeNotifier.ts | 18 +++++++--- scripts/Application.ts | 4 --- 6 files changed, 46 insertions(+), 32 deletions(-) diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 3efbc5e1..647087c8 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -31,7 +31,7 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]* Icon("pencil") span Edit in collection else - button.action(data-api="/api/animelist/" + user.ID, data-action="arrayAppend", data-trigger="click", data-field="Items", data-object="{\"AnimeID\": \"" + anime.ID + "\"}") + button.action(data-api="/api/animelist/" + user.ID, data-action="addAnimeToCollection", data-trigger="click", data-anime-id=anime.ID) Icon("plus") span Add to collection diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 73104afe..59310476 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -38,6 +38,7 @@ :hover .plus-episode opacity 1 + pointer-events all .anime-list-item-episodes-watched flex 0.4 @@ -48,6 +49,7 @@ display inline-block cursor pointer opacity 0 + pointer-events none margin-left 1px transition opacity transition-speed ease diff --git a/pages/animelistitem/animelistitem.pixy b/pages/animelistitem/animelistitem.pixy index 97659fe7..5313971e 100644 --- a/pages/animelistitem/animelistitem.pixy +++ b/pages/animelistitem/animelistitem.pixy @@ -33,6 +33,6 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn. a.ajax.button(href=anime.Link()) Icon("search-plus") span View anime - button.action(data-action="removeAnimeFromCollection", data-trigger="click", data-api="/api/animelist/" + viewUser.ID, data-field="Items", data-index="AnimeID=\"" + anime.ID + "\"", data-nick=viewUser.Nick) + button.action(data-action="removeAnimeFromCollection", data-trigger="click", data-api="/api/animelist/" + viewUser.ID, data-anime-id=anime.ID, data-nick=viewUser.Nick) Icon("trash") span Remove from collection \ No newline at end of file diff --git a/scripts/Actions.ts b/scripts/Actions.ts index 8c5c4ec7..eb8a8e53 100644 --- a/scripts/Actions.ts +++ b/scripts/Actions.ts @@ -26,12 +26,14 @@ export function toggleSidebar(arn: AnimeNotifier) { // Save new data from an input field export function save(arn: AnimeNotifier, input: HTMLElement) { - arn.loading(true) - - let isContentEditable = input.isContentEditable let obj = {} + let isContentEditable = input.isContentEditable let value = isContentEditable ? input.innerText : (input as HTMLInputElement).value + if(value === undefined) { + return + } + if((input as HTMLInputElement).type === "number" || input.dataset.type === "number") { if(input.getAttribute("step") === "1" || input.dataset.step === "1") { obj[input.dataset.field] = parseInt(value) @@ -50,21 +52,9 @@ export function save(arn: AnimeNotifier, input: HTMLElement) { let apiEndpoint = arn.findAPIEndpoint(input) - fetch(apiEndpoint, { - method: "POST", - body: JSON.stringify(obj), - credentials: "same-origin" - }) - .then(response => response.text()) - .then(body => { - if(body !== "ok") { - throw body - } - }) + arn.post(apiEndpoint, obj) .catch(err => arn.statusMessage.showError(err)) .then(() => { - arn.loading(false) - if(isContentEditable) { input.contentEditable = "true" } else { @@ -82,6 +72,10 @@ export function closeStatusMessage(arn: AnimeNotifier) { // Increase episode export function increaseEpisode(arn: AnimeNotifier, element: HTMLElement) { + if(arn.isLoading) { + return + } + let prev = element.previousSibling as HTMLElement let episodes = parseInt(prev.innerText) prev.innerText = String(episodes + 1) @@ -254,12 +248,26 @@ export function testNotification(arn: AnimeNotifier) { }) } -// Remove anime from collection -export function removeAnimeFromCollection(arn: AnimeNotifier, element: HTMLElement) { - let {field, index, nick} = element.dataset - let apiEndpoint = arn.findAPIEndpoint(element) +// Add anime to collection +export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) { + button.innerText = "Adding..." + + let {animeId} = button.dataset + let apiEndpoint = arn.findAPIEndpoint(button) - arn.post(apiEndpoint + "/field/" + field + "/remove/" + index, "") + arn.post(apiEndpoint + "/add/" + animeId, "") + .then(() => arn.reloadContent()) + .catch(err => arn.statusMessage.showError(err)) +} + +// Remove anime from collection +export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElement) { + button.innerText = "Removing..." + + let {animeId, nick} = button.dataset + let apiEndpoint = arn.findAPIEndpoint(button) + + arn.post(apiEndpoint + "/remove/" + animeId, "") .then(() => arn.app.load("/animelist/" + (arn.app.find("Status") as HTMLSelectElement).value)) .catch(err => arn.statusMessage.showError(err)) } diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 71ee9dcc..538d1b99 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -23,6 +23,7 @@ export class AnimeNotifier { touchController: TouchController sideBar: SideBar mainPageLoaded: boolean + isLoading: boolean lastReloadContentPath: string elementFound: MutationQueue @@ -33,6 +34,7 @@ export class AnimeNotifier { this.app = app this.user = null this.title = "Anime Notifier" + this.isLoading = true this.elementFound = new MutationQueue(elem => elem.classList.add("element-found")) this.elementNotFound = new MutationQueue(elem => elem.classList.add("element-not-found")) @@ -123,9 +125,9 @@ export class AnimeNotifier { // Sidebar control this.sideBar = new SideBar(this.app.find("sidebar")) - - // Let"s start - this.app.run() + + // Loading + this.loading(false) } onContentLoaded() { @@ -446,8 +448,10 @@ export class AnimeNotifier { .then(() => this.loading(false)) // Because our loading element gets reset due to full page diff } - loading(isLoading: boolean) { - if(isLoading) { + loading(newState: boolean) { + this.isLoading = newState + + if(this.isLoading) { document.documentElement.style.cursor = "progress" this.app.loading.classList.remove(this.app.fadeOutClass) } else { @@ -666,6 +670,10 @@ export class AnimeNotifier { } post(url: string, body: any) { + if(this.isLoading) { + return Promise.resolve() + } + if(typeof body !== "string") { body = JSON.stringify(body) } diff --git a/scripts/Application.ts b/scripts/Application.ts index 3c16c134..2b8c395d 100644 --- a/scripts/Application.ts +++ b/scripts/Application.ts @@ -30,10 +30,6 @@ export class Application { }) } - run() { - this.loading.classList.add(this.fadeOutClass) - } - find(id: string): HTMLElement { return document.getElementById(id) }