Improved airing dates

pages/anime/episode.scarlet

@@ -12,7 +12,7 @@
 	flex 1
 
 .episode-airing-date-start
-	flex-basis 180px
+	flex-basis 150px
 	text-align right
 
 < 800px

pages/animelist/animelist.pixy

@@ -53,14 +53,14 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
 							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
-							.action(contenteditable=utils.SameUser(user, viewUser), data-field="Episodes", data-type="number", data-trigger="focusout", data-action="save")= item.Episodes
+							.action(contenteditable=utils.SameUser(user, viewUser), data-field="Episodes", data-type="number", data-trigger="focusout", data-action="save", title="Click to edit episodes")= 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(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)
+						.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save", title="Click to edit overall rating")= 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")

scripts/AnimeNotifier.ts

@@ -131,8 +131,10 @@ export class AnimeNotifier {
 
 	loading(isLoading: boolean) {
 		if(isLoading) {
+			document.body.style.cursor = "progress"
 			this.app.loading.classList.remove(this.app.fadeOutClass)
 		} else {
+			document.body.style.cursor = "auto"
 			this.app.loading.classList.add(this.app.fadeOutClass)
 		}
 	}

scripts/DateView.ts

@@ -1,4 +1,12 @@
-const oneDay = 24 * 60 * 60 * 1000
+import { plural } from "./Utils"
+
+const oneSecond = 1000
+const oneMinute = 60 * oneSecond
+const oneHour = 60 * oneMinute
+const oneDay = 24 * oneHour
+const oneWeek = 7 * oneDay
+const oneMonth = 30 * oneDay
+const oneYear = 365.25 * oneDay
 
 export var monthNames = [
 	"January", "February", "March",
@@ -17,6 +25,40 @@ export var dayNames = [
 	"Saturday"
 ]
 
+function getRemainingTime(remaining: number): string {
+	let remainingAbs = Math.abs(remaining)
+
+	if(remainingAbs >= oneYear) {
+		return plural(Math.round(remaining / oneYear), "year")
+	}
+
+	if(remainingAbs >= oneMonth) {
+		return plural(Math.round(remaining / oneMonth), "month")
+	}
+
+	if(remainingAbs >= oneWeek) {
+		return plural(Math.round(remaining / oneWeek), "week")
+	}
+
+	if(remainingAbs >= oneDay) {
+		return plural(Math.round(remaining / oneDay), "day")
+	}
+
+	if(remainingAbs >= oneHour) {
+		return plural(Math.round(remaining / oneHour), " hour")
+	}
+
+	if(remainingAbs >= oneMinute) {
+		return plural(Math.round(remaining / oneMinute), " minute")
+	}
+
+	if(remainingAbs >= oneSecond) {
+		return plural(Math.round(remaining / oneSecond), " second")
+	}
+	
+	return "Just now"
+}
+
 export function displayLocalDate(element: HTMLElement, now: Date) {
 	let startDate = new Date(element.dataset.startDate)
 	let endDate = new Date(element.dataset.endDate)
@@ -29,37 +71,70 @@ export function displayLocalDate(element: HTMLElement, now: Date) {
 	m = endDate.getMinutes()
 	let endTime = (h <= 9 ? "0" + h : h) + ":" + (m <= 9 ? "0" + m : m)
 	
-	let dayDifference = Math.round((startDate.getTime() - now.getTime()) / oneDay)
-
-	if(isNaN(dayDifference)) {
-		element.style.opacity = "0"
-		return
-	}
-
-	let dayInfo = dayNames[startDate.getDay()] + ", " + monthNames[startDate.getMonth()] + " " + startDate.getDate()
-
 	let airingVerb = "will be airing"
 
-	switch(dayDifference) {
-		case 0:
-			element.innerText = "Today"
-			break
-		case 1:
-			element.innerText = "Tomorrow"
-			break
-		case -1:
-			element.innerText = "Yesterday"
-			break
-		default:
-			let text = Math.abs(dayDifference) + " days"
 
-			if(dayDifference < 0) {
+	// let dayInfo = dayNames[startDate.getDay()] + ", " + monthNames[startDate.getMonth()] + " " + startDate.getDate()
-				text += " ago"
+
+	let remaining = startDate.getTime() - now.getTime()
+	let remainingString = getRemainingTime(remaining)
+
+	// Add "ago" if the date is in the past
+	if(remainingString.startsWith("-")) {
+		remainingString = remainingString.substring(1) + " ago"
+	}
+
+	element.innerText = remainingString
+
+	// let remainingString = seconds + plural(seconds, 'second')
+
+	// let days = seconds / (60 * )
+	// if(Math.abs(days) >= 1) {
+	// 	remainingString = plural(days, 'day')
+	// } else {
+	// 	let hours = arn.inHours(now, timeStamp)
+	// 	if(Math.abs(hours) >= 1) {
+	// 		remainingString = plural(hours, 'hour')
+	// 	} else {
+	// 		let minutes = arn.inMinutes(now, timeStamp)
+	// 		if(Math.abs(minutes) >= 1) {
+	// 			remainingString = plural(minutes, 'minute')
+	// 		} else {
+	// 			let seconds = arn.inSeconds(now, timeStamp)
+	// 			remainingString = plural(seconds, 'second')
+	// 		}
+	// 	}
+	// }
+
+	// if(isNaN(oneHour)) {
+	// 	element.style.opacity = "0"
+	// 	return
+	// }
+
+	// switch(Math.floor(dayDifference)) {
+	// 	case 0:
+	// 		element.innerText = "Today"
+	// 		break
+	// 	case 1:
+	// 		element.innerText = "Tomorrow"
+	// 		break
+	// 	case -1:
+	// 		element.innerText = "Yesterday"
+	// 		break
+	// 	default:
+	// 		let text = Math.abs(dayDifference) + " days"
+
+	// 		if(dayDifference < 0) {
+	// 			text += " ago"
+	// 			airingVerb = "aired"
+	// 		} else {
+	// 			element.innerText = text
+	// 		}
+	// }
+
+	if(remaining < 0) {
 		airingVerb = "aired"
-			} else {
-				element.innerText = text
-			}
 	}
 
-	element.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + startTime + " - " + endTime + " your time"
+	element.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime
 }

scripts/Utils.ts

@@ -1,7 +1,4 @@
-export function* findAll(className: string) {
+export function* findAll(className: string): IterableIterator<HTMLElement> {
-	// getElementsByClassName failed for some reason.
-	// TODO: Test getElementsByClassName again.
-	// let elements = document.querySelectorAll("." + className)
 	let elements = document.getElementsByClassName(className)
 	
 	for(let i = 0; i < elements.length; ++i) {
@@ -12,3 +9,7 @@ export function* findAll(className: string) {
 export function delay<T>(millis: number, value?: T): Promise<T> {
 	return new Promise(resolve => setTimeout(() => resolve(value), millis))
 }
+
+export function plural(count: number, singular: string): string {
+	return (count === 1 || count === -1) ? (count + ' ' + singular) : (count + ' ' + singular + 's')
+}

styles/embedded.scarlet

@@ -14,7 +14,7 @@ remove-margin = 1.1rem
 		width calc(100% + remove-margin * 2)
 
 		td
-			padding 0.25rem 0.5rem
+			padding 0.4rem 0.8rem
 	
 	.anime-list-owner
 		display none