diff --git a/app/javascript/controllers/local_time_controller.js b/app/javascript/controllers/local_time_controller.js index bd02d8598..512169949 100644 --- a/app/javascript/controllers/local_time_controller.js +++ b/app/javascript/controllers/local_time_controller.js @@ -11,6 +11,7 @@ export default class extends Controller { this.shortDateFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" }) this.dateTimeFormatter = new Intl.DateTimeFormat(undefined, { timeStyle: "short", dateStyle: "short" }) this.agoFormatter = new AgoFormatter() + this.daysAgoFormatter = new DaysAgoFormatter() this.indaysFormatter = new InDaysFormatter() } @@ -42,6 +43,10 @@ export default class extends Controller { this.#formatTime(this.agoFormatter, target) } + daysAgoTargetConnected(target) { + this.#formatTime(this.daysAgoFormatter, target) + } + indaysTargetConnected(target) { this.#formatTime(this.indaysFormatter, target) } @@ -87,6 +92,22 @@ class AgoFormatter { } } +class DaysAgoFormatter { + format(dt) { + const now = new Date() + + const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()) + const startOfGivenDay = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()) + + const msPerDay = 1000 * 60 * 60 * 24 + const dayDiff = Math.floor((startOfToday - startOfGivenDay) / msPerDay) + + if (dayDiff === 0) return "Today" + if (dayDiff === 1) return "Yesterday" + return `in ${dayDiff} days` + } +} + class InDaysFormatter { format(dt) { const target = this.#beginningOfDay(dt) diff --git a/app/views/bubbles/_card_mini.html.erb b/app/views/bubbles/_card_mini.html.erb index 2bb4cdf07..18211e6c8 100644 --- a/app/views/bubbles/_card_mini.html.erb +++ b/app/views/bubbles/_card_mini.html.erb @@ -6,14 +6,9 @@