Merge pull request #631 from samueldr/feature/dates

Enhances user-facing dates

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>

src/root/layout.tt

@@ -13,6 +13,7 @@
 
     <script type="text/javascript" src="[% c.uri_for("/static/js/jquery/jquery-1.12.3.min.js") %]"></script>
     <script type="text/javascript" src="[% c.uri_for("/static/js/jquery/jquery-ui-1.10.4.min.js") %]"></script>
+    <script type="text/javascript" src="[% c.uri_for("/static/js/moment/moment-2.24.0.min.js") %]"></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 

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;
+}

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 = {};