Add a relative time component to frontend

homeassistant/components/frontend/www_static/polymer/components/recent-states.html

@@ -1,6 +1,8 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/core-style/core-style.html">
+
 <link rel="import" href="./loading-box.html">
+<link rel="import" href="relative-ha-datetime.html">
 
 <polymer-element name="recent-states" attributes="stateObj">
   <template>
@@ -18,7 +20,8 @@
               {{state.state}}
             </div>
             <div class='data'>
-              {{state.last_changed | relativeHATime}}
+              <relative-ha-datetime datetime="{{stateObj.last_changed}}">
+              </relative-ha-datetime>
             </div>
           </div>
         </template>

homeassistant/components/frontend/www_static/polymer/components/relative-ha-datetime.html

@@ -0,0 +1,41 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../resources/moment-js.html">
+
+<polymer-element name="relative-ha-datetime" attributes="datetime">
+  <template>
+    <span>{{ relativeTime }}</span>
+  </template>
+  <script>
+  var UPDATE_INTERVAL = 60000; // 60 seconds
+
+  var parseDateTime = window.hass.util.parseDateTime;
+
+  Polymer({
+    relativeTime: "",
+    parsedDateTime: null,
+
+    created: function() {
+      this.updateRelative = this.updateRelative.bind(this);
+    },
+
+    attached: function() {
+      this._interval = setInterval(this.updateRelative, UPDATE_INTERVAL);
+    },
+
+    detached: function() {
+      clearInterval(this._interval);
+    },
+
+    datetimeChanged: function(oldVal, newVal) {
+      this.parsedDateTime = newVal ? parseDateTime(newVal) : null;
+
+      this.updateRelative();
+    },
+
+    updateRelative: function() {
+      this.relativeTime = this.parsedDateTime ? moment(this.parsedDateTime).fromNow() : "";
+    },
+  });
+  </script>
+</polymer-element>

homeassistant/components/frontend/www_static/polymer/components/state-info.html

@@ -3,6 +3,7 @@
 <link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="state-badge.html">
+<link rel="import" href="relative-ha-datetime.html">
 
 <polymer-element name="state-info" attributes="stateObj" noscript>
   <template>
@@ -36,8 +37,8 @@
         </div>
 
         <div class="time-ago">
-          <core-tooltip label="{{stateObj.last_changed}}" position="bottom">
+          <core-tooltip label="{{stateObj.lastChanged}}" position="bottom">
-            {{stateObj.relativeLastChanged}}
+            <relative-ha-datetime datetime="{{stateObj.lastChanged}}"></relative-ha-datetime>
           </core-tooltip>
         </div>
         

homeassistant/components/frontend/www_static/polymer/home-assistant-api.html

@@ -1,7 +1,6 @@
 <link rel="import" href="./bower_components/polymer/polymer.html">
 
 <script src="./home-assistant-js/dist/homeassistant.min.js"></script>
-<script src="./bower_components/moment/moment.js"></script>
 
 <link rel="import" href="./dialogs/more-info-dialog.html">
 
@@ -10,10 +9,11 @@
   var DOMAINS_WITH_MORE_INFO = ['light', 'group', 'sun', 'configurator'];
 
   // Register some polymer filters
-  PolymerExpressions.prototype.relativeHATime = function(timeString) {
+
+  PolymerExpressions.prototype.HATimeToDate = function(timeString) {
     if (!timeString) return;
 
-    return moment(window.hass.util.parseDateTime(timeString)).fromNow();
+    return window.hass.util.parseDateTime(timeString);
   };
 
   PolymerExpressions.prototype.HATimeStripDate = function(timeString) {
@@ -45,12 +45,6 @@
         }
       }
     },
-
-    relativeLastChanged: {
-      get: function() {
-        return moment(this.lastChangedAsDate).fromNow();
-      }
-    },
   });
 
   var state,

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html

@@ -1,6 +1,8 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/core-style/core-style.html">
 
+<link rel="import" href="../components/relative-ha-datetime.html">
+
 <polymer-element name="more-info-sun" attributes="stateObj">
 <template>
   <core-style ref='ha-key-value-table'></core-style>
@@ -9,7 +11,7 @@
 
     <div layout justified horizontal class='data-entry' id='rising'>
       <div class='key'>
-        Rising {{stateObj.attributes.next_rising | relativeHATime}}
+        Rising <relative-ha-datetime datetime="{{stateObj.attributes.next_rising}}"></relative-ha-datetime>
       </div>
       <div class='value'>
         {{stateObj.attributes.next_rising | HATimeStripDate}}
@@ -18,7 +20,7 @@
 
     <div layout justified horizontal class='data-entry' id='setting'>
       <div class='key'>
-        Setting {{stateObj.attributes.next_setting | relativeHATime}}
+        Setting <relative-ha-datetime datetime="{{stateObj.attributes.next_setting}}"></relative-ha-datetime>
       </div>
       <div class='value'>
         {{stateObj.attributes.next_setting | HATimeStripDate}}

homeassistant/components/frontend/www_static/polymer/resources/moment-js.html

@@ -0,0 +1,5 @@
+<!--
+  Wrapping JS in an HTML file will prevent it from being loaded twice.
+-->
+
+<script src="../bower_components/moment/moment.js"></script>