Started working on user map

pages/index.go

@@ -104,6 +104,7 @@ func Configure(app *aero.Application) {
 
 	// User lists
 	l.Page("/users", users.Active)
+	l.Page("/users/map", users.Map)
 	l.Page("/users/noavatar", users.ActiveNoAvatar)
 	l.Page("/users/games/osu", users.Osu)
 	l.Page("/users/games/overwatch", users.Overwatch)

pages/users/map.go

@@ -0,0 +1,11 @@
+package users
+
+import (
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/notify.moe/components"
+)
+
+// Map shows a map of all users.
+func Map(ctx *aero.Context) string {
+	return ctx.HTML(components.UserMap(ctx.URI()))
+}

pages/users/map.pixy

@@ -0,0 +1,8 @@
+component UserMap(url string)
+	UsersTabs(url)
+	h1 Map
+
+	.buttons
+		button.action(data-action="showUserMap", data-trigger="click") Show
+	
+	#user-map

pages/users/map.scarlet

@@ -0,0 +1,3 @@
+// #user-map
+// 	width 100%
+// 	height 600px

pages/users/users.pixy

@@ -47,6 +47,7 @@ component UsersTabs(url string)
 		Tab("Editors", "pencil", "/users/editors")
 		Tab("Supporters", "heart", "/users/pro")
 		Tab("Staff", "user-secret", "/users/staff")
+		//- Tab("Map", "map", "/users/map")
 	
 	if strings.Contains(url, "/users/games")
 		.tabs

scripts/Actions/Map.ts

@@ -0,0 +1,35 @@
+// import AnimeNotifier from "../AnimeNotifier"
+
+// // User map
+// export function showUserMap(arn: AnimeNotifier, button: HTMLElement) {
+// 	let script = document.createElement("script")
+// 	script.src = "https://www.gstatic.com/charts/loader.js"
+// 	script.onload = () => {
+// 		let google = window["google"]
+// 		google.charts.load("current", {
+// 			"packages": ["geochart"],
+// 			"mapsApiKey": ""
+// 		})
+// 		google.charts.setOnLoadCallback(drawUserMap)
+// 	}
+
+// 	document.head.appendChild(script)
+// }
+
+// function drawUserMap() {
+// 	let data = window["google"].visualization.arrayToDataTable([
+// 		["Country", "Popularity"],
+// 		["Germany", 200],
+// 		["United States", 300],
+// 		["Brazil", 400],
+// 		["Canada", 500],
+// 		["France", 600],
+// 		["RU", 700]
+// 	])
+
+// 	let options = {}
+// 	let element = document.getElementById("user-map")
+// 	let chart = new window["google"].visualization.GeoChart(element)
+// 	console.log(element, data)
+// 	chart.draw(data, options)
+// }