Calendar now saves the "show added anime only" setting

pages/calendar/calendar.pixy

@@ -6,19 +6,28 @@ component Calendar(days []*utils.CalendarDay, user *arn.User)
 			button.action(data-trigger="click", data-action="calendarShowAddedAnimeOnly", data-api="/api/settings/" + user.ID, title="Show anime in my collection")
 				RawIcon("eye-slash")
 
+	if user != nil
+		#calendar(data-show-added-anime-only=user.Settings().Calendar.ShowAddedAnimeOnly)
+			CalendarWeek(days, user)
+	else
+		#calendar
+			CalendarWeek(days, user)
+
+component CalendarWeek(days []*utils.CalendarDay, user *arn.User)
 	.week
 		each day in days
 			div(class=day.Class)
 				h3.weekday-name.mountable(data-mountable-type=day.Name)= day.Name
+				if user == nil
+					.calendar-entries
+						each entry in day.Entries
+							CalendarEntry(day, entry, user)
+				else
 					.calendar-entries
 						each entry in day.Entries
 							CalendarEntry(day, entry, user)
 
 component CalendarEntry(day *utils.CalendarDay, entry *utils.CalendarEntry, user *arn.User)
-	if user != nil && user.Settings().CalendarSettings.ShowUserList == false && !entry.Added
-		a.calendar-entry.hidden.mountable(href=entry.Anime.Link(), data-mountable-type=day.Name, data-added=entry.Added)
-			CalendarView(day, entry, user)
-	else
 	a.calendar-entry.mountable(href=entry.Anime.Link(), data-mountable-type=day.Name, data-added=entry.Added)
 		CalendarView(day, entry, user)
 

pages/calendar/calendar.scarlet

@@ -1,3 +1,9 @@
+#calendar
+	[data-show-added-anime-only="true"]
+		.calendar-entry
+			[data-added="false"]
+				display none
+
 .week
 	vertical
 

scripts/Actions/Explore.ts

@@ -42,21 +42,29 @@ export function hideAddedAnime() {
 }
 
 // Hides anime that are not in your list.
-export function calendarShowAddedAnimeOnly(arn: AnimeNotifier, element: HTMLInputElement) {
+export async function calendarShowAddedAnimeOnly(arn: AnimeNotifier, element: HTMLInputElement) {
-	for(let anime of findAll("calendar-entry")) {
+	let calendar = document.getElementById("calendar")
-		if(anime.dataset.added === "false") {
+
-			anime.classList.toggle("hidden")
+	if(!calendar || calendar.dataset.showAddedAnimeOnly === undefined) {
-		}
+		return
 	}
 
-	const showUserList = !Array.from(document.getElementsByClassName("calendar-entry"))
+	// Toggling the switch will trigger the CSS rules
-		.some(value => value.classList.contains("hidden"));
+	if(calendar.dataset.showAddedAnimeOnly === "true") {
-
+		calendar.dataset.showAddedAnimeOnly = "false"
-	let obj = {
+	} else {
-		"CalendarSettings.ShowUserList": showUserList
+		calendar.dataset.showAddedAnimeOnly = "true"
 	}
 
-	let apiEndpoint = arn.findAPIEndpoint(element);
+	// Save the state in the database
-	arn.post(apiEndpoint, obj)
+	let showAddedAnimeOnly = calendar.dataset.showAddedAnimeOnly === "true"
-		.catch(err => arn.statusMessage.showError(err));
+	let apiEndpoint = arn.findAPIEndpoint(element)
+
+	try {
+		await arn.post(apiEndpoint, {
+			"Calendar.ShowAddedAnimeOnly": showAddedAnimeOnly
+		})
+	} catch(err) {
+		arn.statusMessage.showError(err)
+	}
 }