Default more info will show recent states

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "83b735c326edc749f0066a79a7eedbd6"
+VERSION = "212470c7842a8715f81fba76a3bd985f"

homeassistant/components/frontend/www_static/polymer/components/loading-box.html

@@ -0,0 +1,25 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
+
+<polymer-element name="loading-box" attributes="text">
+  <template>
+    <style>
+      .text {
+        display: inline-block;
+        line-height: 28px;
+        vertical-align: top;
+        margin-left: 8px;
+      }
+    </style>
+    <div layout='horizontal'>
+      <paper-spinner active="true"></paper-spinner>
+      <div class='text'>{{text}}…</div>
+    </div>
+  </template>
+
+  <script>
+  Polymer({
+    text: "Loading"
+  });
+  </script>
+</polymer-element>

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

@@ -1,29 +1,46 @@
 <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">
 
 <polymer-element name="recent-states" attributes="api stateObj">
   <template>
-    <style>
+    <core-style ref='ha-data-table'></core-style>
 
-    </style>
+    <template if="{{recentStates === null}}">
-
+      <loading-box text="Loading recent states"></loading-box>
-    <h3>State history</h3>
-
-    <template repeat="{{recentStates as state}}">
-      <p>{{state.state}} - {{state.last_changed | relativeHATime}}</p>
     </template>
 
+    <template if="{{recentStates !== null}}">
+      <div layout vertical>
+        <template repeat="{{recentStates as state}}">
+          <div layout justified horizontal class='data-entry'>
+            <div>
+              {{state.state}}
+            </div>
+            <div class='data'>
+              {{state.last_changed | relativeHATime}}
+            </div>
+          </div>
+        </template>
+
+        <template if="{{recentStates.length == 0}}">
+          There are no recent states.
+        </template>
+      </div>
+    </template>
   </template>
   <script>
   Polymer({
-    recentStates: [],
+    recentStates: null,
 
     stateObjChanged: function() {
-      this.recentStates = [];
+      this.recentStates = null;
 
-      this.api.call_api('GET', 'component/recorder/' + this.stateObj.entity_id + '/last_5_states', {}, this.newStates.bind(this));
+      this.api.call_api('GET', 'history/' + this.stateObj.entity_id + '/recent_states', {}, this.newStates.bind(this));
     },
 
     newStates: function(states) {
+      // cut off the first one (which is the current)
       this.recentStates = states.slice(1);
     }
   });

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

@@ -1,22 +1,13 @@
 <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/recent-states.html">
 
-<polymer-element name="more-info-default" attributes="stateObj">
+<polymer-element name="more-info-default" attributes="stateObj api">
 <template>
+  <core-style ref='ha-key-value-table'></core-style>
   <style>
-    .data-entry {
+    .data-entry .value {
-      margin-bottom: 8px;
-    }
-
-    .data-entry:last-child {
-      margin-bottom: 0;
-    }
-
-    .data {
-      padding-left: 10px;
-      text-align: right;
-      word-break: break-all;
       max-width: 200px;
     }
   </style>
@@ -25,24 +16,32 @@
 
     <template repeat="{{key in stateObj.attributes | getKeys}}">
       <div layout justified horizontal class='data-entry'>
-        <div>
+        <div class='key'>
           {{key}}
         </div>
-        <div class='data'>
+        <div class='value'>
           {{stateObj.attributes[key]}}
         </div>
       </div>
     </template>
 
-    <recent-states api="{{api}}" stateObj="{{stateObj}}"></recent-states>
+    <template if="{{hasHistoryComponent}}">
-
+      <h4>Recent states</h4>
+      <recent-states api="{{api}}" stateObj="{{stateObj}}"></recent-states>
+    </template>
   </div>
 </template>
 <script>
   Polymer({
+    hasHistoryComponent: false,
+
     getKeys: function(obj) {
       return Object.keys(obj || {});
     },
+
+    apiChanged: function(oldVal, newVal) {
+      this.hasHistoryComponent = this.api && this.api.hasComponent('history');
+    }
   });
 </script>
 </polymer-element>

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

@@ -1,42 +1,26 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/core-style/core-style.html">
 
 <polymer-element name="more-info-sun" attributes="stateObj api">
 <template>
-  <style>
+  <core-style ref='ha-key-value-table'></core-style>
-    .data-entry {
-      margin-bottom: 8px;
-    }
-
-    .data-entry:last-child {
-      margin-bottom: 0;
-    }
-
-    .data {
-      text-align: right;      
-    }
-
-    .time-ago {
-      color: darkgrey;
-      margin-top: -2px;
-    }
-  </style>
 
   <div layout vertical id='sunData'>
 
     <div layout justified horizontal class='data-entry' id='rising'>
-      <div>
+      <div class='key'>
         Rising {{stateObj.attributes.next_rising | relativeHATime}}
       </div>
-      <div class='data'>
+      <div class='value'>
         {{stateObj.attributes.next_rising | HATimeStripDate}}
       </div>
     </div>
 
     <div layout justified horizontal class='data-entry' id='setting'>
-      <div>
+      <div class='key'>
         Setting {{stateObj.attributes.next_setting | relativeHATime}}
       </div>
-      <div class='data'>
+      <div class='value'>
         {{stateObj.attributes.next_setting | HATimeStripDate}}
       </div>
     </div>

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html

@@ -55,6 +55,25 @@
       html /deep/ .ha-form paper-input:first-child {
         padding-top: 0;
       }
-    </core-style>  
+    </core-style>
+
+    <core-style id='ha-key-value-table'>
+      .data-entry {
+        margin-bottom: 8px;
+      }
+
+      .data-entry:last-child {
+        margin-bottom: 0;
+      }
+
+      .data-entry .key {
+        margin-right: 8px;
+      }
+
+      .data-entry .value {
+        text-align: right;
+        word-break: break-all;
+      }    
+    </core-style>
   </template>
 </polymer-element>