From 355ec3202bd250f90865e90b08e15ea1461746ac Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sat, 1 Jul 2017 13:35:21 +0200 Subject: [PATCH] Improved airing dates --- pages/anime/episode.scarlet | 2 +- pages/animelist/animelist.pixy | 4 +- scripts/AnimeNotifier.ts | 2 + scripts/DateView.ts | 133 ++++++++++++++++++++++++++------- scripts/Utils.ts | 9 ++- styles/embedded.scarlet | 2 +- 6 files changed, 115 insertions(+), 37 deletions(-) diff --git a/pages/anime/episode.scarlet b/pages/anime/episode.scarlet index 16310866..f8353360 100644 --- a/pages/anime/episode.scarlet +++ b/pages/anime/episode.scarlet @@ -12,7 +12,7 @@ flex 1 .episode-airing-date-start - flex-basis 180px + flex-basis 150px text-align right < 800px diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy index cf8eb30c..5952e544 100644 --- a/pages/animelist/animelist.pixy +++ b/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") diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 666a87a5..f51a828b 100644 --- a/scripts/AnimeNotifier.ts +++ b/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) } } diff --git a/scripts/DateView.ts b/scripts/DateView.ts index ad34e15b..2c7360df 100644 --- a/scripts/DateView.ts +++ b/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) { - text += " ago" - airingVerb = "aired" - } else { - element.innerText = text - } + // let dayInfo = dayNames[startDate.getDay()] + ", " + monthNames[startDate.getMonth()] + " " + startDate.getDate() + + 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.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + startTime + " - " + endTime + " your time" + 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" + } + + element.title = "Episode " + element.dataset.episodeNumber + " " + airingVerb + " " + dayNames[startDate.getDay()] + " from " + startTime + " - " + endTime } \ No newline at end of file diff --git a/scripts/Utils.ts b/scripts/Utils.ts index b97017d3..b349dc84 100644 --- a/scripts/Utils.ts +++ b/scripts/Utils.ts @@ -1,7 +1,4 @@ -export function* findAll(className: string) { - // getElementsByClassName failed for some reason. - // TODO: Test getElementsByClassName again. - // let elements = document.querySelectorAll("." + className) +export function* findAll(className: string): IterableIterator { let elements = document.getElementsByClassName(className) for(let i = 0; i < elements.length; ++i) { @@ -11,4 +8,8 @@ export function* findAll(className: string) { export function delay(millis: number, value?: T): Promise { 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') } \ No newline at end of file diff --git a/styles/embedded.scarlet b/styles/embedded.scarlet index 6c37a093..c7bf7e9a 100644 --- a/styles/embedded.scarlet +++ b/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