This commit is contained in:
Eduard Urbach 2017-10-14 12:45:22 +02:00
parent db15a0eb72
commit 1126e6ae6b
6 changed files with 46 additions and 32 deletions

View File

@ -31,7 +31,7 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
Icon("pencil") Icon("pencil")
span Edit in collection span Edit in collection
else 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") Icon("plus")
span Add to collection span Add to collection

View File

@ -38,6 +38,7 @@
:hover :hover
.plus-episode .plus-episode
opacity 1 opacity 1
pointer-events all
.anime-list-item-episodes-watched .anime-list-item-episodes-watched
flex 0.4 flex 0.4
@ -48,6 +49,7 @@
display inline-block display inline-block
cursor pointer cursor pointer
opacity 0 opacity 0
pointer-events none
margin-left 1px margin-left 1px
transition opacity transition-speed ease transition opacity transition-speed ease

View File

@ -33,6 +33,6 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
a.ajax.button(href=anime.Link()) a.ajax.button(href=anime.Link())
Icon("search-plus") Icon("search-plus")
span View anime 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") Icon("trash")
span Remove from collection span Remove from collection

View File

@ -26,12 +26,14 @@ export function toggleSidebar(arn: AnimeNotifier) {
// Save new data from an input field // Save new data from an input field
export function save(arn: AnimeNotifier, input: HTMLElement) { export function save(arn: AnimeNotifier, input: HTMLElement) {
arn.loading(true)
let isContentEditable = input.isContentEditable
let obj = {} let obj = {}
let isContentEditable = input.isContentEditable
let value = isContentEditable ? input.innerText : (input as HTMLInputElement).value 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 as HTMLInputElement).type === "number" || input.dataset.type === "number") {
if(input.getAttribute("step") === "1" || input.dataset.step === "1") { if(input.getAttribute("step") === "1" || input.dataset.step === "1") {
obj[input.dataset.field] = parseInt(value) obj[input.dataset.field] = parseInt(value)
@ -50,21 +52,9 @@ export function save(arn: AnimeNotifier, input: HTMLElement) {
let apiEndpoint = arn.findAPIEndpoint(input) let apiEndpoint = arn.findAPIEndpoint(input)
fetch(apiEndpoint, { arn.post(apiEndpoint, obj)
method: "POST",
body: JSON.stringify(obj),
credentials: "same-origin"
})
.then(response => response.text())
.then(body => {
if(body !== "ok") {
throw body
}
})
.catch(err => arn.statusMessage.showError(err)) .catch(err => arn.statusMessage.showError(err))
.then(() => { .then(() => {
arn.loading(false)
if(isContentEditable) { if(isContentEditable) {
input.contentEditable = "true" input.contentEditable = "true"
} else { } else {
@ -82,6 +72,10 @@ export function closeStatusMessage(arn: AnimeNotifier) {
// Increase episode // Increase episode
export function increaseEpisode(arn: AnimeNotifier, element: HTMLElement) { export function increaseEpisode(arn: AnimeNotifier, element: HTMLElement) {
if(arn.isLoading) {
return
}
let prev = element.previousSibling as HTMLElement let prev = element.previousSibling as HTMLElement
let episodes = parseInt(prev.innerText) let episodes = parseInt(prev.innerText)
prev.innerText = String(episodes + 1) prev.innerText = String(episodes + 1)
@ -254,12 +248,26 @@ export function testNotification(arn: AnimeNotifier) {
}) })
} }
// Remove anime from collection // Add anime to collection
export function removeAnimeFromCollection(arn: AnimeNotifier, element: HTMLElement) { export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) {
let {field, index, nick} = element.dataset button.innerText = "Adding..."
let apiEndpoint = arn.findAPIEndpoint(element)
arn.post(apiEndpoint + "/field/" + field + "/remove/" + index, "") let {animeId} = button.dataset
let apiEndpoint = arn.findAPIEndpoint(button)
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)) .then(() => arn.app.load("/animelist/" + (arn.app.find("Status") as HTMLSelectElement).value))
.catch(err => arn.statusMessage.showError(err)) .catch(err => arn.statusMessage.showError(err))
} }

View File

@ -23,6 +23,7 @@ export class AnimeNotifier {
touchController: TouchController touchController: TouchController
sideBar: SideBar sideBar: SideBar
mainPageLoaded: boolean mainPageLoaded: boolean
isLoading: boolean
lastReloadContentPath: string lastReloadContentPath: string
elementFound: MutationQueue elementFound: MutationQueue
@ -33,6 +34,7 @@ export class AnimeNotifier {
this.app = app this.app = app
this.user = null this.user = null
this.title = "Anime Notifier" this.title = "Anime Notifier"
this.isLoading = true
this.elementFound = new MutationQueue(elem => elem.classList.add("element-found")) this.elementFound = new MutationQueue(elem => elem.classList.add("element-found"))
this.elementNotFound = new MutationQueue(elem => elem.classList.add("element-not-found")) this.elementNotFound = new MutationQueue(elem => elem.classList.add("element-not-found"))
@ -124,8 +126,8 @@ export class AnimeNotifier {
// Sidebar control // Sidebar control
this.sideBar = new SideBar(this.app.find("sidebar")) this.sideBar = new SideBar(this.app.find("sidebar"))
// Let"s start // Loading
this.app.run() this.loading(false)
} }
onContentLoaded() { onContentLoaded() {
@ -446,8 +448,10 @@ export class AnimeNotifier {
.then(() => this.loading(false)) // Because our loading element gets reset due to full page diff .then(() => this.loading(false)) // Because our loading element gets reset due to full page diff
} }
loading(isLoading: boolean) { loading(newState: boolean) {
if(isLoading) { this.isLoading = newState
if(this.isLoading) {
document.documentElement.style.cursor = "progress" document.documentElement.style.cursor = "progress"
this.app.loading.classList.remove(this.app.fadeOutClass) this.app.loading.classList.remove(this.app.fadeOutClass)
} else { } else {
@ -666,6 +670,10 @@ export class AnimeNotifier {
} }
post(url: string, body: any) { post(url: string, body: any) {
if(this.isLoading) {
return Promise.resolve()
}
if(typeof body !== "string") { if(typeof body !== "string") {
body = JSON.stringify(body) body = JSON.stringify(body)
} }

View File

@ -30,10 +30,6 @@ export class Application {
}) })
} }
run() {
this.loading.classList.add(this.fadeOutClass)
}
find(id: string): HTMLElement { find(id: string): HTMLElement {
return document.getElementById(id) return document.getElementById(id)
} }