Inline editing

mixins/Input.pixy

@@ -1,19 +1,19 @@
 component InputText(id string, value string, label string, placeholder string)
 	.widget-input
 		label(for=id)= label + ":"
-		input.widget-element.action(id=id, type="text", value=value, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
+		input.widget-element.action(id=id, data-field=id, type="text", value=value, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
 
 component InputTextArea(id string, value string, label string, placeholder string)
 	.widget-input
 		label(for=id)= label + ":"
-		textarea.widget-element.action(id=id, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")= value
+		textarea.widget-element.action(id=id, data-field=id, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")= value
 
 component InputNumber(id string, value float64, label string, placeholder string, min string, max string, step string)
 	.widget-input
 		label(for=id)= label + ":"
-		input.widget-element.action(id=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
+		input.widget-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
 
 component InputSelection(id string, value string, label string, placeholder string, values []string)
 	.widget-input
 		label(for=id)= label + ":"
-		select.widget-element.action(id=id, value=value, title=placeholder, data-action="save", data-trigger="change")
+		select.widget-element.action(id=id, data-field=id, value=value, title=placeholder, data-action="save", data-trigger="change")

pages/animelist/animelist.pixy

@@ -4,58 +4,69 @@ component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, u
 	if len(animeLists[arn.AnimeListStatusWatching].Items) > 0
 		.anime-list-container
 			h3.status-name Watching
-			AnimeList(animeLists[arn.AnimeListStatusWatching], user)
+			AnimeList(animeLists[arn.AnimeListStatusWatching], viewUser, user)
 
 	if len(animeLists[arn.AnimeListStatusCompleted].Items) > 0
 		.anime-list-container
 			h3.status-name Completed
-			AnimeList(animeLists[arn.AnimeListStatusCompleted], user)
+			AnimeList(animeLists[arn.AnimeListStatusCompleted], viewUser, user)
 
 	if len(animeLists[arn.AnimeListStatusPlanned].Items) > 0
 		.anime-list-container
 			h3.status-name Planned
-			AnimeList(animeLists[arn.AnimeListStatusPlanned], user)
+			AnimeList(animeLists[arn.AnimeListStatusPlanned], viewUser, user)
 
 	if len(animeLists[arn.AnimeListStatusHold].Items) > 0
 		.anime-list-container
 			h3.status-name On hold
-			AnimeList(animeLists[arn.AnimeListStatusHold], user)
+			AnimeList(animeLists[arn.AnimeListStatusHold], viewUser, user)
 
 	if len(animeLists[arn.AnimeListStatusDropped].Items) > 0
 		.anime-list-container
 			h3.status-name Dropped
-			AnimeList(animeLists[arn.AnimeListStatusDropped], user)
+			AnimeList(animeLists[arn.AnimeListStatusDropped], viewUser, user)
 	
 	//- for status, animeList := range animeLists
 	//- 	h3= status
 	//- 	AnimeList(animeList, user)
 
-component AnimeList(animeList *arn.AnimeList, user *arn.User)
+component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User)
 	table.anime-list
 		thead
 			tr
 				th.anime-list-item-name Anime
 				th.anime-list-item-airing-date Airing
 				th.anime-list-item-episodes Episodes
-				th.anime-list-item-rating Rating
+				th.anime-list-item-rating Overall
+				//- th.anime-list-item-rating Story
+				//- th.anime-list-item-rating Visuals
+				//- th.anime-list-item-rating Soundtrack
 				if user != nil
 					th.anime-list-item-actions Actions
 		tbody
 			each item in animeList.Items
-				tr.anime-list-item.mountable(title=item.Notes)
+				tr.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
 					td.anime-list-item-name
 						a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.Canonical
 					td.anime-list-item-airing-date
 						if item.Anime().UpcomingEpisode() != nil
 							span.utc-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number)
 					td.anime-list-item-episodes
-						.anime-list-item-episodes-watched= item.Episodes
+						.anime-list-item-episodes-watched
+							.action(contenteditable=utils.SameUser(user, viewUser), data-field="Episodes", data-type="number", data-trigger="focusout", data-action="save")= item.Episodes
 						.anime-list-item-episodes-separator /
 						.anime-list-item-episodes-max= item.Anime().EpisodeCountString()
 						//- .anime-list-item-episodes-edit
 						//- 	a.ajax(href=, title="Edit anime")
 						//- 		RawIcon("pencil")
-					td.anime-list-item-rating= item.FinalRating()
+					td.anime-list-item-rating(title="Overall rating")
+						.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Overall)
+					//- td.anime-list-item-rating(title="Story rating")
+					//- 	.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Story", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Story)
+					//- td.anime-list-item-rating(title="Visuals rating")
+					//- 	.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Visuals", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Visuals)
+					//- td.anime-list-item-rating(title="Soundtrack rating")
+					//- 	.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Soundtrack", data-type="number", data-trigger="focusout", data-action="save")= fmt.Sprintf("%.1f", item.Rating.Soundtrack)
 					if user != nil
 						td.anime-list-item-actions
 							a(href=arn.Nyaa.GetLink(item.Anime()), title="Search on Nyaa", target="_blank", rel="noopener")

pages/animelist/animelist.scarlet

@@ -46,7 +46,7 @@
 // 		margin-bottom -2px
 
 .anime-list-item-rating
-	flex-basis 100px
+	flex-basis 50px
 	text-align center
 
 .anime-list-item-actions

pages/animelistitem/animelistitem.pixy

@@ -14,7 +14,7 @@ component AnimeListItem(viewUser *arn.User, item *arn.AnimeListItem, anime *arn.
 				option(value=arn.AnimeListStatusDropped) Dropped
 
 			.anime-list-item-rating-edit
-				InputNumber("Rating.Overall", item.Rating.Overall, "Overall", "Overall rating on a scale of 0 to 10", "0", "10", "0.1")
+				InputNumber("Rating.Overall", item.Rating.Overall, item.OverallRatingName(), "Overall rating on a scale of 0 to 10", "0", "10", "0.1")
 				InputNumber("Rating.Story", item.Rating.Story, "Story", "Story rating on a scale of 0 to 10", "0", "10", "0.1")
 				InputNumber("Rating.Visuals", item.Rating.Visuals, "Visuals", "Visuals rating on a scale of 0 to 10", "0", "10", "0.1")
 				InputNumber("Rating.Soundtrack", item.Rating.Soundtrack, "Soundtrack", "Soundtrack rating on a scale of 0 to 10", "0", "10", "0.1")

pages/embed/embed.go

@@ -26,5 +26,5 @@ func Get(ctx *aero.Context) string {
 	animeList.Sort()
 	watchingList := animeList.SplitByStatus()[arn.AnimeListStatusWatching]
 
-	return utils.AllowEmbed(ctx, ctx.HTML(components.AnimeList(watchingList, user)))
+	return utils.AllowEmbed(ctx, ctx.HTML(components.AnimeList(watchingList, animeList.User(), user)))
 }

scripts/Actions.ts

@@ -6,17 +6,18 @@ import { Diff } from "./Diff"
 export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaElement) {
 	arn.loading(true)
 
+	let isContentEditable = input.isContentEditable
 	let obj = {}
-	let value = input.value
+	let value = isContentEditable ? input.innerText : input.value
 	
-	if(input.type === "number") {
+	if(input.type === "number" || input.dataset.type === "number") {
-		if(input.getAttribute("step") === "1") {
+		if(input.getAttribute("step") === "1" || input.dataset.step === "1") {
-			obj[input.id] = parseInt(value)
+			obj[input.dataset.field] = parseInt(value)
 		} else {
-			obj[input.id] = parseFloat(value)
+			obj[input.dataset.field] = parseFloat(value)
 		}
 	} else {
-		obj[input.id] = value
+		obj[input.dataset.field] = value
 	}
 
 	// console.log(input.type, input.dataset.api, obj, JSON.stringify(obj))
@@ -35,7 +36,11 @@ export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaE
 		throw "API object not found"
 	}
 
+	if(isContentEditable) {
+		input.contentEditable = "false"
+	} else {
 		input.disabled = true
+	}
 
 	fetch(apiObject.dataset.api, {
 		method: "POST",
@@ -51,7 +56,12 @@ export function save(arn: AnimeNotifier, input: HTMLInputElement | HTMLTextAreaE
 	.catch(console.error)
 	.then(() => {
 		arn.loading(false)
+
+		if(isContentEditable) {
+			input.contentEditable = "true"
+		} else {
 			input.disabled = false
+		}
 
 		return arn.reloadContent()
 	})

scripts/AnimeNotifier.ts

@@ -265,13 +265,26 @@ export class AnimeNotifier {
 	}
 
 	onKeyDown(e: KeyboardEvent) {
+		let activeElement = document.activeElement
+
 		// Ignore hotkeys on input elements
-		switch(document.activeElement.tagName) {
+		switch(activeElement.tagName) {
 			case "INPUT":
 			case "TEXTAREA":
 				return
 		}
 
+		// Disallow Enter key in contenteditables
+		if(activeElement.getAttribute("contenteditable") === "true" && e.keyCode == 13) {
+			if("blur" in activeElement) {
+				activeElement["blur"]()
+			}
+			
+			e.preventDefault()
+			e.stopPropagation()
+			return
+		}
+
 		// F = Search
 		if(e.keyCode == 70) {
 			let search = this.app.find("search") as HTMLInputElement
@@ -281,6 +294,7 @@ export class AnimeNotifier {
 
 			e.preventDefault()
 			e.stopPropagation()
+			return
 		}
 	}
 }

utils/user.go

@@ -9,3 +9,20 @@ import (
 func GetUser(ctx *aero.Context) *arn.User {
 	return arn.GetUserFromContext(ctx)
 }
+
+// SameUser returns "true" or "false" depending on if the users are the same.
+func SameUser(a *arn.User, b *arn.User) string {
+	if a == nil {
+		return "false"
+	}
+
+	if b == nil {
+		return "false"
+	}
+
+	if a.ID == b.ID {
+		return "true"
+	}
+
+	return "false"
+}