From a16d0c7d6b220db0bd9cbf5e3125a30df3a6783a Mon Sep 17 00:00:00 2001
From: Samuel Dionne-Riel <samuel@dionne-riel.com>
Date: Mon, 21 Jan 2019 19:58:53 -0500
Subject: [PATCH] Makes user-facing dates local when possible

Also ensures it makes available the hydra timezone in the title of the
dates.
---
 src/root/common.tt            | 31 ++++++++++++++++++++++++++++---
 src/root/static/css/hydra.css |  5 +++++
 src/root/static/js/common.js  | 29 +++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/root/common.tt b/src/root/common.tt
index 47b26e86..5ea82d04 100644
--- a/src/root/common.tt
+++ b/src/root/common.tt
@@ -7,13 +7,27 @@ USE Math;
 
 USE mibs=format("%.2f");
 
-
-BLOCK renderDateTime;
+# Formatted date time, in hydra-local timezone.
+# Use only where an HTML element cannot be used.
+BLOCK dateTimeText;
 date.format(timestamp, '%Y-%m-%d %H:%M:%S');
 END;
 
+# HTML-rendered date. Formatted in hydra-local timezone.
+# It is enhanced with JavaScript to show user-local and UTC time zones.
+BLOCK renderDateTime %]
+<time [% HTML.attributes(
+    "data-timestamp" => timestamp,
+    title => date.format(timestamp, '%Y-%m-%d %H:%M:%S (%Z)'),
+    datetime => date.format(timestamp, "%Y-%m-%dT%H:%M:%SZ", gmt => 1),
+) %] class="date is-absolute">
+[% INCLUDE dateTimeText %]
+</time>
+[% END;
 
-BLOCK renderRelativeDate;
+# Relative date, as text.
+# Use only where an HTML element cannot be used.
+BLOCK relativeDateText;
   ago = date.now - timestamp;
   IF ago >= 0 && ago < 60; THEN;
     ago _ 's ago';
@@ -28,6 +42,17 @@ BLOCK renderRelativeDate;
   END;
 END;
 
+# HTML-rendered relative date.
+# It is enhanced with JavaScript to show user-local and UTC time zones.
+BLOCK renderRelativeDate %]
+<time [% HTML.attributes(
+    "data-timestamp" => timestamp,
+    title => date.format(timestamp, '%Y-%m-%d %H:%M:%S (%Z)'),
+    datetime => date.format(timestamp, "%Y-%m-%dT%H:%M:%SZ", gmt => 1),
+) %] class="date is-relative">
+[% INCLUDE relativeDateText %]
+</time>
+[% END;
 
 BLOCK renderProjectName %]
 <a [% IF inRow %]class="row-link"[% END %] href="[% c.uri_for('/project' project) %]"><tt>[% project %]</tt></a>
diff --git a/src/root/static/css/hydra.css b/src/root/static/css/hydra.css
index a871485e..c3bd9946 100644
--- a/src/root/static/css/hydra.css
+++ b/src/root/static/css/hydra.css
@@ -142,3 +142,8 @@ td.step-status span.warn {
     color: #aaaa00;
     font-weight: bold;
 }
+
+.date {
+	cursor: help;
+	border-bottom: 1px dotted #999;
+}
diff --git a/src/root/static/js/common.js b/src/root/static/js/common.js
index baa74ae6..e9c5e576 100644
--- a/src/root/static/js/common.js
+++ b/src/root/static/js/common.js
@@ -97,6 +97,35 @@ $(document).ready(function() {
             }
         });
     });
+
+    /* Makes dates more user friendly. */
+    // Friendly date format
+    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
+    // Local timezone offset to display.
+    var tz = moment().format("Z");
+    $("time.date").each(function(i, el) {
+        var el = $(el);
+        var localTime = moment(el.data("timestamp"), "%X");
+        var hydraTime = el.attr("title");
+        if (el.hasClass("is-absolute")) {
+            el.attr( "title", [
+                "Adjusted to local time (" + tz + ")",
+                "Other timezones:",
+                "  UTC: " + localTime.clone().utc().format(DATE_FORMAT),
+                "  As Hydra reported: " + hydraTime,
+            ].join("\n"));
+            el.text(localTime.format(DATE_FORMAT));
+            el.addClass("is-local");
+        }
+        else if (el.hasClass("is-relative")) {
+            el.attr( "title", [
+                "Local (" + tz + "): " + localTime.format(DATE_FORMAT),
+                "UTC: " + localTime.clone().utc().format(DATE_FORMAT),
+                "As Hydra reported: " + hydraTime,
+            ].join("\n"));
+            el.addClass("is-local");
+        }
+    });
 });
 
 var tabsLoaded = {};