Vehicles in list show time since last pos

* The 'received' field now indicates how fresh position is
* Human friendly delta time between now and when the position
  was originally received

Author: rossengeorgiev

css/main.css

@@ -369,6 +369,10 @@ header > div {
     text-decoration: none;
     color: #00A3D3;
 }
+#main .data dl > dt.receivers {
+    font-size: 12px;
+    font-weight: normal;
+}
 
 .flatpage {
     margin-top: 55px;
@@ -575,13 +579,6 @@ header > div {
         line-height: 11px;
         font-size: 11px;
     }
-    #main .data dl > dt.receivers {
-        font-size: 10px;
-        font-weight: normal;
-    }
-    #main .data dl > dd.receivers {
-        font-size: 10px;
-    }
     #main .row .data img {
         right: 5%;
         top: 50px;
@@ -624,13 +621,6 @@ header > div {
         line-height: 11px;
         font-size: 11px;
     }
-    #main .data dl > dt.receivers {
-        font-size: 10px;
-        font-weight: normal;
-    }
-    #main .data dl > dd.receivers {
-        font-size: 10px;
-    }
     #main .row .header .graph {
         width: 150px;
         height: 40px;

js/app.js

@@ -258,37 +258,62 @@ var twoZeroPad = function(n) {
     return (n.length<2) ? '0'+n : n;
 }
 
-var updateTimebox = function(date) {
+// runs every second
+var updateTime = function(date) {
+    // update timebox
     var elm = $("#timebox.present");
-    if(elm.length < 1) return;
-
-    var a,b,c,d,e,f,g,z;
-
-    a = date.getUTCFullYear();
-    b = twoZeroPad(date.getUTCMonth()+1); // months 0-11
-    c = twoZeroPad(date.getUTCDate());
-    e = twoZeroPad(date.getUTCHours());
-    f = twoZeroPad(date.getUTCMinutes());
-    g = twoZeroPad(date.getUTCSeconds());
-
-    elm.find(".current").text("Current: "+a+'-'+b+'-'+c+' '+e+':'+f+':'+g+" UTC");
-
-    a = date.getFullYear();
-    b = twoZeroPad(date.getMonth()+1); // months 0-11
-    c = twoZeroPad(date.getDate());
-    e = twoZeroPad(date.getHours());
-    f = twoZeroPad(date.getMinutes());
-    g = twoZeroPad(date.getSeconds());
-    z = date.getTimezoneOffset() / -60;
+    if(elm.length > 0) {
+        var a,b,c,d,e,f,g,z;
+
+        a = date.getUTCFullYear();
+        b = twoZeroPad(date.getUTCMonth()+1); // months 0-11
+        c = twoZeroPad(date.getUTCDate());
+        e = twoZeroPad(date.getUTCHours());
+        f = twoZeroPad(date.getUTCMinutes());
+        g = twoZeroPad(date.getUTCSeconds());
+
+        elm.find(".current").text("Current: "+a+'-'+b+'-'+c+' '+e+':'+f+':'+g+" UTC");
+
+        a = date.getFullYear();
+        b = twoZeroPad(date.getMonth()+1); // months 0-11
+        c = twoZeroPad(date.getDate());
+        e = twoZeroPad(date.getHours());
+        f = twoZeroPad(date.getMinutes());
+        g = twoZeroPad(date.getSeconds());
+        z = date.getTimezoneOffset() / -60;
+
+        elm.find(".local").text("Local: "+a+'-'+b+'-'+c+' '+e+':'+f+':'+g+" UTC"+((z<0)?"-":"+")+z);
+    }
 
-    elm.find(".local").text("Local: "+a+'-'+b+'-'+c+' '+e+':'+f+':'+g+" UTC"+((z<0)?"-":"+")+z);
+    // update friendly delta time fields
+    var elm = $(".friendly-dtime");
+    if(elm.length > 0) {
+        var now = new Date().getTime();
+
+        elm.each(function(k,v) {
+            var e = $(v);
+            var ts = e.attr('data-timestamp');
+            var dt = Math.floor((now - ts) / 1000);
+            if(dt < 0) return;
+
+            if(dt < 60) e.text(dt+'s ago'); // less than a minute
+            else if(dt < 3600) e.text(Math.floor(dt/60)+'m ago'); // less than an hour
+            else if(dt < 86400) { // less than a day
+                dt = Math.floor(dt/60);
+                e.text(Math.floor(dt/60)+'h '+(dt % 60)+'m ago');
+            } else {
+                dt = Math.floor(dt/3600); // hours
+                e.text(Math.floor(dt/24)+'d '+(dt % 24)+'h ago');
+            }
+        });
+    }
 }
 
 
 $(window).ready(function() {
     // refresh timebox
     setInterval(function() {
-        updateTimebox(new Date());
+        updateTime(new Date());
     }, 1000);
 
     // resize elements if needed

js/tracker.js

@@ -291,6 +291,23 @@ function roundNumber(number, digits) {
   return rndedNum;
 }
 
+function stringToDateUTC(text) {
+    return new Date(text.replace(" ","T") + "Z");
+}
+
+function formatDate(date) {
+    var a,b,c,d,e,f,g,z;
+
+    a = date.getFullYear();
+    b = twoZeroPad(date.getMonth()+1); // months 0-11
+    c = twoZeroPad(date.getDate());
+    e = twoZeroPad(date.getHours());
+    f = twoZeroPad(date.getMinutes());
+    g = twoZeroPad(date.getSeconds());
+
+    return a+'-'+b+'-'+c+' '+e+':'+f+':'+g;
+}
+
 function updateVehicleInfo(index, newPosition) {
   var vehicle = vehicles[index];
   var latlng = new google.maps.LatLng(newPosition.gps_lat, newPosition.gps_lon);
@@ -334,7 +351,7 @@ function updateVehicleInfo(index, newPosition) {
                      && newPosition.gps_alt < 350              // and is under 350 meters altitude
                  ) || (                                     // or
                      newPosition.gps_alt < 600                 // under 600m and has no position update for more than 30 minutes
-                     && (new Date((new Date()).toISOString())).getTime() - (new Date(newPosition.gps_time + " UTC")).getTime() > 1800000
+                     && (new Date().getTime() - convert_time(newPosition.gps_time)) > 1800000
                  );
 
     if(landed) {
@@ -408,13 +425,14 @@ function updateVehicleInfo(index, newPosition) {
            + '</div>' // right
            + '</div>' // data
            + '';
-  var c    = '<dt class="receivers">Recieved by:</dt><dd class="receivers">'
+  var c    = '<dt class="receivers">Recieved <i class="friendly-dtime" data-timestamp='+(convert_time(newPosition.server_time))+'></i> by:</dt><dd class="receivers">'
            + newPosition.callsign.split(",").join(", ") + '</dd>'
 
   if(!newPosition.callsign) c = '';
 
+
   // mid for portrait
-  var p    = '<dt>'+newPosition.gps_time+'</dt><dd>datetime</dd>'
+  var p    = '<dt>'+formatDate(stringToDateUTC(newPosition.gps_time))+'</dt><dd>datetime (local)</dd>'
            + '<dt>'+coords_text+'</dt><dd>coordinates</dd>'
            + c // receivers if any
            + '</dl>'
@@ -428,7 +446,7 @@ function updateVehicleInfo(index, newPosition) {
   // mid for landscape
   var l    = ((vehicle.vehicle_type == "car") ? '' : '<dt>'+ascent_text+' '+hrate_text+'</dt><dd>rate v|h</dd>')
            + '<dt>'+text_alt+' ('+text_alt_max+')</dt><dd>altitude (max)</dd>'
-           + '<dt>'+newPosition.gps_time+'</dt><dd>datetime</dd>'
+           + '<dt>'+formatDate(stringToDateUTC(newPosition.gps_time))+'</dt><dd>datetime (local)</dd>'
            + '<dt>'+coords_text+'</dt><dd>coordinates</dd>'
            + habitat_data(newPosition.data)
            + c // receivers if any
@@ -539,8 +557,8 @@ function updatePolyline(vehicle_index) {
     }
 }
 
-function convert_time(gps_time) {
-  return (new Date(gps_time)).getTime() / 1000; // seconds since 1/1/1970 @ 12:00 AM
+function convert_time(text) {
+  return stringToDateUTC(text).getTime();
 }
 
 var GChartString = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -559,8 +577,6 @@ function GChartEncodeData(valueArray,maxValue) {
 }
 
 function addPosition(position) {
-    position.gps_time = position.gps_time.replace(/(\d+)-(\d+)-(\d+)/,"$2/$3/$1");
-
     // check if the vehicle is already in the list, if not create a new item
     if($.inArray(position.vehicle, vehicle_names) == -1) {
         vehicle_names.push(position.vehicle);
@@ -859,7 +875,7 @@ function graphAddLastPosition(idx) {
     vehicles[idx].graph_data_updated = true;
     var data = vehicles[idx].graph_data;
     var new_data = vehicles[idx].curr_position;
-    var date = new Date(new_data.gps_time);
+    var date = new Date(convert_time(new_data.gps_time));
     var tz_offset_milis = date.getTimezoneOffset() * 60000;
     var ts = date.getTime() - tz_offset_milis;