Event count table on display page.

static/babystats.css

@@ -11,6 +11,8 @@ body {
   right: 0;
 }
 
+/* http://www.colourlovers.com/palette/848743/(%E2%97%95_%E2%80%9D_%E2%97%95) */
+
 .babyStatsContainer {
   background-color: white;
 }
@@ -45,11 +47,15 @@ babyStatsFlipperFront {
 }
 
 babyStatsFlipperBack {
+  display: flex;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
+  padding: 15px;
+  align-items: center;
+  flex-direction: column;
   backface-visibility: hidden;
   transform: rotateY(180deg);
 }
@@ -192,3 +198,46 @@ babyStatsDisplaySleepSummary {
 babyStatsDisplaySleepStatus, babyStatsDisplaySleepDuration {
   font-weight: bold;
 }
+
+babyStatsDisplayEventCounts {
+  margin: 15px;
+  display: table;
+}
+
+babyStatsDisplayEventCountHeader {
+  display: table-row;
+}
+
+babyStatsDisplayEventCountSpacer {
+  display: table-cell;
+}
+
+babyStatsDisplayEventCountHeaderTitle {
+  display: table-cell;
+  padding: 4px;
+  color: rgb(138,155,15);
+  font-weight: bold;
+  border-left: 1px solid rgb(233,127,2);
+}
+
+babyStatsDisplayEventCountGroup {
+  display: table-row;
+}
+
+babyStatsDisplayEventCountTitle {
+  display: table-cell;
+  padding: 4px;
+  text-align: right;
+  color: rgb(73,10,61);
+  font-weight: bold;
+  border-top: 1px solid rgb(233,127,2);
+}
+
+babyStatsDisplayEventCountValue {
+  display: table-cell;
+  padding: 4px;
+  text-align: center;
+  color: rgb(189,21,80);
+  border-top: 1px solid rgb(233,127,2);
+  border-left: 1px solid rgb(233,127,2);
+}

static/babystats.js

@@ -305,7 +305,6 @@ BabyStats.prototype.addStyle_ = function(stylesheet, selector) {
  * @private
  */
 BabyStats.prototype.buildStylesheet_ = function() {
-  // http://www.colourlovers.com/palette/848743/(%E2%97%95_%E2%80%9D_%E2%97%95)
   var style = document.createElement('style');
   document.head.appendChild(style);
 
@@ -489,9 +488,6 @@ BabyStats.prototype.buildLayout_ = function() {
   flipper.appendChild(front);
 
   var back = document.createElement('babyStatsFlipperBack');
-  back.style.display = 'block';
-  back.style.textAlign = 'center';
-  back.style.padding = '15px';
   flipper.appendChild(back);
 
   // Front (writable) side
@@ -526,15 +522,57 @@ BabyStats.prototype.buildLayout_ = function() {
   this.displayChildName_ = document.createElement('babyStatsDisplayChildName');
   back.appendChild(this.displayChildName_);
 
-  this.displaySleepSummary_ = document.createElement('babyStatsDisplaySleepSummary');
+  this.displaySleepSummary_ =
+      document.createElement('babyStatsDisplaySleepSummary');
   back.appendChild(this.displaySleepSummary_);
   this.displaySleepSummary_.appendChild(document.createTextNode('has been '));
-  this.displaySleepStatus_ = document.createElement('babyStatsDisplaySleepStatus');
+  this.displaySleepStatus_ =
+      document.createElement('babyStatsDisplaySleepStatus');
   this.displaySleepSummary_.appendChild(this.displaySleepStatus_);
   this.displaySleepSummary_.appendChild(document.createTextNode(' for '));
-  this.displaySleepDuration_ = document.createElement('babyStatsDisplaySleepDuration');
+  this.displaySleepDuration_ =
+      document.createElement('babyStatsDisplaySleepDuration');
   this.displaySleepSummary_.appendChild(this.displaySleepDuration_);
 
+  var displayEventCounts =
+      document.createElement('babyStatsDisplayEventCounts');
+  back.appendChild(displayEventCounts);
+  var eventCountHeader =
+      document.createElement('babyStatsDisplayEventCountHeader');
+  displayEventCounts.appendChild(eventCountHeader);
+  eventCountHeader.appendChild(
+      document.createElement('babyStatsDisplayEventCountSpacer'));
+  var columns = [
+    'Most recent',
+    'Past 6h',
+    'Past 24h',
+    'Past 7d',
+    'Past 30d',
+    'All time',
+  ];
+  columns.forEach(function(column) {
+    var headerCell =
+        document.createElement('babyStatsDisplayEventCountHeaderTitle');
+    headerCell.textContent = column;
+    eventCountHeader.appendChild(headerCell);
+  }.bind(this));
+
+  this.displayEventCountCells_ = {};
+  this.tiles_.forEach(function(tile) {
+    var group = document.createElement('babyStatsDisplayEventCountGroup');
+    displayEventCounts.appendChild(group);
+    var groupTitle = document.createElement('babyStatsDisplayEventCountTitle');
+    groupTitle.textContent = tile.description;
+    group.appendChild(groupTitle);
+
+    this.displayEventCountCells_[tile.type] = {};
+    columns.forEach(function(column) {
+      var value = document.createElement('babyStatsDisplayEventCountValue');
+      group.appendChild(value);
+      this.displayEventCountCells_[tile.type][column] = value;
+    }.bind(this));
+  }.bind(this));
+
   var flip = document.createElement('img');
   this.addCSSClass_(flip, 'babyStatsFlip');
   flip.src = '/static/flip.svg';
@@ -707,20 +745,58 @@ BabyStats.prototype.updateTileStatus_ = function() {
  * @private
  */
 BabyStats.prototype.updateDisplayPage_ = function() {
+  var now = Date.now() / 1000;
+
   var asleep = this.findTile_('asleep');
   var awake = this.findTile_('awake');
   if (asleep.active || awake.active) {
     this.displaySleepSummary_.style.visibility = 'visible';
     if (asleep.active) {
       this.displaySleepStatus_.textContent = 'asleep';
-      var timeSince = Date.now() / 1000 - asleep.lastSeen;
+      var timeSince = now - asleep.lastSeen;
       this.displaySleepDuration_.textContent = this.secondsToHuman_(timeSince);
     } else {
       this.displaySleepStatus_.textContent = 'awake';
-      var timeSince = Date.now() / 1000 - awake.lastSeen;
+      var timeSince = now - awake.lastSeen;
       this.displaySleepDuration_.textContent = this.secondsToHuman_(timeSince);
     }
   } else {
     this.displaySleepSummary_.style.visibility = 'hidden';
   }
+
+  var cutoffs = [
+    ['Past 6h', 6 * 60 * 60],
+    ['Past 24h', 24 * 60 * 60],
+    ['Past 7d', 7 * 24 * 60 * 60],
+    ['Past 30d', 30 * 24 * 60 * 60],
+    ['All time', Number.MAX_VALUE],
+  ];
+
+  this.tiles_.forEach(function(tile) {
+    if (tile.lastSeen) {
+      var timeSince = now - tile.lastSeen;
+      this.displayEventCountCells_[tile.type]['Most recent'].textContent = (
+        timeSince < 60 ?
+        'just now' :
+        this.secondsToHuman_(timeSince) + ' ago');
+    } else {
+      this.displayEventCountCells_[tile.type]['Most recent'].textContent =
+          'never';
+    }
+
+    var counts = [0, 0, 0, 0, 0];
+    tile.messages.forEach(function(message) {
+      cutoffs.forEach(function(cutoff, i) {
+        var timeSince = now - message.created;
+        if (timeSince < cutoff[1]) {
+          counts[i]++;
+        }
+      }.bind(this));
+    }.bind(this));
+
+    cutoffs.forEach(function(cutoff, i) {
+      this.displayEventCountCells_[tile.type][cutoff[0]].textContent =
+        counts[i];
+    }.bind(this));
+  }.bind(this));
 };