cgit.css: add dynamic age update

This patch updates the emitted "ages" dynamically on the client side.

After updating on completion of the document load, it sets a timer
to update according to the smallest age it found.  If there are any
ages listed in minutes, then it will update again in 10s.  When the
most recent age is in hours, it updates every 5m.  If days, then
every 30m and so on.

This keeps the cost of the dynamic updates at worst once per 10s.
The updates are done entirely on the client side without contact
with the server.

To make this work reliably, since parsing datetimes is unreliable in
browser js, the unix time is added as an attribute to all age spans.

To make that reliable cross-platform, the unix time is treated as a
uint64_t when it is formatted for printing.

The rules for display conversion of the age is aligned with the
existing server-side rules in ui-shared.h.

If the client or server-side time are not synchronized by ntpd etc,
ages shown on the client will not relate to the original ages computed
at the server.  The client updates the ages immediately when the
DOM has finished loading, so in the case the times at the server and
client are not aligned, this patch changes what the user sees on the
page to reflect patch age compared to client time.

If the server and client clocks are aligned, this patch makes no
difference to what is seen on the page.

Signed-off-by: Andy Green <andy@warmcat.com>

diff --git a/cgit.h b/cgit.h
index cf91a96482b00dc1ea69d2a5702c6983fe3d0b65..093abb398c1b0569112c9134b5341cd7e1c4a2ba 100644 (file)
--- a/cgit.h
+++ b/cgit.h
@@ -24,6 +24,7 @@
 #include <utf8.h>
 #include <notes.h>
 #include <graph.h>
+#include <inttypes.h>
 
 /* Add isgraph(x) to Git's sane ctype support (see git-compat-util.h) */
 #undef isgraph

diff --git a/cgit.js b/cgit.js
index bc2ba657d411d7f35a127dec6f5b38538b6ab4e6..d89fdf7763320b549527e56aa211e73b87bdd549 100644 (file)
--- a/cgit.js
+++ b/cgit.js
@@ -347,6 +347,61 @@ function line_range_click(e) {
        line_range_highlight(0);
 }
 
+/* this follows the logic and suffixes used in ui-shared.c */
+
+var age_classes = [ "age-mins", "age-hours", "age-days",    "age-weeks",    "age-months",    "age-years" ];
+var age_suffix =  [ "min.",     "hours",     "days",        "weeks",        "months",        "years",         "years" ];
+var age_next =    [ 60,         3600,        24 * 3600,     7 * 24 * 3600,  30 * 24 * 3600,  365 * 24 * 3600, 365 * 24 * 3600 ];
+var age_limit =   [ 7200,       24 * 7200,   7 * 24 * 7200, 30 * 24 * 7200, 365 * 25 * 7200, 365 * 25 * 7200 ];
+var update_next = [ 10,         5 * 60,      1800,          24 * 3600,      24 * 3600,       24 * 3600,       24 * 3600 ];
+
+function render_age(e, age)
+{
+       var t, n;
+
+       for (n = 0; n < age_classes.length; n++)
+               if (age < age_limit[n])
+                       break;
+
+       t = Math.round(age / age_next[n]) + " " + age_suffix[n];
+
+       if (e.textContent != t) {
+               e.textContent = t;
+               if (n == age_classes.length)
+                       n--;
+               if (e.className != age_classes[n])
+                       e.className = age_classes[n];
+       }
+}
+
+function aging()
+{
+       var n, next = 24 * 3600,
+           now_ut = Math.round((new Date().getTime() / 1000));
+
+       for (n = 0; n < age_classes.length; n++) {
+               var m, elems = document.getElementsByClassName(age_classes[n]);
+
+               if (elems.length && update_next[n] < next)
+                       next = update_next[n];
+
+               for (m = 0; m < elems.length; m++) {
+                       var age = now_ut - elems[m].getAttribute("ut");
+
+                       render_age(elems[m], age);
+               }
+       }
+
+       /*
+        * We only need to come back when the age might have changed.
+        * Eg, if everything is counted in hours already, once per
+        * 5 minutes is accurate enough.
+        */
+
+       window.setTimeout(aging, next * 1000);
+}
+
+
 /* we have to use load, because header images can push the layout vertically */
 window.addEventListener("load", function() {
        line_range_highlight(1);
@@ -358,6 +413,9 @@ document.addEventListener("DOMContentLoaded", function() {
        var e = document.getElementById("linenumbers");
        if (e)
                e.onclick = line_range_click;
+
+       /* we can do the aging on DOM content load since no layout dependency */
+       aging();
 }, false);
 
 window.addEventListener("hashchange", function() {

diff --git a/ui-shared.c b/ui-shared.c
index f5198602527bcde4886ca23fed7d67d5f4ad3d7c..2d79e36ba6febdcbd4b2a34e5a43660d6eb7689d 100644 (file)
--- a/ui-shared.c
+++ b/ui-shared.c
@@ -681,7 +681,7 @@ const struct date_mode *cgit_date_mode(enum date_mode_type type)
 static void print_rel_date(time_t t, int tz, double value,
        const char *class, const char *suffix)
 {
-       htmlf("<span class='%s' title='", class);
+       htmlf("<span class='%s' ut='%" PRIu64 "' title='", class, (uint64_t)t);
        html_attr(show_date(t, tz, cgit_date_mode(DATE_ISO8601)));
        htmlf("'>%.0f %s</span>", value, suffix);
 }