Get State History support from Store

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "d7b5242370bf59018a6a4a2163d7daea"
+VERSION = "b08c8203bd0a78ae1b1b2eec9f62f8b4"

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

@@ -2,7 +2,7 @@
 
 <link rel="import" href="../bower_components/google-apis/google-jsapi.html">
 
-<polymer-element name="state-timeline" attributes="stateObj api">
+<polymer-element name="state-timeline" attributes="stateHistory">
   <template>
     <style>
     :host {
@@ -17,7 +17,7 @@
   <script>
   Polymer({
     apiLoaded: false,
-    stateData: null,
+    stateHistory: null,
 
     googleApiLoaded: function() {
       google.load("visualization", "1", {
@@ -29,32 +29,12 @@
       });
     },
 
-    stateObjChanged: function(oldVal, newVal) {
-      // update data if we get a new stateObj
-      if (!oldVal || (newVal && oldVal.entity_id === newVal.entity_id)) {
-        this.drawChart();
-      } else {
-        this.fetchData();
-      }
-    },
-
-    fetchData: function() {
-      this.stateData = null;
-
-      var url = 'history/period';
-
-      if (this.stateObj) {
-        url += '?filter_entity_id=' + this.stateObj.entity_id;
-      }
-
-      window.hass.callApi('GET', url).then(function(stateData) {
-          this.stateData = stateData;
-          this.drawChart();
-        }.bind(this));
+    stateHistoryChanged: function() {
+      this.drawChart();
     },
 
     drawChart: function() {
-      if (!this.apiLoaded || this.stateData === null) {
+      if (!this.apiLoaded || !this.stateHistory) {
         return;
       }
 
@@ -82,8 +62,12 @@
           stateTimeToDate(tillState.last_changed)]);
       };
 
-      // this.stateData is a list of lists of sorted state objects
-      this.stateData.forEach(function(stateInfo) {
+      // people can pass in history of 1 entityId or a collection.
+      var stateHistory = _.isArray(this.stateHistory[0]) ?
+                           this.stateHistory : [this.stateHistory];
+
+      // stateHistory is a list of lists of sorted state objects
+      stateHistory.forEach(function(stateInfo) {
         var baseState = new window.hass.stateModel(stateInfo[0]);
 
         var prevRow = null;
@@ -101,20 +85,19 @@
       }.bind(this));
 
       chart.draw(dataTable, {
-        height: 55 + this.stateData.length * 42,
+        height: 55 + stateHistory.length * 42,
 
         // interactive properties require CSS, the JS api puts it on the document
         // instead of inside our Shadow DOM.
         enableInteractivity: false,
 
         timeline: {
-          showRowLabels: this.stateData.length > 1
+          showRowLabels: stateHistory.length > 1
         },
 
         hAxis: {
           format: 'H:mm'
         },
-        // colors: ['#CCC', '#03a9f4']
       });
     },
 

homeassistant/components/frontend/www_static/polymer/dialogs/more-info-dialog.html

@@ -17,7 +17,7 @@
     <div>
       <state-card-content stateObj="{{stateObj}}" class='title-card'>
       </state-card-content>
-      <state-timeline stateObj="{{stateObj}}"></state-timeline>
+      <state-timeline stateHistory="{{stateHistory}}"></state-timeline>
       <more-info-content stateObj="{{stateObj}}"></more-info-content>
     </div>
   </ha-action-dialog>
@@ -26,11 +26,39 @@
 <script>
 Polymer({
   stateObj: {},
+  stateHistory: null,
 
   observe: {
     'stateObj.attributes': 'reposition'
   },
 
+  ready: function() {
+    this.stateHistoryStoreChanged = this.stateHistoryStoreChanged.bind(this);
+
+    window.hass.stateHistoryStore.addChangeListener(this.stateHistoryStoreChanged);
+  },
+
+  detached: function() {
+    window.hass.stateHistoryStore.removeChangeListener(this.stateHistoryStoreChanged);
+  },
+
+  stateHistoryStoreChanged: function() {
+    if (this.stateObj.entityId) {
+      this.stateHistory = window.hass.stateHistoryStore.get(this.stateObj.entityId);
+    } else {
+      this.stateHistory = null;
+    }
+  },
+
+  stateObjChanged: function() {
+    if (this.stateObj.entityId &&
+        window.hass.stateHistoryStore.isStale(this.stateObj.entityId)) {
+      window.hass.stateHistoryActions.fetch(this.stateObj.entityId);
+    }
+
+    this.stateHistoryStoreChanged();
+  },
+
   /**
    * Whenever the attributes change, the more info component can
    * hide or show elements. We will reposition the dialog.

homeassistant/components/frontend/www_static/polymer/layouts/partial-history.html

@@ -7,9 +7,13 @@
 <polymer-element name="partial-history" attributes="narrow togglePanel">
 <template>
   <style>
-    state-timeline {
+    .content {
       background-color: white;
     }
+
+    .content.wide {
+      padding: 8px;
+    }
   </style>
   <partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
     <span header-title>History</span>
@@ -19,32 +23,37 @@
         on-click="{{handleRefreshClick}}"></paper-icon-button>
     </span>
 
-    <state-timeline id='timeline'></state-timeline>
+    <div flex class="{{ {content: true, narrow: narrow, wide: !narrow} | tokenList }}">
+      <state-timeline stateHistory="{{stateHistory}}"></state-timeline>
+    </div>
   </partial-base>
 </template>
 <script>
   Polymer({
+    stateHistory: null,
+
     ready: function() {
-      this.$.timeline.fetchData();
+      this.stateHistoryStoreChanged = this.stateHistoryStoreChanged.bind(this);
 
-      // this.stateStoreChanged = this.stateStoreChanged.bind(this);
-      // window.hass.stateStore.addChangeListener(this.stateStoreChanged);
+      window.hass.stateHistoryStore.addChangeListener(this.stateHistoryStoreChanged);
 
-      // this.stateStoreChanged();
+      if (window.hass.stateHistoryStore.isStale()) {
+        window.hass.stateHistoryActions.fetchAll();
+      }
+
+      this.stateHistoryStoreChanged();
     },
 
     detached: function() {
-      // window.hass.stateStore.removeChangeListener(this.stateStoreChanged);
+      window.hass.stateHistoryStore.removeChangeListener(this.stateHistoryStoreChanged);
     },
 
-    stateStoreChanged: function() {
-      // this.states = _.filter(window.hass.stateStore.all(), function(state) {
-      //   return state.domain !== 'group';
-      // });
+    stateHistoryStoreChanged: function() {
+      this.stateHistory = window.hass.stateHistoryStore.all();
     },
 
     handleRefreshClick: function() {
-      this.$.timeline.fetchData();
+      window.hass.stateHistoryActions.fetchAll();
     },
   });
 </script>