Can edit anime list items now

scripts/APIObject.ts

@@ -0,0 +1,31 @@
+// Save new data from an input field
+// export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaElement) {
+	// let apiObject: HTMLElement
+	// let parent = input as HTMLElement
+
+	// while(parent = parent.parentElement) {
+	// 	if(parent.classList.contains("api-object")) {
+	// 		apiObject = parent
+	// 		break
+	// 	}
+	// }
+
+	// if(!apiObject) {
+	// 	throw "API object not found"
+	// }
+
+	// let request = apiObject["api-fetch"]
+
+	// request.then(obj => {
+	// 	obj[input.id] = input.value
+	// 	console.log(obj)
+	// })
+// }
+
+// updateAPIObjects() {
+// 	for(let element of findAll(".api-object")) {
+// 		let apiObject = element
+
+// 		apiObject["api-fetch"] = fetch(element.dataset.api).then(response => response.json())
+// 	}
+// }

scripts/AnimeNotifier.ts

@@ -30,11 +30,8 @@ export class AnimeNotifier {
 			this.app.loading.classList.add(this.app.fadeOutClass)
 		}
 	}
-
-	onContentLoaded() {
-		this.updateMountables()
-		this.updateAvatars()
-
+	
+	updateActions() {
 		for(let element of findAll(".action")) {
 			let actionName = element.dataset.action
 
@@ -46,31 +43,6 @@ export class AnimeNotifier {
 		}
 	}
 
-	onPopState(e: PopStateEvent) {
-		if(e.state) {
-			this.app.load(e.state, {
-				addToHistory: false
-			})
-		} else if(this.app.currentPath !== this.app.originalPath) {
-			this.app.load(this.app.originalPath, {
-				addToHistory: false
-			})
-		}
-	}
-
-	onKeyDown(e: KeyboardEvent) {
-		// Ctrl + Q = Search
-		if(e.ctrlKey && e.keyCode == 81) {
-			let search = this.app.find("search") as HTMLInputElement
-
-			search.focus()
-			search.select()
-
-			e.preventDefault()
-			e.stopPropagation()
-		}
-	}
-
 	updateAvatars() {
 		for(let element of findAll(".user-image")) {
 			let img = element as HTMLImageElement
@@ -108,6 +80,38 @@ export class AnimeNotifier {
 		}
 	}
 
+	onContentLoaded() {
+		// Update each of these asynchronously
+		Promise.resolve().then(() => this.updateMountables())
+		Promise.resolve().then(() => this.updateAvatars())
+		Promise.resolve().then(() => this.updateActions())
+	}
+
+	onPopState(e: PopStateEvent) {
+		if(e.state) {
+			this.app.load(e.state, {
+				addToHistory: false
+			})
+		} else if(this.app.currentPath !== this.app.originalPath) {
+			this.app.load(this.app.originalPath, {
+				addToHistory: false
+			})
+		}
+	}
+
+	onKeyDown(e: KeyboardEvent) {
+		// Ctrl + Q = Search
+		if(e.ctrlKey && e.keyCode == 81) {
+			let search = this.app.find("search") as HTMLInputElement
+
+			search.focus()
+			search.select()
+
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+
 	// onResize(e: UIEvent) {
 	// 	let hasScrollbar = this.app.content.clientHeight === this.app.content.scrollHeight
 

scripts/actions.ts

@@ -2,6 +2,55 @@ import { Application } from "./Application"
 import { AnimeNotifier } from "./AnimeNotifier"
 import { Diff } from "./Diff"
 
+// Save new data from an input field
+export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaElement) {
+	arn.loading(true)
+
+	let obj = {}
+	let value = input.value
+	
+	if(input.type === "number") {
+		obj[input.id] = parseInt(value)
+	} else {
+		obj[input.id] = value
+	}
+
+	// console.log(input.type, input.dataset.api, obj, JSON.stringify(obj))
+
+	let apiObject: HTMLElement
+	let parent = input as HTMLElement
+
+	while(parent = parent.parentElement) {
+		if(parent.dataset.api !== undefined) {
+			apiObject = parent
+			break
+		}
+	}
+
+	if(!apiObject) {
+		throw "API object not found"
+	}
+
+	input.disabled = true
+
+	fetch(apiObject.dataset.api, {
+		method: "POST",
+		body: JSON.stringify(obj),
+		credentials: "same-origin"
+	})
+	.then(response => response.text())
+	.then(body => {
+		if(body !== "ok") {
+			throw body
+		}
+	})
+	.catch(console.error)
+	.then(() => {
+		arn.loading(false)
+		input.disabled = false
+	})
+}
+
 // Search
 export function search(arn: AnimeNotifier, search: HTMLInputElement, e: KeyboardEvent) {
 	if(e.ctrlKey || e.altKey) {