Merge pull request #631 from samueldr/feature/dates

Enhances user-facing dates
This commit is contained in:
Eelco Dolstra 2019-01-23 10:36:40 +01:00 committed by GitHub
commit 804c29703f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 64 additions and 3 deletions

View file

@ -7,13 +7,27 @@ USE Math;
USE mibs=format("%.2f"); USE mibs=format("%.2f");
# Formatted date time, in hydra-local timezone.
BLOCK renderDateTime; # Use only where an HTML element cannot be used.
BLOCK dateTimeText;
date.format(timestamp, '%Y-%m-%d %H:%M:%S'); date.format(timestamp, '%Y-%m-%d %H:%M:%S');
END; 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; ago = date.now - timestamp;
IF ago >= 0 && ago < 60; THEN; IF ago >= 0 && ago < 60; THEN;
ago _ 's ago'; ago _ 's ago';
@ -28,6 +42,17 @@ BLOCK renderRelativeDate;
END; END;
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 %] BLOCK renderProjectName %]
<a [% IF inRow %]class="row-link"[% END %] href="[% c.uri_for('/project' project) %]"><tt>[% project %]</tt></a> <a [% IF inRow %]class="row-link"[% END %] href="[% c.uri_for('/project' project) %]"><tt>[% project %]</tt></a>

View file

@ -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-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/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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

View file

@ -142,3 +142,8 @@ td.step-status span.warn {
color: #aaaa00; color: #aaaa00;
font-weight: bold; font-weight: bold;
} }
.date {
cursor: help;
border-bottom: 1px dotted #999;
}

View file

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

File diff suppressed because one or more lines are too long