Added timestamps to forum

mixins/Postable.pixy

@@ -23,6 +23,8 @@ component Postable(post arn.Postable, user *arn.User, highlightAuthorID string)
 							Icon("close")
 							span Cancel
 			
+			.post-date.utc-date(data-date=post.Created())
+
 			.post-toolbar(id="toolbar-" + post.ID())
 				.spacer
 				.post-likes(id="likes-" + post.ID(), title="Likes")= len(post.Likes())

pages/anime/anime.pixy

@@ -161,7 +161,7 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, user *arn.User, epis
 						td.episode-actions
 							a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
 								RawIcon("google")
-						td.episode-airing-date-start.utc-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+						td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
 
 	//- h3.anime-section-name Reviews
 	//- p Coming soon.

pages/animelist/animelist.pixy

@@ -55,7 +55,7 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
 						a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.Canonical
 					td.anime-list-item-airing-date
 						if item.Anime().UpcomingEpisode() != nil
-							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)
+							span.utc-airing-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

pages/dashboard/dashboard.pixy

@@ -13,7 +13,7 @@ component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, sound
 								Icon("calendar-o")
 								.schedule-item-title= schedule[i].Anime.Title.Canonical
 							.spacer
-							.schedule-item-date.utc-date(data-start-date=schedule[i].Episode.AiringDate.Start, data-end-date=schedule[i].Episode.AiringDate.End, data-episode-number=schedule[i].Episode.Number)
+							.schedule-item-date.utc-airing-date(data-start-date=schedule[i].Episode.AiringDate.Start, data-end-date=schedule[i].Episode.AiringDate.End, data-episode-number=schedule[i].Episode.Number)
 				else
 					.widget-element
 						.widget-element-text

scripts/AnimeNotifier.ts

@@ -1,6 +1,6 @@
 import { Application } from "./Application"
 import { Diff } from "./Diff"
-import { displayLocalDate } from "./DateView"
+import { displayAiringDate, displayDate } from "./DateView"
 import { findAll, delay } from "./Utils"
 import { MutationQueue } from "./MutationQueue"
 import * as actions from "./Actions"
@@ -148,8 +148,12 @@ export class AnimeNotifier {
 	displayLocalDates() {
 		const now = new Date()
 
+		for(let element of findAll("utc-airing-date")) {
+			displayAiringDate(element, now)
+		}
+
 		for(let element of findAll("utc-date")) {
-			displayLocalDate(element, now)
+			displayDate(element, now)
 		}
 	}
 

scripts/DateView.ts

@@ -59,7 +59,7 @@ function getRemainingTime(remaining: number): string {
 	return "Just now"
 }
 
-export function displayLocalDate(element: HTMLElement, now: Date) {
+export function displayAiringDate(element: HTMLElement, now: Date) {
 	let startDate = new Date(element.dataset.startDate)
 	let endDate = new Date(element.dataset.endDate)
 
@@ -73,8 +73,29 @@ export function displayLocalDate(element: HTMLElement, now: Date) {
 	
 	let airingVerb = "will be airing"
 
+	let remaining = startDate.getTime() - now.getTime()
+	let remainingString = getRemainingTime(remaining)
 
-	// let dayInfo = dayNames[startDate.getDay()] + ", " + monthNames[startDate.getMonth()] + " " + startDate.getDate()
+	// Add "ago" if the date is in the past
+	if(remainingString.startsWith("-")) {
+		remainingString = remainingString.substring(1) + " ago"
+	}
+
+	element.innerText = remainingString
+
+	if(remaining < 0) {
+		airingVerb = "aired"
+	}
+
+	element.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime
+}
+
+export function displayDate(element: HTMLElement, now: Date) {
+	let startDate = new Date(element.dataset.date)
+
+	let h = startDate.getHours()
+	let m = startDate.getMinutes()
+	let startTime = (h <= 9 ? "0" + h : h) + ":" + (m <= 9 ? "0" + m : m)
 	
 	let remaining = startDate.getTime() - now.getTime()
 	let remainingString = getRemainingTime(remaining)
@@ -86,55 +107,5 @@ export function displayLocalDate(element: HTMLElement, now: Date) {
 
 	element.innerText = remainingString
 
-	// let remainingString = seconds + plural(seconds, 'second')
+	element.title = dayNames[startDate.getDay()] + " " + startTime
-
-	// 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"
-	}
-
-	element.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime
 }

styles/forum.scarlet

@@ -42,6 +42,9 @@ post-content-padding-y = 0.75rem
 		.post-toolbar
 			opacity 1
 		
+		.post-date
+			opacity 0.25
+
 .thread-content
 	horizontal
 	ui-element
@@ -119,6 +122,15 @@ post-content-padding-y = 0.75rem
 .post-text-input
 	min-height 200px
 
+.post-date
+	position absolute
+	right -1rem
+	top 0.25rem
+	white-space nowrap
+	opacity 0
+	transform translateX(100%)
+	default-transition
+
 // Old
 
 // #posts