Added basic anime list item view

main.go

@@ -11,6 +11,7 @@ import (
 	"github.com/animenotifier/notify.moe/pages/admin"
 	"github.com/animenotifier/notify.moe/pages/airing"
 	"github.com/animenotifier/notify.moe/pages/anime"
+	"github.com/animenotifier/notify.moe/pages/animelistitem"
 	"github.com/animenotifier/notify.moe/pages/awards"
 	"github.com/animenotifier/notify.moe/pages/dashboard"
 	"github.com/animenotifier/notify.moe/pages/forum"
@@ -50,6 +51,7 @@ func main() {
 	app.Ajax("/posts/:id", posts.Get)
 	app.Ajax("/user/:nick", profile.Get)
 	app.Ajax("/user/:nick/threads", profile.GetThreadsByUser)
+	app.Ajax("/user/:nick/animelist/:id", animelistitem.Get)
 	app.Ajax("/settings", settings.Get)
 	app.Ajax("/admin", admin.Get)
 	app.Ajax("/users", users.Get)

mixins/Input.pixy

@@ -0,0 +1,14 @@
+component InputText(id string, value string, label string, placeholder string)
+	.widget-input
+		label(for=id)= label + ":"
+		input.widget-element(id=id, type="text", value=value, placeholder=placeholder)
+
+component InputTextArea(id string, value string, label string, placeholder string)
+	.widget-input
+		label(for=id)= label + ":"
+		textarea.widget-element(id=id, value=value, placeholder=placeholder)
+
+component InputNumber(id string, value int, label string, placeholder string, min int, max int)
+	.widget-input
+		label(for=id)= label + ":"
+		input.widget-element(id=id, type="number", value=value, min=min, max=max, placeholder=placeholder)

pages/anime/anime.go

@@ -1,19 +1,23 @@
 package anime
 
 import (
+	"net/http"
+
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
 )
 
 // Get anime page.
 func Get(ctx *aero.Context) string {
 	id := ctx.Get("id")
+	user := utils.GetUser(ctx)
 	anime, err := arn.GetAnime(id)
 
 	if err != nil {
-		return ctx.Error(404, "Anime not found", err)
+		return ctx.Error(http.StatusNotFound, "Anime not found", err)
 	}
 
-	return ctx.HTML(components.Anime(anime))
+	return ctx.HTML(components.Anime(anime, user))
 }

pages/anime/anime.pixy

@@ -1,8 +1,8 @@
-component Anime(anime *arn.Anime)
+component Anime(anime *arn.Anime, user *arn.User)
 	.anime-header(data-id=anime.ID)
 		if anime.Image.Small != ""
 			.anime-image-container
-				img.anime-cover-image(src=anime.Image.Small, alt=anime.Title.Romaji)
+				img.anime-cover-image(src=anime.Image.Small, alt=anime.Title.Canonical)
 		
 		.space
 
@@ -13,13 +13,18 @@ component Anime(anime *arn.Anime)
 			//- 	span.second-title(title=anime.Title.English !== anime.Title.Romaji ? anime.Title.English : null)= anime.Title.Romaji
 			//- else
 			if anime.Title.Japanese != anime.Title.Canonical
-				a.anime-alternative-title(href="http://jisho.org/search/" + anime.Title.Japanese, target="_blank", title="Look up reading on jisho.org", rel="nofollow")= anime.Title.Japanese
+				.anime-alternative-title
+					a(href="http://jisho.org/search/" + anime.Title.Japanese, target="_blank", title="Look up reading on jisho.org", rel="nofollow")= anime.Title.Japanese
 
 			//- h3.anime-section-name.anime-summary-header Summary
 			p.anime-summary= anime.Summary
 	
-	.anime-actions
+	if user != nil
-		a.light-button.action-button(href="#") Add to collection
+		.anime-actions
+			if user.AnimeList().Contains(anime.ID)
+				a.button.ajax(href="/+" + user.Nick + "/animelist/" + anime.ID) View in collection
+			else
+				button Add to collection
 
 	h3.anime-section-name Ratings
 	.anime-rating-categories

pages/anime/anime.scarlet

@@ -39,12 +39,14 @@
 .anime-alternative-title
 	font-size 0.9em
 	margin-bottom 0.5rem
-	color rgba(60, 60, 60, 0.5) !important
+	a
+		color rgba(60, 60, 60, 0.5) !important
 
 .anime-actions
 	horizontal
 	justify-content center
 	margin content-padding 0
+	z-index 10
 
 > 900px
 	.anime-actions

pages/animelistitem/animelistitem.go

@@ -0,0 +1,51 @@
+package animelistitem
+
+import (
+	"net/http"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+	"github.com/animenotifier/notify.moe/components"
+)
+
+// Get anime page.
+func Get(ctx *aero.Context) string {
+	// user := utils.GetUser(ctx)
+
+	nick := ctx.Get("nick")
+	viewUser, err := arn.GetUserByNick(nick)
+
+	if err != nil {
+		return ctx.Error(http.StatusNotFound, "User not found", err)
+	}
+
+	animeList := viewUser.AnimeList()
+
+	if animeList == nil {
+		return ctx.Error(http.StatusNotFound, "Anime list not found", err)
+	}
+
+	animeID := ctx.Get("id")
+	item := animeList.Find(animeID)
+
+	if item == nil {
+		return ctx.Error(http.StatusNotFound, "List item not found", err)
+	}
+
+	anime := item.Anime()
+
+	return ctx.HTML(components.AnimeListItem(item, anime))
+}
+
+// t := reflect.TypeOf(item).Elem()
+// v := reflect.ValueOf(item).Elem()
+
+// for i := 0; i < t.NumField(); i++ {
+// 	fieldInfo := t.Field(i)
+
+// 	if fieldInfo.Anonymous || unicode.IsLower([]rune(fieldInfo.Name)[0]) {
+// 		continue
+// 	}
+
+// 	fmt.Println(fieldInfo.Name, v.Field(i).Interface())
+// }

pages/animelistitem/animelistitem.pixy

@@ -0,0 +1,12 @@
+component AnimeListItem(item *arn.AnimeListItem, anime *arn.Anime)
+	.widgets
+		.widget.anime-list-item-view
+			h2
+				a.ajax(href=anime.Link())= anime.Title.Canonical
+
+			if anime.EpisodeCount == 0
+				InputNumber("episodes", item.Episodes, "Episodes", "Number of episodes you watched", 0, 10000)
+			else
+				InputNumber("episodes", item.Episodes, "Episodes", "Number of episodes you watched", 0, anime.EpisodeCount)
+			
+			InputTextArea("notes", item.Notes, "Notes", "Notes")

pages/animelistitem/animelistitem.scarlet

@@ -0,0 +1,7 @@
+.anime-list-item-view
+	textarea
+		height 10rem
+
+.anime-list-item-view-image
+	max-width 55px
+	margin-bottom 1rem

pages/profile/profile.pixy

@@ -57,7 +57,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
 				p No anime in the collection.
 			else
 				each item in animeList.Items
-					a.anime-list-item.ajax(href=item.Anime().Link(), title=item.Anime().Title.Canonical + " (" + toString(item.Episode) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
+					a.anime-list-item.ajax(href="/+" + viewUser.Nick + "/animelist/" + item.Anime().ID, title=item.Anime().Title.Canonical + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
 						img.anime-cover-image.anime-list-item-image(src=item.Anime().Image.Tiny, alt=item.Anime().Title.Canonical)
 
 	.profile-category

pages/settings/settings.pixy

@@ -17,9 +17,4 @@ component Settings(user *arn.User)
 
 			InputText("accounts.anilist.nick", user.Accounts.AniList.Nick, "AniList", "Your username on anilist.co")
 			InputText("accounts.myanimelist.nick", user.Accounts.MyAnimeList.Nick, "MyAnimeList", "Your username on myanimelist.net")
-			InputText("accounts.kitsu.nick", user.Accounts.Kitsu.Nick, "Kitsu", "Your username on kitsu.io")
+			InputText("accounts.kitsu.nick", user.Accounts.Kitsu.Nick, "Kitsu", "Your username on kitsu.io")
-
-component InputText(id string, value string, label string, placeholder string)
-	.widget-input
-		label(for=id)= label + ":"
-		input.widget-element(id=id, type="text", value=value, placeholder=placeholder)

styles/forms.scarlet

@@ -20,11 +20,21 @@ input, textarea
 	:disabled
 		ui-disabled
 
-button, select
+button, .button
 	ui-element
-	max-width 600px
+	font-size 1rem
-	padding 0.6rem 1rem
+	line-height 1rem
-	margin 0 auto
+	padding 0.75rem 1rem
+	color link-color
+
+	:hover
+		cursor pointer
+		color white
+		background-color link-hover-color
+
+	:active
+		transform translateY(3px)
+	
 	// box-shadow 0 0 2px white, 0 -2px 5px rgba(0, 0, 0, 0.08) inset
 	// :active
 	// 	background-color black
@@ -34,6 +44,11 @@ button, select
 	// 	// box-shadow 0 0 6px alpha(mainColor, 20%)
 	// 	border 1px solid main-color
 
+// select
+// 	ui-element
+// 	font-size 1rem
+// 	padding 0.5em 1em
+
 label
 	width 100%
 	padding 0.5rem 0

styles/headers.scarlet

@@ -13,5 +13,9 @@ h3
 	text-align left
 	margin-top 0.6em
 
+h2
+	a
+		color text-color
+
 .page-title
 	display none

styles/light-button.scarlet

@@ -11,9 +11,4 @@
 
 	:hover
 		color white !important
-		background-color link-hover-color
+		background-color link-hover-color
-
-.action-button
-	ui-element
-	font-size 1rem
-	text-align center