unreadpoly: show request timing and auto-refresh.

unreadpoly/bower.json

@@ -18,6 +18,7 @@
     "platform": "Polymer/platform#~0.3.4",
     "platform-dev": "Polymer/platform-dev#~0.3.4",
     "paper-elements": "Polymer/paper-elements#~0.3.4",
-    "core-elements": "Polymer/core-elements#~0.3.4"
+    "core-elements": "Polymer/core-elements#~0.3.4",
+    "moment": "~2.8.1"
   }
 }

unreadpoly/elements/xinu-email-app.html

@@ -7,6 +7,8 @@
 
 <link rel="import" href="../elements/xinu-email-unread.html">
 
+<script src="../bower_components/moment/moment.js"></script>
+
 <polymer-element name="xinu-email-app">
     <template>
     <style>
@@ -40,15 +42,26 @@ core-header-panel[mode=cover]::shadow #mainContainer {
     height: 120px;
 }
 
+#net-stats {
+    font-size: 12px;
+}
+
 paper-fab#refresh-button {
     background: #080;
+    margin: 10px;
 }
     </style>
-        <core-ajax id="fetch" url="/unread?format=list" auto handleAs="json" response="{{boxes}}">
+        <core-ajax
+            id="fetch"
+            url="/unread?format=list"
+            handleAs="json"
+            response="{{boxes}}"
+            on-core-response="{{handleResponse}}">
         </core-ajax>
         <core-header-panel flex mode="waterfall">
             <div class="core-header" horizontal layout center>
                 <div flex>Unread</div>
+                <div id="net-stats">{{latency}} ms @ {{lastRefresh}}</div>
                 <paper-fab id="refresh-button" icon="refresh" on-click="{{handleRefresh}}" end></paper-fab>
             </div>
             <div class="content">
@@ -58,18 +71,29 @@ paper-fab#refresh-button {
     </template>
 
     <script>
-    Polymer('xinu-email-app', {
+var pollingIntervalMS = 30 * 1000
+Polymer('xinu-email-app', {
   log: function() {
     console.log('xinu-email-app ', arguments);
   },
   ready: function() {
     this.log('ready');
+    this.handleRefresh();
   },
   handleRefresh: function(event, detail, sender) {
+    this.lastRequest = moment();
     this.log('handleRefresh');
     this.$.fetch.go();
+    this.job('refreshLoop', function() { // first arg is the name of the "job"
+        this.handleRefresh();
+    }, pollingIntervalMS);
+  },
+  handleResponse: function(event, detail, sender) {
+    var now = moment();
+    this.lastRefresh = now.format('h:mm:ss');
+    this.latency = moment(now - this.lastRequest).millisecond();
   }
-    });
+});
     </script>
 </polymer-element>