Milo: Add timestamp name and tooltip

milo/appengine/frontend/static/common/js/time.js

Index: milo/appengine/frontend/static/common/js/time.js
diff --git a/milo/appengine/frontend/static/common/js/time.js b/milo/appengine/frontend/static/common/js/time.js
index c70ed97664036b96d416fce6d93b71598dafc4c2..8726ef5d890ff4ea29e96acd117bfcc5daf00e6b 100644
--- a/milo/appengine/frontend/static/common/js/time.js
+++ b/milo/appengine/frontend/static/common/js/time.js
@@ -3,6 +3,7 @@
 // that can be found in the LICENSE file.
 
 // A Series of time based utilites for Milo.
+// Requires: moment.js, moment-timezone.js, jquery, jquery-ui
 
 
 (function(window) {
@@ -10,28 +11,49 @@
 
   var milo = window.milo || {};
 
+  milo.tz = moment.tz.guess();
+
   /**
    * Given a Date, return a time string in the user's local timezone.
+   * Also return the time string in relative time from now, MTV time, and UTC
+   * time.
    */
   milo.formatDate = function(t) {
-    if (!t || t.toString() == "Invalid Date") {
-        return null;
+    var mt = moment.tz(t, milo.tz);
+    if (!mt.isValid()) {
+      return null;
     }
-    var shortDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    var hover = mt.fromNow();
+    hover += "\n" + moment.tz(mt, "America/Los_Angeles").format("YYYY-MM-DD LT [(MTV)]");
+    hover += "\n" + moment.tz(mt, "UTC").format("YYYY-MM-DD LT [(UTC)]");
 
-    var month = (t.getMonth() + 1);
-    if (month < 10) {
-      month = '0' + month;
-    }
-    var date = t.getDate();
-    if (date < 10) {
-      date = '0' + date;
+    return {
+      main: mt.format("YYYY-MM-DD LT (z)"),
+      hover: hover
     }
-    var s = shortDayNames[t.getDay()] + ', ';
-    s += t.getFullYear() + '-' + month + '-' + date + ' ';
-    s += t.toLocaleTimeString() + ' (local time)';
+  };
 
-    return s;
+  /**
+   * Given two Dates (or a Date and null, prepresenting "now"), return
+   * a duration string, with a hover string of the start/end time int he user's

[nodir, 2017/04/29 01:26:40]

in the

[hinoka, 2017/05/02 03:33:14]

Done.

+   * timezone and locale.
+   */
+  milo.formatDuration = function(start, end) {
+    var st = moment.tz(start, milo.tz);
+    if (!st.isValid()) {
+      return null;
+    }
+    var hover = st.format("[Started: ] YYYY-MM-DD LT (z)")
+    hover += "\nEnded: "
+    if (end == null) {
+      hover += "N/A";
+    } else {
+      var et =  moment.tz(end, milo.tz)
+      if (et.isValid()) {

[nodir, 2017/04/29 01:26:40]

if start time is invalid, we return null, but if the end time is invalid, we
return an incomplete hover. This is inconsistent. What about returning null if
!et.IsValid() ?

[hinoka, 2017/05/02 03:33:13]

Done.

+        hover += et.format("YYYY-MM-DD LT (z)");
+      }
+    }
+    return hover;
   };
 
   milo.makeTimesLocal = function() {
@@ -44,16 +66,32 @@
         var date = new Date(parseInt(timestamp, 10));
         var newTimestamp = milo.formatDate(date);
         if (newTimestamp != null) {
-          span.innerText = newTimestamp;
-          span.setAttribute("title", oldTimestamp)
+          span.innerText = newTimestamp.main;
+          span.setAttribute("title", newTimestamp.hover);
         }
-      }
-      catch (e) {
+      } catch (e) {
         console.error('could not convert time of span', span, 'to local:', e)
       }
     }
   };
 
+  milo.annotateDurations = function() {
+    var durations = document.getElementsByClassName('duration');
+    for (var i = 0; i < durations.length; i++) {
+      var dur = durations[i];
+      try {
+        var start = dur.getAttribute('data-starttime');
+        var end = dur.getAttribute('data-endtime');
+        var hover = milo.formatDuration(start, end);
+        if (hover != null) {
+          dur.setAttribute("title", hover);
+        }
+      } catch (e) {
+        console.error('could not annotated duration', dur, e)

[nodir, 2017/04/29 01:26:40]

s/annotated/annotate/

[hinoka, 2017/05/02 03:33:13]

Done.

+      }
+    }
+  }
+
   window.milo = milo;
 
 }(window));