Merge pull request #113 from akira/relative-time

use relative time format

assets/js/app.js

@@ -20,6 +20,7 @@ import { LiveSocket } from "phoenix_live_view";
 import { Table } from "./hooks/table";
 import { RealtimePlot, HistoricalPlot } from "./hooks/plot";
 import { Refresh } from "./hooks/refresh";
+import { Timestamp } from "./hooks/timestamp";
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
@@ -31,6 +32,7 @@ let liveSocket = new LiveSocket("/live", Socket, {
     RealtimePlot: RealtimePlot,
     HistoricalPlot: HistoricalPlot,
     Refresh: Refresh,
+    Timestamp: Timestamp,
   },
 });
 

assets/js/hooks/timestamp.js

@@ -0,0 +1,40 @@
+import { ViewHook } from "phoenix_live_view";
+
+function relativeTime(dateString) {
+  if (
+    typeof window.Intl != "object" ||
+    typeof window.Intl.RelativeTimeFormat != "function"
+  ) {
+    return dateString;
+  }
+
+  let date = new Date(dateString);
+  let value = (date - new Date()) / 1000;
+  const abs = Math.abs(value);
+  let unit;
+  if (abs < 60) {
+    unit = "second";
+  } else if (abs < 60 * 60) {
+    unit = "minute";
+    value = value / 60;
+  } else if (abs < 60 * 60 * 60) {
+    unit = "hour";
+    value = value / (60 * 60);
+  } else {
+    unit = "day";
+    value = value / (60 * 60 * 60);
+  }
+
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return rtf.format(Math.round(value), unit);
+}
+
+/** @type {ViewHook}*/
+let Timestamp = {
+  mounted() {
+    let dateString = this.el.textContent.trim();
+    this.el.innerText = relativeTime(dateString);
+  },
+};
+
+export { Timestamp };

lib/exq_ui_web/live/dead_live/index.ex

@@ -12,7 +12,7 @@ defmodule ExqUIWeb.DeadLive.Index do
         %{
           header: "Last Failed",
           accessor: fn item ->
-            live_redirect(item.scheduled_at,
+            live_redirect(human_time(item.scheduled_at),
               to: Routes.dead_show_path(socket, item.score, item.id),
               class: "nounderline"
             )

lib/exq_ui_web/live/retry_live/index.ex

@@ -12,7 +12,7 @@ defmodule ExqUIWeb.RetryLive.Index do
         %{
           header: "Next Retry",
           accessor: fn item ->
-            live_redirect(item.scheduled_at,
+            live_redirect(human_time(item.scheduled_at),
               to: Routes.retry_show_path(socket, item.score, item.id),
               class: "nounderline"
             )

lib/exq_ui_web/live/scheduled_live/index.ex

@@ -12,7 +12,7 @@ defmodule ExqUIWeb.ScheduledLive.Index do
         %{
           header: "When",
           accessor: fn item ->
-            live_redirect(item.scheduled_at,
+            live_redirect(human_time(item.scheduled_at),
               to: Routes.scheduled_show_path(socket, item.score, item.id),
               class: "nounderline"
             )

lib/exq_ui_web/views/helpers.ex

@@ -18,8 +18,18 @@ defmodule ExqUIWeb.Helpers do
     ""
   end
 
+  def human_time(%DateTime{} = timestamp) do
+    formatted = DateTime.to_iso8601(timestamp)
+
+    content_tag(:span, formatted,
+      "phx-hook": "Timestamp",
+      id: "timestamp-#{:erlang.unique_integer()}",
+      title: formatted
+    )
+  end
+
   def human_time(epoch) when is_number(epoch) do
-    DateTime.from_unix!(round(epoch))
+    human_time(DateTime.from_unix!(round(epoch)))
   end
 
   def date_selector_class(current, days) do