Implement pretty parameter timestamp

client/components/parameter.js

@@ -5,6 +5,7 @@ import * as taskQueue from "../task-queue";
 import * as store from "../store";
 import * as expression from "../../common/expression";
 import memoize from "../../common/memoize";
+import timeAgo from "../timeago";
 
 const memoizedParse = memoize(expression.parse);
 
@@ -72,7 +73,19 @@ const component = {
         "✎"
       );
 
-    return m("span.parameter-value", { title: timestamp }, value, edit);
+    return m(
+      "span.parameter-value",
+      {
+        onmouseover: e => {
+          e.redraw = false;
+          const now = Date.now();
+          const localeString = new Date(timestamp).toLocaleString();
+          e.target.title = `${localeString} (${timeAgo(now - timestamp)})`;
+        }
+      },
+      value,
+      edit
+    );
   }
 };
 

client/timeago.js

@@ -0,0 +1,33 @@
+"use strict";
+
+const UNITS = {
+  year: 12 * 30 * 24 * 60 * 60 * 1000,
+  month: 30 * 24 * 60 * 60 * 1000,
+  day: 24 * 60 * 60 * 1000,
+  hour: 60 * 60 * 1000,
+  minute: 60 * 1000,
+  second: 1000
+};
+
+function timeAgo(dtime) {
+  let res = "";
+  let level = 2;
+
+  for (const [u, t] of Object.entries(UNITS))
+    if (dtime >= t) {
+      let n;
+      if (level > 1) {
+        n = Math.floor(dtime / t);
+        dtime -= n * t;
+      } else {
+        n = Math.round(dtime / t);
+      }
+      if (n > 1) res += `${n} ${u}s `;
+      else res += `${n} ${u} `;
+      if (!--level) break;
+    }
+
+  return res + "ago";
+}
+
+export default timeAgo;