status duration! (and formatting)

cityofaustin · Sep 28, 2016 · fe4fdf6 · fe4fdf6
1 parent c9ae578
commit fe4fdf6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/_layouts/signals-on-flash.html b/_layouts/signals-on-flash.html
@@ -36,8 +36,9 @@ <h3> Traffic Signals Flashing <a href="#about"><i class="fa fa-info-circle toolt
  <tr>
  <th>Intersection ID</th>
  <th>Intersection Name</th>
- <th>Current Status</th>
+ <th>Status</th>
  <th>Status Date-Time</th>
+ <th>Status Duration</th>
  </tr>
  </thead>
  <tbody>

diff --git a/components/js/signals-on-flash.js b/components/js/signals-on-flash.js
@@ -14,12 +14,15 @@
 
  var formatPct = d3.format("%");
 
- var formatDateTime = d3.timeFormat("%a %b %e %H:%M %p");
+ var formatDateTime = d3.timeFormat("%a - %b %e - %I:%M%p");
 
  var formatDate = d3.timeFormat("%x");
 
  var formatTime = d3.timeFormat("%I:%M %p");
 
+ // var formatSeconds = d3.timeFormat("%H:%M:%S");
+ var formatSeconds = d3.timeFormat("%Hhr %Mm %Ss");
+
  var t1 = d3.transition()
  .ease(d3.easeQuad)
  .duration(500);
@@ -364,6 +367,8 @@
  d3.select(this).append("td").html(STATUS_TYPES_READABLE[d.signal_status]);
 
  d3.select(this).append("td").html( formatDateTime( new Date(d.status_datetime) ) );
+
+ d3.select(this).append("td").html( formatDuration(d.status_datetime) );
 
  });
 
@@ -398,4 +403,24 @@ function is_touch_device() { // via https://ctrlq.org/code/19616-detect-touch-
  return (('ontouchstart' in window)
  || (navigator.MaxTouchPoints > 0)
  || (navigator.msMaxTouchPoints > 0));
-}
+}
+
+
+function formatDuration(datetime) {
+
+ var now = new Date();
+
+ var status_date = new Date(datetime);
+
+ var delta = (now - status_date) / 1000;
+
+ var delta_date = new Date(2016, 0, 1, 0, 0, delta);
+
+ return formatSeconds(delta_date);
+
+}
+
+
+
+
+