Skip to content

Commit

Permalink
Add Google Timelines to UI
Browse files Browse the repository at this point in the history
  • Loading branch information
balloob committed Feb 2, 2015
1 parent 3439f4b commit fbae2ef
Show file tree
Hide file tree
Showing 13 changed files with 289 additions and 62 deletions.
2 changes: 1 addition & 1 deletion homeassistant/components/frontend/version.py
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
""" DO NOT MODIFY. Auto-generated by build_frontend script """
VERSION = "212470c7842a8715f81fba76a3bd985f"
VERSION = "954620894f13782f17ae7443f0df4ffc"
24 changes: 13 additions & 11 deletions homeassistant/components/frontend/www_static/frontend.html

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"core-input": "Polymer/core-input#~0.5.4",
"core-icons": "polymer/core-icons#~0.5.4",
"core-image": "polymer/core-image#~0.5.4",
"core-style": "polymer/core-style#~0.5.4",
"paper-toast": "Polymer/paper-toast#~0.5.4",
"paper-dialog": "Polymer/paper-dialog#~0.5.4",
"paper-spinner": "Polymer/paper-spinner#~0.5.4",
Expand All @@ -32,9 +33,9 @@
"paper-menu-button": "polymer/paper-menu-button#~0.5.4",
"paper-dropdown": "polymer/paper-dropdown#~0.5.4",
"paper-item": "polymer/paper-item#~0.5.4",
"moment": "~2.8.4",
"core-style": "polymer/core-style#~0.5.4",
"paper-slider": "polymer/paper-slider#~0.5.4",
"color-picker-element": "~0.0.2"
"moment": "~2.8.4",
"color-picker-element": "~0.0.2",
"google-apis": "GoogleWebComponents/google-apis#~0.4.2"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
stateObjChanged: function() {
this.recentStates = null;

this.api.call_api('GET', 'history/' + this.stateObj.entity_id + '/recent_states', {}, this.newStates.bind(this));
this.api.call_api('GET', 'history/entity/' + this.stateObj.entity_id + '/recent_states', {}, this.newStates.bind(this));
},

newStates: function(states) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="../bower_components/google-apis/google-jsapi.html">

<polymer-element name="state-timeline" attributes="stateObj api">
<template>
<style>
:host {
display: block;
}
</style>

<google-jsapi on-api-load="{{googleApiLoaded}}"></google-jsapi>
<div id="timeline" style='width: 100%; height: auto;'></div>

</template>
<script>
Polymer({
apiLoaded: false,
stateData: null,

googleApiLoaded: function() {
google.load("visualization", "1", {
packages: ["timeline"],
callback: function() {
this.apiLoaded = true;
this.drawChart();
}.bind(this)
});
},

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() {
if (!this.api) {
return;
}

this.stateData = null;

var url = 'history/period';

if (this.stateObj) {
url += '?filter_entity_id=' + this.stateObj.entity_id;
}

this.api.call_api('GET', url, {}, function(stateData) {
this.stateData = stateData;
this.drawChart();
}.bind(this)
);
},

drawChart: function() {
if (!this.apiLoaded || this.stateData === null) {
return;
}

var container = this.$.timeline;
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'Entity' });
dataTable.addColumn({ type: 'string', id: 'State' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });

var stateTimeToDate = function(time) {
if (!time) return new Date();

return ha.util.parseTime(time).toDate();
};

var addRow = function(baseState, state, tillState) {
tillState = tillState || {};

dataTable.addRow([
baseState.entityDisplay, state.state,
stateTimeToDate(state.last_changed),
stateTimeToDate(tillState.last_changed)]);
};

// this.stateData is a list of lists of sorted state objects
this.stateData.forEach(function(stateInfo) {
var baseState = new this.api.State(stateInfo[0], this.api);

var prevRow = null;

stateInfo.forEach(function(state) {
if (prevRow !== null && state.state !== prevRow.state) {
addRow(baseState, prevRow, state);
prevRow = state;
} else if (prevRow === null) {
prevRow = state;
}
});

addRow(baseState, prevRow, null);
}.bind(this));

chart.draw(dataTable, {
height: 55 + this.stateData.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
},

hAxis: {
format: 'H:mm'
},
// colors: ['#CCC', '#03a9f4']
});
},

});
</script>
</polymer-element>
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="ha-action-dialog.html">
<link rel="import" href="../components/state-timeline.html">

<polymer-element name="history-dialog" attributes="api">
<template>
<ha-action-dialog id="dialog" heading="History">
<style>
#timeline {
width: 614px;
height: auto;
display: block;
}
</style>

<state-timeline id='timeline' api="{{api}}"></state-timeline>
</ha-action-dialog>

</template>
<script>
Polymer({
show: function() {
this.$.dialog.toggle();

this.job('repositionDialogAfterRender', function() {

this.$.timeline.fetchData();

this.job('repositionDialogAfterRender', function() {
this.$.dialog.resizeHandler();
}.bind(this), 1000);

}.bind(this));
},
});
</script>
</polymer-element>
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<link rel="import" href="ha-action-dialog.html">
<link rel="import" href="../cards/state-card-content.html">
<link rel="import" href="../components/state-timeline.html">
<link rel="import" href="../more-infos/more-info-content.html">

<polymer-element name="more-info-dialog" attributes="api">
Expand All @@ -17,6 +18,7 @@
<div>
<state-card-content stateObj="{{stateObj}}" api="{{api}}" class='title-card'>
</state-card-content>
<state-timeline stateObj="{{stateObj}}" api="{{api}}"></state-timeline>
<more-info-content stateObj="{{stateObj}}" api="{{api}}"></more-info-content>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="import" href="dialogs/service-call-dialog.html">
<link rel="import" href="dialogs/state-set-dialog.html">
<link rel="import" href="dialogs/more-info-dialog.html">
<link rel="import" href="dialogs/history-dialog.html">

<script>
var ha = {};
Expand Down Expand Up @@ -37,6 +38,7 @@
<service-call-dialog id="serviceDialog" api={{api}}></service-call-dialog>
<state-set-dialog id="stateSetDialog" api={{api}}></state-set-dialog>
<more-info-dialog id="moreInfoDialog" api={{api}}></more-info-dialog>
<history-dialog id="historyDialog" api={{api}}></history-dialog>
</template>
<script>
var domainsWithCard = ['thermostat', 'configurator'];
Expand Down Expand Up @@ -128,6 +130,10 @@
events: [],
stateUpdateTimeout: null,

// available classes
State: State,

// Polymer lifecycle methods
created: function() {
this.api = this;

Expand Down Expand Up @@ -451,6 +457,10 @@
},

// show dialogs
showHistoryDialog: function() {
this.$.historyDialog.show();
},

showmoreInfoDialog: function(entityId) {
this.$.moreInfoDialog.show(this.getState(entityId));
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
Expand Down Expand Up @@ -74,21 +75,34 @@
<div flex>Home Assistant</div>
<paper-icon-button icon="refresh"
on-click="{{handleRefreshClick}}"></paper-icon-button>
<paper-icon-button icon="settings-remote"
on-click="{{handleServiceClick}}"></paper-icon-button>
<paper-icon-button icon="assessment"
on-click="{{handleHistoryClick}}"></paper-icon-button>

<paper-menu-button>
<paper-icon-button icon="more-vert" noink></paper-icon-button>
<paper-dropdown halign="right" duration="200" class="dropdown">
<core-menu class="menu">
<paper-item>
<a on-click={{handleAddStateClick}}>Set State</a>
<a on-click={{handleServiceClick}}>
<!-- <core-icon icon="settings-remote"></core-icon> -->
Call Service
</a>
</paper-item>
<paper-item>
<a on-click={{handleEventClick}}>Trigger Event</a>
<a on-click={{handleAddStateClick}}>
Set State
</a>
</paper-item>
<paper-item>
<a on-click={{handleLogOutClick}}>Log Out</a>
<a on-click={{handleEventClick}}>
Trigger Event
</a>
</paper-item>
<paper-item>
<a on-click={{handleLogOutClick}}>
<!-- <core-icon icon="exit-to-app"></core-icon> -->
Log Out
</a>
</paper-item>
</core-menu>
</paper-dropdown>
Expand Down Expand Up @@ -147,6 +161,10 @@ <h3>Hi there!</h3>
this.api.fetchAll();
},

handleHistoryClick: function() {
this.api.showHistoryDialog();
},

handleEventClick: function() {
this.api.showFireEventDialog();
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<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 api">
<template>
<core-style ref='ha-key-value-table'></core-style>
Expand All @@ -24,23 +22,12 @@
</div>
</div>
</template>

<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>
Expand Down
Loading

0 comments on commit fbae2ef

Please sign in to comment.