Improved explore page

pages/explore/explore.go

@@ -13,16 +13,63 @@ const (
 	popularityThreshold       = 5
 	popularityPenalty         = 8.0
 	watchingPopularityWeight  = 0.3
+	completedPopularityWeight = 0.3
 	plannedPopularityWeight   = 0.2
 )
 
 // Get ...
 func Get(ctx *aero.Context) string {
-	animeList := arn.GetAiringAnime()
+	year := "2017"
+	status := "current"
+	typ := "tv"
+	results := filterAnime(year, status, typ)
 
+	return ctx.HTML(components.ExploreAnime(results, year, status, typ))
+}
+
+// Filter ...
+func Filter(ctx *aero.Context) string {
+	year := ctx.Get("year")
+	status := ctx.Get("status")
+	typ := ctx.Get("type")
+
+	results := filterAnime(year, status, typ)
+
+	return ctx.HTML(components.ExploreAnime(results, year, status, typ))
+}
+
+func filterAnime(year, status, typ string) []*arn.Anime {
+	var results []*arn.Anime
+
+	for anime := range arn.StreamAnime() {
+		if len(anime.StartDate) < 4 {
+			continue
+		}
+
+		if anime.StartDate[:4] != year {
+			continue
+		}
+
+		if anime.Status != status {
+			continue
+		}
+
+		if anime.Type != typ {
+			continue
+		}
+
+		results = append(results, anime)
+	}
+
+	sortAnime(results)
+	return results
+}
+
+func sortAnime(animeList []*arn.Anime) {
 	sort.Slice(animeList, func(i, j int) bool {
 		a := animeList[i]
 		b := animeList[j]
+
 		scoreA := a.Rating.Overall
 		scoreB := b.Rating.Overall
 
@@ -48,33 +95,9 @@ func Get(ctx *aero.Context) string {
 		scoreA += float64(a.Popularity.Planned) * plannedPopularityWeight
 		scoreB += float64(b.Popularity.Planned) * plannedPopularityWeight
 
+		scoreA += float64(a.Popularity.Completed) * completedPopularityWeight
+		scoreB += float64(b.Popularity.Completed) * completedPopularityWeight
+
 		return scoreA > scoreB
 	})
-
-	return ctx.HTML(components.Explore(animeList))
-}
-
-// Filter ...
-func Filter(ctx *aero.Context) string {
-	year := ctx.Get("year")
-	status := ctx.Get("status")
-
-	var results []*arn.Anime
-
-	for anime := range arn.StreamAnime() {
-		if len(anime.StartDate) < 4 {
-			continue
-		}
-
-		if anime.StartDate[:4] != year {
-			continue
-		}
-
-		if anime.Status != status {
-			continue
-		}
-
-	}
-
-	return ctx.HTML(components.Explore(results))
 }

pages/explore/explore.pixy

@@ -1,3 +1,24 @@
-component Explore(animeList []*arn.Anime)
+component ExploreAnime(animeList []*arn.Anime, year string, status string, typ string)
-	h1.page-title(title=toString(len(animeList)) + " anime") Explore
+	ExploreFilters(year, status, typ)
+
+	h1.page-title Explore
+
 	AnimeGrid(animeList)
+
+component ExploreFilters(year string, status string, typ string)
+	.explore-filters
+		select#filter-year.action(value=year, data-action="filterAnime", data-trigger="change")
+			for year := time.Now().Year()+1; year >= 1951; year--
+				option(value=year)= year
+
+		select#filter-status.action(value=status, data-action="filterAnime", data-trigger="change")
+			option(value="current") Current
+			option(value="upcoming") Upcoming
+			option(value="finished") Finished
+
+		select#filter-type.action(value=typ, data-action="filterAnime", data-trigger="change")
+			option(value="tv") TV
+			option(value="movie") Movie
+			option(value="ova") OVA
+			option(value="ona") ONA
+			option(value="special") Special

pages/explore/explore.scarlet

@@ -0,0 +1,16 @@
+.explore-filters
+	horizontal
+	justify-content center
+	margin-bottom content-padding
+
+	select
+		margin 0.05rem
+
+#filter-year
+	max-width 80px
+
+#filter-status
+	max-width 120px
+
+#filter-type
+	max-width 80px

pages/index.go

@@ -50,7 +50,7 @@ func Configure(app *aero.Application) {
 	// Main menu
 	app.Ajax("/", home.Get)
 	app.Ajax("/explore", explore.Get)
-	app.Ajax("/explore/:year/:status", explore.Filter)
+	app.Ajax("/explore/anime/:year/:status/:type", explore.Filter)
 	app.Ajax("/login", login.Get)
 	app.Ajax("/api", apiview.Get)
 	// app.Ajax("/dashboard", dashboard.Get)

scripts/Actions.ts

@@ -1,5 +1,6 @@
 export * from "./Actions/AnimeList"
 export * from "./Actions/Diff"
+export * from "./Actions/Explore"
 export * from "./Actions/FollowUser"
 export * from "./Actions/Forum"
 export * from "./Actions/InfiniteScroller"

scripts/Actions/Explore.ts

@@ -0,0 +1,10 @@
+import { AnimeNotifier } from "../AnimeNotifier"
+
+// Filter anime on explore page
+export function filterAnime(arn: AnimeNotifier, input: HTMLInputElement) {
+	let year = arn.app.find("filter-year") as HTMLSelectElement
+	let status = arn.app.find("filter-status") as HTMLSelectElement
+	let type = arn.app.find("filter-type") as HTMLSelectElement
+
+	arn.app.load(`/explore/anime/${year.value}/${status.value}/${type.value}`)
+}