From 7e0a4f050af7855a2dbd5fcc368e81037311cb76 Mon Sep 17 00:00:00 2001
From: Bill Thiede <git@xinu.tv>
Date: Mon, 4 Aug 2014 22:08:38 -0700
Subject: [PATCH] unreadpoly: show request timing and auto-refresh.

---
 unreadpoly/bower.json                   |  3 +-
 unreadpoly/elements/xinu-email-app.html | 50 ++++++++++++++++++-------
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/unreadpoly/bower.json b/unreadpoly/bower.json
index 92f777a..434b1ac 100644
--- a/unreadpoly/bower.json
+++ b/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"
   }
 }
diff --git a/unreadpoly/elements/xinu-email-app.html b/unreadpoly/elements/xinu-email-app.html
index 09e0d0c..7faf229 100644
--- a/unreadpoly/elements/xinu-email-app.html
+++ b/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', {
-      log: function() {
-        console.log('xinu-email-app ', arguments);
-      },
-      ready: function() {
-        this.log('ready');
-      },
-      handleRefresh: function(event, detail, sender) {
-        this.log('handleRefresh');
-        this.$.fetch.go();
-      }
-    });
+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>